Overview

The busy indicator informs the user about an ongoing generation, such as creating an answer, gathering data or providing any other kind of content. It indicates the users that they have to wait for it to complete

When to use

Text Stream

Text streaming allows the initial portion of content to load quickly. Users can start consuming content immediately, even before the entire page or document has finished loading. This reduces the perceived loading time and improves the overall user experience.

However this kind of loading indication only works for text and not images, charts etc.

Text Streaming

Text Stream - Animation

The speed of the actual streaming is controlled by the used LLM
2
do
false

Recommended

  • Use this state for answers which only contain text
  • Load the text word after word
  • Set a minimum of three words for text streaming, if less display the answer instantly
dont
false

Not Recommended

  • Combine text streaming and another kind of busy state in one bubble
  • Define a fixed duration for the words to display

Busy Indicator w/o Progress Text

If text streaming is not available or content other than text is generated by the AI you can also make use of the already existing Busy Indicator inside of a Chat Bubble.

The use of a busy indicator can make the perceived wait time feel longer for users because it doesn't provide any distraction or engagement while content is loading. Because of that we highly recommend using text streaming if applicable.

Image
This variant should be used for simple and rather fast operations. If possible and the generation takes a few seconds provide the user with a progress text.
2
do
false

Recommended

  • For fast & simple operations which take only a few seconds
  • For generating content which doesn't contain only text
dont
false

Not Recommended

  • Displaying an indicator if the generation takes less then one second
2
Responses - Busy - Truncation.png
do
false
Try to be short and precise with the progress text and provide text truncation if needed.
Responses - Busy - MultiLine.png
dont
false
A long multi-line progress text should be avoided.

Busy Indicator with Actions

This variant can be used for complex operations which take some to time to be finished. In contrast to the busy indicator with progress text, the user has also the option to cancel the operation and receives either the elapsed time or the time needed to complete it. After a while, offer the option to cancel the generation.

2
do
false

Recommended

  • For long and complex operations that take a know or unknown amount of time
  • The elapsed time should be used when the system has no information about how long the process will take.
  • Use time to complete if the system it aware of the time it will take to complete.
dont
false

Not Recommended

  • If the operation takes less than 20 seconds
  • For uploading or downloading a file (see AI File Upload)

Anatomy

Image
1
26.64; 19.12
Busy Indicator to show the AI is currently processing the data and generating the content.
2
29.06; 61.16
Progress Text (Recommended)
The text should be related to the request and show what is happening in the background.
3
34.04; 46.02
Byline
Used to show the user the time to complete or the elapsed time.
4
39.87; 30.68
Quick Reply
Possibility for the user to cancel the operation if needed. See also AI Quick Reply.
5
5.30; 91.24

References