AI Insights
Intro
AI Insights provide a standardized way to display a summary, analysis, or suggestion generated with AI.
AI Insights full-screen (left) and card variant (right)
Usage
Do
- Use the full-screen variant only when all the content on the screen is generated with AI.
- Use multiple cards when there is more than one category of insights that need to be displayed.
Don't
- Don’t show user-generated content in the full-screen variant.
- Don’t display multiple AI user feedback patterns on one screen.
Anatomy
Full-Screen AI Insights
A. Header
The header shows an overview of AI insights.
B. AI Notice (Optional)
An AI notice, positioned in the header, indicates content generated by AI. It is optional but highly recommended to include.
C. AI Insights Content
AI insights content can be categorized into sections with optional swappable component slots.
D. AI User Feedback (Optional)
AI in-line user feedback asks users for feedback related to their AI experience.
E. Footer (Optional)
The footer can include an AI button to regenerate the content or to perform user actions on the generated screen.
Anatomy of AI insights full-screen variant
Card AI Insights
A. Card
A card is the container used to display an overview of the insights.
B. AI Tag (Optional)
AI tags with labels, positioned in the header, indicate content generated by AI. They are optional but highly recommended to include.
C. AI Insights Content
AI insights content can be categorized into optional sections with swappable component slots.
D. AI User Feedback (Optional)
AI in-line user feedback asks users for feedback related to their AI experience.
E. Footer (Optional)
The footer can include an AI button to regenerate the content or to perform user actions on the generated screen.
Anatomy of AI insights full-screen variant
States
Generated State
Following a previous user action, the generated state shows AI-generated content using the recommended layouts.
Loading State
The loading state can be applied to both initial loading and reloading processes. We recommend using skeleton loading as content placeholders and loading state buttons during the process.
Error State
In an error state, it is best to communicate the issue with an illustrated message and ensure the user can choose to exit or retry.
AI Insights default (left), loading (middle) and error (right) states
Variations
Full-Screen AI Insights
A full-screen variant is used when all the content on a screen is generated with AI. The slots are optional and can be swapped with any content. The AI tag is not required but highly recommended as a secondary visual indicator to inform the user about the AI involvement.
Full-screen AI Insights pattern
Card AI Insights
A card variant is used when part of the content on a screen is generated with AI. Refer to Card Body for details regarding swappable slots.
If there is too much content or multiple categories, it is recommended to split the generated content into several AI insights cards.
Card AI Insights pattern
Adaptive Design
The regular size classes of a full-screen variant follow the adaptive design guidelines of the nested components, such as navigation bar, object header, preview table view, and toolbar.
Since the card variant has flexible height and width, there is no requirement of how it behaves in the regular size classes.
AI Insights on a compact screen (left) and a regular screen (right)
Resources
SAP Fiori for Android: AI Insights
Related Components/Patterns: AI User Feedback, Cards, Navigation Bar, Object Header, Preview Table View, Toolbar