Enhance Your AJAX Applications with Visual Cues
Challenges of the AJAX User Interface
The traditional user interaction in classic web applications was well understood: You click, the browser freezes (apart from the rotating wheel on some edge of the window), and then the new content appears. AJAX technologies (particularly the background HTTP requests and the dynamic changes to HTML markup) enable completely different sets of user interfaces that aren’t yet common enough to be well understood by users. Therefore, it’s imperative that your AJAX application clearly indicates what’s going on, what has been changed, and when the user has to wait, giving the user the ability to cancel any ongoing action.
For example, when the user is editing photo captions in the online version of Google’s Picasa, the captions are saved in the background as soon as the user leaves the field. When the save process begins, that fact is clearly indicated by a status message next to the caption. Likewise, when the save process ends (successfully or not), the "saving" status is replaced by the end result.
In this article, you’ll learn how to implement several common visual cues, including the following:
- A modal dialog telling the user that a transaction is proceeding and that she should wait or cancel the transaction
- The text ... loading ... in small letters, placed close to the element that triggered a background request
- Background animation to indicate which part of the HTML markup has been changed as a result of a background web request