0% found this document useful (0 votes)
94 views

E-Commerce User Experience

This document discusses category pages on e-commerce websites. Category pages help users find products to buy by organizing merchandise into classifications. The study found that the most common reason for task failure was an inability to find an item (27% of cases). Effective category pages clearly show what products can be bought, use classifications that are understandable to users, and provide tools to filter long product lists, such as sorting or comparing items. Category pages are critical for helping users complete purchases.

Uploaded by

Hiba jerra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
94 views

E-Commerce User Experience

This document discusses category pages on e-commerce websites. Category pages help users find products to buy by organizing merchandise into classifications. The study found that the most common reason for task failure was an inability to find an item (27% of cases). Effective category pages clearly show what products can be bought, use classifications that are understandable to users, and provide tools to filter long product lists, such as sorting or comparing items. Category pages are critical for helping users complete purchases.

Uploaded by

Hiba jerra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

E-COMMERCE

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%

Product Information 11% Finding Item 27%

The chart’s total is 98% due to cumulative rounding errors.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 2


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%

Product Information 11% Finding Item 27%

The chart’s total is 98% due to cumulative rounding errors.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 2


This is a classic example of a good category page. It organizes the
site’s offerings so users can find the type of clothing they want. CP1

Nielsen Norman Group E-Commerce User Experience Category Pages 3


Table of Contents
Executive Summary 2
About the Study — Overview of Method 5
Sites We Tested 6
Store Home Pages 7
Classification Schemes 18
Methods for Classification 22
Product Listing Pages 23
Sorting Product Listings 25
Images on Category Pages 29
Winnowing 32
What is Winnowing? 32
Examples of Winnowing Tools 33
Tools on Sears 34
Microwaves on Sears 34
Furniture.com 36
Disney and Wal-Mart: Gift Finders 37
Product Comparisons 42
Conclusion 46
Summary of Recommendations for Designers 47
Reports in This Series 49
About the Authors 50
References 51
Index 52

Nielsen Norman Group E-Commerce User Experience Category Pages 4


About the Study — Overview of Method
An international team of five usability experts led by Jakob Nielsen
conducted usability tests of 20 business-to-consumer e-commerce websites. A
total of 64 users participated: 39 from the United States and 25 from Denmark,
giving us data about both domestic users (19 of 20 sites were American) and
overseas users. Users ranged in age from their twenties to their fifties. All users
had previously shopped online and most had made purchases; however, we
screened out participants who had technical knowledge of the Web.
The typical user tested three of our 20 selected sites in a test session lasting two
hours. Each site was tested by a minimum of nine users, six from the US and three
from Denmark. We chose sites in seven different industries (such as clothing and
toys) so that within each industry we had two or three sites for comparison.
Each user spent about 40 minutes on each site. WeWe supplied the tasks, which were
modeled on common goals of users during online shopping. Most tasks either
asked the user to find a specific item that we knew existed on the site or were
more open-ended, allowing users freedom to shop according to their own
preferences. In most cases, we stopped the users before they entered a credit card
number, so they did not actually complete the purchase. We also had a short task 
for each site where we asked users to find customer service information, such as
how to cancel an order or return an item.
A highly experienced facilitator sat in the same room with the user, providing
instructions to the user and taking notes. We asked users to think aloud as
they worked.
Our Methodology report provides greater detail about how we conducted this
study,
study, including copies of all the tasks.

Nielsen Norman Group E-Commerce User Experience Category Pages 5


Sites We Tested

Category Site name Main products offered


Clothing Boo Fashion and sportswear for men and women
(www.boo.com)
Jcrew Clothing for men and women
(www.jcrew.com)
NorwaySweaters Sweaters in traditional Norwegian patterns
(www.norwaysweaters.com)
Department Nordstrom Apparel, shoes and accessories for
Stores (www.nordstrom.com) men, women
Sears Tools, appliances, and home services
(www.sears.com)
Wal-Mart Discount department store
(www.walmart.com)
Flowers 1800flowers Flowers, gourmet foods, candies and
(www.1800flowers.com) gift baskets
Iflorist Flowers and plants
(www.iflorist.com)
Food BasketHaus Custom gift baskets that include foods
Novelties (www.baskethaus.com) and novelties
Gevalia Specialty coffee, tea, brewing equipment,
(www.gevalia.com) desserts, and glassware
Peet’s Freshly roasted whole bean specialty coffee
(www.peets.com)
Furniture Furniture Furniture and accessories for the home
(www.furniture.com)
HermanMiller Office, healthcare, and residential furniture
(www.hermanmiller.com)
Living Furniture and accessories for the home
(www.living.com)
Entertainment CustomDisc Custom music CDs containing songs chosen
Media (www.customdisc.com) by the user
Reel Videos and DVDs
(www.reel.com)
TowerRecords Music CDs, videos and DVDs
(www.towerrecords.com)
Toys Disney Clothing, toys, collectibles, etc. featuring
(www.disney.com) Walt Disney characters
eToys Toys, books, software, videos and games
(www.etoys.com) for children
SmarterKids Educational toys, books, software, videos
(www.smarterkids.com) and games for children

Nielsen Norman Group E-Commerce User Experience Category Pages 6


Store Home Pages
The home page of an e-commerce site is like the first paragraph of a news story.
Journalists are taught to convey the “five W’s” (who, what, when, where, and
why) early in the story, so the reader can decide whether to read the rest.
Similarly, the home page of an e-commerce site should present the following
essential elements and links, so a visitor can decide whether to go shopping on
your website:
• Show merchandise. Display the products and/or services for sale.
• Enable shopping. Provide direct access to the catalog and/or online store.
• Organize merchandise. Classify goods and services in a user-oriented
hierarchy.
• Sell and deliver. Provide links to purchasing options, return policy, shipping,
and delivery information.
• Build trust. Link to customer service, privacy policy, and company
background information.
In our study, we did not explain what each site was about. Instead, we let users
click on whatever interested them for the first two or three minutes of the test.
Then we asked three questions:
1. What does this site have?
2. Who is this site for?
3. At first glance, does it appear that this site would have things you might want
or need?
Users’ answers to the first two questions revealed whether they had the same
overall understanding of the site as we did, based on the home page and any other
pages they’d seen. The third question helped us understand the users’ level of 
motivation in approaching the tasks.
Show what merchandise you sell and don’t sell.
The home page is a high-level category page. As such, it should show what
merchandise the site does — and does not — offer. Compare the home pages of 
Wal-Mart and Sears. Both are large department stores that carry a variety of 
merchandise, but it was easier for users to get started on Wal-Mart than on Sears.
It was also easier for users to form a correct impression of what Wal-Mart sold.
From the list of links down the left side of Wal-Mart’s home page, users could
readily see that the website offered a variety of merchandise, just like Wal-Mart’s
physical stores do. As one user who tested Boo and then Wal-Mart said, “Very
typical kind of layout — which isn’t a bad thing. Won’t have that same fun factor as
Boo does, but a feeling of home, that you can find your way around it.” When
looking for a specific item on Wal-Mart, most users chose a link quite quickly.
In contrast to Wal-Mart, the Sears site was misleading to our users. Although
Sears is also a large department store, it doesn’t offer all its merchandise online.
The website sells primarily tools, appliances, and replacement parts. Users who
were familiar with Sears immediately assumed that the website had all of Sears’
products. This was not the case — the links to Around the House, Under the
Hood, and Fashion File went to pages containing buying tips and ads promoting
in-store (not online) specials. Users couldn’t actually buy anything in those
departments. The problem was even worse for the Danish users, who were not

