Lead: << Your name/s >> << Select the status - Status colour Yellow title ongoing Status colour Grey title Waiting Status colour Blue title Done Status colour Green title published
>>Status colour Red title on hold
Related Pages: << Links to related pages, if relevant >>
| Table of Contents |
|---|
Description
...
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
Best practices
...
Don’t stop a progress bar - A progress bar 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 progress bar approaches 99% and suddenly stops. Most users will be frustrated by this behavior because it makes them think the app is frozen. Hopefully, there is a simple solution — you can disguise small delays in your progress bar by moving it instantly and steadily.
Explain why the user is waiting - Many times, 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.
Accessibility compliance
A progress bar 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 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA /ARIA_Techniques/Using_the_ progressbar _ role.
Focus management
Progress bars a purely visual indicator that contains no user interaction and therefore cannot be focused on.
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>Following the recommendations provided above for ARIA support will also provide the necessary tools for screen reader support. Users are notified about the existence of a progressbar on the page when they encounter the ARIA progressbar role. Make sure the corresponding content areas also supports screen readers for content and behaviour - see Screen Reader Guidelines
Design
| Zeplin link | Screen thumbnail |
|---|---|
|
...