When people interact with a digital system, they expect the system to acknowledge their commands. Well-designed system feedback is one of the things that make interaction comfortable. While there are many ways to acknowledge user input, loading animation is one of the most common. A loading spinner is by far the most common type of loading animation.
This article discusses when to use and how to make the most of this simple animation.
Use Loading Spinner
For short wait time (<10 sec)
A spinner is appropriate for quick tasks (e.g., submitting a form or loading a small set of data) that require a brief loading time but not long enough to warrant progress bars. Typically, it works fine for a wait time that is about 10 sec. When the wait time is more than 10 sec, people start to worry whether the system is performing as expected, and they want more informative feedback on system status.
Note: Don’t show a spinner for very quick tasks (under a second). Instead, let the task complete instantly without an additional visual cue.
When you need to block the underlying UI once the user initiated the action
The loading spinner is typically displayed on top of the existing UI, blocking the user from performing actions using it. Spinner can be beneficial when a task must be completed before the user can continue interacting with the system (like form submission or authentication).
Spinner can prevent unnecessary interactions. For actions where users expect clear confirmation, such as submitting payment information or completing a high-impact task, a spinner can prevent double submissions and give reassurance.
How To Make Loading Spinner More User-Friendly
Here is a quick tutorial on how to design loading spinner in Figma.
And here are some practical tips on how to improve the UX of wait time:
Provide general time estimate or helpful contextual details about the operation
One of the reasons why product creators tend to use a loading spinner is that it’s hard to calculate the exact wait time. But sometimes, it’s possible to provide a general estimation of the time required to complete an operation. By offering a general time estimate (“This might take a few minutes”) along with the loading spinner, you make it easier for users to understand how much time they need to wait.
It also can be good to provide some contextual information on what the system is doing at the moment while the user waits. For example, explain what’s happening in the background, like “Processing your order” or “Fetching the latest updates.”
Design timeout and error messaging
When designing your product, always think about things that might not go as planned. For a loading spinner, it can be a too-long wait. If the loading time exceeds a reasonable threshold, display an error message or retry option rather than leaving the spinner running indefinitely. Clearly explain the issue and provide actionable steps.
Don’t make rotation too fast or too slow
A spinner that moves too fast can be visually jarring, while one that moves too slowly might suggest sluggishness. Keep the animation speed moderate and smooth.
The animation of a full spinner rotation should typically take between 1 to 2 seconds. This provides a balance where the animation is noticeable but not too fast or slow.
Use a unique design for your loading animation
Instead of a generic spinner, use branding elements or creative loading animations (e.g., a small character or object related to your product) to keep the user visually engaged. For example, if you design a 3D house planner, you can use a rotating 3D block instead of a loading spinner to reinforce the nature of your product.
Once you choose a style for your spinner, stick to this design throughout your application. Multiple different spinner designs can confuse users. Use the same style, size, and animation throughout your system to maintain a cohesive visual experience.
Want to master your UI design skills?
Whether you’ve been working as a designer for years or are completely new to design, Designlab has programs and courses to help you take the next step in your design career. Check Advanced Figma courses to master your UI design skills.
Online UI and UX Design Courses and Bootcamps | Designlab
This post contains affiliate link(s)
Loading Spinner UI Design Tips and Tricks was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.