WHAT
System is loading or processing, but users don’t know that they must wait for the process to finish or the response to fully return.
WHY
Nobody likes to wait and luckily systems are getting faster all the time but factors like processing time for computing complex analytics and handling of big data, bandwidth, and latency are part of distributed systems. Visibility of system status is an important principle in user interface design so showing percent done bars and spinners reassures users that something is happening and make the waiting time more tolerable. It also tells users that the system has received and understood their request and it is well worth waiting a bit.
WHEN
Use to indicate that a process that was initiated by the user is now running and the results are not ready yet. Examples of these processes are complex queries, running server-side geoprocessing tools, and adding, connecting, or uploading data.
Loading indicators are not needed for data that is streaming in because the fact that objects like buildings are still rendering is indication enough that the data has not been fully received. Users are usually familiar with the fact that panning or zooming the view will fetch the requested data and seeing these features appear reassures them of that fact.
HOW
Provide feedback of the status of the system by showing an animated loading indicator. This can be a moving bar below the header or a spinning circle in a corner of the map. It is not important to show percent complete unless the wait time is directly related to a file upload or download. If the actual duration cannot be determined, then use an infinite spinner instead.
In cases when the user needs to wait for the process to finish before performing any work, the application should block the screen by using a modal overlay and removing or disabling input controls temporarily.
- Show loading indicators for any process that lasts more than 1 second
- Start the indicator immediately after the user has initiated the process, e.g. clicking a button or tapping the map
- If possible provide percent-done feedback, especially when waiting times are longer than 10 seconds
- Consider adding text explanations or time estimations for very long processes
- Avoid static progress indicators by themselves, e.g. text like “Loading…” or “Please wait…”. Pair at least with a spinner animation.
EXAMPLES
