CFUnited: Rachel Lehman — AJAX Usability
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:
- Design Pattern Resources:
in CFUnited 2008-06-19 11:09
