AI Progress Indicators
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 Jira or schedule a design consultation.
Status:
- Guidelines reviewed by the Fiori Mobile team
- Component enhancements are in progress
Intro
AI progress indicators provide information about the status of a user’s request while they wait for the content to be generated. These patterns are designed to keep users engaged and informed, manage their expectations, and show that the system is actively processing their request.
AI progress indicators (from left to right): linear progress Indicator, activity indicator, checkout indicator, buttons loading state
Usage
When to Use
Recommended usage of AI progress indicators
Do
- Use an AI progress indicator in situations where the time for the AI to complete the generation process is not specified.
- Show users the system is actively working.
- Inform users about the status of their request.
- Provide real-time updates on the progress of the AI task.
- Apply in processing state.
Don't
- Don’t use AI progress indicators for operations that take less than a second.
- Don’t use it to give an estimate of how long the process will take.
- Don’t apply it in non-AI scenarios.
- Don’t use it in success or error states.
- Avoid mentioning “AI” in labels when the AI icon is used in the indicators.
Anatomy
Linear Progress Indicator
A. Indicator
The indicator is an animated bar that visually reinforces that the system is actively processing tasks.
B. Track
The track is a static bar behind the indicator that indicates the overall process.
C. AI Icon
The AI icon with looped animation lets users know that AI processes are actively running.
D. Label
The complementary label text informs users that AI processes are actively running.
Anatomy of AI progress indicators: determinate linear progress indicator (left) and indeterminate linear progress indicator (right)
Activity Indicator
A. AI Icon
The AI icon with looped animation lets users know that AI processes are actively running.
B. Label (Optional)
The complementary label text informs users that AI processes are actively running.
Anatomy of activity indicator horizontal (left) and vertical (right)
Checkout Indicator
A. AI Icon
The AI icon with looped animation lets users know that AI processes are actively running.
B. Label (Optional)
The complementary label text informs users that AI processes are actively running.
Anatomy of checkout indicator
Buttons (Loading State)
A. AI Icon
The AI icon with looped animation lets users know that AI processes are actively running.
B. Label (Optional)
The button label informs users that AI processes are actively running.
Anatomy of checkout indicator
Behavior and Interaction
When a user initiates content generation, the AI progress indicator is displayed within the progress indicator component, changing its state to “processing” or “loading”. This state persists until the generation is either completed or stopped by the user. The animation of the AI icon continues looping until the process is finished.
Placement
Full Screen
AI progress indicators can be used in a full-screen use case if the user action is the only and primary action in the user flow, and no additional action is allowed during the progress.
Placement of checkout indicator on a full screen
Partial Screen
AI progress indicators can be used in a partial-screen use case if the loading state only applies to a part of the screen, and other user actions are allowed during the progress.
Placement of activity indicator on a partial screen
In-Place
AI progress indicators can be used in-place to replace the original component if the loading state only applies to a button or any other small interactive component, and other user actions are allowed during the progress.
Placement of buttons in loading state
Animation
AI Icon
The AI progress indicator icon features an iOS native breathe animation that is repeated in a loop.
Breathe animation effect
Time and Duration
The AI progress indicator should be displayed one second after the generation process is triggered and remain visible for at least 1000ms to avoid flickering. There should be pulses between each loop of the animation.
Interaction
Stopping AI Generation Process
It is recommended to provide an option that allows users to stop the AI generation process. For button interaction details, refer to AI buttons.
Stopping AI generation process
Resources
SAP Fiori for Android: AI Progress Indicators
Related Components/Patterns: AI Buttons, AI UI Text, Linear Progress Indicator, Feedback Indicators
Apple Human Interface Guidelines: SF Symbols