Check todays hot topics or new
products
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.
The key challenge in designing part-page updates is making sure
people see them.
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:
