“Patience is bitter, but its fruit is sweet.” — John Chardin

To this day, these words still ring true. With current advances in technology, from improved coding languages to fiber internet, users are becoming less and less likely to wait for long load times. Speed is king: the faster you can get your users where they want to go, the more time they will spend on your website.

However, there are times when you simply cannot get your website or software to present new data without using a loading screen. This is a vital moment for your products and it is often overlooked. Loading screens are, at the least, chances to show your users that you truly are thinking of them, and at most, can even improve the user experience of your product. How can you take advantage of this opportunity? It’s all in the design.

Capitalize on a Captive Audience

If the wait time isn’t very long, you can likely count on your users to be there watching that indicator progress. You can use this time to inform, inspire, or engage with your users.

This could include:

  • Passing along timely messages to your users (e.g., sales notifications or holiday wishes)
  • Imparting some wisdom (e.g., explain a little known feature in your app or provide relevant industry knowledge)
  • Reinforcing your brand (e.g., use your trademark content marketing or dazzle users with a fun animation using your brand colors)
  • Brightening your users’ day (e.g., include a random trivia question about your industry or provide an inspirational quote)

The key is that your users feel understood and cared about in a moment where they are prone to feeling forgotten.

Lessening the amount of time spent on load screens will help retain their novelty and inherently improve your users’ experiences. One way to do this is to give users a blank preview of what they will see. This is done using what’s called a skeleton screen, a bare-bones version of the page on which content will eventually appear. Websites like Medium and Facebook are famous for this.

There are a few potential pitfalls with this technique. Unclear skeleton screens can confuse naive users. It is also important that content doesn’t move or change between the skeleton screen and the final page—this can be especially frustrating when users are quickly trying to navigate and end up selecting the wrong link.

Give Users the Info They Want

If you do have to utilize a loading screen, there are a few major do’s and don’ts you should always take into consideration. Remember, this is the perfect opportunity to show off your design skills and show users that you care about their time.

What Not to Do:

Never provide a static progress indicator (e.g. just displaying the word “loading” on the screen). These give no indication of what is happening with the system and will only frustrate users.
In general, don’t provide a repetitive animation that gives no indication of progress. Users want some way to gauge how much time they need to wait or, at the very least, know that your product is doing something in the background while they wait.

What To Do For Short Load Times (less than 9 seconds):
If you only expect users to be waiting for a few seconds, provide a visual indication that things are happening behind the scenes. Progress bars have been a standard design element for awhile now, but asymmetric loading GIFs should work just as well.

What To Do For Longer Load Times (~10 seconds or more):
If users need to wait longer than a few seconds, you’ll need to give them some details to keep them satisfied. First, tell them what is causing them to wait. Next, give an indication of how much progress is being made. Finally, if possible it is always best to help estimate their wait time. Just be sure your estimate never underestimates the time needed.

Nathan Davis contributed to this article.

Resources:

Images from www.giphy.com

https://www.nngroup.com/articles/progress-indicators/

https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/

https://blog.prototypr.io/luke-wroblewski-introduced-skeleton-screens-in-2013-through-his-work-on-the-polar-app-later-fd1d32a6a8e7


Also published on Medium.