I just returned from a conference on usability and design issues. Like most, it focused on the latest research in those areas.
But this conference was a particularly fascinating one, in that one of the issues that kept coming out was how content has changed everything.
In the old days, we never paid attention to content. When we designed a product, like a word processor, we only focused on how the user interacted with the product. We never focused on what they wrote -- their content.
But now, browsers don't really do anything without content. What makes or breaks a web site is the content involved. And content is really hard.
How should it be organized? How should it be written? What can we leave out? What must we include? Does order matter? Does presentation matter? We're just now getting a glimpse of how much we need to learn to answer these questions.
To help with this quest of understanding content, let's look at understanding the middle of the location process. How should mid-level categories (or "departments" as we call them) be designed? Does the layout of the information matter?
By looking at how a particular category of e-commerce (apparel & home goods) solves the problem, we get some insight as to what matters and what doesn't.
So let's get to it
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. Let's take a hard look at five of them.
Let's examine several e-commerce sites to see how they handle the problem of categorizing large numbers of products. Do different designers come up with different methods, and which methods are most effective?
We looked at 13 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 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 each site presented with each product image varied, all of the sites had 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 13 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 -- by clicking on Women, then Tops.)
However, some got clever. For example, the Gap and Victoria's Secret both used a menu-based department that wasn't a separate page, but instead used menus at the top of the screen.
Old Navy 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 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 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. (This exercise was part of a UIE commerce study. 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, 44 users shopped for 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 we observed, users only used the search engine 22 percent of the time.
That means that 78 percent 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 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 many 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. For example, we wonder if A.G. Edwards' In Focus story page (https://www.agedwards.com/public/invedu/infocus) could benefit from this type of design. We think it might.
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 easily lend itself to pictures (such as neurological 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.
Jared M. Spool is a leading expert in the field of usability and design since 1978, before the term "usability" was ever associated with computers. He is the Founding Principal of User Interface Engineering (https://www.uie.com), the largest usability research organization of its kind in the world. He is also the conference chair for User Interface 7 East (https://www.uiconf.com).
