Originally published by Digital Web Magazine: Usability for rich internet applications
After struggling for years to design Internet applications around the limitations of HTML, I have been very excited by the recent release of a range of Internet applications with increased richness and interactivity.
Rich Internet applications (RIAs) can provide opportunities to design much better user experiences. They can be faster, more engaging and much more usable. However, this improvement is not without its downside—RIAs are much more difficult to design than the previous generation of page-based applications. The richer interaction requires a better understanding of users and of human-computer interaction (HCI). Although there is a lot of HCI material and research available, it can be difficult to determine how it applies to this new environment.
In this article, I provide some practical tips for designing usable RIAs, based on fundamental principles of HCI.
What’s an RIA?
According to the Wikipedia, RIAs are “a cross between Web applications and traditional desktop applications, transferring some of the processing to the client end.”
The key difference between RIAs and other Internet applications is the amount of interaction in the interface. In a traditional page-based Internet application, interaction is limited to a small set of standard controls such as checkboxes, radio buttons, form fields and buttons. This severely limits our ability to create usable and engaging applications, and most Internet applications have been clumsier and more difficult to use than their desktop counterparts. An RIA can use a wider (and hopefully better) range of controls to improve users’ interaction with the interface, allowing efficient interactions, better error management, feedback and overall user experience.
Some of my favorite sites with RIA-style interfaces include:
Many are built with Flash or using Ajax techniques.
The key features of these applications include:
- The user interacts directly with page elements (inline editing, drag-and-drop, panning a map)
- Part of a page is updated (instead of reloading)
- More detailed information is available on the same page (instead of on a new page)
- Feedback, confirmation and error messages are provided within the page
These rich features are also those that provide the most challenge for designers who wish to ensure applications are highly usable.
Challenge #1: Deciding How Much Richness to Add
When designing RIAs, it is tempting to design many new features that add a lot of richness. Don’t give in to this temptation! Regular folks who have been using the Internet for a number of years are comfortable with the existing page-based model and limited interactivity, as clumsy as it may appear to designers and developers. It takes time for people to adapt to new approaches. It will be some time before conventions emerge and users are comfortable with the new generation of applications. Go slowly, adding richness where it significantly improves usability, and relying on traditional models where these better suit your user group.
Good user research (and a focus on users throughout the design process) and regular usability testing will help you determine how much richness is appropriate at a point in time.
Challenge #2: Interactive Page Elements
One way to add richness to your application is to allow users to directly interact with page elements: editing text inline, dragging and dropping graphic elements, panning a map.
A primary challenge is to communicate what can be done with page elements and how to use new controls. People must be able to identify that a control exists and easily determine how to use it.
In The Design of Everyday Things, Don Norman popularized the idea of perceived affordance (the perceived and actual properties of a thing that determine just how the thing could possibly be used). For example, the original 3D button has great perceived affordance. By highlighting the top and shadowing the bottom, people perceive it as popping out of the screen and easily understand that it can be pushed by clicking.
One way is to use controls that mimic things people are familiar with from the physical world, such as the slider on Fidelity Labs Mortgage Search.
Another is to change the appearance of the element or show the controls when the mouse hovers over it, showing what can be done without cluttering the interface. Backpack uses this to indicate elements that can be edited or deleted.
In addition to ensuring your controls have good perceived affordance, you should:
- Remember how valuable a demonstration can be. In the initial stages of a new interface, use a small in-page tutorial video to show the interaction.
- Ensure controls and interaction models are used consistently throughout the interface and are similar to other sites that your users visit. This helps people easily learn what to do and build on previous experiences.
Challenge #3: Refreshing Part of the Page
There is significant advantage in updating part of the page instead of refreshing it or opening a new page. It allows us to create faster applications, improve feedback to the user and manage errors better. Error management and feedback are critical to improving usability, but it’s particularly difficult to do with the page-based model. Users have become accustomed to taking an action (such as clicking a link), waiting for the action to complete, and checking the result of the action.
The key challenge in designing part-page updates is making sure people see them. We can use what we know about visual attention and visual processing to ensure people will see that part of the page has been updated:
- Visual attention is attracted by movement and high color contrast (that’s why bright, animated banner ads are so distracting—our eyes are constantly pulled toward them). We can use this to our advantage and draw the eye to the updated part of the page.
- When we take an action such as clicking a button, our eyes remain fixed on that point for a short time, then release to look somewhere else. By making sure the change occurs quickly and as close as possible to where they are looking, we can ensure the eye is drawn to the appropriate place.
- Visual attention can only be focused on one thing at a time. Make one update at a time, and don’t use high-contrast, moving images elsewhere on the page. 37 Signals were one of the first to do this, popularizing the yellow fade technique. Odeo provides effective feedback by using color, movement and placing it right where the user is looking:
Challenge #4: Breaking the Page Model
As we interact with the world, we develop a mental model of how things work. Most users have developed a mental model of the Web based on pages—every click takes you to a new page. Clicking on the back button takes you to the previous page. This is a strong mental model, and is reasonably accurate for the majority of content-rich sites. Users will continue to apply their page-based mental model to RIAs unless they can clearly identify that the RIA uses a different model.
The first part of this challenge is to think very hard about where to use individual pages and where to use in-page richness. Think about the entire interaction of your application and break it up appropriately. Don’t try to put everything into one “page” just because you can.
One factor is the likely use of the back button. Consider when people may need to go “back”—this will give you clues about where to use pages. Don’t disable the back button, reducing users’ control of their situation.
Another challenge is how to visually express the difference between pages and in-page changes. You may need to design different visual navigation models so people can identify when they are getting a new page. It is likely that some new navigation methods will emerge over time.
Google Reader manages pages very poorly. The buttons in its traditional top navigation bar (Home, Your Subscriptions, etc.) imply navigation to individual pages, but actually change the content in the body of the page. When I first used Google Reader, I frequently tried to use the back button to return to the home page but was thrown right out to the last page I visited before reaching Google Reader. This was so frustrating, I stopped using it.
In contrast, Yahoo! News manages pages and in-page updates well. It has traditional top tabbed navigation to individual pages and in-page panels that change based on the news source: