Improving perceived site performance with spinners

By YUI TeamNovember 11th, 2010

At the London Ajax meetup this week, Piotr (one of the creators of the rather good jsfiddle.net talked about spinners — the pretty common “I’m doing something” indicator — and how users perceive them.

Apparently, people perceive Chrome to be faster in part because the little activity indicator keeps changing — it appears and disappears, and changes speed — while a page is loading. This sense of something happening persuades people that something is in fact happening, and faster, even if the actual speeds are identical.

So Piotr set up a randomized survey, comparing perceptions of load speed after clicking two buttons — it’s here if you’re interested. When you click the button there’s a delay before the spinner is shown, and then a short (random) time later the results are shown. Then you click another button, and the same thing happens. And then you say which was faster. He also allowed for a “this thing seems broken option”. (If you’re going to do the survey, do it now and then come and read the conclusions — I don’t want to spoil it for you!).

The results are here. The conclusion is that by delaying the display of the spinner slightly, users perceive things to be happening quicker. But wait too long and they start to think something’s broken — 0.4s seemed to be the optimal delay, from the survey results. And it may be worth thinking about other indicators if things take longer — add a “loading…” text overlay after 1 sec, perhaps.

4 Comments

  1. After taking the survey I think it might be the duration that the spinner is displayed.

    For example, if you have an action that takes 1 second. If you display the spinner at .4 seconds then I wait .4 seconds to see the spinner and then watch the spinner for .6 seconds.

    On the other hand, if the spinner is shown for the entire second then I’m looking at it for longer which probably leads me to perceive that it’s altogether slower.

    If that’s part of the reasoning then you really need to have an idea of how long a request will take so that you can stage/queue the visual differences accordingly.

    I wonder if adding another dimension to the loader would help. Perhaps transitioning the color from one to another or something along those lines.

  2. Jaisen,

    I think the survey’s trying to control for that, by randomizing both the delay it’s showing for and the length of the request.

    But yes, I think you’re right: if you’re expecting a response to be longer (or just set a timer as it’s happening) you can give further indications that something’s still happening.

    Matt

  3. [...] a really interesting post on the YUI blog about how spinners affect our perception of performance. It turns out that a spinner that changes [...]

  4. Is there an analysis of optical illusions in user interfaces? What are examples of optical illusions in highly regarded user interfaces?…

    I will give you a great one. If a website delays the appearance of a ‘spinner’ (loading symbol) it will make the page appear like it is loading faster. This is because the spinner is visible for a shorter amount of time. The ideal delay is around 0.3…