Nielsen Norman Group E-Commerce User Experience Category Pages 7


familiar with Sears. One Danish user who saw the image of the car and the words
“car and garage” concluded that Sears sold cars.

The links on Wal-Mart’s home page correspond to the departments in


their physical stores. Users could easily tell what was for sale there. CP2

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

Nielsen Norman Group E-Commerce User Experience Category Pages 8


CustomDisc was another site where users had a tough time determining what the
site actually sold. Despite the name CustomDisc, users assumed that the site sold
standard music CDs. It was not apparent from the home page that the site let
customers make a custom CD by choosing songs. Three out of 10 users realized
that the site offered custom CDs only when we gave them the task to create one.

For a time, CustomDisc changed its home page to make it clearer


what the site offered. CP4
 Beware of over-emphasizing promotional items.
Images of promotional items appearing on the home page shape peoples’
perceptions of what the site offers. Promotional items can work against the site’s
interests if a potential customer mistakenly concludes that the site doesn’t have
merchandise of interest.
• Reel: One user didn’t realize the site had VHS videos, because on the day he
tested the site there was a prominent image that said “DVD Shopping Guide”
on the home page.
• Nordstrom: One user said that the home page had given him a completely
incorrect impression of the site. During the test he found out that Nordstrom
primarily sells clothing, shoes, and high quality merchandise — not trinkets
and other cheap stuff as he initially thought. The version of the home page this
user saw featured a large image of inexpensive jewelry.
We only saw a few examples of wrong first impressions in our study, but it
made us realize it’s important to watch for unintended side effects of promoting
certain items.

Nielsen Norman Group E-Commerce User Experience Category Pages 9


One user mistakenly concluded that Reel sold DVDs only, not VHS
videos, after seeing this version of Reel’s home page. CP5
The home page should show the purpose of the site.
Some websites have multiple purposes, with e-commerce being only one of them.
For example, we can infer from Herman Miller Inc.’s home page that the site sells
consumer products, provides information to investors and business partners, and
sells wholesale products to vertical markets such as health care and government.
After looking around the site for a couple of minutes, our users could tell us what
Herman Miller did, so this home page did reasonably well at communicating the
site’s purpose — except, as explained below, it was hard for some users to find
the retail store.
As e-commerce websites proliferate, it becomes increasingly important for sites to
communicate their particular approach to doing business. Do they emphasize low
cost? Variety of merchandise? Fast delivery? Free delivery? Specialty products?
Customers’ initial impressions of a site should match the messages the site is
trying to communicate.
For instance, it was apparent to American users that SmarterKids specialized in
educational toys for children. Interestingly, this purpose was not as clear to the
Danish users. They could tell the site sold children’s products, but they didn’t
immediately recognize the educational emphasis. By asking users to tell us what
the site sold, we discovered these types of discrepancies.

Nielsen Norman Group E-Commerce User Experience Category Pages 10


Herman Miller’s home page shows an emphasis on information for
investors and business partners, not e-commerce. Depending on their
goals for the site, this may be appropriate. CP6
 Don’t hide the catalog — enable shopping from the home page.
There are two approaches an e-commerce site can take regarding the display of its
online catalog of merchandise:
• Provide a link to the catalog from the home page, or
• Use the home page as the front page of the catalog.
We believe the second approach is more effective, because it enables customers to
start shopping right away. eToys, SmarterKids, Wal-Mart and 1800flowers are
examples of sites whose home pages functioned as top-level category pages.
These sites had a navigation panel that allowed users to access the main product
categories (such as subject, brand name, or child’s age on the toy sites). And they
devoted space in the center of the home page to featured products. Even though
there was a lot of information on these home pages, users didn’t hesitate very long
when we asked them to find something — they were off and clicking. Thus, these
home pages were successful at getting potential customers started.

Nielsen Norman Group E-Commerce User Experience Category Pages 11


SmarterKids lets visitors start shopping right from the home page. CP7

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.

It wasn’t obvious how to start shopping on Gevalia — it took some


users a few minutes to find the catalog. CP8
Nielsen Norman Group E-Commerce User Experience Category Pages 12
We saw even worse problems on Herman Miller, where the store entrance was
effectively hidden. Some users went to the Showroom first, only to discover they
couldn’t buy anything there. Unlike their real-world equivalents, the Showroom
and Store are totally separate parts of the Herman Miller site. One user got stuck 
in the Showroom and needed help from the test facilitator to continue. If Herman
Miller wants to facilitate online buying, they should make the store a more central
aspect of their home page.
 Reveal the product hierarchy.
It’s difficult to explain what merchandise a site sells. It’s much easier — and more
effective — to show it. Sites that contained well-organized sets of links made it
easier for users to identify what was on the site and to get started finding a
particular item. Both eToys and SmarterKids clearly showed how the pr oducts
were organized on the home page.
Nordstrom and Jcrew revealed their hierarchies one click down from the home
page — as soon as the user chose the Men’s or Women’s link. This approach was
also effective. On each of these sites, the high-level categories were visually
scannable from a single page, without requiring the user to drill down.

This Gevalia catalog page concealed the product hierarchy by


spreading the menus across several pages. It was hard for users to
find coffee makers. CP9
In contrast, Gevalia’s design had the most concealed product hierarchy. Many of 
Gevalia’s catalog pages showed a large decorative image and a handful of links,
requiring the user to drill down to pages containing submenus. Gevalia paid a
usability price for this design. The issue isn’t only that it required more clicks, but
also that the contents of the subcategories were obscured from the user.

Nielsen Norman Group E-Commerce User Experience Category Pages 13


For example, it was not obvious that Coffee Makers would be found as a
subcategory under Gevalia Coffee and Tea. When asked to find a coffee pot, users
explored links like Gifts, instead. Also, because there were no links from one
subcategory page to another, users had to back up to try a different path.
Gevalia’s recent redesign revealed more of the product hierarchy at a higher level.
Not only was the link to the catalog prominently featured on the much shorter
home page, but the top catalog page also had more links. Unfortunately, much of 
the page is still filled with large decorative images. Although we didn’t test this
new design, it appears to be a step in the right direction — our task to find a
coffee maker would likely be much easier with the new design.

Gevalia’s redesigned catalog page (which we did not test) was


