The Insighter

July 2006

View all articles on our new site

Neo Insight's e-newsletter on Usability topics and techniques.
We invite you to subscribe to our monthly e-newsletter.

Our next workshop

August 17, 2006 Usability challenges of new Web technologies – One day Workshop. Save $100 if you act now – Register by August 4th.
September 21, 2006
Designing usable Web-based applications – One day Workshop
Save $100 if you act now – Register by Sept. 8th.

Upcoming events

October 2-4 AJAXWorld Conference and Expo, Santa Clara, California.
October 9-12, 2006 UIE User Interface 11 conference in Cambridge, Mass.
November 14, 2006 World Usability Day . See how to get involved at "Make Yourself Useful".

Note about this article

Based on interest generated by our "Usability challenges of new Web technologies" course, we've summarized one set of usability issues here. There are so many implications of AJAX, we found it hard cutting down the discussion even to this length. Hope you enjoy the longer read - we'd be delighted to hear your comments.

AJAX and usability

AJAX is one of a number of recent approaches often bundled under the term "Web 2.0". We believe some of these will have a big impact on usability practices. Here, we'll outline how we're changing the way we go about our concept generation, design and evaluation to take advantage of AJAX.

What is AJAX?

AJAX - which stands for Asynchronous JavaScript And XML - allows developers to create user interaction that breaks with the traditional Web hypertext/link model. Just as images can be swapped for rollovers without reloading the entire page, with AJAX techniques data can be sent or retrieved from a server, and parts of a page updated without reloading the whole page.

The best-known example of AJAX in use is Google Maps, but others, like Google Suggest, tell us more about the potential, in that there's more going on behind the scenes. GMail, Yahoo! Mail, and Microsoft's Live suite are recent full-blown applications that use AJAX to provide some of the immediacy and interactivity that we get from desktop applications.

AJAX "is about usability?"

Because of AJAX's potential impact on Web user interfaces, it has been suggested that "AJAX is about usability."

Sorry. AJAX is a collection of technologies, open to uses and abuses like all technologies. AJAX does offer real opportunities for improved usability, but creates some challenges that designers need to understand. Some of the applications listed on Dan Grossman's "Top 10 AJAX Applications" highlight how AJAX interfaces can still be frustrating and confusing.

In our layered model, AJAX techniques mainly contribute to "Interaction Mechanisms". Many usability issues are at other layers, concerned with customer experience, goals and tasks, or with overall architecture and functionality. In the end, it's the understanding of the whole range of user needs - from high-level goals to cognition and perception - that determines the usability of a Web site or application.

So let's look at some principles that guide us in the use of AJAX for concept generation, user interface design, and usability evaluation.


AJAX and concept generation

Our mock-ups and prototypes sometimes include rich interactions based on AJAX techniques.

When we produce concepts for land-use decision making and location-based interfaces we find that map-based applications are particularly suitable for the kind of rich interaction that AJAX can provide.

As in the example shown here, AJAX lets us mix forms-based interfaces and text input with images and physical interaction such as panning and zooming.

One discipline we apply in concept design is not to get carried away with the potential of a technology like AJAX, but to balance innovative ideas with pragmatic user needs, and to select interaction mechanisms most appropriate to the users' tasks.

AJAX and user interface design

AJAX enables designers to build new 'widgets' - user interface components like buttons, fields, sliders, etc - and new pieces of functionality, like "drag-and-drop" capability.

View our 30-second Flash movie (opens in a new window).

When designing new user interface widgets, some principles need to be applied. Users must be able to:

  • Anticipate - know what the widget will do
  • Appreciate - know how to interact with it
  • Monitor - understand any changes during use (e.g. slider value updating)
  • Evaluate - understand what has changed after its use

We applied these principles in refining a database visualization user interface for a client. This video shows one of the more complex AJAX interaction widgets, which allows users to reorganise a database report by manipulating the rows and columns.

AJAX also allows interaction, data handling and calculation to take place locally, so user interfaces can respond more quickly to certain types of interaction. For example, when a user enters a post-code or zip code in a form field, the City, Country and, in some cases, even the Street name can be automatically filled, saving the user time and effort, reducing errors, as well as providing feedback that the data have been entered correctly.

In user interface design, we have found that AJAX can have an impact in areas like:

  • Preventing data entry errors or catching errors early
  • Showing, hiding, and updating dependent fields or sections
  • Pre-filling data and auto-completing fields
  • Allowing users to continue working while server validation or communication takes place

Navigating complex hierarchies

  • Preventing waiting for server and network on every click
  • Preventing excessive local data loading and computation
  • Pre-loading parts of a large, complex hierarchy
  • Performing navigation locally

Filtering and manipulating complex data

  • Pre-loading data sets
  • Filtering, sorting by field, sorting by multiple fields, toggling settings on and off, etc
  • Manipulating highly interactive data locally instead of using server calls

