AJAX Usability Checklist (Free holiday bonus for our readers)

This Ajax Usability Checklist is a bonus guide that accompanies my AJAX Usability Seminar, I am offering it in the  form of this post as a bonus for readers- thanks for your support!

The Web is changing fast. New standards are emerging, new approaches to coding such as Scriptaculous, AJAX, Ruby, Flash/Flex, Silverlight and others are creating a leap-frog situation where many new websites, web apps and portals are implementing next year's User Interface elements.

Yet, when it comes to implementing the new interface techniques AJAX offers, we need to be mindful of how AJAX can improve the specifics of the user experience.

Two simple guidelines for AJAX Usability:

1)    If the user has to ”play” with the interface control too much it is probably used inappropriately.

2)    If the interface control does not follow the user’s task, it is probably used gratuitously.

1. When and where to use AJAX

    a) When presenting complex features or functionality

    b) When building a data set for the user

    c) When presenting depth of information

    d) To correct or intelligently help the user

a) When presenting complex features or functionality

EXAMPLE: Bluenile.com offers a complex ring configurator with advanced filtering and sorting functionality.

An AJAX interface allows users to hover over ring specifications.

Sliders help narrow the selection.

Note: Top to bottom sliders are novel and should be tested since they are less familiar UI elements on the Web.

b) When building a data set for the user…

EXAMPLE: Google Analytics offers Save to Dashboard and hidden report control features to give users more control over the analytics reporting experience.

c) When presenting depth of information

EXAMPLE: Finance.google.com offers pull sliders and instant click in their finance application to give users immediate data overlay feedback.

The end result is a quicker, more robust sense of interactivity with the market data.

d) To correct or intelligently help the user

EXAMPLE: Kayak.com uses a “just in time” help system to walk uses through AJAX filter features. The format is a contextual dynamic help system that utilizes a wizard metaphor (next/back).

This is a best practice and should be modeled. 

2.    Key Lessons: Google style AJAX; Yahoo! Style AJAX

• Create transparency with complex functionality
• Reinvent old experiences with AJAX elegance
• Leapfrog the competition
• Get known by your user experience
• Improve performance
• Revitalize the presentation layer

Create transparency with complex functionality
Example: Yahoo! expanded the “social web” with a portal social networking approach. Yahoo!’s MyWeb for example, allows users to save search results, as well as share and discover bookmarks and interests. Yahoo! extends the search experience by adding social networking and social browsing with simple AJAX interactions and features.

Reinvent old experiences with AJAX elegance
Example: Google Maps redefined the mapping user experience with AJAX. Characteristics included full screen, direct manipulation maps, with the ability to search listing or make a VoIP call from inside a floating dialog.

Leapfrog the competition
Example: Google Docs has entered a new category of software as live service competing directly with Microsoft. Zoho.com has taken Google Docs a step further and is offering a full AJAX suite of productivity applications online.

Get known by your user experience
Example: Yahoo! assumed industry leadership in photo sharing with its Flickr acquisition and is now a leader in AJAX user interface best practice.  Flickr took the lead as a Web 2.0 best practice example (though Bubbleshare.com has a better experience it was not first to market).

Improve performance
Example: Google’s Gmail improved the email user experience by creating an AJAX friendly email client. User experience improvements with AJAX included integrated presence (IM), threaded conversations and search among others.

Revitalize the presentation layer
Example: Yahoo!’s email client made email and junk mail management easier by introducing desktop-like functionality with its new release of Yahoo! Mail. Yahoo! Travel has also revitalized travel planning with its AJAX powered social networking Trip Planner site.

3.    How to design for progressive disclosure* contexts using AJAX.

a) Extend discoverability
b) Provide dynamic “smart” help
c) Give the user less “drill down”,  more shallow navigation
d) Show related details or content

*Progressive disclosure is an interaction design technique that sequences information and actions across several screens in order to reduce feelings of overwhelm for the user. By disclosing information progressively, you reveal only the essentials and help the user manage the complexity of feature-rich sites or applications.

a) Extend discoverability >> make it ease for users to find stuff.

 

