Friday, September 15, 2006

AJAX Progress Indicator for server responses

  • Ajaxian applications often make XMLHttpRequest Calls to query and update the server.
  • Unlike standard page reloading, the browser doesn't make it obvious that an XMLHttpRequest Call is occurring. There usually won't be any information in the status area and the "throbber" (that is, the icon that normally shows loading activity, such as the "e" at the top-right of IE) will not throb.
  • There's a geographical component to server call delays. To provide good feedback, you should provide an idea of which page elements are affected.
  • Users like to feel in control, and that control is taken away when the user's waiting for a response. It's not just the delay that should be minimised, but the perceived delay.

Indicate the progress of server calls. You can't always reduce delay, but you can adopt Progress Indicator to ease the pain. A Progress Indicator helps maintain the user's attention, improves the user's understanding of how the system works, and also communicates that the system is still alive even if a response hasn't yet occurred.

The progress indicator is typically introduced to the DOM once an XMLHttpRequest Call begins and removed when the call has returned. The easiest way to detect the call has returned is in the XMLHttpRequest callback function. An indicator need not relate to a single call - it can show progress for a sequence of related calls.

Sometimes, it's a Popup element instead of a new element directly on the page. An increasingly popular idiom is a small opaque Popup on the corner of the page showing just a word or two.

For shorter delays, typical progress indicators include:

  • A small message like "Updating document".
  • An animated icon.

For longer delays, the following can be used:

  • A meter showing how much progress has been made.
  • An estimate of time remaining.
  • A sequence of messages indicating what's happening at present.
  • Content that's engaging but not directly related to the progress, such as Tip of the Day or a canned graphical depiction of system activity.

Of course, you can combine these approaches. Generally speaking, some form of unobtrusive animation is worthwhile in any Progress Indicator, because it at least tells the user something's happening, even if progress is temporarily stuck. In addition, longer delays should usually be completed with a visual effect such as One-Second Spotlight, since the user's focus has probably moved elsewhere by that stage.

Note that one form of indicator to avoid is changing the cursor. Many traditional GUIs switch over to a "rotating hourglass" or related icon during delays. That's probably inappropriate for Ajax, because it's something the actual browser software will does it too, e.g. while loading a new page, so it's likely to create confusion.

Visit this link for more information

Tags: ajax, progress indicator, ajax applications

Can't find what you're looking for? Try Google Search!
Google
 
Web eshwar123.blogspot.com

Comments on "AJAX Progress Indicator for server responses"