AI Progress Indicators

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

Do

Use AI progress indicators in situations where the time for the AI to complete the generation process is not specified.

Don't

  • Don’t use AI progress indicators for operations that take less than a second.
  • Don’t use AI progress indicators in non-AI scenarios.

Recommended usage of AI progress indicators

  • 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 AI progress indicators in processing state.
  • 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 buttons in loading state: primary button with label (left) and tertiary button with icon (right)

All the colors and sizes of the AI icon follow the specification for the in-place loading state in regular buttons.

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.

Stopping AI generation process

Resources

SAP Fiori for Android: AI Progress Indicators

Human Interface Guidelines: SF Symbols

Related Components/Patterns: AI Buttons, Linear Progress Indicator, [internal_only]

AI UI Text[/internal_only]