Loading patterns are used when the system takes too long to display the requested content on screen. This sort of communication is a critical aspect of the user experience. It helps manage user expectations and reduce perceived wait times.
Page loading
There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. Page loading solutions are used when the system is waiting for an entire page or application to load. Loading pages should also communicate with the user about what is happening and why they are waiting.
Why
- The process is transitioning to a new application
- The page is loading a very large volume of content
- There is a technical issue
In these scenarios it can be important to disable the entire screen so the user cannot interact with it, using an overlay can achieve this.
When
Display after about 1-2 seconds
What
The most common page loading pattern is a simple, animated Progress Indicator (or Spinner icon) on a page overlay. This approach prevents the user from interacting with the content on the screen by covering the entire page including headers, footers or any other navigation. The loading animation should be accompanied by messaging that explains what is happening and why the user is waiting. The message can change based on how long the system is taking.
Spinner vs animation
Depending on the process or the audience, instead of showing a simple spinner, we can take the opportunity to insert a brand moment by using a more complex, branded and potentially engaging animation. These are usually reserved for customer facing processes. These animations can be visually specific to the actual process, for example showing an animated letter if the system is sending a message.
Usage example
Here is an example of a page loading pattern.
Loading within components
There are also scenarios where small, individual components require a loading state. For example if you have a button that initiates an action in the page or that you only want the user to click once, the button can have a Progress Indicator (or Spinner icon) that appears once the button is clicked and disables the button until the action is completed. Another common pattern is loading within an input field for an auto-complete component. The user starts typing, if there is a lag while the system calls the back-end to retrieve the items the field can display a Progress Indicator (or Spinner icon) until the action is completed.
Why
- To indicate a process has initiated, like search
- To disable a button from being clicked more than once
When
Display immediately for disabling scenarios, or after about 200–500 milliseconds when loading.
What
When indicating loading for very small elements we use an animated icon embedded with the component.