Good AJAX: An Example

by Jakob Nielsen on December 17, 2007

Sidebar to Jakob Nielsen 's Alertbox, December 17, 2007 on "Web 2.0" .

A good example of using AJAX to create effective page-area updates is found on E-Trade's stock quote pages. Each page shows a chart of a stock's price over time. Users can change the time-interval's length (say, from three months to one year) by clicking simple links. Appropriately, such clicks update the chart, but not the rest of the page, which contains other information about the stock. This partial updating works because it appears right next to the click zone and is a clear consequence of the user's action.

Also, choosing a time interval for a stock chart is a simple command, both conceptually (what you get) and operationally (what you do — click the words representing the desired duration). In contrast, when testing investor-relations pages , we've seen individual investors have great difficulty manipulating more complex stock charts aimed at institutional investors (who use their own professional tools anyway). So, don't put a complicated UI on a website just because it's now possible. Simplicity still rules.

Interestingly, the same E-Trade screen also includes an example of bad RIA : overuse of "rich" UI in the slider used to specify the price at which the user should be sent an alert.

Screenshot from Etrade.com

Allowing users to ask to be notified is great: an example of request marketing .

But it would be much faster to specify the target price by typing the number into a plain text box than by dragging a slider. It takes a lot of fine manipulation to hit, say, $96. Remember that older users — who are among the richest investors — often have less steady hands and thus face accessibility problems when a UI requires accurate mousemanship.

The slider also doesn't allow the user to specify a target price outside its range. Finally, often it might be easier for users to request notification after the stock price moves by a certain percentage instead of having to compute what that amounts to in dollar terms. Saying "tell me if it drops 10%" would also be done more easily through a text box.

Graphical user interfaces usually have better usability, but that doesn't mean that they always have to employ highly graphical interaction techniques. Simpler GUI techniques — like text boxes and radio buttons — are often best.


Share this article: Twitter | LinkedIn | Google+ | Email