From Forum Nokia Wiki

This design pattern is part of the Mobile Design Patterns series.

Contents 1 Description 2 Advantages 3 Disadvantages 4 Use when 4.1 Progress indicator 4.2 Wait indicator 5 Use how 5.1 Progress indicator 5.2 Wait indicator 6 Design Tips

Description

Indicators used to represent an active process. A progress indicator indicates the progression of a task, while a wait indicator simply indicates that a process (of undetermined length) is still ongoing.

Figure: Some typical wait and loading indicators.

Advantages

• Even if the task is fairly short, providing such an indicator can be helpful to reassure the user that something is happening. On mobile devices, the fact that network connectivity may fluctuate makes this even more important, as what may initially appear to be a short task may suddenly last longer if connectivity fluctuates.
• These indicators also provide excellent cues that other processes may degrade while the current process is ongoing.

Disadvantages

• On a small screen, it can be tricky to find adequate space for these indicators. They are however too important to omit.

Use when

Progress indicator

• A process is expected to be time consuming (i.e. last more than 2-4 seconds).
• The system can calculate (with a reasonable degree of accuracy) how far the task has progressed.
• It is best practice to display progress indicators in conjunction with a Cancel command. This enables the user to manually abort the task if needed.

Wait indicator

• A process is expected to be time consuming (i.e. last more than 2-4 seconds) however its duration and progress cannot be calculated.
• It is best practice to display wait indicators in conjunction with a Cancel command. This enables the user to manually abort the task if needed.
• The most common use of this indicator on mobile is to indicate the loading of as-yet undetermined amounts of data from the network i.e. downloading emails, web feeds etc.

Use how

Progress indicator

• Clearly indicate what process is underway ex. ‘Downloading nokia.sis’
• Use animation to show the actual progress.
• Provide additional visual cues where possible, for example:
  • Number of kilobytes uploaded or downloaded.
  • Number of files uploaded or downloaded if there are multiples.
  • Percentage of the task expended or (if known), the amount of time or data remaining.
• Provide the user with an easily discoverable means to cancel the operation.

Wait indicator

• Clearly indicate what process is underway ex. ‘Installing nokia.sis’
• Use a simple, looping animation to clarify that the process is ongoing. While this does not provide actual progress, it increases confidence that things are behaving as planned.
• Provide the user with an easily discoverable means to cancel the operation. This is particularly important in the case of wait animations, as the user has no idea how long the process will take. If the action times out, the system should (ideally) provide some indication of this however if a crash occurs, the animation may sadly keep looping indefinitely until the user cancels the action manually. Note: The later is not an ideal scenario but is nonetheless a very common one.
• Even if there is not enough data available to display a formal progress indicator, it can still be quite useful to display related information. Ex. Displaying the number of kilobytes downloaded even if the full amount is not known still provides the user with an idea of the potential data costs and an opportunity to abort if necessary.

Note: Both indicators can be presented inline or within a modal dialogue. If the task is particularly long and/or is not expected to monopolize other processes, it can be useful to allow the user to hide the dialogue while they continue to use the application. In this case, an easily discoverable mechanism should be provided to show the indicator once again.

Design Tips

• Where possible, position the indicator close to the process it is clarifying.
• Wait and progress indicators are often displayed in a modal view which has full focus during the operation. This is often simply due to the type of action that is being indicated ex. A download or an installation. Consider what actions will be monitored with the indicators you provide and whether they would benefit from retaining focus while the task is completed.
• Display the Cancel command close to the progress or wait indicator and ensure that the manipulation model is clear i.e. must the user navigate to the command? Will doing so remove focus from the wait or progress animation? Will a loss of focus matter?
• Wait indicators can be quite creative, as they simply need to imply an ongoing process. Progress indicators are somewhat more constrained by the need to clearly visualize progress however they can still take on a variety of interesting shapes and metaphors.

Figure: The Nokia VINE progress bar is simple yet informative and engaging.