Everything you need to know about Loading Animations
By default, users expect a fast reaction from the digital products they’re working with. With a huge variety of excellent iOS apps, macOS tools, and well-crafted websites, people have a certain quality bar. So the app might work not as fast as the users expect it.
History of Loading Animations
Since the Web 1.0 almost every website has preloaders
- Preloaders explain to users when something is happening or loading and ideally reduce mental waiting time
- Progress indicators assure the user that the system has not crashed but is working on his or her problem
- They indicate approximately how long the user can be expected to wait, thus allowing the user to do other activities during long waits
- Finally, they provide something to look at, thus making the wait less painful
Loading spinner or infinite loading animations
Used when loading time is unknown
- Can be default spinners, creative indeterminate indicators, animations showing that your app is “doing something” under the hood
- Infinite indicators ask users to wait while something is uploading or doing but never specifies how long it will take
Simple or well-crafted?
For some time, simplified loaders were recommended as best practice as they require less processing power
- In any case, if you are working on the MVP (minimum viable product) or the first release of your side project, it’s more logical to use simple, default or open-source loading animation
- Even the most creative loading animation won’t save your product if it doesn’t solve the real need
Useful tools and resources
Learn more about designing and implementing loading animations before you actually make them
Emphasize branding and company voice
The user will anyway look and wait while your app or website is putting the thing together, why not to use this time wisely?
Be shown to the user as least as possible
If you can make your tool or site work fast enough, that will be perfect
- Showing an infinite loading indicator an infinite amount of time will annoy users and decrease UX
- It’s better to solve content loading problems first
Progress bar
Used to show how long an action will take and the state of the progress so far
- Numerical or visual indication
- Percent-done indicator
- Simple and creative
- Can be either linear or percent-indicated depending on the task
Skeleton screens
Provide incremental progress in loading the interface
- Imagine them as black pages (placeholders) with step-by-step loading of images, text, and other content
- First appeared in Luke Wroblewski’s article (Mobile Design Details: Avoid The Spinner, 2013)
- Used by Facebook, LinkedIn, YouTube, Google Drive, etc.
Give time estimation
It can be a simple message of approximate time to wait or visual representation of work done
Explain why the user needs to wait
Smart loading animation can give a reason to wait and explain what’s happening under the hood