This session isn't just about AJAX, it also applies to using DHTML to change pages — More appropriately: Non-Flash RIA's. Just like OO, design patterns can apply with usability too. UI design patters are starting to emerge.

Top AJAX Usability issues:

• Breaks the back-button
• Use fragments (#) to change URLs as actions are taken (See: Gmail url's changing while you navigate around your email)
• Use a library with history management
• Offer an undo option

"New-Fangled Web" – Brand new conventions

• It takes years for a nidea to become a convention
• Follow established design patterns: shift-select (traditionally found in lists) can be used for checkboxes and possibly elsewhere.
• Provide contextual guidance: use icons, hover elements, etc, to indicate in-place editing available.
• Provide a traditional alternative (in addition to neat things like sliders or date choosers, allow standard text input as well)

"Whats this thingamajig?" – use things people are familiar with.

• Users may struggle with: sliders,
• Provide a standard input in addition
• Use a large hit area

"Did that just work?"

• Give the user visual feedback
• When there's a wait (progress bars, spinner, etc)
• When something changes (can be too fast!)
• Judiciously use animation
• Add contrast, color, and highlighting
• The "yellow fade technique" – draw attention to changed information or messages, and then fade back to normal (I hear this should be a piece of cake with jQuery!)

Distratction vs. Frustration

• Don't distract the users focus with too much too fast
• Don't frustrate the user with slow response times
• Watch auto-suggest/type ahead delay
• Give generous delays on hover menus
• Optimize performance, load smart

It's not you, it's the site!

• Think out the interactions and test, test, test!
• Compensate for different environments (other browsers, resolutions, etc)
• Use a tried and tested framework
• If you can't do it right, don't do it! (Don't reinvent the wheel)

I'm not seeing it…

• AJAX may be heavily mouse-dependent and visual
• Non-standard controls aren't supported by assistive devices
• Screen readers can't tell when a page changes
• Use semantic markup with progressive enhancement
• Alternative content may be necessary
• Screen readers are getting better (W3C-ARIA)

Good, Better, Best

• Make it work without AJAX first
• Then add AJAX enhancements – unobtrusive design: add JS functionality with JS so that non-JS supporting browsers and devices still function
• have keyboard-navigable alternatives to rich controls
• keep mobile in mind!

Avoid AJAX as an afterthought

• Make rich interaction a key part of the design process
• Add it to solve problems, not just to add "sizzle"
• AJAX changes traditional design paradigms

Designing for Rich Interaction Applications vs. Sites Websites: The user's primary task is to move around an information space and read its content.

Applications: The user's primary task is to change … (She moved too fast through this slide and I couldn't get all of it…)

Great example: Flickr — browsing someone's photos acts like a website, managing/organizing your photos acts like an application Using AJAX to improve usability

• Eliminate circular flow
• Provide instant feedback for errors and validation
• Auto-save (sometimes — use drafts where appropriate. Examples: GMail, WordPress)
• Show contextual help/menus
• Streamline data entry (auto-suggest, type-ahead)
• Enable direct manipulation
• Look up the pattern!

More information:

• Rachel's AJAX Usability Bookmarks: http://del.icio.us/rmaxim/ajax-usability
• Techniques: http://dev2dev.bea.com/pub/a/2006/01/ajax-back-button.html?page=1
• Code libraries:
  • http://code.google.com/p/google-axsjax/
  • http://www.dojotoolkit.org
• Design Pattern Resources:
  • http://www.designinginterfaces.com
  • http://www.welie.com/patterns/
  • http://developer.yahoo.com/ypatterns/