somewhat better at revealing the product hierarchy. CP10
Similarly, even though Sears offered a narrower selection of merchandise than
Wal-Mart, users still found it harder to get started when we asked them to find a
specific item, such as a cordless drill, probably because Sears didn’t have an
organized hierarchy of links that users could quickly scan. One user never found the
Tools tab, for example, even though he did explore the Parts tab right next to it.
Disney also obscured its product hierarchy, making it harder to f ind goods and
services. Compare the links on the Disney Store main page to the links on eToys
(below) and SmarterKids (CP7). On eToys, no one had trouble finding Hot
Wheels products. However, on Disney, it wasn’t obvious where to find a stuffed
Pooh doll. Some users just gave up.

Nielsen Norman Group E-Commerce User Experience Category Pages 14


The product hierarchy was readily visible via links on eToys, but it
wasn’t on Disney. CP11

Nielsen Norman Group E-Commerce User Experience Category Pages 15


Reel’s home page also tended to confuse users:
• “A little congested on the first part of it. Not self-explanatory enough. I’m
scrolling through it for a minute or so before I realized what [kind of site it]
was. A lot of words and not much for you to do.”
• “It just looks like a search engine, not a store. … looks very technical.” This
user would prefer to see more pages like the Toy Story page “where they show
pictures of the movies.”
It was hard for users to tell what Reel had, and how to get started shopping for
something specific. The home page had a lot of information, but it lacked a visible
hierarchy of products. Revealing the full product hierarchy requires a major
amount of screen real estate, and at some point, the page just becomes too long
and unwieldy to be an effective sales tool.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 16


One problem occurred because of the male and female symbols used on the
submenus. Some users figured out that clicking on the symbols would provide
only men’s or women’s clothing, but not everyone did, even those who said they
wanted to look at only men’s or women’s clothing. Those who didn’t discover
how to use the symbols ended up looking at pages that contained both men’s and
women’s clothing.
We have some strong reservations about Boo’s approach to categories, which
required technologies and features (such as Java or Flash) that some browsers
don’t, won’t, or can’t support. Boo also required excessive load time and it was
less robust than standard HTML. Finally, Boo’s menus might not always offer a
usable compromise if too much information is hidden and the user must
repeatedly sweep the mouse over the menus to make submenus pop up.
Even so, Boo tried to strike a balance between a minimalist high-level design and
one that revealed all the merchandise for sale. From a usability perspective, it
deserves an honorable mention, because the submenus worked fairly well (on a
PC), aside from the confusion over male/female symbols, and users liked them.

Users liked Boo’s pop-up menu approach, although some never


realized they could click the male and female symbols to see gender
specific clothing. CP13
 Provide links on the home page to purchasing options, return policy,
 shipping and delivery information.
Sometimes people need answers to important questions before they begin shopping,
such as whether the site delivers to their country, whether they can have a product
delivered by a certain date, or whether they can use a particular credit card.
For example, about 10% of our users spontaneously looked to see which credit
cards the site accepted — even during tests when they knew they weren’t being
asked to buy anything.
Although delivery areas weren’t an issue for the New Hampshire users, many
Danish users had a hard time determining whether the site would deliver to
Denmark or not. As e-commerce sites strive to reach a global audience, the issue
of showing delivery areas will become more important. (See our International
Users report for further discussion on this issue.)

Nielsen Norman Group E-Commerce User Experience Category Pages 17


 Provide links on the home page to customer service, privacy, and 
 company background information.
In the US tests, we gave users the option of using a false identity — and in many
cases the users chose not to enter their own personal information. Even so, the
majority of users expressed concern about how their personal information would
be used. Thus, having a link to the privacy policy on the home page (and on any
other page that asks for personal information) helps to alleviate users’ worries.
Of course, there’s no way to guarantee that users will actually read the privacy
policy. Similarly, some users clicked About Us links before deciding to purchase
the merchant’s goods or services, even though nothing in our tasks asked them to
research the company first.

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.

1800flowers showed classifications of their products on their


home page. CP14
We asked users to shop for a wine rack on Furniture, but it wasn’t obvious where
to start. In reality, wine racks can go in the dining room, kitchen or cellar (or in
any other room, for that matter), but on Furniture, wine racks were available
only in Kitchen. Three out of 10 users were unable to find any wine racks on
Furniture, though the site had several. Introducing room as a higher-level
classification scheme made it harder to find a specific piece of furniture.
Living also classified furniture by rooms, but the “Browse for…” selection list
on the home page allowed users to choose a specific piece of furniture.

Nielsen Norman Group E-Commerce User Experience Category Pages 18


Living’s “Browse For …” list let the user navigate to a particular piece
of furniture, regardless of what room it goes in. The Furniture site had
no such option; users had to first pick the correct room. CP15
Other classification problems:
• Boo’s subcategories of outerwear — Fleeces, Jackets, and Vests (body warmers)
— didn’t work very well for users who were trying to find a warm coat.
• CustomDisc’s top-level classification of music by genre (Rock/Pop/Oldies,
Alternative, Jazz/Blues, etc.) worked reasonably well, but once users clicked a
genre, the subclassifications made no sense to them. Most users expected to
see names of artists, but instead they had to peruse subcategories with titles
like “Songs for the Car” or “Great Oldies.”
• Jcrew classifies its men’s shoes as Classic, Modern, and Rugged. We asked
users to find brown boots. There were brown boots in both the Modern and
Rugged categories. But users who opted to go directly to Rugged shoes
instead of viewing all of the footwear missed seeing some of the brown boots.
• At the top levels of the site, SmarterKids showed both the age and school
grade (called a “form” in some countries) together, but deeper in the site they
dropped the age information and presented only grades. Someone who has no
school-age children might not know a child’s grade. Our tasks gave the age of 
the child, but not the grade, and we observed some age/grade confusion with
two of our nine users. For example, one Danish user who was not familiar
with the term “grades” mistakenly went to Grades 7– 9 when looking for
something for an 8-year-old.

Nielsen Norman Group E-Commerce User Experience Category Pages 19


The collection titles that made it difficult for users to find the exact
songs they wanted. CP16
What constitutes good classification depends on the intended market and how
familiar consumers are with the subject matter of the site. If SmarterKids views
their primary market as Americans who have children in their lives (including
teachers, who write many of the product reviews), the age/grade issue may not be
important. However, if SmarterKids also wishes to sell merchandise to countries
that don’t use the term “grade” or to childless people who sometimes give gifts to
children, they should modify their classification scheme to age-appropriate gifts.
This age/grade classification dilemma shows how site designers must take cultural
assumptions into consideration when selling to an international market. It’s
important to know foreign holidays and gift-giving customs. (See our
International Users report for more on this critical subject.)
Consider multiple classification schemes.
SmarterKids and eToys effectively categorized their merchandise multiple ways.
Whether a customer approaches the site by looking for the child’s age, a specific
brand, or the type of toy, there are links to support that method of shopping. The
flower websites used multiple classification schemes also. In our study, users took 
different but equally successful paths to find items on these sites.
 Provide cross-references.
Not everyone classifies items the same way. If an item can be classified in more
than one way, it’s probably best to do so. Cross-referenced classification makes
elegant sense online because it makes excellent use of the hypertext medium.

