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.

I am working with a home-grown CMS and have recently "upgraded" the entire thing to use javascript/AJAX/XHR to handle every page load and form submit, no exceptions. So far so good.

All links load a page fragment into the "main" content area or sometimes a secondary area, which replaces the existing content.

I am looking for a subtle way to show the user that there is a request pending.

  1. At first I did the typical thing: Put a big spinning circle into the content area while we wait for the new content to load. I hate this: it's clunky, tacky, ugly, and the fact that it takes over the content area before the content is ready really bugs me; it also means you can't cancel the loading by clicking another link inside the content area (because it was replaced with the animation). I can add "click to cancel" to the loading animation but still would like to avoid this technique.

  2. One idea I had was to add a little fixed status bar on the bottom of the page, and display something similar to what you'd see in a browsers status bar (connecting, loading, done, etc.). I like this personally as a developer but I don't think my users will understand it or even notice it, plus it takes up space and probably needs to use written language to convey the status. I could use something like a "stop light" with red (connecting) green (ready) and yellow (loading), but I'm not very fond of this idea in general, just sharing what I had considered.

  3. My other idea was adding and removing a css class to the link clicked while the related request was pending. So, if you click a link it will "light up" or something while the content is loading, and go back to normal after. I like this, because it leads to a lot less "action" going on visually as compared to #1.

What would be a good way to alter the look of the links using technique #3, so that it's obvious that there is loading in progress. I considered an animated background. I considered reducing the opacity of the link. For debug purposes I am just adding a red background or text color and it does do the job (makes it feel like something is going on), but of course it is terrible looking. I am also using the progress cursor type for the link which definitely helps.

Second, what are some other solutions to this that the user will clearly understand, without hijacking the content area with spinning circles, pulsating squares, and other tacky .gif solutions?

share|improve this question
add comment

4 Answers

up vote 2 down vote accepted

GIFs in general are a great solution. The movement shows that the browser is still chugging along and hasn't given up and this is done with a wisely supported, low-bandwidth file. The wheel is one of the more universal, learned symbols.

share|improve this answer
    
We decided not to deviate from the expected and just stick with variations of The Wheel. Other things we tried just weren't clear enough. –  Wesley Murch May 29 '11 at 4:59
add comment

I was thinking about simply pulsating (not flashing) a thin border around the content area being refreshed - without removing the old content until it's done (perhaps dimming it slightly though) - to indicate that the area is about to receive new content... makes more sense if the area already use visible borders though.

Instead of pulsating some other animations comes to mind, like a pulse following the border around the content and so on...

I also like 3, disabling or visually alter the link/button element clicked for immediate feedback, though I'm unsure how to make clicking a link satisfying enough.

I would probably animate borders using a GIF though - not that they'd look like the tacky variant, but alas.

share|improve this answer
add comment

Some solutions: 1. Pulsating light, a small circle that pulsates the color of what is going on (red, yellow, green then goes away)

  1. A small loading bar fill up then content comes in.

  2. 3 dots ( ... ) at a 2 or 1 sec animation loop

  3. "Place Holder" Icon that appears, does not move until content is loaded then fades away.

  4. Set area in the page UI for status, (like you mentioned) With text of what is being loaded (ie link1 example ) then a status bar.

share|improve this answer
add comment

In fact your purpose is to show it to users so go with the thing that they like and understand. If you don't want gifs then no problem writing loading.. like things with the usage of some shades , borders and by making them dim while being loading or highlight them via light dotted border e.t.c. can be a good solution.

share|improve this answer
    
Yep, in the end I decided to stick with the old standby. We're using an overlay to dim the content area with a "spinning circles" animation. It's doing it's job, so I guess there's no reason to change it. Like you said, go with the thing that they understand. –  Wesley Murch May 27 '11 at 20:25
add comment

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.