Intro
AI progress indicator provides information about the status of a user’s request while they wait for the content to be generated. The main goal of this pattern is to keep the user engaged and informed, manage their expectations, and show that the system is actively working.
This article discusses the usage of AI progress indicator in text-generation scenarios.
Usage
The AI progress indicator is highly recommended in situations where the time it takes for AI to complete the generation process is not specified.
Do
- Show users the system is actively working.
- Inform users of the status of their request.
- Provide real-time updates on the progress of the AI task.
Don't
- Don’t use it for operations that take less than one second.
- Don’t use it when providing an estimate of how long the process will.
- Don’t apply in non-AI scenarios.
Anatomy
The AI progress indicator pattern extends the following components to enable new AI-specific interactions:
Example of AI progress indicator in a text generation context
1. Icon: AI icon with looped animation conveys to users that AI processes are actively underway.
2. Text message: Text string keeps users updated on the status of their request. We advise the usage of the standard UI text “Analyzing request…”.
3. Animated gradient bar: An animated gradient bar visually reinforces that the system is actively processing tasks.
4. Stop Generating button: Provides user the option to stop the generation at any given time. For more information see AI Button and Quick Prompts.
Example of text loading in a text area
5. Text loading: The text that is being generated by AI appears inside the text area word by word.
Behavior and Interaction
Once the user triggers the content generation, the AI progress indicator appears inside the text area or rich text editor component. Its state changes to an information value state that persists until the generation is completed or stopped by the user. The animation of the AI icon and the gradient bar persists in a loop until the generated content begins to display.
Once the generation starts, the icon and text string disappear and are replaced by the AI-generated text that appears word by word in the text area.
Placement
For seamless integration, the AI progress indicator should be positioned within the text area. The animated AI icon and accompanying text message should be prominently displayed at the top left corner and the animated gradient bar at the bottom, extending across the entire width of the text area.
1. AI icon and text message
2. Animated gradient bar
Placement of AI progress indicator in a text generation context
Animation
AI Icon
The AI progress indicator icon features a looping animation that progressively scales up each of its individual star icons.
Scaling up individual star icons
1. Starting point with regular AI icon
2. Midway point with base star scaled down 45% and upper star scaled up 200%
3. End with base star scaled up 118% and upper star scaled down 65%
Animated Gradient Bar
The gradient bar is animated in a linear movement from left to right, filling the bar width with the gradient colors from the darkest shade of blue to the lightest.
Phases of gradient bar animation Text loading
Shows the text that is being generated by AI and displays each word one at a time in the text area.
Example of text loading on a text area
Timing and Duration
Display the AI progress indicator on the screen one second after the generation process is triggered and ensure it remains visible for at least 500ms to avoid flickering.
Responsible AI
Users should understand what the AI is doing and why it’s taking time to output. To ensure clear and transparent communication about the AI processes being performed, the AI Experience team will be improving the AI progress indicator pattern.
If you’d like to collaborate on future enhancements, contact us.