Nielsen Norman Group E-Commerce User Experience Category Pages 20


In contrast, Wal-Mart used a more limiting floor plan metaphor that closely
matched the way the departments are organized in their physical stores. Although
this classification scheme worked fairly well for US users, it wasn’t completely
unambiguous for the Danish users, who weren’t familiar with Wal-Mart. All three
Danish users looked for an infant car seat in the Automotive department —
logical enough, but this didn’t match the way the site was laid out.

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.)

Nielsen Norman Group E-Commerce User Experience Category Pages 21


 Don’t over-classify.
Cross-reference classification is mandatory for large websites, but we saw some
smaller sites doing just fine with little or no classification. NorwaySweaters and
BasketHaus — the sites in our study with the smallest selections — did not seem
to suffer any ill effects from simply dumping all their products on one page.
NorwaySweaters offered six sweater designs; BasketHaus had 14 gift baskets.
Users did not complain about a lack of organization on these sites. They simply
clicked and scrolled until they’d seen all the products, and then chose the one
they wanted.
We also saw some intriguing behavior on sites where the users were very
interested in the merchandise. 1800flowers presented its 38 products containing
roses on seven pages, in no particular order. Some users looked at all seven
pages — which was noteworthy because we rarely saw a user go past the third
page on any other site.
Possibly, looking at flower arrangements is inherently enjoyable for some people.
Most of the US users commented during their initial site explorations that they
enjoyed flowers or gardening. The selection available to the Danish users was
much smaller, so we don’t know if they would have looked at the same number of 
pages if given the opportunity.
Similarly, coffee lovers spent more time looking at coffees on Gevalia and Peet’s
than did users who don’t drink coffee. These observations might suggest that it is
less important to organize content on sites where the user enjoys just looking at
the merchandise — but only when the number of products is small.

Methods for Classification


Classification is hard to do — and it’s especially tricky when the people charged
with creating the classification schema for the website are much more familiar
with the product or service than are the sites’ customers. Designers and database
specialists simply don’t think of the merchandise the same way the site’s
customers do. Customer behavior, therefore, must be observed.
We suggest two techniques for letting your customers define categorizations and
classifications that will work for them — and you:
• Card-sorting exercises. In card-sorting, you give the user a pile of slips of 
paper, each with the name of one product written on it. The user sorts the
items into groups and then names each group. After a number of users
complete this exercise, you can find the common patterns and use them as
guides for classification.
• Learning from mistakes. During usability tests, look for problems users have
when navigating to products. If the user chooses a category that you didn’t
anticipate and fails to find the item, that item should probably be cross-
referenced or recategorized.

Nielsen Norman Group E-Commerce User Experience Category Pages 22


Product Listing Pages
Where feasible, limit product listings to two to three pages.
One of the patterns we saw in our tests was that users didn’t review very many
pages of product listings. SmarterKids, Furniture, and Reel, for example, offered
product listings that were hundreds of items long, spanning a dozen or more
pages. Most users didn’t look beyond the second or third page — either they
simply chose something from these pages (a behavior that might not be so
common in real life as it was in our artificial test environment) or they adopted a
different strategy. What’s especially interesting about this finding is that the
websites we tested had varying approaches to product listings. For example,
• SmarterKids had eight products per page, each accompanied by a paragraph
describing the item.
• Furniture showed thumbnail images with a price but no description, 20 per page.
• Boo showed about four products per page, without description but with
relatively large images.
Despite the different display designs, on all three sites users rarely looked beyond
the third page of product listings, and many didn’t go beyond the second. And
although slow-loading pages could have been an inhibiting factor on some sites,
users still didn’t go much farther on the sites that downloaded quickly. This user
behavior pattern suggests that winnowing tools — described later in this report —
are essential to ensure that users don’t just abandon their searches on large sites.
When a website has a large number of products, it’s impossible to put the best
products on the first few pages without knowing more about what the user is
looking for. The purpose of winnowing is to reduce the number of products to a
set small enough to fit on a maximum of two or three web pages.

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

Nielsen Norman Group E-Commerce User Experience Category Pages 23


Scrolling is acceptable on product listing pages.
All users scrolled vertically on product listing pages (and horizontally on Boo)
during our tests. We observed only a few scrolling-related problems, so we can’t say
that eliminating scrolling on product listing pages would make a site more usable.
We did observe a scrolling problem on Herman Miller’s Chairs page, however.
Some users didn’t realize how many chairs there actually were, so they missed
seeing some very nice office chairs located at the end of the list. The top of the
page didn’t indicate how many chairs were shown (37), and the white space
between chairs in the list could have created an illusion that the user had reached
the bottom of the page.
To solve this problem, we suggest:
• State the number of items listed.
• Make the images smaller so the products can be shown two or three to a
row, putting more of them in front of the user at once, which would also
shorten the page.
• Design the page so the last row of items is only partially visible and separate
the rows with a minimal amount of white space. Of course, this tactic requires
that you take into consideration the various combinations of browser window
size and screen resolutions, so it’s not easy or foolproof.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 24


Instead, use download time to help determine the number of products to show per
page. Put as many products on a page as you can — within a prescribed time limit.
Jakob Nielsen recommends that 10 seconds is probably the maximum page load
time, after which you risk losing the customer’s attention. Of course, faster is better.
In our study, pages on Boo, Furniture, and Herman Miller took the longest to
download, often a minute or more at 56k modem speed. Naturally, users
complained that these sites were too slow. Although we did not time every page,
most of our test sites had product listing pages that downloaded in an acceptable
amount of time for our users.
Tip: Reduce the perceived download time. Some page layouts use big tables
that enclose all the content on the page, which can cause apparent delay in page
download times, because current browsers wait for all of the content inside a table
to download before displaying any of it. Content-heavy pages should be laid out
in a series of small tables instead of nesting smaller tables inside one big one. By
using a series of tables, the designer can insure that the user gets something to
look at as soon as possible, while the rest of the tables continue to load invisibly
below the “fold” (the lower edge of the browser window).
Sorting Product Listings
 Allow customers to sort products by the factors they care about most.
The majority of the sites we tested didn’t show product listings in any
recognizable order. Although alphabetizing is a tempting way to organize a list, it
is useful only if the list uses the words customers look for.
For example, we asked users to visit Boo to buy clothing to wear in freezing
temperatures. Only one of the nine users noticed that Boo’s jackets were
displayed in alphabetical order by manufacturer — and that observation was
largely irrelevant to the task at hand. For our purposes, it would have been ideal to
see jackets organized by warmth.
Admittedly, categorization by warmth might not be so easy to do, and it might
frustrate brand-name buyers. Multiple, cross-referenced classifications would be
more appropriate. When we asked users to find warm gloves, they tended to
assume that an $80 pair of gloves would be warmer than a $30 pair. Even if their
assumption was mistaken, these users were mentally sorting items by price.
Interestingly, most sites we tested didn’t sort product listings by price, although
we observed our users frequently used price as a sorting factor. Nevertheless, we
cannot assert that sorting by price is a must-have classification. Living did have a
sort-by-price option, but none of our users clicked it.

Nielsen Norman Group E-Commerce User Experience Category Pages 25


Boo’s merchandise was presented in alphabetical order by
manufacturer, which didn’t help users find a warm jacket. CP20
Some products, like coffee, are harder to sort than others. One way that Peet’s
organized its coffees was by name, in alphabetical order. Is this useful? For
returning customers who know what they want, perhaps it is, but it’s definitely not
helpful to new customers. Again, there was no option to sort by price.
Peet’s did provide other organizing schemes, however, such as Type, Decaf, and
Best Sellers. As described later in this report, Peet’s also had a Taste Guide to
assist users who weren’t sure which coffees they might like. So, even though
Peet’s was not a model of best-practice site design, it still had several good ways
to help users find what they wanted.

Nielsen Norman Group E-Commerce User Experience Category Pages 26


Coffee is hard to sort. Peet’s organized its coffees by name type, best
sellers, and decaf — but not by price. CP21
Show item availability at a high level.
The more clicks users invest to learn they can’t buy something, the worse their
resentment is. Present availability information on a high-level category page to
avoid annoying your customers.
Informing customers that the item they just put in their shopping cart is out of 
stock (as Jcrew does) is certainly waiting too late. Sears, Disney, and Nordstrom
were also guilty of showing merchandise on product listing pages that later turned
out not to be available. In contrast, eToys showed which items were in stock right
on the product listing page.
Show visually similar things together.
Our theory (supported mostly by user behavior on the Herman Miller site) is that
people may stop looking as soon as they start seeing items in a list that look less
like what they want. This guideline depends, of course, on the nature of the
merchandise. Grouping by visual similarity is more useful for items like clothing,
furniture, and flowers (where seeing a picture helps the user identify key
characteristics), but is less useful for videos and coffee. So when visual appearance
counts as a sales factor, it’s important to group products by visual similarity.
On Herman Miller, the products on the Chairs page got less office-like as users
scrolled down the page. Gradually, the chairs were replaced by stools and
benches. Unfortunately, there were some great office chairs at the bottom of the
list, but some users gave up before they got that far. In one case, a user missed
seeing a chair she would have preferred to the one she chose. She found this out
only when we showed her the end of the list.
1800flowers shows visually similar things together. The rose pages start with
rose-only bouquets and then move on to other arrangements containing both roses
and other flowers.

Nielsen Norman Group E-Commerce User Experience Category Pages 27


Support navigation by letter for alphabetical lists.
Alphabetical lists can be useful when users know what they’re looking for. But on
some sites, we watched frustrated users look for an item with a known name in a
series of alphabetically ordered pages that were numbered .
• Reel: The Contemporary Classics listings were presented in an alphabetical
list of 238 products that spanned eight pages. To find the movie One Flew
Over the Cuckoo’s Nest , the user had to guess which page it was on. He
guessed right on the first try but said he was just lucky.
• Disney: A user tried to find a Winnie the Pooh doll in Collectibles and had to
guess which of the 10 pages would contain items starting with “W.”
Although both users in eventually managed to navigate to the page containing the
desired item, both of them grumbled about it.

Reel’s videos are in alphabetical order, but users have to navigate


these pages by number. CP22
Use both numbers (or letters) and Next/Previous
 for navigation among pages.
Unless they were looking for a particular item in an ordered list, users generally
went through the pages in linear order. In most cases, users clicked the Next
option if there was one, but this does not mean numbered pages should be
abandoned in favor of Next and Previous buttons.
Although random access to a numbered list vs. Next/Previous buttons did not
prove to be a very important usability issue in our study, we believe it is best to
allow users free access to all pages in a set of product listings, rather than forcing
them to go through the pages in sequence. Our strongest recommendation,
however, is that e-commerce sites use the alphabet — rather than numbers —
when presenting alphabetized product lists.

Nielsen Norman Group E-Commerce User Experience Category Pages 28


Furniture and Boo let users go to the Next or Previous page, or jump
to a specific page. On 1800flowers, users had to go back and forth in
sequence. CP23

Images on Category Pages


Images of products are useful, and sometimes absolutely necessary, but a major
trade-off exists between large, detailed images, or the faster download times
afforded by “thumbnails” (small pictures that usually can be clicked to show a
full-size image).
Fast-loading thumbnails are commonly used to speed up page download time. The
real question is: How good do the thumbnails on category pages need to be?
Tip: Avoid using developer jargon like “thumbnail” in the interface. Users
aren’t generally familiar with design terms.
 Image quality should be good enough to identify a known item.
When a site carries merchandise that users could recognize from advertising or
some other previous exposure, the thumbnails need to be good enough to support
recognition of those items.
We saw this need on the video sites we tested. Users liked seeing covers of 
videos, but many of the pages that listed videos on Reel don’t show the covers.
One user complained about this lack, but then when he saw the On Sale page
(which showed rows of video covers), he commented, “That’s the way it should
be. That’s much better.” We saw similar behavior on toy sites — one user scanned
images of all 34 Barbie dolls looking for ones his wife wanted for her collection,
and he quickly found Austrian Barbie by recognizing her picture.
 Images should show the product characteristics that are
 most important to users.
The image producer must know which characteristics users need most to see.
During testing, we looked for evidence that users were getting — or not getting —
the information they wanted most from the thumbnail images on the product
listing pages.

Nielsen Norman Group E-Commerce User Experience Category Pages 29


• Flower sites: The images on the category pages were good enough for users to
identify one or two items they were interested in. They then used the product
pages primarily to confirm the decision they’d made.
• BasketHaus: Users complained that the thumbnails were indistinct and didn’t
show the exact items in the basket. Users had to read the accompanying text to
get an idea of what was in the basket (and there wasn’t always enough detail
there either).
• Living: When looking at bunk beds, one user rejected those that had a full-size
bed on the bottom. She was looking for bunk beds that had built-in storage.
From the thumbnails, she could spot which ones had full-size bottom bunks,
but she had some trouble seeing whether the bottom bunk had a drawer
beneath it.

It’s hard to tell from these images which beds have


drawers underneath. CP24
The product thumbnails on Boo (see Image CP20) were quite good, allowing
users to see details of construction, like whether a jacket had a drawstring or
how well it covered the wearer’s neck. These large, detailed images
unfortunately caused the product listing pages to download slowly, and users
became impatient. Experiment with the size of thumbnails — find the smallest
size that still conveys the information users want to see before clicking to view
a larger, more detailed image.

Nielsen Norman Group E-Commerce User Experience Category Pages 30


It is difficult to see useful details on thumbnails of dark-colored products. Jcrew’s
Footwear page suffered from this problem, as did shoe images on Nordstrom. We
wonder if it would have been better for them to use sketches instead of showing
black blobs; however, we did not test any sites that used sketches.
Thumbnail images don’t have to answer all the users’ questions.
If users are interested in a product, they’ll click to learn more — and that’s when
they expect to see a larger and more detailed image that answers their questions.

Dark-colored images like these made it hard to see details. CP25

