Make pages easy to find, how to create a great navigation menu

21 November 2011

If you run a site with lots of pages - be it a large eCommerce store or a multi-topic blog with over 500 posts - one of the problems you will inevitably run up against is organizing your content. At the heart of this problem is the top-level navigation, and how you organize it. Your limitations are normally that it can only contain a certain number of items. Other problems could be that you are not certain which way to create your page hierarchy.

Here are a few steps to take to make the process easier, and to set up your navigation to make it scalable as your website grows:

1) Map The User Journey
User behavior and User Stories are integral to software and website design, so it’s important to understand:

• Why your visitors are there
• What they are looking for
• What they are likely to click on when presented with a random page

The most important thing to remember here is that the content your visitors want to see may not necessarily be the pages you want to show them. Likewise, the path you’d expect them to take is seldom the one that will be obvious to them. You need to find out what people actually do on your page to make an informed decision about navigation.

Getting this type of data typically requires a bit of time, as you need decent numbers to see any real trends. However, a general rule of thumb is this: if people aren’t using your nav menu, it means that they have found a better way to find the content they want. You need to find out what that pathway is, and make it your default.

Once you have mapped the User Journey out, it gives you a much better idea of how to set up your nav menu.

2) Draw It On Paper

Let’s take the example an eCommerce store that sells both men’s and women’s beauty products. You could either have your top level being the types of products (skincare, shower, hair, fragrances), and then have “Men’s” and “Women’s” in each section, or you can start with men and women as your main categories, and then create duplicates of all the other categories in each.

Diagrammatically:

1. Skincare Shower Hair Fragrances
   1. Men’s Men’s
   2. Cleansers, etc.
   3. Women’s Cleansers, etc.
      Or:
2. Men Women
   1. Cleansers Cleansers
   2. Haircare Haircare

Both approaches have their ups and downs, and both involve creating duplicate categories somewhere along the line. But if we take what we learnt in Step 1, we see that it probably makes more sense for people to decide what gender they are, before having to wade through thousands of girl products to find shaving cream.

Drawing it on paper makes it immediately obvious which arrangements will work better than others. If you can’t draw it easily on a single landscape page, it’s probably too complex.

3) Make it Scalable

This is the most important thing about navigation, and also the most difficult to get right. You have to identify which areas are likely to expand, and which will stay more or less the same size.
Let’s take the beauty products example above: It might seem like a great idea to make a “Shop by Brand” section, and put all of your brands there in a nice dropdown, so people can choose them from the home page. It looks great when you start, because you have 14 brands and they fit on the page.

But when you add another 10 brands, or another 30, you all of a sudden have a dropdown menu that requires you to scroll down three pages to see the bottom of it, and it becomes unusable. The point here is to try as much as possible to look forward and spot areas of potential expansion, and areas which will not grow brother and sister menu items over time. The types of product are not likely to increase, but brands will.

While it might make navigating your site easier in the beginning, a solution that isn’t scalable will only result in your site becoming less and less usable, until all of a sudden you have to put in a great deal of effort to do what you should have done in the first place.