This article was originally posted on uxpatterns.org, which now redirects here.

No matter how zippy we make our applications and sites, there will often be something that takes time to process. Loading indicators, often those swirly circle graphics like these Standard loading spinner generally show up when something takes longer than a second or two to process. Most of the time, this is for a complex query such as a reservation search on a travel web site or for something like a file upload.

It is a solid practice to use loading indicators in these cases so that the user knows that the action they invoked had some effect. Otherwise, they may assume something is broken or that perhaps that they never invoked the action at all–necessitating another click (and restarting the query).

In my search for progress indicators and loading animations, I found that most applications center their loading concept on some or all of the following themes

Tell the user what is happening

Many times, if the user is informed, they may be more patient. After all, something they asked for is coming–it’s just taking awhile. But be careful about giving an information overload!

If this was initiated by a query from the user, it may be helpful to remind the user about the details in case they made a mistake. No sense in making them wait only to have useless results!

Show real progress

Sometimes this isn’t technically feasible. Databases don’t know when they’ll be done processing your query, and even if they did, it would take another series of queries to ask for the remaining time. However, for things like file transfers this is much more simple. If you take the amount uploaded and divide it by the total file size, you have the percentage of progress.

Give users something to do

Hipmunk did something surprising with their loading screen: They gave me the opportunity to sign up for fare updates (and probably their email newsletter). Since these searches usually take upwards of 30 seconds, I had plenty of time to digest what I was seeing and fill the form out.

Vimeo allows me to edit my video details while it uploads.

Kayak surprised me also by loading results as they came in. This allowed me to start planning as it finished loading.

Other companies showed ads for third parties.

Highlight Your Brand

You’ve got your users’ eyeballs for a few seconds on this screen. Make the most of it! Most sites took this waiting time to give the user a taste of their brand, or highlight a competitive advantage of their system. Others went more minimalist and simply animated their logo.

Summary

There are plenty of different things you can do to keep the user on your site or in your app while something loads. As always, balance the business needs (revenue from advertisement, cross promotion, etc.) against user fatigue and interest and promoting your brand. Wherever possible try to reduce load times altogether.