22

In a web application I am working on there are some actions which usually take a few seconds or longer, depending on typical variables (connection speed, PC speed, amount of data involved, host load, etc). For these we show a progress bar, or a loading spinner with a "please wait" message depending on specific context. (I'll call both "wait indicator" from here on out)

This works well... when the action actually takes more than a second. But if the action actually takes less than about 500ms, the effect of the wait indicator showing up and then disappearing immediately looks like a glitch.

I can think of at least two ways that might improve this situation:

  1. Create some means of predicting how long each action will take (track the first few request lengths and compare to an average, use known data sizes as a multiplier for that, etc.), and then use that to decide up front whether or not to show the wait indicator. Pros: probably better outcome. Cons: difficult to implement, and will sometimes be wrong (which will be really bad if it takes several seconds but didn't think it should show the wait indicator).
  2. Make the wait indicators always show for a minimum length of time -- even if they complete more quickly. Pros: would never look "glitchy". Cons: waste of the user's time, makes the software looks slower.

Is there research in this area that might point to a better practice? Are there particular sites that have a great solution to this? What is best practice?

Rather than waiting a certain time to show it, I have just tried fading in (using css transition) the wait indicator over 1 second and that has a very good feel to it. When the wait is actually only 100ms, you barely see the wait indicator begin to show up and then it's gone.

Improve this question
2
  • 1
    Arg, never never never force the user to wait longer than necessary. Mass Effect 3 has a "loading screen" where the start/stop animations can last longer than the loading process and it's infuriating.
    – Zelda
    Commented Apr 3, 2012 at 19:57
  • @Ben - I totally agree, but thought a list of 1 was too short to be a list, and didn't like my first item either... just clarified my wording.
    – jlarson
    Commented Apr 3, 2012 at 20:01

5 Answers 5

Reset to default
16

You simply need to only show the wait indicator if the wait time exceeds a certain preset amount of time.

I do the same thing in an application that I maintain, and I find that waiting 1 second before showing the indicator is a good amount of time and allows for quick processes to finish without flashing the indicator and making it look like a glitch.

Improve this answer
3
  • What if your preset time is close to the real execution time? E.g: your preset time is 1 sec and the task ends in 1.2 secs. It will still look glitchy, won't it?
    – Alpha
    Commented Apr 12, 2012 at 16:54
  • 1
    That's true, but at that point you could easily determine the average wait time and configure the preset time accordingly. I think if something is going to consistently take 1.2 seconds, then you should probably show the indicator immediately anyway because it provides that immediate feedback that users like and 1.2 seconds is long enough to not make it look like a glitch (assuming it starts immediately).
    – raffi
    Commented Apr 13, 2012 at 20:56
  • 1
    Another suggestion is to introduce the wait indicator using a gradual fade-in animation (perhaps after a very short delay). The benefit there is if it completes 200 ms after it appears you'll barely notice it, while for longer operations it'll look nice and polished.
    – devios1
    Commented Apr 5, 2013 at 0:39
2

How about showing how long it took, in addition to your hourglass behavior?

Also, instead of being techie and showing "Completed in 500ms", show "completed in less than a second"

Improve this answer
2
  • One example I can think of that does this (though not a web app) is Microsoft's Sql Server Management Studio. It offers an animated GIF and shows the time elapsed when done.
    – Marc Manswero
    Commented Apr 3, 2012 at 22:08
  • Showing actual time might work against you when the action is taking a few extra sections.
    – dnbrv
    Commented Apr 4, 2012 at 1:35
1

Mobile Gmail does this as well. The loading indicator is a ribbon on the bottom fo the screen. When it is done updating, it says "Updated". Very unobtrusive but still clear that something loaded.

Basecamp mobile has a loading indicator upfront, and when it is taking longer than expected it says "Still loading, please wait" to make sure that the extra long loading times are acknowledged and that the app is not frozen.

Improve this answer
1

I would go for a two tiered approach.

Once the user starts some action, disable the button and show a little Loading something next to the button.

Measure all 'actions' in the systems and use the ones taking over 250-500ms (depending on actual client server roundtimes) and add a 'bigger' Loading animation.

In our windows form application 'all' actions start a little waiting spinner at the mouse cursor. Slow jobs start a 'big' waiting spinner in the center of the screen. Really slow jobs show a progress bar or a percentagenext to the 'big' waiting spinner.

Improve this answer
0

Display the "wait" on button down (ie as early as possible). Most of the time a fast filling progress bar or very short lived hour glass is pleasing to the end user (hey this program's fast!), and I've never seen one that "looks like a glitch."

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.