Make the Web Faster

UI messaging and perceived latency

Author: Roma Shah, User Experience Researcher

No prior experience required

To the typical user, speed doesn't only mean performance. Users' perception of your site's speed is heavily influenced by their overall experience, including how efficiently they can get what they want out of your site and how responsive your site feels.

When designing your website or web app, keep in mind that users come to your site with a purpose. The faster (and easier) they can accomplish what they came to do, the better. If users encounter a lot of difficulty in getting to your content, they will leave your site for one that lets them accomplish their goals faster.

While there are there are many things you can do to save users time and make them feel that things are not as slow as they might be, this tutorial deals only with user messaging.

User messaging: 3 things to think about

1. Is my site simple and intuitive enough for a person who has never seen it before to easily use the first time?

If not, take some time to design some first-run-experience messaging.

Let's say your site is a powerful web application with lots of features. Given that it's not an easy task to design a completely intuitive out-of-the-box experience for this type of application, your users may need a bit of help getting started.

A first-run experience that concisely explains or shows the user what the product is and/or how to use it is extremely valuable. A little bit of time spent upfront in learning a few key things about your product can save a user a lot of time in the long run.

Warning: Don't go overboard! Don't block the user from getting to actual content by making the first-run experience into a cumbersome multi-step process.

2. Does this message interrupt or add steps to the user's workflow?

Think carefully about how messages you display may lengthen the user's workflow. There may be more appropriate times and ways to display a message that won't keep the user from getting things done.

Consider the case where a user wants to carry out an action that you think is pretty drastic. You think it's worth double-checking the user's intention, to save the user who got to this point by accident. So you put up a message that says "Are you sure you want to do this?" You've saved the user who was about to make a big mistake, but for the user who actually wanted to commit this action, you've now introduced an extra step into the process. Instead, you could allow the action to be committed immediately in either case and given the ability to undo it, after the fact.

3. How can I reassure the user during wait times?

Let's face it: there are going to be times when the user has to wait. There are, however, a few things you can do to make the inevitable wait time a little more bearable.

If the user has to wait more than a few seconds, show a progress bar. Progress bars not only indicate that the user has to wait, but also roughly how much longer the wait will take. If you want to be more specific, you can even detail how much of the action has completed (e.g. 40kb of 64kb). Try to refrain from including the estimated time to completion because, with fluctuating connection speeds, there's nothing worse than seeing the estimated time remaining climb upwards.

When the user has to wait less than few seconds, show some kind of loading indicator. Loading indicators are often manifested as variations of a spinning doo-dad of sorts, but they can be something as simple as the text "Loading...".

You might ask, why even show anything if it's just less than a few seconds? The loading indicator gives feedback that the user's action did in fact go through, and the site is working on it. Without any indicator, the user is left with uncertainty about whether or not it worked and may attempt to try again.

Additional resources

These suggestions are only the tip of the iceberg of things you can do to design with the user in mind. For reading material on interaction design and web design principles, here is a list of books that can get you started:

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.