...
Progress indicators express an unspecified wait time or display the current completed ratio of a process or action.
<< image needed >>
Types
Linear & Circular
LUX offers two visually distinct variations of progress indicators: linear and circular progress indicators. Only one type should represent each kind of activity in an app. For example, if a refresh action displays a circular indicator on one screen, that same action shouldn’t use a linear indicator elsewhere in the appapplication.
Type | Usage | Image |
|---|---|---|
Linear progress indicators display process by visualizing an indicator increasing in width from 0 to 100% of a track. This is animated in sync with the process’s progress. The behaviour of the indicator is dependent on whether the progress of a process is known. They can be applied to the entire page, large containers and to form elements. |
| |
Circular progress indicators display progress by animating an indicator along a circular track in a clockwise direction. The behaviour of the indicator is dependent on whether the progress of a process is known. They can be applied directly to a surface, such as a button or card. |
|
...
General guidelines
Structure
Linear progress Progress indicators are composed of two required elements:
...
Generally, progress indicators should be hidden by default and only appear on screen when they are active. Exceptions to this guideline are detailed within specific types of indicator.
States
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
Interaction
Progress indicators do not support user interaction, they are solely used to provide a visual status indicator.
...
Don’t stop a progress indicator - A progress indicator makes users develop an expectation for how fast the action is being processed. As a result, any unexpected freezes will be noticed and will impact user satisfaction. The worst possible case is when a progress indicator approaches 99% and suddenly stops. Most users will be frustrated by this behaviour because it makes them think the app is frozen. You can disguise small delays in your progress indicator by moving it instantly and steadily.
Explain why the user is waiting - If users are informed, they may be more patient. It can be helpful to add additional clarity by including text that tells the user what is happening or explains why the user is waiting.
Provide a general time estimate for time-consuming tasks - Don’t try to be exact, a simple, “this might take five minutes” can be enough for the users and encourage them to wait it out.
Make sure that long operations offer the ability to cancel during the process.
Accessibility compliance
<< Add new link >>
A progress indicator indicates that the user's request is received and is in the process of executing the task. Content authors should provide values of aria-valuemin, aria-valuemax and aria-valuenow where the aria-valuemax is known. Further guidelines for optimum compliance can be found at ARIA progressbar role.
...