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.
* Originally appeared in UIEtips e-mail newsletter.
Click here if you would like to sign up for one or more FREE B2B newsletters from murdok!
A software developer and programmer, Jared founded User Interface Engineering in 1988. He has more than 15 years of experience conducting usability evaluations on a variety of products, and is an expert in low-fidelity prototyping techniques. Visit http://www.uie.com/ for more usability information. You can reach Jared by calling our office or by sending mail to jspool@uie.com.
