Usability tips for visualizing Ajax requests

The usage of Ajax in web applications and web sites is rapidly increasing. If not handled properly Ajax fucntionalities can break users’ expectations and conventions. This is why it is important to help users easily identify what is going on with the system and prevent them to make errors during Ajax operations.

Keep users informed

Ajax indicators are very important tools that help users to have an understanding of what is going on with the system and what are responses from the system. Indicators should be shown as soon as request starts and hidden when request ends. I’ve seen so many times that indicator is visible even when it was obvious that request is finished (or even worse, in some cases there were not any visual clue of what is going on).

Simple indicators

Simple Ajax indicators provide a strong visual clue that request is in progress. They can be shown as simple text or as an image, usually animated.

  • If it is in a text form, be sure to provide meaningful message, like “Sending email…”. Messages like “Waiting…” could confuse users. What am I waiting for? Is something wrong with the system?
  • If it is an animated image they are usually represented by rotating animation. This is one of the rare good usages (if not only) of animated gifs today

Loadinfo, my favorite choice when it comes to indicators, offers a plenty of animated gifs. Some of them are really fancy, like rotating hourglass.

Progress indicators

If an operation needs a longer time to execute you should use progress indicators. This type of indicators provide a real time information about the progress status, usually by showing how much time has passed and how much has left to the end of request. Progress indicator can also show a status message explaining what is happening at the moment.

Dropbox provides graphical status indicator as well as textual status messages. This is the efficient way to communicate the status of long operations.

Position

Whatever option you choose, you have to make sure that indicator is clearly visible. Depending on their purpose, indicators can be placed inside the same context as the element that started a request or they can be shown in a single position for all request. Previous example shows the case where progress indicator is shown in the upload area.

Google Mail has centralized Ajax indicators in the top of the window that is revealed upon any Ajax request.

Which one to choose?

I think it’s the best to quote Jakob Nielsen’s article Response Times: The Three Important Limits. I wouldn’t have anything to add here:

  • 0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
  • 1.0 second is about the limit for the user’s flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.
  • 10 seconds is about the limit for keeping the user’s attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.

Disable UI elements during Ajax request

While one Ajax request is in progress user can start another one which may bring about the risk of data damage. By double clicking the same button or by clicking on another users can even cause an application failure. But if that happens it’s not their fault.

This can be easily prevented by disabling UI elements during Ajax request. Depending on the case, you can disable a particular element or you can disable the entire user interface. UI elements should be disabled when Ajax request starts and enabled again when request ends. In some cases your user interface will change view after Ajax request so you won’t enable disabled elements again.

 

BuySellAds shows Ajax indicator in centralized area on the screen while the rest of the user interface is disabled. This behavior is consistent through the application.

Highlight updated area

When partially updating a page it is important to emphasize the outcome of Ajax request. The goal of this method is to draw users’ attention to updated area and enable them to easily confirm the update. This can be done by highlighting updated area for one second and then fade it away (you can even flash it once or twice). The usual color for highlighting updated area is pale yellow.

Basecamp highlights the updated area with yellow color.

Conclusion

To make Ajax functionality easy to understand, you have to provide the information about state of the system during a request and after the request is finished. Basically, when working with Ajax you should:

  • Use textual or animated Ajax indicators
  • If requests are long, use progress indicators
  • Disable UI elements during Ajax request to prevent potential errors
  • Highlight area updated by Ajax
  • And of course, you should always show status message indicating whether operation failed or suceeded

What is your experience with visualizing Ajax requests? Is there any specific method you prefer?