Session:  “The Usability of AJAX: A Primer for Usability Professionals and First Hand Account”

Presenter: John Whalen, Ph.D., Human Factors International

What you need to know

AJAX = A (Asynchronous) + JA (JavaScript) + X (XMLHttpRequest)

In a nutshell: Updates web page content without full page refresh, enabling a richer UX

Useful AJAX sites

Paper Mountain (3 tiny demos)
http://ajaxpatterns.org
http://www.37signals.com
http://www.backpackit.com
Google Suggest
http://www.francisshanahan.com/zuggest.aspx
http://www.yahoo.com
http://www.netvibes.comhttp://www.goowy.com
http://www.kayak.com
http://ajaxian.com  http://www.techcrunch.com
http://www.trulia.com  
Microsoft Live Academic  
http://gmail.com
http://mail.yahoo.com
http://www.zimbra.com
http://spreadsheet.google.com

AJAX User-Centered Design Consulting

They just completed a consulting project, helping to make an AJAX app more usable. Client’s goal: Let’s replicate desktop experience with browser-based software

• Benefit: We can update software and data behind the scenes; client need not have tech savvy
• Challenges: Requires saving all the users work on the net, giving desktop-like experience in calculations and work saving/printing, and frequent changes in software management techniques

1. Biggest challenges are the ones you already know about:

• Navigation / Information Architecture
• Working naturally with user flow (jump among a set of spreadsheets)
• Dialog Box 101

2. Applications on the web break established conventions when more complex:

• How do I Save? Print? Share it?
• Is this a spreadsheet, or a form?
• Where’s my data? How GUI is it?

3. Hardest AJAX problems:

• Breaking conventions
• Having users recognize dynamic changes to the page (he doesn’t notice the error message that popped into the page)
• Watch for mixed user models (GUI/web)
• Knowing if user saw page changes

AJAX Patterns

There are no standards as yet, but there are programming patterns: chunks of code designed to be easily replicable

• Ruby on Rails, Dojo, Rico, SAJAX, JSON, Ajax Patterns.org

Recommendations (what AJAX does well)

1. Provide On-the-Spot Assistance

• Checking off to-do items (backpackit.com)
• Autosave (gmail.com)
• Product Details (Gap.com)

2. Give Form Results Faster

• Retrieve partial results when appropriate (kayak.com)
• Verify data on the fly (kayak.com)
• Complete form on the page (Yahoo! Patterns)

3. Anticipate Next Steps

• Loading maps (Google, Yahoo, Microsoft maps)

4. Show Transitions (clientsection.com)

• Ensure user attends page change (e.g., Persistent acknowledgement in Gmail)
• Ensure user knows what is actionable (as yet, no good standards on what can be acted on)

Cautions (what AJAX does poorly)

1. Studies confirm “change blindness”: very hard to notice in-line page changes

2. User needs help seeing what is actionable (much functionality is hidden, must be discovered)

3. Be careful not to mix metaphors/conventions:

• Web vs. PC GUI client
• Web 1.0 vs. Web 2.0

4. Avoid atypical (unexpected) interface options

• Drag / drop interface
• Unusual motion for appearance of content
• How should transitions be indicated
• Should users be allowed to move items around the page (e.g., drag & drop mail into folders)