Generative AI output label

A short label to indicate that an output is produced by generative AI.

Published: April 8, 2024
Get design library

On this page

Key UX concepts

Earn user trust

Generative AI is a new technology that is being integrated into everyday workflows. As we continue to build more experiences powered by generative AI, it is important to be transparent in what portions of an output are produced by generative AI compared to others. This is especially important in use cases where users could encounter outputs from multiple entities, both generative AI and non-AI. Highlighting these outputs in the UI will help earn trust with our users.

Contextual to the output

These labels highlight via iconography and text that an output is produced by generative AI. Its important to place the label in close proximity to the output to help users retain that context.

Development guidelines

Refer to code example below to build the generative AI output label using the box and icon components.

Preview

Generated by AI

Code

The following code uses React and JSX syntax.

General guidelines

Do

  • Use this label only for outputs produced by generative AI
    This pattern is intended to be used as a standard to highlight outputs only from generative AI to build user trust over time.

Don't

  • Sparkle icon should not be used in any other labels other than generative AI output
    The output label with sparkle icon is reserved for use for outputs produced by generative AI only. Don't use this label for outputs produced by other forms of AI that are not generative.
  • Avoid redundancy
    Place this label in context to the generative AI output, however, avoid redundant use. For example, if there is a list of outputs and all are produced by generative AI, place the label close to the header of the group instead of labeling each item. This will help ensure that while users are informed of the nature of the output, they are not overwhelmed by it.

Writing guidelines

General writing guidelines

  • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

  • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

  • Use present-tense verbs and active voice.

  • Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.

  • Avoid directional language.

    • For example: use previous not above, use following not below.

  • Use device-independent language.

    • For example: use choose or select not click.

Component-specific guidelines

Terminology

  • Introducing the AI: generative AI assistant is the approved term for introducing and referring to the AI, and generative AI to refer to the experience.

  • User queries: use submit as the label or reference term when a user is making a choice, query, or request.

  • AI replies: refer to AI replies as responses, not answers.

Output label text

  • Use this text: Generated by AI

  • Keep the text concise.