In a previous article, ‘4 Principles of Effective Navigation on the Web‘, one of the stated keys is letting users know where they can go. One of the most effective ways to let users know what paths are available to them is to expose subsequent destination points. In other words, bubbling up subsections and pages found within top-level sections helps users gain context as well as unearths particular destinations within those sections. Let’s start with an example to illustrate what I mean.
Our office ran out of blank DVDs the other day. I chose to order more DVDs online to forego the hassle of driving to the store. I went to the Office Depot web site and quickly scanned the main navigation and the middle of the screen. The main navigation had two choices that seemed to match – ‘Office Supplies’ and ‘Technology.’ In my mind it was really a toss-up.
Since I was late for a meeting and am rather adverse to playing guessing games, I decided to try a competitor. I typed ‘officemax.com’ into my address bar and landed on the OfficeMax home page. There I quickly scanned the main navigation and the middle of the screen. Although Office Max has similar categories: ‘supplies’ and ‘technology,’ many key sub-categories are exposed in the middle of the home page. Therefore, I quickly found the path that I needed: ‘CD-RW, DVD Media & Storage.’
Navigation mechanisms often offer a myopic view of available paths, forcing users to take paths that may or may not bring them closer to their goals. This is not a problem if the categories and sub-categories that they contain are very intuitive for all. For example, if I wanted to buy a digital camera from the Best Buy web site, I would almost certainly know to click the ‘Cameras & Camcorders’ link in the main navigation. However, there are many cases where users do not enjoy such intuitive choices, and poorly implemented navigation forces users to choose paths which lead in uncertain directions.
There are a number of ways to give users farsighted visibility into the navigation structure. It is impossible to cover all of the methods, but by comparing some popular ones we can get a better understanding of their particular benefits and drawbacks.
Home Depot vs. Lowe’s
Home improvement ecommerce web sites are excellent case studies of navigation systems since they offer such a wide selection of products within numerous categories. Allowing users to quickly find items that they seek goes far beyond information architecture. In fact, it is impossible to create an information architecture that will be intuitive to all users since there are many gray areas in the logical groupings. Far more important is creating a user interface that offers users greater insight into the navigation pathways.
The Home Depot web site has a daunting set of 22 product categories in its main navigation. Some of the categories are rather intuitive while others much less so. For example, what can I expect to find in ‘Building Supplies’? I would expect a huge assortment of products to be located in that category; it has little meaning or value to me as a consequence. Not only that, many of the categories clearly overlap or are redundant. Looking at all 22 main product categories causes a great deal of uncertainty and confusion.
Further, without having a great deal of foreknowledge, I am mystified as to how the products contained in ‘Building Supplies’, ‘Electrical’, ‘Electronics’, and ‘Lighting & Fans’ differ. I am also confused by what I can expect to find in ‘Outdoor Power Equipment’ versus ‘Power Tools’.
Because the web site does not offer any visibility into those categories, the only way for me to resolve these questions is to navigate to each section and survey the products contained within them. This approach inherently introduces great potential for navigation errors as well as a great many needless clicks and wasted effort. Except for the most motivated, this is likely to be hugely aggravating for most users. Unlike Microsoft’s iron hold on MS Office users, web-based services like the Home Depot ecommerce site do not generally enjoy relatively high levels of customer loyalty since users can easily navigate to a comparable competitor such as Lowe’s.
The Lowe’s web site does not have as many top-level product navigation choices, but it does offer a mechanism that exposes sub-categories within those top-level ones. For example, when a user mouses over ‘Building Products’, corresponding sub-categories are displayed and even third-level categories.
Users can quickly see that the ‘Building Products’ category includes ‘Electrical’ items such as ‘Breakers’ and ‘Wiring Devices’. One immediately understands the nature of products found in ‘Building Products’ and can even go directly to some popular ones such as ‘Treated Lumber’. This practice not only reduces navigation error, but also reduces the number of clicks needed to get to popular product categories as far down as three levels deep.
There are some drawbacks in this case, however. In order to expose the sub-categories, users must mouse over the corresponding link in the main navigation. It would be preferable to expose the sub-categories upfront, without the need for any user action, but it is sometimes impractical to do so given space and aesthetic considerations.
OfficeMax vs. Office Depot vs. Staples
The most user-friendly way to expose deeper levels of navigation is simply to list out the categories. This gives users a better sense of the contents of top level categories and offers users shortcuts to their target destinations. The Staples web site does this very effectively by listing out the main navigation categories as well as main subcategories in a prominent place on the home page. Users do not have to point their mouse anywhere to see the sub-categories, and they have to do little scanning to locate these links.
The OfficeMax web site also does this effectively, although it places the category listings further down on the home page, requiring users to do more scanning.
Effective navigation allows users to quickly and easily find their way toward a destination without having to guess, get lost, or click numerous links. Whenever space and aesthetic limitations permit, navigation systems should both give users an insight into each pathway as well as reduce the number of steps required to get to key areas. Ensuring that these goals are met will help to deepen users’ loyalty by minimizing frustration and will make their interaction with the web site more valuable.