Friday, January 04, 2008

Ajax and usability

Ajax is showing up more and more online. Not that it’s a new solution – it’s been around for years – but has become increasingly popular in online applications and websites.

What is AJAX? It stands for Asynchronous JavaScript and XHR (XMLHttpRequest). Translation? It updates web content in the page without a full page refresh. This is done by retrieving data from the server and displaying data only in a portion of the page instead of refreshing the entire page.

Example 1: Auto Save
The best example I can think of to share, given its popularity, is the autosave feature in Gmail. As you’re drafting an email, the email is autosaved into your draft folder, and the ‘save’ button appears deselected, letting you know that the system is saving for you. The page never reloads, yet the user sees a change in display on the page. That’s Ajax.

Example 2: Auto Suggest
Ever had a list of search terms auto-populate in a dropdown list as you’re typing in your keyword? Yahoo’s search engine does this currently. Ajax again.

Usability considerations
At the Usability Professional Associations’ DC conference in November, John Whalen from Human Factors International spoke about the usability of Ajax, and knowing when to use Ajax as a solution, and when not to. Like any solution, using Ajax gratuitously or incorrectly can decrease usability. I love kayak.com and find that they’re using Ajax really nicely. One exception is when the user changes the flight times filters and the page data refreshes (without reloading) with new data, but very little feedback is provided to the user that this has happened. The user has to look quickly because the visual cue indicating that the data is changing is very easy to miss, displaying for half a second. If the user’s looking elsewhere on the page, they may not realize that their flight options have changed."    (Continued via Forum One)    [Usability Resources]

Ajax Use In Kayak - Usability, User Interface Design

Ajax Use In Kayak

0 Comments:

Post a Comment

<< Home

<< Home
.