Nielsen Norman Group E-Commerce User Experience Category Pages 31


Winnowing
Many e-commerce sites have far too many products for the customer to consider
all at once. Many users of these sites won’t be successful unless the site helps
them find the products they want — 27% of the sales catastrophes in our study
were caused by failure to locate a suitable item. (We designed our tasks so that
there was always at least one suitable item on the site.) People need to limit the
number of visible offerings, or else they may miss the best product for their needs
— and you lose a sale.
What is Winnowing?
We’d like to reintroduce an ancient word: winnowing. To winnow is to separate
the useful from the non-useful, as in wheat from chaff. It also means to get rid of 
something undesirable or unwanted, to remove, separate, sift, and select. A broad
selection of merchandise is good (as described in our Selling Strategies report),
but a site with many choices must help users arrive at a manageable set to consider.
Winnowing capabilities separate great sites from good ones. The need for
winnowing was most apparent on SmarterKids, where search or home page clicks
often resulted in hundreds of products spread out over dozens of pages.
SmarterKids is certainly not a bad site — users had many good things to say
about it — but it was frustrating for users to find products that met the goals of 
our tasks, such as “software related to science for a 6-year-old” or “something to
help a 10-year-old who’s having trouble in math.” Once users got to the right part
of the site, there was no way to narrow the selection down further.
Winnowing is a subjective concept on e-commerce sites — no one offers a
product unless they believe it’s of interest to someone. And the definition of 
what’s useful to a particular person varies as well, because people often refine
their goals while shopping, or they may look for different items from one day to
the next. So, we define winnowing as any method of interaction that lets the user
refine a set of products, reducing the number of items in the set according to
criteria chosen by the user.
Tip: The winnowing tool should also let users expand the set again.
Winnowing is more important for some sites than others. For small sites, it’s
probably overkill. But for sites that offer a wide selection of similar products,
winnowing tools can decrease the chance that users will become overwhelmed
and give up.

Nielsen Norman Group E-Commerce User Experience Category Pages 32


Examples of Winnowing Tools
Here is an overview of all the winnowing tools we saw in our test sites. Each tool
is described in more detail below.

Site Winnowing Tools Optional/Required

Sears Sears had two winnowing tools:

• 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.

Furniture Furniture had two winnowing tools:

• The Furniture Finder Optional

• To find an item of furniture, users had to first Required — It’s the


specify the room, which then took them to a only way to navigate
page asking them to pick the item, style, finish, to the product pages.
and price range. The resulting page(s) displayed
the set of products that match the criteria.

Disney The Gift Finder let the user specify the Disney Optional
character and type of product (clothing, toy, etc.).

Wal-Mart The Gift Finder asked users to specify the Optional


occasion, recipient, and price range, then
returned a page of suggestions. The user had
no control over what type of items were
shown, however.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 33


Tools on Sears
We asked users to find a cordless drill with a power rating of about 10 volts. First,
users clicked the Tools tab, then chose Portable Power Tools from the selection
list, then Cordless Drills.
Because it had 33 cordless drills, Sears provided a winnowing page to narrow the
selection further. This page allowed the user to identify a subset of drills based on
features. Each time the user clicked the Search button, the list showed the number
of products that matched the criteria.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 34


Sometimes the page updated product aspects the user hadn’t specified. For
instance, if users picked an over-the-range microwave, the capacity and width
were changed automatically. Compounding the problem, at 56k modem speed the
site couldn’t respond fast enough. If the user specified several product without
pausing to let the site catch up, the site would respond only to the last criterion
chosen. In these cases, users didn’t get what they had asked for, and naturally,
they became frustrated. Worth noting, Sears’ microwave winnowing design is the
only one we saw that offered an Undo option, which several people used.

Users understood these winnowing criteria well enough, but


the dynamic page updates confused them. CP27
It’s possible that a dynamic winnowing tool could eventually prove superior to a
click-to-update one, but only if it responds fast enough, and (even more
important) if users expect the dynamic response.

Nielsen Norman Group E-Commerce User Experience Category Pages 35


Furniture.com
Like Sears, Furniture provided two different winnowing tools, but they did not
work as well as Sears’ tools. The most flawed tool was the Furniture Finder. Only
three users tried it, and it wasn’t clear to them how to fill out the form. When we
reviewed the Furniture Finder after the tests, we couldn’t quite figure it out either.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 36


Users weren’t sure what the styles meant, and they had no way of
knowing whether they’d get many hits or none. CP29
In contrast, Sears always showed how many things matched, for example: “17
product(s) meet your criteria.”
Disney and Wal-Mart: Gift Finders
Gift finders are winnowing tools, also. Disney and Wal-Mart both had gift finders,
but we obtained only a little data about them because most users didn’t try them.
Only two or three people tried Disney’s gift finder. In one case, it failed to find
any stuffed Winnie the Pooh dolls, even though the user seemed to have filled out
the search form completely and correctly. One user tried to use Wal-Mart’s gift
finder to locate a car seat but gave up after the gift finder didn’t find any seats.
 Allow winnowing by the most useful differentiating factors
 for that type of product.
From the patterns of user behavior we saw on different sites, we can identify ways
in which the sites could have helped users winnow more than they did. Often
there was a particular factor that people wanted to use:
• Toys by age. When buying for children, the age of the child is a key factor. All
users demonstrated at least some concern about age appropriateness of toys.
Both SmarterKids and eToys provided links based on the age of the child.
(Disney’s version, allowing the user to search for “Youth” or “Infant,” wasn’t
specific enough.) The problem on SmarterKids was that other navigation
tactics such as search yielded results for all ages, not the age range of the page
the user had been on. Users found this discrepancy annoying. In contrast,
when users searched from eToys’ 3-year-old page, it returned only things that
were appropriate for 3-year-olds. This approach worked better.

Nielsen Norman Group E-Commerce User Experience Category Pages 37


If users searched from eToys’ 3-year-old page, all the results were
items appropriate for a “3 yrs” page. CP30
• Clothing by size. On all the clothing sites, we watched most users exhibit
the same pattern of behavior: They would find an item they wanted and then
look to see if it was available in their size. When an item wasn’t available,
no one looked for it in a different size. We think it might be better if clothing
sites first determined the user ’s size (from measurements, since sizes vary so
much), and then showed only available items in that size range. Fit,
however, is a subjective experience, so it might be necessary for the site to
obtain more detail about the customer ’s measurements and preference for
loose- or tight- fitting clothes.
• Videos by media. Reel and TowerRecords both showed all the variations of 
media and languages for each title. If a customer has only a VHS player,
there’s no need to see DVDs and laserdiscs. Offering every possible format
increases the possibility that the customer will buy the wrong thing. We saw
one user get a DVD instead of a VHS and another user mistakenly choose a
video with Spanish subtitles. Finding a VHS or DVD format that would play
on a Danish VHS or DVD player was even more difficult. (Read more about
problems with abbreviations in our International Users report.)
• Shopping on a budget. Some customers have only a limited amount of money
to spend and may wish to winnow out products that exceed their budgets.
eToys let users specify a price range, and several used this feature successfully
when we asked them to stay within a budget. 1800flowers had a similar
feature, but none of our users tried it.

Nielsen Norman Group E-Commerce User Experience Category Pages 38


TowerRecords shows VHS, DVD, and laserdiscs all mixed
together. Chances are good that the user is interested in only
one of these formats. CP31
 Pick winnowing criteria your customers understand.
Peet’s’ Taste Guide offered an interesting way to make coffee choices. After
asking five questions about taste preferences, the site presented the user with a
list of suggested coffees. Several questions seemed odd, however, especially one
that asked about “winey, fruity” flavors. Users weren’t quite sure what this
meant. So, although this winnowing tool showed promise (three users tried it,
and one ended up choosing one of the recommended coffees), Peet’s could
explain the wording of some questions.

Nielsen Norman Group E-Commerce User Experience Category Pages 39


Peet’s Taste Guide is a winnowing tool that helps users find coffees
they might like. This design worked reasonably well, but it might have
worked better if users understood the question about flavors. CP32
It’s not necessarily true that the product specifications make good winnowing
criteria, as we saw during the Sears microwave task. For example, most
consumers probably wouldn’t know the exact cubic measurement (US or metric)
they wanted when buying a microwave. Sears’ Feature & Price page tried to
address the measurement problem by classifying microwaves as compact,
medium, large, or extra large, but this classification wasn’t entirely satisfactory.

Nielsen Norman Group E-Commerce User Experience Category Pages 40


When users filled out the microwave specifications form, they tended to start at
the top and work their way down, choosing criteria in the order presented. But as
we discovered, this was not at all how users approached the process of choosing a
microwave normally. They thought not in terms of watts and cubic feet, but rather
in terms of what foods they wanted the microwave to cook.
• One user wanted to know, “What’s the difference between medium, one
cubic foot, and large size? I want to be able to put a small pizza in it, but not
get lost inside the machine. A Hungry Man [frozen dinner brand] should be
able to fit inside.”
• Another user first talked about the types of food she planned to cook (mostly
leftovers and popcorn). Then she stated how much she had to spend. She
didn’t have unlimited money but didn’t want to get something too cheap.
When we asked her if she could find a microwave based on what she’d just
said, she pointed out that the site didn’t seem to be set up to work that way.
These user comments call for a rather different set of winnowing criteria than
the one the Sears site offered. So, although we applaud Sears for their efforts at
helping customers narrow the selection, we’d like to see a winnowing process
that more closely matches the way consumers approach their buying decisions.
Tip: Go to a store that sells products your site sells and watch the sales
people assist customers for a day or two. Good sales clerks know which
questions to ask, and these questions would probably make better winnowing
criteria than the product specifications.
Support search as a winnowing tactic.
We observed that users sometimes searched to narrow down a broad set of 
choices. Search is an important function to support, because it can work for you —
or against you:
Fortunately, the search function on SmarterKids could get users out of a wrong
category. Unfortunately, a search started on the Software tab for “space”
returned results for all types of products, not just software. This failure to limit
by chosen category was frustrating for users who were trying to find software
related to space.
The dilemma is how to detect when the user needs a full search instead of a
refinement search. Some sites use a “new search” button to return users to the top
level and a “search again within these results” option for refinement searches. We
didn’t test any sites that used refinement, however, so we can’t comment on how
well those options actually work. (For more information about refinement
searches, see our Search report.)

Nielsen Norman Group E-Commerce User Experience Category Pages 41


Product Comparisons
An essential element of the buying experience is comparison shopping. Many
websites don’t — but should — support product comparisons. Without a tool
designed to help with comparison, a user must click the first potential item of 
interest, review its details, click back to the product listing, click the second
potential item, and continue back and forth until the right item is found. User
interface engineers call this behavior “pogo-sticking,” which refers to a spring-
loaded children’s jumping toy. We saw many instances of pogo-sticking in our
tests as users tried to determine how items differed.
 Provide a way to compare the details of similar items.
Our users wanted a way to compare products when shopping for furniture, car
seats, appliances, and in some cases, clothing.
One user wanted to compare Smart Fit and Room-to-Grow child car seats on Wal-
Mart. “It would be nice if this had the comparison like Sears did. … Other than
price, all I see are minor things. This more expensive one doesn’t have a level
indicator … but it’s $10 more.” Finally, he decided to buy the cheaper car seat,
but he never determined why there was a $10 difference, which bothered him.
Another user wanted to compare bunk beds on Living. The online store had a
mission loft bed on one page for $494 and on another page for $629. “I’m
assuming it’s better quality.” Both show the same picture. She said the difference
might be size. She printed out both pages to compare them, but can’t find any real
difference. “Dimensions are the same … this one’s heavier.”
The product-comparison features seemed to be more important on some sites than
others. No one complained about the lack of a way to compare products on the
flower, coffee, toy, music, or video sites. And we didn’t observe much pogo-
sticking on these sites either. So, in the absence of problems and user complaints,
some sites might do just fine without comparison features.
 Design comparison tables to highlight differences.
Sears and Herman Miller were the only two sites we tested that provided any
explicit means to compare products. Herman Miller’s site had a table showing the
features of their chairs. Three out of nine users saw this table. They liked using it
to compare all the chairs at once, but it bothered them to scroll horizontally,
because then they could no longer see the row headings.
Some rows showed “Yes” for all chairs. Showing a common feature does not help
the user detect the differences among models. It might be useful to know about
that feature when comparing these chairs to those from another site, however.

Nielsen Norman Group E-Commerce User Experience Category Pages 42


Users who saw this table liked the concept of comparing all the chairs
but disliked having to scroll horizontally. CP33
An inconsistent list of features draws attention to differences that might not exist.
When users compared products on Sears and the side-by-side comparison showed
a feature listed for product A but not for product B, they couldn’t decide whether
product B lacked the feature or the comparison just didn’t mention it.
Even on sites without a comparison facility, it would help if product pages for
similar products contained the same sets of information in a similar format. We
saw users attempt to compare infant car seats on Wal-Mart. They pogo-sticked
from page to page, trying to pick out relevant details from the text and keep them
in mind when they looked at subsequent products.
The most important element of designing a product comparison facility is
knowing which features your customers want to compare. The dilemma for
content providers is that it might not be best — from a usability perspective — to
rely on information that comes directly from the manufacturer. After all, how
many manufacturers clearly list the features that their products lack ? Some
businesses might not have the legal right to rewrite information provided by the
manufacturer, however.
 Let customers choose the products to be compared.
If you have a large number of products, let customers choose which products to
compare. Herman Miller got away with putting all the chairs in one chart only
because they carry a small number of models.

Nielsen Norman Group E-Commerce User Experience Category Pages 43


With 33 cordless drills and 114 microwaves, Sears needed to provide good
comparison features. In our test, Sears was the cutting-edge site in the product-
comparison arena. Their site had two different approaches to comparison, one in
Tools and one in Appliances. For cordless drills, the user first picked two to four
drills to compare. The selected drills were shown side by side after the user
clicked the Compare button.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 44


