Keep Users Updated During Long Load Times

When load times are long, how can you make the experience as nice as possible for the user.

Load times are unavoidable in some circumstances. It is critical to be keep the user informed of what is happening and how much longer the process should take. In this post I will discuss ways to create the best user expeirence in idle downtime as well as the best way to conclude them.

We have discussed how to minimize load times in the past but there are certain circumstances that a wait time can not be avoided. When these experiences arise you need to know how to make them the best possible for the user.

Real Life Examples

Here are some real life examples that are designed to keep users up to date on what they are waiting for:

Crosswalk Countdown

Crosswalks tell wait times.

Photo by Richard Drdul.

While crossing the road we often have to stop and wait for that pesky red hand to go away. In recent years we have seen crosswalk signs that include a countdown. This countdown tells pedestrians exactly how much longer they will need to wait before they safely and legally can cross the road.

Take A Number

Take a number and wait your turn.

Photo by Robert S. Donovan.

This is one that everyone loves! Take a number support systems can be found from the Department of Motor Vehicle offices to Ikea stores. The basic principle is that you pull a ticket out and wait for your number to be called. Users are updated on their position in two ways: wall mounted displays that tell you who is next in line, as well as when the associates call out what number is next.

Flight Boards

While visiting the airport you may check the schedule board. This board tells you a plethora of useful information. You are given the time your flight leaves as well as updates if you can expect a dreaded delay to occur.

Online Examples

Here are some examples that we can all learn from:

Virus Total

Virus Total is a free online virus scanner that allows you to upload files to be scanned by several top anti virus applications. Due to the nature of file upload websites there may be a longer wait period during high traffic times. To alert the user of the server load there is a status indicator labeled Service Load right on the main page. This allows users to know what to expect during their experience with the website.

VirusTotal keeps the user informed during the upload process.

While uploading files the user is kept in the know with several indicators, from the percentage of the file that has been uploaded to the factors that may dictate the speed of the upload. These additions to the upload graphic keep the user informed of how much longer they can expect to wait and see the progress they have made. Even though the user is waiting a feeling of accomplishment can be felt when the file upload is in the process of completion.

Hulu

Hulu as we all know is a tool developed by aliens to turn our brains to mush. This website serves videos to people and serves as an online TV of sorts.

Hulu presents how much time is left before the advertisement is over.

Due to the nature of videos there is a period of waiting users must endure. Hulu presents a slick Loading graphic while users wait for their video to appear. The animation keeps the users aware that progress is being made. In addition, Hulu also serves ads before starting videos. To keep users informed of just how much longer they will have to wait before their video starts there is a count down timer along the top. This timer serves two purposes: reducing frustration produced by waiting for ads and giving the user an understanding of the time frame left before they can see what they came for.

Facebook

Facebook is a popular social networking website that allows users to upload content.

Facebook helps the user understand the process and know what is next.

When users upload videos and photos to their facebook they are given a status window in a new window. This status window shows an image caption which shows which photo or video is currently being uploaded. As the thumbnails of your images flicker before your eyes you see progress being made. In addition there is a text notification section which tells your user what is going on. This text information allows the user to understand the process and see progress be made as well. Finally, there is a status bar. Just was we see when loading other applications this bar moves farther to the left the closer we are to being done. All of the indicators provided by Facebook are developed to inform users what is going on during their wait to help provide a better user experience.

What can we learn

Each of these major websites showcase different ways to tell your user what is going on during load times. By studying what major websites have been successful with we can incorporate these same methods in designs of large websites and applications that require a load time.

Computer users travel a thousand miles a minute online. It can be assumed that a user is not committed to your specific process at any given time. While a load time is being endured it is safe to say that users do not wait on that page but also work on completing other tasks at the same time. Users do not sit down and open one web page at a time, that is not the way it works. While your user is waiting it is critical you give them the option to leave the window unattended. Also, as the process ends you may be alert them in a subtle way, as to not interrupt any other expeirence they are currently involved with. Some options may include a low volume beep or a status update in the title of the web page or window.

What do you think?

How does load time affect users and how can it be best dealt with? What are your favorite practices or what would you like to see be done different?

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Stormchild June 30, 2009

    Good article. The crosswalk example doesn’t fit though. The timer doesn’t indicate how long you need to wait to cross; it tells you how much time you have to cross the street before it changes to “don’t walk”.

  2. Stormchild June 30, 2009

    Absolutely agree with this though. This is an especially good idea with computers, as having something that updates while the user is waiting also serves as a useful indication that the program is (probably) still doing something and not just frozen.

    Providing feedback is especially important when a user is uploading a file in a browser. Unfortunately this still cannot be done without a plugin, and is one of the problems that needs to be solved to achieve the dream of a plugin-free web.

  3. Very nice post. It’s annoying how some websites don’t give clues to users to aid their experience. Thanks for this article

  4. Thanks for the great article! All too often developers don’t utilize progress notifications and it can cause redundant data calls as well as user confusion.

    I agree with Stormchild on the purpose of the crosswalk countdown (I wish we had those where I live) but the example still fits the purpose in that it is notifying the pedestrians as well as the motorists how much time is left before the pedestrians should no longer be in the crosswalk.

  5. Love it. Any resource on usability will confirm that letting the user know what to expect next will always result in good things.

  6. great idea for a post… i liked your real life examples :)

  7. It is very important to tell users what is happening so they don`t think the browser has crashed or their computer. Internet users are in impatient people.

  8. It’s important to provide as much USEFUL info as possible during loading, but striking a balance is key.

    I want to know that the site hasn’t got stuck or isn’t hanging, so reassurance is good. However, annoying messages can during this period can be worse, and I certainly dont want to be distracted by ads or unecssary comments.

    http://twitter.grader.com/ is an example of a site that often keeps you waiting for quite a while to get the results back, and attempts to entertain the user during the loading period with amusing quips and statements from the site/server. Some are amusing and fun, but after a minute or two – it gets annyoing!

    More important for me is reducing the loading time, and ensuring the messages are relevant and useful

  9. Really good post! In an HCI class I took they told us that the status bars were just to give people the impression that progress was steadily happening, when in reality it just happened at the end or something along those lines. Is that true?

  10. I also enjoy this article, something more interesting to read and so much true!

  11. @Stormchild: Ah, thanks for pointing out that small correction.

    @Carl – Web Courses Bangkok Instructor: Very good point!

    @Ian Applegate: Agreed, very good example.

    @Sarah D.: I think there could be truth to it, Sarah. I would be interested in reading more studies about it.

  12. Nice article, great visualization too.

    I am currently looking into improving the UI of my private webapp for my clients. There is an option to upload files and we keep getting complaints about it, perhaps a progress bar would do good.

    Though it is good practice, keeping users updated about progress, I am starting to hate the Gmail ‘loading’ message when I am on slow connections, haha.

  13. @Vince: Good point. I would love to know how the change effects the users.

  14. Nice collection. I was hoping to find some advice on how to create and to implement some of the examples.

  15. You wont get any arguments from me that displaying the rest of the loading times is important, the problem is exactly how to do it, especially on initial page load..

Related Posts