AJAX and usability evaluation

From evaluating and testing a number of applications employing AJAX, we know that there are often many opportunities for improving usability. Fortunately, the issues are well understood. Viewed from this perspective, AJAX simply requires a more comprehensive and rigorous application of known usability principles and techniques than the Web has typically demanded.

In evaluating user interfaces, there are basic questions that need to be asked of any interaction - whether in a desktop application or an AJAX interaction. We use a number of lists of questions, or checklists, for different aspects of usability evaluation. The following short list shows how we would apply some typical questions to any AJAX 'widget':

AJAX Usability evaluation checklist - Are AJAX widgets usable?

  • Is it obvious which objects are "live" and which are not?
  • Is the purpose of Ajax widgets self-evident before use?
  • Is it evident how to use an Ajax widget before actually using it?
  • Can actions performed using an Ajax widget be "undone"?
  • Is feedback provided during use (e.g. legal drag-and-drop areas)?
  • Do Ajax widgets show as unavailable (e.g. greyed out) when appropriate?
  • Are users informed when server communication takes place?
  • Can users understand why server communication is taking place?

But AJAX also requires some new evaluation questions. The basis of AJAX is asynchronous, 'behind the scenes' communication. This can be seen as freeing designers from the tyranny of the browser and the html/link model. But with this freedom comes responsibility. Designers must explicitly design and implement browser functionality that users often take for granted. So we must ask questions about how this browser functionality is being supported.

AJAX Usability evaluation checklist - How is browser functionality supported?

  • Do the browser "Back" and "Forward" buttons work as users expect them to?
  • Can users create bookmarks?
  • Can users save the current page and state URL, either to add to their browser "favourites" list or send to friends and colleagues by e-mail?
  • Does the "Refresh" button work - does it refresh the current state or re-initialize the application?
  • Can users search for text on a page using "find"?

We apply similar questions to AJAX to cover other areas such as:

  • How does local AJAX processing affect performance, response times, etc?
  • How does network performance affect AJAX usability?
  • Are AJAX transactions secure, reliable, and able to handle multiple users simultaneously?
  • Do AJAX interactions have accessible equivalents?
  • Can AJAX content be seen by search engines and refer users to a page?
  • How does use of AJAX affect the ability to collect meaningful site statistics?

AJAX and usability - the prognosis

AJAX is here to stay. It's already mainstream, adopted by major players to provide desktop-like functionality and responsiveness to Web applications and services. It serves Web designers' needs to align a Web site with users' goals more effectively and efficiently. AJAX continues the trend away from page visits and a database-like query/response interaction style, towards 'direct manipulation' - allowing users to view and act directly on objects of interest to them. It frees developers from many traditional Web constraints, but demands additional careful design, focusing especially on the details of interaction.

We believe that we will see more AJAX user interface blunders in the short term, as designers come to terms with aspects of user interaction they have not been used to dealing with. Constructive open communities and resources such as AJAX Patterns and the Yahoo! User Interface Library will help learning take place more quickly. These initiatives must develop and implement good practices for AJAX techniques. They must tackle not only technical aspects, but also the human aspects of interaction, from high level goals and tasks, to the detail of sensory-motor factors.

We'd love to hear your experiences with AJAX usability.

Save $100 on our August workshop!
The deadline for early registration in our Usability challenges of new Web technologies workshop is August 4th. Early registrants save $100. There are even more savings for group bookings. Come join us. The workshop takes place on August 17.

Morae tips - Ensure eye movements look "natural" in the user video

You can have a real impact when you show your managers, development team or funders short "highlights videos" of real users struggling with a task on a Web site or application.

When producing a "highlights video" with Morae that includes a head-and-shoulders video of the user, we suggest the following tips:

Firstly, record the user video with "Mirror Horizontal" selected. In Morae Recorder's "Record" menu, select "Settings…", then select the "Camera" tab and press the "Camera Properties" button.

Secondly, when editing the highlights video with Morae Manager, place the "picture in picture" video of the user in the same location as the original camera position.

If you follow these tips, the user's eye-gaze will be directed towards the action on-screen. This provides for a very natural viewing experience, allowing viewers to integrate the user's behaviour and emotional responses with the user interface events.

Quote of the month

"As their usability approach matures, organizations typically progress through the same sequence of stages, from initial hostility to widespread reliance on user research."

Jakob Nielsen, Usability Guru

If you have any comments on The Insighter, or ideas on usability topics you'd like to hear about, send us an email with your comments.

We invite everyone to subscribe to the Insighter, our monthly e-newsletter.

If you wish to unsubscribe, just send us an unsubscribe email.

  Home   About Us   Services   Case Studies   Training   Teamworks