Managing Large-Scale Category Structures

Niche stores that focus on a small range of products have a luxury of often being able to limit their top-level categories to a few choices. An old rule of thumb was to aim for seven choices in any navigation menu, based on Miller's Law, which states that the human mind can only remember 7 (plus or minus 2) items in a list. Although usability expert Jakob Nielsen refuted this idea back in 2009, there's still a limit on the number of entries your site should have in its main navigation...if nothing else, the choices must be limited by the size of the customer's computer screen!

So how do larger stores manage to display their breadth of navigation choices while still having a usable website? Let's take a look at some examples.

Let's Start with Amazon

Possibly the largest e-commerce site online today is Amazon.com. Although their approach to navigation may not work for every e-commerce site, it's a great one to study because of their large customer base. Initially, on the Amazon.com homepage, you see a vertical list of top-level categories with flyouts in the left column, and a search bar across the top in place of a horizontal navigation bar:

The top-level categories in the menu aren't clickable, so the highest you can navigate to is a second-level category. Once there, the next level of navigation appears as a horizontal navigation bar below the search form.

Additionally, the search form now defaults to searching within the current category - you can change that to a higher-level category or "All Categories" if desired. There's also a list of faceted "drill-down" navigation links in the left column. Finally, hovering over the orange "Shop All Departments" link in the top left reveals a menu of the top-level categories, which is identical to the menu on the homepage except that it's a dropdown instead of fixed in place on the page.

This navigation works well for Amazon, and has replaced what used to be rows and rows of tabs representing each category. It's often said that what works on Amazon won't necessarily work on other sites, but if you manage a wide range of products in many categories, it might be worthwhile to test this kind of navigation.

Highlighting the Most Popular Categories

A second approach is to list the most popular top-level categories in a standard navigation bar, and to include a link to a sitemap-style page that lists all categories in a hierarchical fashion. VitamimWorld.com does a nice job of this, with a 2-level horizontal navigation bar that includes popular categories such as Bodybuilding and Diet, along with promotional categories such as Spectacular Values and Top Sellers on the top level, and a second level with a link to "A-Z Shopping" (which links to the sitemap-style page) along with other non-categorical links. The two levels of the navigation bar are visually separated by color.

Costco is another site that uses this approach, with the menu item labeled "View All" but serving the same purpose as VitaminWorld's "A-Z Shopping" link. Costco's header menu is quite a bit more overwhelming, though, with 4 distinct rows of links, including two rows of top-level categories with no visual prominence or separation other than one being above the other. This makes the "View All" link less noticeable, but once you find it, you end up at the same kind of sitemap style page as VitaminWorld, which lets you see the wide variety of product types that the sites carry.

Alphabetical Navigation

This one is a little harder to find online, but for stores with well-known kinds of products, an alphabetical navigation bar with dropdown menus can be very usable. OfficeMax has been noted for this kind of navigation, though it's not currently in use. (I borrowed these screenshots from GetElastic's wonderful article on OfficeMax's approach to navigation.)

Multiple Stores

Another approach is to run multiple storefronts. There are several large corporations with multiple brands that do this. For example, take Sears, Kmart, Lands' End, and The Great Indoors. Take a look at the very top of Lands End's website, and you'll see links to their related stores/brands:

The problem with this set of sites is that each one has a separate shopping cart. So if you want to order a shirt from Lands' End, get a lawnmower from Sears, and take advantage of Kmart's blue light specials, then you'll have to place three separate orders.

A better approach is one used by the company that owns The Gap, Old Navy, Banana Republic, PiperLime, and Athleta:

On these sites, a single shopping cart can contain items from each store. Items are marked in the left column with the logo of the appropriate store, which helps maintain brand integrity while offering a great user experience. No matter how many times you switch between the various sites, the shopping cart maintains the items from each one.

This approach isn't just for well-known retailers like these, either. Here's a group of sites that works the same way - including the shared shopping cart - but uses the separate storefronts to help delineate their related but distinct product lines:

The four related stores can be accessed from tabs in the top left, and a graphic to the right of the tabs lets customers know up-front that they can make a single order that includes products from all 4 stores, and that shipping is charged as a single order (instead of one shipping charge from each store).

Undoubtedly, categorization and navigation are essential to all e-commerce sites, but the larger the selection, the more problematic it becomes. I've presented several ways sites tackle this problem; what other examples have you seen? Let us know by leaving a comment.

Related Posts

Like this Post?

Subscribe to our RSS feed or sign up to receive new posts via email: