Menu

Beta — We’re reformatting our articles to work with the new site, but this is one hasn’t been done yet; it may contain formatting issues. No need to report this. We’re working on it.

Strategies for Categorizing Categories

by Jared M. Spool
on May 6, 2002

How does a site containing thousands of pages of content get users to
the content they seek quickly?  There are many different strategies
for organizing content on sites and we recently took a hard look at five
of them.

We’ve been examining several e-commerce sites to see how they handled
the problem of categorizing large numbers of products. We were interested
in seeing if the different designers came up with different methods and
which methods were most effective.

Our recent apparel and home goods study turned out to be a good place
to start. Here we looked at thirteen different sites, each with a similar
product set.

Every site had some similar characteristics. First, they divided the
content into just a few top-level categories, such as "Women", "Men",
and "For the Home". (Apparel is one of the few content types
that lends itself to such easy organization. Sites containing content
such as office supplies or support problems probably have to adopt different
top-level solutions, such as what Staples [http://www.staples.com]
has done.)

Also, they had similar pages that displayed pictures of all the items
within a given category. We call these pages product galleries. While
the number of items and the specific information that was presented with
each product image varied, all of the sites had basically the same galleries.

What was different were the pages between the home page and the galleries.
We call these "department pages", because they represent what’s
sold in a specific store’s departments. For these sites, "departments" were
categories such as women’s swimwear or table linen.

Among the thirteen sites we studied, we found five different department-page
designs. Most listed the departments in a left navigation panel, with
the galleries for that department listed in the center. (Look at Macy’s
department pages — http://www.macys.com
by clicking on Women, then Tops.)

However, some got clever. For example, the Gap and Victoria’s Secret
(http://www.gap.com, http://www.victoriassecret.com)
both used a menu based department that wasn’t a separate page, but instead
used menus at the top of the screen.

Old Navy (http://www.oldnavy.com)
used a combination department and gallery page where sometimes the left
nav contains galleries and sometimes it contains products. (Try clicking
on Girls, then Accessories. Compare that to clicking on Girls, then Skirts & Dresses.)

Lands’ End (http://www.landsend.com)
used a design that had both product descriptions and departments. (Click
on Women’s, then Swimwear to see their department page design.)

Finally, Eddie Bauer (http://www.eddiebauer.com)
combined text lists of all the products in the department with a toggle
to see the pictures for a gallery. (Click on Women, then Sweaters. Click
on View Photos to see a specific gallery.)

After realizing that there were five basic types, we got very excited
about seeing if the different types made a difference. While we’d expect
differences between individual sites, it wasn’t clear that we’d see if
an entire type of design outperformed others.

After watching people shopping on the sites, we compared their behaviors.
(As with many of our e-commerce studies, these users came to our facilities
with a list of products they wanted to buy. We gave them the money to
make the purchases and told them to purchase as much on their list as
possible. In this particular study, there were 44 users who shopped for
a total of 687 products.)

Studying the different designs on apparel and home goods sites turned
out to be a good thing. Out of the 687 shopping expeditions that we observed,
users only used the search engine 22% of the time. That means that 78%
of the time they used the categorization scheme to locate their desired
products.

We found the sites with the standard left-nav design, such as Macy’s,
actually performed the worst, selling the least amount of product. Lands’
End’s design performed the best, with Old Navy’s combination design being
second.

It turned out, in our study, that the number of pages that a user visited
before they put something into their cart was inversely proportional
to purchasing. The more pages they visited, the less they bought. (Remember,
our users knew exactly what they wanted and were ready to make a purchase.)

When you look at the number of pages visited before a user put something
into their cart, users who traveled through Lands’ End’s design purchased
by visiting half the pages than users through Macy’s design. Lands’ End’s
design had fewer visits to "wrong galleries" — galleries that
didn’t contain the user’s desired content (often forcing the user to
hit the "back" button — a clear sign of a problem).

If you compare Lands’ End’s design to Macy’s, you see some interesting
differences. By just looking at Macy’s ‘ "Women’s Tops" department
to Lands’ End’s "Women’s Sweaters", you can see that Lands’
End goes to great length to let people have information they need to
make a decision. They give categories, such as "Twinsets", "Cardigans",
and "Cashmere".

Whereas Macy’s just lists "Sweaters". Visiting the sweaters
gallery shows every sweater Macy’s sells, with no distinction between
the types of sweaters or fabrics used. Users have to look at each sweater
to determine if it’s what they are interested in.

With the Lands’ End design, users could either go straight to a product
that was of interest to them or look at the category’s gallery by clicking
on a "View these and more" link. While a lot of our users clicked
on products, many viewed the gallery before choosing their product.

The Lands’ End design can serve
as a model for other types of content. We could see job listing databases,
news stories, or other large content repositories using a similar design.
An example of a page that was changed to this type of model is the In
Focus page on the A.G. Edwards site. The old
style
simply lists a bunch of vertical links. The current
style
categorizes these and also includes links to the galleries.

Another example of a page that might be able to benefit from this type
of layout is the air
conditioning page
on the doityourself.com site.

The pictures on Lands’ End’s department page were helpful sometimes
and ignorable the rest. Seeing a picture of a "twinset" helps
identify what it is, whereas the pictures of "Fine Gauge Cotton" and
regular "Cotton" could be swapped and nobody would probably
notice or care (except Lands’ End’s buyers). This means that content
that doesn’t lend itself to pictures (such as diseases) doesn’t really
need them — it’s not a necessary part of this specific design.

As we study the differences in the designs of these department pages,
we can learn more about how to design information displays that are more
effective to getting users to their desired content. •

About the Author

Jared M. Spool is the founder of User Interface Engineering. He spends his time working with the research teams at the company and helps clients understand how to solve their design problems. You can follow Jared on Twitter at @jmspool.