Progress feedback
Tagged as: processing page, progress bar, progress feedback, progress indicator, progress page
The Design Need:
The user needs to know that a process is going on and that progress is being made.
Design Solution:
First of all you should try to limit the amount of waiting time, since no one likes to wait. When you have to provide progress feedback the design best practices you should take into account are:
- Designing user interfaces that combine actions that cause the user to wait into one action making the user only wait once, rather than multiple times, e.g. multiple select upload from images
- When you combine actions into one, communicate progress on each item separately
- Make sure that the user notices the feedback and that the user does not repeat the action unnecessarily
- Be honest in the feedback you provide. Try to calculate the necessary amount of time as precisely as possible
- Allow users to cancel the action if they wish. Provide a cancel button near the progress indicator to improve the user interface
- In processes that take longer than 10 seconds it is best to inform the user what is happening at that moment.
When to use:
Whenever an action takes longer than 1 second the GUI (Graphical User Interface) should provide some kind of feedback to the user.
- 1 to 10 seconds: a visual indication that the system is busy, e.g. an hourglass.
- More than 10 seconds: a progress indicator that shows the progress towards completion, e.g. a progress bar.
Why use this solution (rationale):
Users do not like to wait while surfing the internet. If a process takes longer than 1 second they start noticing a delay in the reaction. In this event, a good web user interface should give some kind of feedback that the system is working and that the action they carried out was correct but will simply take time to complete.
More info elsewhere:
- “Response times: the three important limits” on ww.useit.com
- “Making wait times feel shorter” on www.usabilitypost.com
- Progress indicator design pattern on www.uipatternfactory.com
- Progress indicator design pattern on www.designinginterfaces.com
- Progress indicator design pattern on http:// quince.infragistics.com
• Categorized as Design Patterns




