information

We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback for improvements through the Design System Jira, and check our AI notice Jira ticket and AI patterns roadmap for the latest updates.

Current version 1 has been reviewed by the SAP design system team and the following activities are in progress: accessibility review of specifications and SAPUI5 and SAP Fiori technical planning.

Intro

Transparency is essential for building trust when incorporating AI into product experiences, and the AI notice is pivotal in achieving transparency. It informs users when content is AI-generated, reminding them to double-check its accuracy before using it.

This article focuses on the AI notice in text generation scenarios.

Example: AI notice - Text input dialog

Example: AI notice - Text input dialog

Usage

Use the AI notice pattern in scenarios where AI generates the content and the user needs to be informed.
information
The current version of the AI notice primarily addresses the generation of unstructured text. For collaboration on additional application scenarios and future enhancements to this pattern, please get in touch with the AI Experience team.
style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint

Do

  • Use the AI notice for text area or rich text editor markup containing AI-generated text.

Don't

  • Don’t use the AI notice when text is created without AI involvement.
  • Don’t hide the AI notice.
  • Don’t overwhelm users with excessive AI notice usage; balance transparency and user experience.
  • Don’t change the text provided.
  • Don’t use AI service names that are different from those recommended.

Anatomy

undefined

The AI notice pattern extends the text area and rich text editor components. These components can carry AI content to enable further AI-specific interactions, such as identifying AI-generated text, providing explanations, or collecting user feedback.

AI Notice Structure

For more information, see the following components that are used in this pattern: Label, Link, Icon Button

  1. AI credit: “Created with AI”
  2. Service reference link (optional): Link to provide access to further background information.
  3. Verification prompt: “Verify results before use.” Shows if horizontal space is sufficient. See Responsiveness.
  4. Toolbar (optional): Additional options related to the AI content (such as giving user feedback).

For more information, see the following components that are used in this pattern: Label, Link, Icon Button

Example: AI notice structure

Example: AI notice structure

Types

The current iteration of the AI notice focuses on AI-assisted text editing within the text area and rich text area components. As we refine this guideline, we anticipate including additional application scenarios in the future.

Text Editing with AI Assistance

The AI notice “Created with AI” highlights that some or all of the content is AI-generated. The AI content can be triggered through a conversational experience or by a local action embedded in the main screen.

AI Notice Placement

The usage of AI is indicated by the presence of AI notice pattern underneath the text input area.
Image shows a schematic Rich Text Editor dialog containing ai generate content The usage of AI is indicated by the presence of AI notice pattern underneath the text input area.

At SAP, intelligent solutions are enabled through various machine learning methods. The AI notice doesn’t expose information about the technology or API service used. To provide this information, use the explainable AI concept and apply progressive disclosure.

Text Variants

If a third-party AI service is embedded, qualify the AI source by adding a prefix.

<div> <div>Scope</div> <div>Text Definition (AI Notice)</div> </div> <div> <div> <h5 id="hosted-by-sap">Hosted by SAP</h5> </div> <div></div> </div> <div> <div>Joule Digital Assistant</div> <div>Created with AI</div> </div> <div> <div>Embedded AI Features</div> <div>Created with AI</div> </div> <div> <div> <h5 id="third-party-ai-services">Third-Party AI Services</h5> </div> <div></div> </div> <div> <div>Embedded AI Features</div> <div>Created with <…> AI</div> </div>

Behavior and Interaction

Interaction

The only interaction you can offer to users is an embedded link representing the AI service in use. Clicking this link provides progressive disclosure of relevant information and resources (for example, on SAP Help Portal).

Responsiveness

The length of the text can vary as per your device size. See the recommended variants per screen size below:

<div> <div> <h4 id="viewportscreen-size">Viewport/Screen Size</h4> </div> <div> <h4 id="definition-ai-notice">Definition (AI Notice)</h4> </div> </div> <div> <div> <h5 id="mobile">Mobile</h5> </div> <div></div> </div> <div> <div>Size S</div> <div>Created with AI</div> </div> <div> <div>Size M</div> <div>Created with AI. Verify results.</div> </div> <div> <div> <h5 id="desktop">Desktop</h5> </div> <div></div> </div> <div> <div>Size L</div> <div>Created with AI. Verify results before use.</div> </div> <div> <div>Size XL</div> <div>Created with AI. Verify results before use.</div> </div>
style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint