Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We realized that in some cases the user may be waiting up to 4 or 5 seconds (depending on connection) for their form (or some action) to be processed. The form involves getting data from other servers (facebook) and merging it with our own data then submitting to our server. So while this is all happening there will be some dead time.

Our initial reaction was the just use a spinner to indicate that something is occurring. Then we decided to make things fade and appear to kind of fake "speed". Then we thought we might be missing an opportunity to present really cool information or to delight the user.

Is there a standard approach for this specific use case, or is a spinner the appropriate method to take?

share|improve this question
5  
bigwords.com lists one-line jokes while they process your search. –  3nafish Jan 4 '13 at 2:47
    
Just show a spinner and explain user what's happening and that's all ("We're transmitting your data to the server, please wait for a moment..." or something like this). You may also explain shortly what to do if operation will fail, etc. Keep things simple and think about user's mind which could be overloaded with "cool" but useless information. –  alexeypegov Jan 4 '13 at 14:19

8 Answers 8

up vote 7 down vote accepted

I like progress bars with stepped copy.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

I think it only makes sense to show a progress bar if you can effectively quantify the 'progress' properly. If it is a variable delay, then I don't think asking the user to look at a progress bar expecting the progress to be reflected is good user experience. On the other hand, having a hourglass or spinner is not exactly user friendly either.

I like how computer games will present tips or facts while they are loading, but it doesn't necessarily work well with all types of software.

share|improve this answer

A progresbar is always a good choice!

But a progressbar is not necessarily a progressbar.

A study showed that (ref) users experienced progresbars that increased the pulsation speed towards the end felt faster than linear ones.

Another way you can make your progress bar feel faster to users is to increase the number of pulsations it has. The same research study found that “the progress bar with increasing pulsation was more likely to be perceived as having a shorter duration” 1. Increasing pulsations are much like the beats per measure of a song. The more beats per measure, the greater the tempo and the faster the song is played.

However, the study concludes with:

When it comes to user experience, perception is everything. If your application looks and feels faster to users, maybe it actually is.

So in other words, no correct answer! Users are for the most, "trained" to respond to a progressbar as a waiting stage. Using the accelerating pulsating type is IMO the best choice.

Link to the study (PDF):
http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf

share|improve this answer
    
So whats the consensus here ? –  Mervin Johnsingh Jan 5 '13 at 16:47
    
Display something to indicate there is something going on in the background. –  0x2bad 0xdeadbeef Jan 5 '13 at 17:20

The eventual design of your progress bar or spinner will depend upon your site but since you have an idea that it takes about 4-5 seconds for the processing to take place, you should call that since that so that users are informed about how much longer they will have to wait.

Alternatively you could look at incorporating an interesting animation like how http://tweet.grader.com does while it is processing the history of a twitter handle as shown below:

enter image description here

I recommend looking at this article "The UX of AJAX load animations" as it gives some inputs on what different kinds of animations convey and where they can be used

share|improve this answer

There are some great ideas here for what to display during that 4 - 5 second period. But that period doesn't have to exist at all. The only thing that you really need to process immediately is the information that's going to be displayed on the next page load. Everything else can be offloaded to a background process. This approach would eliminate the need to entertain (or annoy) the user while your system is working.

share|improve this answer

The best loading screen I have ever seen (from a game) presented the user with a Galaga arcade shooter to offset the 50-120 sec load times. More common (as seen during Windows installations) are the random help/feature dialog tips which alternate on screen at specific % points.

For me personally, I wouldn't bother with it for load times under 4-5 seconds. In most cases a user who spends 5 minutes filling out a form is not going to get frustrated over a few seconds of post. I would include a message confirming the success of the process though.

share|improve this answer

Pattern libraries are great for discovering how other people think about problems, and showcase their solutions. They won't always have results, but it'll be more effective than asking for examples on a UX Q&A site.

A quick search on Dribbble:

http://dribbble.com/tags/loading

Here's an example result for Flight Tracker: http://dribbble.com/shots/334949-Flight-Tracker-for-iPad

UI Parade has a couple of interesting looking progress bars:

http://www.uiparade.com/skill-type/progress-bars/

Other than that, you could maybe take some inspiration from splash pages: http://www.android-app-patterns.com/category/splash-pages

share|improve this answer
1  
to prevent linkrot it would be good to post some of your preferred images from the searches –  icc97 Jan 4 '13 at 9:19
    
@icc97 The point of my answer was more one of "hey, don't ask this on here, look at how it's documented on pattern libraries." –  Simon Jan 4 '13 at 16:20

You sometimes see a message on ecommerce websites while a transaction is being processed. This can include instructions to not press back or reload the browser, which might also be helpful in your case.

You could also display a spinner or some indication of progress as well.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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