Wait UX
Wait UX refers to the design of user experiences during moments of delay—when a system is processing, loading, or retrieving data. These moments, if not handled well, can lead to frustration, abandonment, or loss of trust. A well-designed wait experience communicates clearly, maintains user context, and minimizes perceived delay. This framework applies to both AI-first experiences (like Copilot) and traditional productivity scenarios across Microsoft 365.
Principles
Communicate clearly and honestly
Users should always know what’s happening and why. Descriptive labels like “Uploading photo …” or “Loading dashboard …” help reduce uncertainty and build trust. Use accurate and descriptive messages as much as possible. When possible, use determinate indicators to show actual progress. If progress cannot be measured, use indeterminate indicators only for short waits.
A descriptive label that clearly communicates what’s happening
This indicator doesn’t let people know what’s happening or for how long
Optimize perceived performance
Visual feedback can reduce the perceived duration of a delay. Micro-interactions, shimmer effects, and skeleton screens shift attention away from wait time and reassure users that the system is working. Blank screens or static loaders should be avoided. For short waits under one second, don’t show any animation—doing so may confuse users.
Skeleton screen with shimmer for content loading
Blank screen with no feedback
Maintain context and limit simultaneous feedback
Users should remain in the same view during wait states unless navigation is absolutely necessary. Feedback should be tied to the most relevant content or action, and multiple indicators should not compete for attention. This helps users stay focused and reduces cognitive load.
One progress toast tied to the user’s action
Multiple spinners scattered across the screen
Visual patterns
Spinner
Spinners are best used for short, indeterminate waits—typically under three seconds. They should be accompanied by a short label using an -ing verb and ending with an ellipsis to indicate ongoing activity. Examples include “Loading …”, “Connecting …”, or “Retrieving …”. Use a nonbreaking space before the ellipsis to ensure proper formatting.
A spinner labeled “Searching …” with a nonbreaking space before the ellipsis.
Progress bar
Progress bars are ideal for longer waits where progress can be tracked. They should include a label above the bar indicating the task in progress, and optionally a status message below to set expectations. For example, “Applying settings …” might be followed by “Estimated time: 1 minute”. If there are consequences for not waiting, include recovery instructions.
Top label: “Uploading file …” | Bottom status: “30% complete – about 20 seconds remaining”
Skeleton
Skeleton screens are useful for content rendering delays. In AI-first experiences like Copilot, use the Copilot gradient shimmer to reinforce the theme and reassure users that content is loading.
Skeleton cards with shimmer effect and Copilot theme applied
Toast
Progress toasts are appropriate for long back-end processes that affect current content. They allow users to monitor progress without making them stay in view and obstructing other work. They should include clear labels and status updates.
Label: “Generating report …” | Status: “Estimated time: 1 minute”
Morse code
The morse code animation is used specifically in AI-forward, Copilot scenarios. It mimics the typing dots animation in human to human chat experiences while balancing the implication of machining in keeping with our responsible AI principle of not anthropomorphizing AI.
Pulsing dot
The pulsing dot animation is used in Chain of Thought as a lighter-weight wait animation.
Behavior
Timing thresholds
It’s important to consider time intervals when displaying wait indicators. If the wait is less than one second, don’t show an indicator as the flash on the screen may be confusing to users. For waits between one and three seconds, a spinner is appropriate. If the wait exceeds three seconds, switch to a progress bar or display a content string to reassure users that the process is active. In AI chat scenarios, response indicators should appear immediately to maintain conversational flow.
Fallback messaging
When progress details are unavailable, fallback messages should still offer reassurance. Use generic but informative strings like “Working on it …” or “Getting things ready …” to indicate that the system is active. These messages are especially useful in conversational AI experiences where timing is unpredictable.
Hardcoded vs. generated strings
In productivity apps like Outlook, hardcoded strings ensure consistency and clarity. In AI chat experiences, dynamically generated strings allow for more personalized and context-aware feedback. Both approaches should follow the same content principles to maintain coherence across the ecosystem.
Accessibility
Ensure that wait indicators are accessible to all users. Use ARIA labels to announce state changes, such as role="status", and format ellipses correctly using a nonbreaking space. This ensures screen readers can accurately convey the current state.
Content patterns
Labeling
Use -ing verbs for in-progress states and past tense for completed states. For example, “Uploading file …” communicates that the process is active, while “File uploaded” confirms completion. Avoid passive constructions like “File is being uploaded,” which can feel impersonal and unclear.
Use short -ing verbs for in-progress states
Avoid passive constructions
Conciseness
Messages should be short and direct—ideally one phrase or sentence fragment. This helps users quickly understand what’s happening without being overwhelmed by unnecessary detail.
Keep wait messages short
Avoid unnecessary detail
Setting expectations
In non-AI scenarios, include estimated times when possible to help users plan their next steps. For example, “About 30 seconds remaining” sets a clear expectation. In conversational AI scenarios, it may be more important to indicate that the process is still active rather than estimating time.