EXAMPLE: tripadvisor.com gives users a progressive disclosure of links contained in a category with an opaque “click to expand” window. The interface feature appears only once and gives way to an ‘accordion’ menu of the other 4 categories.

This is a novel, but potentially valuable device to orient users to further discover the contents of a page section.

 

 

b) Provide dynamic “smart” help >> give users better contextual help that provides in-line tutorial type information.

EXAMPLE: Kayak.com uses a “just in time” help system to walk users through AJAX filter features. The format is a contextual dynamic help system that utilizes a wizard metaphor (next/back).

This is a best practice and should be modeled.

c) Give the user less “drill down”, more shallow navigation >> make it easier to get to and from search results and the home page.

EXAMPLE: Patagonia.com lets users view contents of a product from the search results page in an AJAX dialog.

The move to viewing product details and acting from a pop-up window is not new, it is just back from having disappeared with html pop-ups a few years ago.

Extending the pop-up, AJAX offers more direct features from the page without page load/reload such as favorite, add to cart etc.

d) Show related details or content >> give users “just in time” content, controls and features .

EXAMPLE: CNN.com offers an accordion style menu selection with in-line tabs that users can change views (without page reload).

Note: Page tabs should not require page reloading. For a bad example see priceline.com search results “Sort by” tabs (pages reload and reposition users on the page).

4.    Five questions you should ask when considering AJAX

Question 1: Will using AJAX greatly improve the user experience with my site or web application?

Do not use AJAX if it does not enhance a strategic aspect of your user experience.  AJAX pitfalls (browser incompatibility) can create technical and usability headaches for your JavaScript developers and your users. Be sure to test, refine code and re-test. Just because the AJAX element works on your browser, does not necessarily mean it will work on your users.

Question 2: What is the user experience strategy that compliments the AJAX deployment?

AJAX can be used to add sizzle but you should think of AJAX as a collective strategy used to improve a users ability to complete his or her tasks more effectively. AJAX is not the answer to every design problem and often times is inappropriate or irrelevant.

The excitement in a design is on “how can this improve the user’s task?” not “how can we Ajaxify this page to make it cool?”

Question 3: Will JavaScript gracefully degrade in browsers and is there an alternate if users browsers get stuck?

Support graceful degradation using JavaScript detect scripts and support JavaScript-free and mobile friendly versions. Try to keep AJAX to user interface elements that add value throughout the experience, but do not primarily require the technology to get through a website for example.

Question 4: Is there a real need to use AJAX or is it “just because”?

The technical pitfalls associated with AJAX require a disciplined use of JavaScript and AJAX. Think strategically about how AJAX can help the user on this page or that page. Do not take AJAX for granted as a user interface technique!

Assume users will not be familiar with the interface tricks AJAX offers, instead try to make everything transparent. For example, a plus button that opens up should have a “Details…” link beside it.

Question 5: Are you inventing completely new or reinventing problematic designs and how will you know if they work?

Good AJAX usability comes from testing your design with your target audience. Users rarely drink the cool-aid of new “whiz-bang” technologies or interface enhancements.

AJAX should be used in context of a users task and it should help remove the “work” traditionally associated with a browser fetching pages and handshaking with a database.

AJAX usability means that a user can do something on the screen that changes the display without waiting, with minimal effort and with a responsive and “just in time” interface.

Download this AJAX Usability Checklist:

Download ajax_usability_checklist_bonus_guide.pdf

Subscribe to Experience Dynamics usability Research Newsletter to be informed of seminars and research alerts.

Note: This AJAX Usability Checklist accompanies the AJAX Usability seminar with Frank Spillers, MS. Please refer to that presentation and recording for additional examples, guidelines and for more context on designing for AJAX Usability.

Best Wishes,
Frank Spillers

 

 

Comments

[David Hamill]

I've seen that Blue Nile thing used as an example of usability lots of times. Everyone who I've ever watched trying to use it doesn't have a clue how it works.

[Frank]

There's a CSS bug in Firefox we are trying to figure out. My blog look and feel was recently updated (this is a custom style sheet running in Typepad).

It works in IE though! ;-)

[Deborah]

Thanks for the guide, but the references to the screenshot examples, are not appearing on the page. They do appear in the PDF file.