Everybody wants to do this when loading takes too long. Image: Gal Shir

10 Creative Loading Indicators

by Nick Babich

Visibility of system status is one of the most important principles in user interface design.

Good interaction design provides feedback

While an instant response from an app or a website is the best, there are times when your product won’t be able to comply with the guidelines for speed. A slow response could be caused by a bad internet connection, or an operation itself can take a long time. For such cases, designers must reassure the users that the app is working on their request and that actual progress is being made.

A wait-animation progress indicator is the most common form of providing a system status for users when something is happening or loading. But most of the waiting indicators look boring because product creators simply use default loading indicators (whatever a system they design for offers them).

An infinite loading spinner notifies users that content is loading. Every second app presented on the market use it to inform users about loading time.

If you can’t shorten the line you should at least try to make the wait more pleasant for your users.

Creative progress indicators can reduce a user’s perception of time. If an app gives users something interesting to look at while waiting, this makes users pay less attention to the wait itself. Thus, to ensure people don’t get bored while waiting for something to happen, designers can offer them a distraction.

In this article, I want to explore ten exciting concepts of loading indicators.

1. The Interview is loading…

ueno. uses waiting time to introduce visitors to their team.

2. Loading Christmas gifts

It looks like an app is loading gifts. Image: Chuan²

3. Adorable cat

Instead of using a system loading spinner, designers can use something that creates strong positive (hopefully) emotions. Image: Thomas Bogner

4. Double Helix

This loading animation creates an effect of 3D transformations. Image: Drew Endly

5. Searching for the best flights

As soon as users select origin and destination of the flight and clicks ‘Search’ button, the animation shows a flight from the origin to the destination. Image: Mark

6. Saving data to the cloud

This loading indicator is based on a metaphor of uploading a file to the cloud. The vertical progress bar does almost literally. Image: Ben Mettler

7. Making the process of loading feel alive

This animation makes the process of loading as exciting to watch as watching someone walking on a tightrope. Image: xjw

8. Fine animation for a splash screen

A beautifully designed splash screen paired with a fine animation can give app developers a few extra seconds of time to download all required data. Image: Behance

9. Pull to refresh animation

This pull to refresh animation has a clear functional purpose. It connects two states — before and after the update. Image: Ramotion

10. File upload animation

This animation is a great example of smooth state transitions. The final checkmark notifies users that the operation was successful. Image: Eddy Gann

Conclusion

While all the effects mentioned above can improve user experience, it’s better not to overuse them. What looks fun and adorable for the first time, might seem dull and predictable after the 100 times. Also creative loading effect can’t solve the problem of slow loading time. When users see the same loading effect over and over again, soon they will start blaming the app for slow loading time.

Follow UX Planet: Twitter| Facebook

Learn UX Design