|
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.
Upcoming events
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 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.
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.
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.
Our mock-ups and prototypes sometimes include rich interactions based on AJAX techniques.
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 enables designers to build new 'widgets' - user interface components like buttons, fields, sliders, etc - and new pieces of functionality, like "drag-and-drop" capability.
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: Form-filling
Navigating complex hierarchies
Filtering and manipulating complex data
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?
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?
We apply similar questions to AJAX to cover other areas such as:
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.
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.
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.
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. |
|||||||||||||
|
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. 
We'd
love to hear your experiences with AJAX usability
When
producing a "highlights video" with Morae that includes a
head-and-shoulders video of the user, we suggest the following tips:
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.