Intro

The local AI notice pattern ensures users are informed when content is AI-generated, prompting them to verify its accuracy prior to use.

Schematic wireframe of a object page floor plan showing the local AI notice label embedded below the sub-section header providing AI notice for AI results in the subsequent content area below the notice without additional color highlights.

Local AI notice label embedded below the subsection title

information
This guideline is mandatory for all user interfaces that involve AI-generated or AI-edited information. For more information on application scenarios, AI notice lifecycle, and AI impact assessment process, see the AI notice base concept.

When to Use

The local AI notice pattern is mandatory to mark AI-generated content in high and very high impact decision scenarios where users interact with AI-generated or AI-edited information.

Do

Use the local AI notice pattern:

  • To explicitly mark content areas which contain information generated by AI.

Don't

Don’t use the local AI notice pattern:

  • For uses other than disclosing the standard AI notice label as defined in this guideline.
  • To mark non-AI-related content.

Components

This pattern is based on the following foundational elements that are used to disclose AI-generated content to users:

Foundational AI patterns

Components

Guidelines

The AI notice label is always used in combination with other experience patterns. Read the AI notice base concept to learn how embedded AI notice labels interact with other aspects of the experience.

Variants

Interactive AI notice label

This variant is recommended for all applications with high and very high impact decision scenarios. It enables progressive disclosure of further information through a popover. For further information, see links.

Subtle link color
Use the subtle state of the link component to further reduce the visual impact as compared to other interactive elements in the environment.

Schematic wireframe of a sub-section header showing the interactive local AI notice label embedded as a link below the sub-section header providing AI notice for AI results in the subsequent content area below the notice.

Interactive AI notice label embedded below the subsection title

Read-only AI notice label

This variant should be used to meet basic labeling requirements and if no further details on the validation of AI results can be provided. For further information, see labels.

Schematic wireframe of a sub-section header showing the read only local AI notice label embedded as a label below the sub-section header providing AI notice for AI results in the subsequent content area below the notice.

Read-only AI notice label embedded below the subsection title

Placement

The placement of the AI notice label is crucial to support correct association of the AI notice label with the related AI results.

Limit the number of AI notice label instances to one per screen to avoid redundancy. If you find it difficult to identify the correct placement of the AI notice label, consider the following rule of thumb:

Place the label next to the lowest possible hierarchical title element that contains all present AI results.

Examples

  1. You have AI results distributed across multiple rows and columns in a table → AI notice is placed next to the table title.
  2. You have AI results distributed across multiple sub-sections on your object page → AI notice is placed on the next higher section title.
  3. AI has created content for multiple sections in your object page or generated the entire object itself → AI notice is placed next to the object title .

Schematic wireframe of an object page floor plan showing the local AI notice label placed on three different hierarchy levels; (left) on subsection, (middle) section, and (right) page level.

Placement of embedded AI notice label; on subsection, section, and page level

On top of content area

(High–Very high impact scenarios)

Place the embedded AI notice label between the section header and the content area where the AI result is displayed.

At the end of content area

(Low–Medium impact scenarios)

Place the embedded AI notice label in the footer of the AI results area. No additional AI content should appear below it, and it must remain within the boundaries of the associated section.

Schematic wireframe of a object page floor plan showing the read only AI notice label embedded below the section header providing AI notice for highlighted AI results in the subsequent content area below the notice.

AI notice label embedded on top of the subsection title

Schematic wireframe of a object page floor plan showing the read only AI notice label embedded in the footer of the section content area providing AI notice for highlighted AI results above the notice in the content area.

AI notice label embedded below the content area

Behavior and Interaction

The local AI notice pattern uses progressive disclosure to indicate that the content was generated with AI and to advise users to review and fact-check results before use. For that purpose, the AI notice can include a link to open a long text description providing more details than the short text.

Progressive disclosure

Interactive AI notice indicators allow progressive disclosure at 3 levels; (1) Indicator: Notice short text, (2) Popup: Notice long text, (3) External Page: Details link to the “Joule Data Protection and Privacy” page.

Level 1: AI notice short text

Definition

  1. Pre-defined AI notice text to mark AI content areas.
  2. Can link to a long text through popup if provided.

Visual reference of the standard AI notice label text as an interactive link: “Created with AI. Verify before use”.

Interactive AI notice label

Level 2: AI notice long text

Definition

  1. Provides a more contextualized explanation of what the notice means in the current context.
  2. Can be adjusted to fit the context it is used in.
  3. Can provide an optional link to Joule data protection and privacy policy.

Visual reference of the standard AI notice label as an interactive link showing on on hover the empty AI notice popover with the popover title “Created with AI”.

Interactive AI notice label with popover opened

Level 3: AI notice detail page/help portal

Definition

  1. Can contain a link to a dedicated page.

Visual reference of the standard AI notice label and the open AI notice popover showing a placeholder text and the optional link to provide access to further educational documentation about the treatment of AI results, user responsibilities, and how to validate AI results.

AI notice popover with text and link

information
Define the wording and requirements for the AI notice long text together with your local AI user experience and user assistance experts in your product area.

Responsive Behavior

The AI notice label must never be truncated since the notice must always be fully readable. Wrapping should be avoided to keep the notice in one line. To accommodate for limited space, you should use breakpoints to show longer or shorter variants of the AI notice text.

How these principles are applied in practice is defined within the related pattern and/or component guidelines. For more information, see related links.

Standard AI notice label

Default for all AI application scenarios.

Visual reference of the standard AI notice label text as an interactive link: “Created with AI. Verify before use”.

Standard interactive AI notice label

Short AI notice label

Exceptional use for placement in limited space.

Visual reference of the shortened AI notice label text as an interactive link: “Created with AI.”

Short interactive AI notice label

Elements and Controls

Implementation

  • Label (UI5 web component documentation)
  • Link (UI5 web component documentation)
  • Smart Link (SAPUI5 samples)
  • Popover (SAPUI5 samples)