|
|
|
 |
|
A team at Macromedia developed Pet Market to serve as a sample
application for their MX product releases. While their ultimate
goal was to show developers how to build a rich internet application,
they also wanted to promote good usability techniques in their
user interface. They got a lot right, but not everything.
|
|
| What Works Well in Pet Market |
|
The One-Page Model. Pet Market demonstrates
many of the usability benefits from abandoning the page-browsing
interaction model as the basis for functionality-rich applications.
Page views are fine for reading articles and also work fairly
well for many other types of content-oriented applications, but
are not as good as a graphical user interface for supporting object-oriented
user interfaces to more advanced functionality. The biggest usability
win in Pet Market is the checkout process. Most current e-commerce
sites divide checkout across a series of individual pages that
make it hard for users to understand the entire process and even
harder to make changes to data entered on previous pages.
In contrast, the Pet Market checkout design integrates the various
steps into a single dialog where the user's progress is nicely
visualized by a simple animated seep as different sections of
the total form are opened or closed. Users get a single overview
of the entire process and clearly understand their progress. More
important, going back to change data in an earlier step doesn't
really require going "back" in the sense that's common
in web navigation. Instead, the user stays within the same context
and simply opens up the section that needs change. Outlining applied
to form-filling and transaction flow. Good.
Immediate feedback for the user's actions. Shipping charges
are a classic pitfall in e-commerce: users hate sites that obscure
the total amount they have to pay for their order. Pet Market
provides a simple choice of shipping method during the checkout
process and utilizes the active nature of the Flash application
to update the charge summary immediately when the user selects
a new shipping method. Immediate feedback is one of the most important
and well-established usability guidelines, and yet traditional
web pages often leave users hanging until the next page view before
they can judge the result of their actions (and those are the
good sites; poorly designed sites don't tell you at all).
The application does the computations. Pet Market also
provides immediate feedback on the estimated delivery date when
the user changes the preferred shipping method. Too many e-commerce
sites tell users the number of business days required for shipping
and then leave it up to the user to add up the dates to discover
when they will receive their purchase. Adding is one of the things
computers do considerably better than humans, so let's allocate
that job to the machines, taking advantage of the computational
power of the Flash application.
Animation to show relationships. Pet Market uses animated
transitions to enhance the user's feeling of context when moving
around the application. For example, when you click the "Fish"
button, it zooms out from the list of category buttons and grows
into a menu of fishes. Similarly, selecting a specific fish from
the list causes a product box to grow out from the element you
clicked. I am not sure that these transitions are necessary for
this simple interface, but for a more full-featured application
there are great benefits from visualizing the connection between
the "before" and the "after" state when something
complicated happens. A classic example is the way windows zoom
from icons on the Macintosh. You know why you got that window
after double-clicking an icon. In contrast, Windows just throws
up a window somewhere on the screen, which is particularly disorienting
for big-screen users who have many windows open.
Back button works. In my comments on designs implemented
in earlier generations of Flash, I have been highly critical of
the way they break the Back button in the browser. Past annoyances
make it that much sweeter to find that the Back button does work
in Pet Market. In fact, if you want just a single argument for
upgrading to Flash MX for your projects, Back-button support is
it. Back is the user's lifeline in any navigational user experience:
no matter how good your information architecture, and no matter
how well you visualize this structure in your user interface design,
people will make mistakes and go to places they don't want to
be. Back is undo for navigation and has to be available or users
will feel trapped. (Other undo features also increase usability,
such as the ability to edit previous steps in the checkout process
that I mentioned earlier.)
|
| |
| Features of Pet Market to Avoid |
|
In defense of the designers of Pet Market, I recognize
that they were only creating a demo application and did not have
the budget to handle all the design details that are necessary
to construct a real e-commerce site. "Give us a few millions
in venture capital, and we can definitely build out the design,"
I hear them say. Fair enough, but it's still my duty to point
out that Pet Market violates many of the guidelines for e-commerce
usability. If it were a real site, it wouldn't sell very many
pets without fixing these problems.
Twenty years' experience has taught us that exemplary applications
from a platform vendor have a disproportionate impact on designers
who emulate all aspects of the examples: both good and bad. When
the Macintosh shipped, designers were more likely to copy the
design of MacPaint (a live user interface) than follow the official
Human Interface Guidelines (a printed report).
To keep web developers from inadvertently replicating the weak
features of Pet Market, let me highlight its main usability problems:
|
·
|
Weak initial
homepage. Users are greeted by a big block of generic
marketese. Since web users are impatient, it is much better
to skip the "welcome" message and cut to the chase
and explain the site by featuring examples of real content
on the homepage. In this case, special offers, photos of interesting
pets, and a few articles or pet-related news would work well. |
|
·
|
Non-informative
product screens. There is a serious lack of content in
the product descriptions. People need more than a few lines
of text to commit to a major purchase. How much bigger is
a large koi than a medium one? More photos would also be good,
for example to show the differences between male and female
animals, as would the ability to enlarge the photos. (Flash-based
animated zooming would be neat, but hold off on rotation and
3D which is usually more confusing than photos from a few
alternate viewpoints.) |
|
·
|
History list.
It's a cute feature, but not very useful as implemented. The
small colored squares do not emit sufficient information scent
to allow users to remember their navigational history. Even
worse, real shoppers would probably spend most of their time
comparing alternative products within a given category (e.g.,
looking at ten different tropical fish) as opposed to bouncing
between categories, so all the squares would be the same color.
Relying on the tooltips to differentiate between the colored
squares or requiring users to click on the arrow button to
get the complete history isn't something web users expect
to do and isn't easily discoverable. A design with more screen
real estate at its disposal (for example a stock trading application)
might use visual miniatures with more information for each
of the past destinations (e.g., the logos of each stock considered),
and such a quick overview of the past could well be useful.
|
|
·
|
Don't drag.
Product screens offer the option to either click an "add
to cart" button or to drag the item to the cart. You
never want to offer users a choice of interaction techniques
for simple operations like this: the brainpower needed to
understand multiple options and pick the best one far outweighs
any possible benefit. Productivity applications where people
perform an operation hundreds of times a day benefit from
shortcuts and multiple interaction techniques; but keep e-commerce
designs simple. Now the Macromedia team might say they included
both choices to demonstrate the possibilities, but if Pet
Market were going live one of these options should be removed. |
|
·
|
Details matter.
Pet Market doesn't follow the guidelines for e-commerce usability
to the letter and here are two common ones that are especially
important to highlight:
|
·
|
The checkout
process uses a pop-up menu for users to enter the state
abbreviation for shipping addresses in the United States.
E-commerce guideline #178 recommends using a type-in
field, not a selection list, since typing two letters
is much faster than moving the hand to the mouse and
manipulating a scrolling menu. |
|
·
|
The menu
of shipping charges is not sorted according to criteria
of interest to users (cost or shipping delay). Linear
lists, such as menus, are much easier to comprehend
and operate when they are sorted according to a parameter
that users understand. |
|
|
| |
| Taking the Premise Seriously: Selling Pets on
the Web |
|
Until now, I have assumed that it would actually
make sense for an etailer to sell pets. In the real world, it
seems a stretch of the imagination to assume that very many people
would click to add a cute puppy to their shopping cart without
ever seeing or cuddling the creature.
If this had been a real e-commerce project, I would have advised
the venture capitalists to spend some money on field research
before they proceeded with funding a full-fledged online pet store.
Find out how people shop for pets in traditional pet stores and
other sales channels. Can we really sell dogs, or should we refocus
the company on exotic fish?
If it were decided to retain dogs and other bigger pets in the
product line, it would be time to experiment with alternative
interfaces to support customer needs. For example, the field research
might have discovered that shoppers would have a great interest
in seeing their specific pet. Such a finding could lead to a design
with a photo gallery of each pet in the current inventory.
We might also discover that customers want to observe the behavior
of their potential pet and not just look at a static photo. This
finding might cause us to add video to the design, either as a
live feed from the kennel or as pre-recorded clips. Incidentally,
video support is one of the features of Flash MX, and Pet Market
might be an application that would benefit from integrating this
feature closely with the main user experience. For other types
of applications, video might be a distraction: it's all a matter
of choosing the features that will support users' tasks, which
is why I would spend a few percent of the budget on field research
if Pet Market were to win VC funding.
|
| |
| Moving into the Future |
|
We are still at the very early stages of building
user-centered applications for the Internet. The web browser was
a great early tool and remains a decent user interface for reading
and browsing articles. The functionality-rich applications that
can be built in Flash MX are another great step, and can make
many new tasks easier to accomplish online. To achieve this vision,
it will be necessary to emphasize usability in the designs. The
ability to throw even more features at the user can easily result
in a confusing user experience unless developers remember the
basic rules: simplicity, consistency, and a focus on supporting
the users' key tasks. And, as always, remember to test your design
with real users.
|
| |
| Reference |
|
Jakob Nielsen, Rolf Molich, Carolyn Snyder, and
Susan Farrell:
E-Commerce
User Experience, report with 207 design guidelines from user
testing.
|
|
|
| Jakob Nielsen, Ph.D. is principal of Nielsen
Norman Group, a think tank focused on making technology more suited
for humans. His books include the best-selling Designing
Web Usability: The Practice of Simplicity, published in 21 languages,
and the new Homepage
Usability: 50 Websites Deconstructed. |
|
|