Comparing microwaves on Sears was more difficult than comparing drills. After
the user finished picking the winnowing criteria, clicking the View List button
displayed the list of microwaves. Users generally wanted to see pictures at this
point, but the site displayed only a list of text links.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 45


Once they were looking at the side-by-side comparison, users disliked having to
scroll. One user commented that Sears should omit the right part of the page
(where the list was) so he could see more of the microwaves. Worse, the color of 
the microwave in the image often didn’t match the color the user had chosen.
Users were quite disturbed by this discrepancy.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 46


Summary of Recommendations for Designers
This report contains guidelines and suggestions, not rules. Our conclusions are based on
a large number of usability test observations carried out by experts. Your site could be
different from the sites we tested, however, for good reason. We encourage you to
conduct your own usability studies to identify any situations that may be exceptions to
our guidelines. For detailed information about how we obtained the data presented in this
report, see the Methodology report that is a part of this series.
Every site has unique issues. The guidelines in this report will go a long way toward
making e-commerce sites more usable, but they do not remove the need to conduct
site-specific usability testing. Don’t expect your first design to be perfect even if you
follow all the guidelines. Guidelines work hand in hand with iterative development and
usability testing. Plan time in the development schedule to find and correct problems, so
your site will be the best it can be when it goes online. And if you find something
interesting we haven’t discussed, please share it with us.

Store Home Pages


Show what merchandise you sell and don’t sell. ................................................................ 7
Beware of over-emphasizing promotional items. ............................................................... 9
The home page should show the purpose of the site. ....................................................... 10
Don’t hide the catalog — enable shopping from the home page. .................................... 11
Reveal the product hierarchy. ........................................................................................... 13
Provide links on the home page to purchasing options, return policy,
shipping and delivery information. .............................................................................. 17
Provide links on the home page to customer service, privacy, and
company background information. .............................................................................. 18
Classification Schemes
Choose classifications that are useful to your customers. ................................................ 18
Consider multiple classification schemes. ........................................................................ 20
Provide cross-references................................................................................................... 20
Classify items consistently. ............................................................................................... 21
Don’t over-classify. ........................................................................................................... 22
Product Listing Pages
Where feasible, limit product listings to two to three pages. ........................................... 23
Scrolling is acceptable on product listing pages. .............................................................. 24
Use download time to determine the number of products per page. ................................ 24
Allow customers to sort products by the factors they care about most. ........................... 25
Show item availability at a high level. ............................................................................. 27
Show visually similar things together. .............................................................................. 27
Support navigation by letter for alphabetical lists. ........................................................... 28
Use both numbers (or letters) and Next/Previous for navigation among pages. .............. 28

Nielsen Norman Group E-Commerce User Experience Category Pages 47


Images on Category Pages
Image quality should be good enough to identify a known item. ..................................... 29
Images should show the product characteristics that are most important to users. .......... 29
Thumbnail images don’t have to answer all the users’ questions. .................................... 31
Winnowing
Allow winnowing by the most useful differentiating factors for that type of product. .... 37
Pick winnowing criteria your customers understand. ....................................................... 39
Support search as a winnowing tactic............................................................................... 41
Product Comparisons
Provide a way to compare the details of similar items. .................................................... 42
Design comparison tables to highlight differences. .......................................................... 42
Let customers choose the products to be compared. ........................................................ 43

Nielsen Norman Group E-Commerce User Experience Category Pages 48


Reports in This Series
Executive-Level Report
High-Level Strategy – Written by Jakob Nielsen, this report distills the data from
our major international usability study into the essence of e-commerce. Jakob
discusses the strategic implications of our findings for the future of e-commerce.
This is the report to give to your boss if he or she doesn’t have time to read the
detailed reports.
In-Depth Reports
Category Pages – Category pages organize and prioritize a site’s offerings. Home
pages are one type of category page. Some home pages clearly show what the site
sells, but others confuse users by obscuring the purpose of the site. Product listing
pages can be tricky to design because they must provide the right amount of 
information and organize it well.
International Users – When US-based sites go global, many aspects of the user
experience get broken. This report focuses on not only the obvious issues, such as
address formats, but also cultural issues as well. Based on usability tests with 24
European users.
Product Pages – Users need sufficient information about a product before
purchasing it online. Product pages provide that information using a combination
of text and images. Effective product pages show availability, product options,
and total cost. Good images also matter.
Checkout & Registration – Filling out Web forms correctly is very difficult for
most users. Forcing people to register during their first purchase is a confusing
and frustrating tactic that drives customers away. Better designs mean more
customers can complete the shopping process.
Search – Many of our users went right to the site’s search tool (unless it was
hidden) but there were several reasons search didn’t always help them. How to
improve search results and search pages in product catalogs.
Selling Strategies – Some sites drive their customers away with high prices,
unreasonable shipping costs, or unavailable items. Sites that learn to avoid these
problems can then focus on tactics for achieving additional sales through cross-
selling, recommendations, and gift-giving.
Trust – Trust is the user’s willingness to risk time, money, and personal data on a
website. This report discusses many factors that can enhance (or damage) trust in
e-commerce sites.
Methodology Report
Methodology – This report details how we conducted this study, including a
summary of user demographics, how we briefed and interacted with users, and a
summary of all the tasks.

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

Nielsen Norman Group E-Commerce User Experience Category Pages 49


About the Authors
The entire team planned the studies and evaluated the results. The studies were
conducted and observed by Rolf Molich and Sofie Scheutz (Denmark), and
Carolyn Snyder (New Hampshire). Although each report has a primary author,
reports were extensively reviewed by all members of the team. We are also
indebted to Tom Durkin for editorial assistance, Steven Thomas for design, and
Shuli Gilutz for research.

Nielsen Norman Group


48105 Warm Springs Blvd. Jakob Nielsen <[email protected]>
Fremont, CA 94539, USA Susan Farrell <[email protected]>
http://www.nngroup.com
Jakob Nielsen is a usability guru. He has been working in usability since 1983
and in Web usability since 1994. Before starting Nielsen Norman Group in
1998, he was a Sun Microsystems Distinguished Engineer. Dr. Nielsen’s many
books include Designing Web Usability: The Practice of Simplicity and
Usability Engineering.
Susan Farrell has been a Web developer since 1993. Before joining Nielsen
Norman Group as a user experience specialist in 1999, she worked in Human
Computer Interaction at Sun Microsystems and in Customer Service Tools
Research and Development at Silicon Graphics.

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.

Nielsen Norman Group E-Commerce User Experience Category Pages 50


References
Nielsen, Jakob. 2000. Designing Web Usability: The Practice of Simplicity.
New Riders Publishing.
ISBN 1-56205-810-X
This book explains how to design for the user and avoid common mistakes in
every major aspect of web development today.

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.”

Nielsen Norman Group E-Commerce User Experience Category Pages 51


Index

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

Nielsen Norman Group E-Commerce User Experience Category Pages 52

You might also like