5

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?

Improve this question

6 Answers 6

Reset to default
3

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.

Improve this answer
1
  • 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, 2011 at 4:59
3

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.

Improve this answer
2

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.

Improve this answer
1

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.

Improve this answer
1
  • 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, 2011 at 20:25
0

You mentioned that you dislike how the spinner 'takes over' the content area, preventing other interactions with the existing content until the new content shows up. I'd suggest (in cases where the vertical layout is expandable, at least) adding a short UI element somewhere in the content area that shows the activity indicator but doesn't overlay or cover up the existing content.

If the content area is fixed height, you could z-index it above the content, but have it be small enough it doesn't interfere with viewing/interacting with the old content. If the content area is scrollable, you may wish to make it 'sticky' (position: fixed for HTML/CSS) so that the user knows somethings being done about their action even if they scroll down (or initiate the load action when already scrolled down).

Improve this answer
0

Some sites (notably YouTube, though I have seen it on others) animate a thin line across the top of the browser window, basically mimicking a browser’s progress bar. Depending on how much of the page you wish to reload, you might want to do this just in the area that’s being replaced, or across the entire window (probably sticking the animated progress bar to the top of the browser viewport, so it’s visible even if the page is scrolled down). (If you are replacing most of the page content, you’ll probably also wish to jump to the top of the page once loading is done, to make it look more like a normal new page load.)

This is a known pattern, with many javascript solutions for implementation:

Improve this answer

Your Answer

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

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