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: linear progress indicator (left) and loading indicator (right)
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)
Loading 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 AI progress indicator: loading 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 AI progress indicators on a full screen (from left to right): linear progress indicator, loading indicator, and same-page indicator
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 AI progress indicator on partial screens
Animation
AI Icon
The AI progress indicator icon features a looping animation that progressively scales up each of its individual star icons.
- Starting point with regular AI icon.
- Midway point with base star scaled down 45% and upper star scaled up 200%.
- End point with base star scaled up 118% and upper star scaled down 65%.
Scaling up individual star icons
Time and Duration
AI progress indicators should be displayed one second after the content generation process is triggered and remain visible for at least 1000ms to avoid flickering.
Recommended duration for animation:
Start to midway point: 800ms
Midway to end point: 800ms
End back to starting point: 300ms
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 iOS: AI Progress Indicators
Related Components/Patterns: AI Buttons, AI UI Text, Linear Progress Indicator, Circular Progress Indicator