Usability tips for visualizing Ajax requests

November 1, 2009

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.

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:

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:

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

Let's discuss this on twitter.

Before you leave