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 building a web application that is fully AJAX enabled. Clicking a link will load the page from the server and some tricky javascript will determine which parts of the page will require replacing. It will then fade out the old parts and fade in the new parts.

It works well, but the above can only happen after we receive the content from the server, so the following cannot be used:

  • Blanking or fading the content to be replaced.
  • Showing throbber in place of where the new content is to be placed.

I am looking for a generic area to place a throbber or status indication to let the user know that the page is being loaded. The indicator should allow the user to know that something is happening, but should also be subtle and not get in the way.

In desktop applications, this is often indicated by changing the mouse cursor to a busy cursor. But in a web application, I don't think this would work well: When I see a busy cursor, it indicates to me that the page has crashed and the tab would have to be restarted.

Is there a subtle and elegant way to show the user that we are loading some data from the server without having to blank/fade out parts of the page that will be replaced?

share|improve this question
    
If you need a loading indicator, the main aspect of this app you should be focused on is time it takes to get it to working conditions. Take a look at your processes & algorithms to see what can be either cut, or reordered, or refactored to shorten the wait. –  dnbrv Jul 3 '12 at 6:24
    
We are also working from that direction to make sure things are as fast as possible. However, given that the application is quite complex, we are looking at about 1 to 2 seconds per request (that includes sending the request to the new content transitioning in being finished). But there are also cases when users are on slow or unreliable connections too where it will take longer. –  F21 Jul 3 '12 at 6:32

2 Answers 2

up vote 2 down vote accepted

A pattern I've seen (e.g.: Google mail) is to use a slide-down banner for this--a panel that slides down from the top middle of the viewport (not the page) with a "Loading..." message.

The animation catches the user's eye, and the fact that it's an overlay helps reinforce that you don't know what's going to change on this page.

You could also use the Twitter/Stack Overflow approach where you delay the redraw until the user clicks. "There are _ 2 _ new responses. _ Click here _ to show them."

share|improve this answer

One way to do this is to make the clicked item stand out. Maybe you can place an indication or marker next to the item which has been clicked to indicate that the user has started a process and should not be clicking on other links or buttons during that process.

However the user should be able to keep on reading on that page. So to put more focus on your problem, first try finding out whether the click action means "send me to the next page" or "im curious what this button does". Then you can conclude if your status message can fade the entire screen or if it should only put some sort of marker next to the button.

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.