E-Commerce User Experience
E-Commerce User Experience
USER EXPERIENCE
Category
Pages
“ Good sites
sites show clearly
clearly organized
organized,, representati
representative
ve
merchandise starting
starting right on the homepage.”
Jakob Nielsen
Carolyn Snyder
Rolf Molich
Susan Farrell
Executive Summary
Category pages are those mid-level pages in an e-commerce website that help
customers find the product listing pages — and thus, the products they want to
buy.
buy. Category pages are critical-path elements in e-commerce transactions.
Inability to find an item was the most common reason for task failure in our study,
accounting for 27% of sales catastrophes in our study. A “sales catastrophe” is an
issue that was sufficiently important either to prevent a sale or to discourage the
t he
customer from returning to the site.
Availability 6% Pricing 5%
Shipping & Tax
Tax 7%
Delivery 5%
Personal Information 4%
Technical
Technical Problem 9%
Registration 8%
Checkout 10%
Add to Cart 6%
Here are our most important findings about what works — and doesn’t work —
on category pages:
• Home pages. In one sense, a home page is a special type of category page.
The home page must make it clear to users what products they can buy from
the site. On a few sites we tested, users couldn’t tell what the site sold even
after exploring it for several minutes.
• Classification. Classification is vital: Navigational links work better when
users grasp how the site’s offerings are organized. A good category page
uses a classification scheme that users understand. Links should be
sufficiently descriptive so that users can correctly choose which one leads to
their goal. On some sites, it’s necessary to provide multiple classifications
and cross-references.
• Product listing pages. Category pages must deliver usable lists of product
pages. If customers know what they’re
t hey’re looking for, they should be able to
recognize the product when they find it from the text or graphics on its
product listing page. If customers aren’t sure of what they want, the product
list should supply enough information for them to decide which items to look
at more closely.
closely.
• Winnowing tools. Originally,
Originally, “to winnow” meant to separate the wheat from
the chaff. On the Web, winnowing tools allow customers to choose specific
filters to sift through a large number of products to locate the ones they are
looking for. Some of our test sites provided page after page of product listings
with no way to further reduce the number of choices. Few users looked past
the second page. Several of our test sites provided winnowing tools, and we
observed that a winnowing tool can be quite helpful — if it works well.
• Comparison tools. If the product selection is complex, the site should provide
a means for the customer to compare similar items. As with winnowing, the
selection criteria should be user-defined.
Availability 6% Pricing 5%
Shipping & Tax
Tax 7%
Delivery 5%
Personal Information 4%
Technical
Technical Problem 9%
Registration 8%
Checkout 10%
Add to Cart 6%
Here are our most important findings about what works — and doesn’t work —
on category pages:
• Home pages. In one sense, a home page is a special type of category page.
The home page must make it clear to users what products they can buy from
the site. On a few sites we tested, users couldn’t tell what the site sold even
after exploring it for several minutes.
• Classification. Classification is vital: Navigational links work better when
users grasp how the site’s offerings are organized. A good category page
uses a classification scheme that users understand. Links should be
sufficiently descriptive so that users can correctly choose which one leads to
their goal. On some sites, it’s necessary to provide multiple classifications
and cross-references.
• Product listing pages. Category pages must deliver usable lists of product
pages. If customers know what they’re
t hey’re looking for, they should be able to
recognize the product when they find it from the text or graphics on its
product listing page. If customers aren’t sure of what they want, the product
list should supply enough information for them to decide which items to look
at more closely.
closely.
• Winnowing tools. Originally,
Originally, “to winnow” meant to separate the wheat from
the chaff. On the Web, winnowing tools allow customers to choose specific
filters to sift through a large number of products to locate the ones they are
looking for. Some of our test sites provided page after page of product listings
with no way to further reduce the number of choices. Few users looked past
the second page. Several of our test sites provided winnowing tools, and we
observed that a winnowing tool can be quite helpful — if it works well.
• Comparison tools. If the product selection is complex, the site should provide
a means for the customer to compare similar items. As with winnowing, the
selection criteria should be user-defined.
Sears’ home page obscured the fact that they sell primarily tools,
appliances, and replacement parts online, rather than all the
merchandise offered in their brick-and-mortar stores. CP3
In contrast, it was harder for users to get started on sites where they had to
navigate into the catalog (or store) to begin shopping. Compare SmarterKids’
start-from-the-home-page approach to the Gevalia home page, where the user
must explicitly enter the catalog. On Gevalia, users took significantly longer just
to find the link to the catalog so they could start shopping.
According to users, Reel’s home page had too much verbiage and not
enough videos. CP12
In sharp contrast, Boo made it perfectly clear what its site was all about. Right on
the home page it says, “sports and streetwear on the net.” Our users didn’t have
any trouble recognizing that Boo sells clothing.
Boo had an interesting approach to the product hierarchy/screen display trade-off.
Although Boo’s high-level menus didn’t reveal the subcategories, submenus
popped up when the user moved the mouse over the main menu categories. This
progressive disclosure didn’t work perfectly, but users said they liked it.
Classification Schemes
The best way to classify merchandise depends on the subject matter of the site
— shopping for tools by brand name makes sense, whereas shopping for flowers
by brand name is less meaningful. Effective classification is difficult, so it’s not
surprising that we found problems related to classification on all of the sites we
tested.
Choose classifications that are useful to your customers.
In general, the flower sites (Iflorist and 1800flowers) and toy sites (eToys and
SmarterKids) used classifications that were meaningful to our users. But on
many of the other sites we tested, users had problems because the classifications
were not clear to them. On Furniture, users had to start by picking a room, such
as Dining Room. Then the subsequent page let users pick from a list of pieces for
that room, for example.
On Wal-Mart, users found car seats under both Car Seats and Travel,
but not under Automotive. CP17
Similarly, some users (including Americans) had difficulty with the difference
between Wal-Mart’s Housewares and Appliances categories. They mistakenly
went to Housewares first when looking for a toaster. Housewares contained dishes
and non-electric kitchen tools — but no cross links to appliances.
Wal-Mart does cross-reference. It just doesn’t cross-reference enough. Users who
looked in the Baby Shop were able to find car seats from either the Car Seats link
or the Travel link. Most users chose Car Seats, but one user found an infant seat
through Travel. Adding a link to Car Seats from the Automotive department and
adding a link to Toasters from the Housewares department would have helped our
users find these items.
Classify items consistently.
Some sites didn’t follow their own classification schemes:
• One user couldn’t find Doctor Zhivago in Reel’s list of Romantic Dramas,
even though the site classified this movie as both a romance and a drama.
• Furniture returned up to seven wine racks (the exact number varied from day to
day) when users searched for “wine rack.” But other users only saw one wine
rack when they selected the “Wine Rack” option on the Kitchen page. It is
unclear how one would locate these other wine racks without using site’s search
engine. (See our Search report for information about improving search results.)
The first page of Math products for 4th– 6th graders on SmarterKids: Most
users didn’t look past the second or third page of product listings. CP18
There are actually 37 chairs on this page, but some users scrolled
only far enough to see the first few. CP19
Use download time to determine the number of products per page.
There is no ideal number of products that should go on each page — it depends on
the product and the amount of information you need to provide with each item. As
described above, SmarterKids and Furniture used quite different approaches, but
both page designs seemed useful, given the type of merchandise.
• For tools, the user specified price range, Required — It’s the
brand name, or other factors, such as voltage. only way to navigate
When the user clicked Search, the site returned to the product pages.
the list of products that met the criteria.
• For microwaves, the user specified price range, Required — It’s the
color, brand, size, and several other factors. With only way to navigate
each choice, the site dynamically updated the to the product pages.
number of matching products. The user clicked
View List to see the list.
Disney The Gift Finder let the user specify the Disney Optional
character and type of product (clothing, toy, etc.).
Peet’s The Taste Guide asked five questions about the Optional
user’s coffee-drinking behavior and preferences
and then returned a list of suggested coffees.
This winnowing page on Sears worked well except for the radio
buttons, which were a little confusing. CP26
All the users who got to this point did succeed in finding a suitable drill. But the
sizes and voltages were confusing — users had to study those carefully.
Microwaves on Sears
Sears had a different winnowing feature for microwaves. Unlike the method for
finding tools, which required the user to click Search before the page reloaded,
the microwave page updated dynamically as soon as the user specified each
criterion, such as size or color.
In theory, this dynamic approach is more sophisticated and efficient (because it
omits one click). In practice, it was quite confusing for about half of the users
who tried it, because they didn’t understand why the page kept changing.
Our users couldn’t figure out how to use the Furniture Finder … and
neither could we. CP28
It seemed to be buggy, sometimes simply reloading the same page. With only one
exception, neither we nor our users were able to use it successfully.
The regular interface on Furniture was a winnowing tool in and of itself. But it
also had some problems. The user had to select a furniture piece, style, finish,
and price range before the website would deliver a search results page. Users
had no way of knowing whether their criteria would yield 100 pieces or none.
It was hard to adjust the criteria to get a reasonable set of furniture to look at.
Worse, the style names, like Traditional and Country, weren’t clear to the users.
On Sears, the user could select as many as four drills by checking the
Compare box. The resulting page showed the drills side by side. The
type and format of the information for each drill varied, however, making
direct comparisons more difficult than they should have been. CP34
This method of comparison worked reasonably well. Users understood the
mechanics and liked seeing the comparison information. But it was still difficult
to compare products directly, because each drill showed different information
listed in a different format. Worse, users had to pogo-stick down a level each time
they wanted to read details for a particular drill.
The “add to list” approach confused and frustrated our users. They
wanted all the microwaves to fit on one screen without scrolling. And
they strongly objected when the image of the microwave appeared in
the wrong color. CP35
From the list, users could click Add to List for microwaves they were interested
in. Clicking the Compare button brought up a side-by-side list. Although all users
who tested this feature succeeded, it was more confusing and less easy to learn
than the comparison feature for drills.
Conclusion
Users can’t buy products that they can’t find. Along with a good search facility,
category pages are essential to helping users locate the products they want. Good
sites show clearly organized, representative merchandise starting right on the
home page. As e-commerce sites expand their offerings, they often expose
weaknesses in their category pages. When the available selection within any
category becomes too large for the customer to see all the items quickly,
winnowing tools become important. Good tools help the customer to eliminate
less interesting merchandise and to compare features among the few items most
similar to their purchase criteria. Providing such tools is a key strategy for
improving the customer experience and increasing sales.
The E-Commerce User Experience reports are for sale separately or as a full-
color, hardcover book. For current information about the book and report series,
please visit:
http://www.nngroup.com/reports/ecommerce
DialogDesign
Skovkrogen 3 Rolf Molich <[email protected]>
DK-3660 Stenlose, Denmark Sofie Scheutz <[email protected]>
http://www.dialogdesign.dk
Rolf Molich is an independent usability consultant with more than 25 years of
experience in the software industry. He has been working in usability since 1984.
Before starting DialogDesign in 1997, Rolf Molich worked in the Methodology
department of various Danish companies. He is the author of Usable Computer
Systems (available in Danish only). He and Jakob Nielsen invented the heuristic
inspection method.
Sofie Scheutz is a usability consultant for DialogDesign where she has
been employed since January 1999, when she completed her Masters Degree
in Rhetoric.
Snyder Consulting
88 Brookwood Drive Carolyn Snyder <[email protected]>
Salem, NH 03079, USA
http://www.snyderconsulting.net
Carolyn Snyder is an independent usability consultant with more than 17 years
of experience in the software industry. Before starting Snyder Consulting in
March 1999, Carolyn was a principal consultant at User Interface Engineering.
Carolyn is co-author of Web Site Usability: A Designer’s Guide.
Spool, Jared M., Tara Scanlon, Will Schroeder, Carolyn Snyder, and Terri
DeAngelo. 1998. Web Site Usability: A Designer’s Guide. Morgan Kaufman.
ISBN 1-55860-569-X
This 156-page classic describes what happened when users attempted t o find
information on eight information-rich websites in late 1996. The tested websites
were Edmund’s, Hewlett Packard, WebSaver, Travelocity, Inc.com, C|net,
Fidelity, and Disney. The main findings are in the areas of navigation, links,
search, readability, and graphic design. Although this book is based on usability
studies conducted in 1996, most of its findings still hold true. It describes
problems with comparing products on websites, including sites that cause
“pogo-sticking.”
A W
alphabetical order, 25 winnowing, 32
C by age, 37
comparison shopping, 42 by media, 38
D by price, 38
download time by product specifications, 40
perceived download time, 25 by size, 38
F definition, 32
Furniture Finder, 36. See also winnowing dynamic updates, 34
G examples, 33
grouping by visual similarity, 27
I
images
dark-colored products, 31
of products, 29
quality, 29
show important characteristics, 29
size of thumbnails, 30
sketches, 31
thumbnails, 29
N
navigation
by letter, 28
Next and Previous, 28
random access, 28
P
pogo-sticking, 42
product comparisons, 42
S
sales catastrophes, 32
sort order
alphabetizing, 25
sort by price, 26
U
updated dynamically, 34