Revealing Navigation Pathways to Web Site Users

Revealing Navigation Pathways to Web Site Users

Facebooktwitterredditlinkedinmail

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.

Navigation on the Office Depot Home Page

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.’

Revealed Navigation Pathways on the OfficeMax Home Page
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.

Case Studies

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.

Main Navigation on the Home Depot Ecommerce Site

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.

Navigation on the Lowe's Web Site

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.

Revealed Navigation Pathways on the Staples Home Page

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.

Navigation Sub-Categories Exposed on OfficeMax Homepage

Office Depot also allows users to see sub-categories within the main navigation categories, but does so less effectively by implementing a mouse-over interaction similar to Lowe’s web site. This is certainly better than not providing visibility into the main categories, but requires user interaction to do so. At the same time, this implementation frees up a lot of real estate that can be used for product promotions. An additional thing to note about this implementation is that expanding navigation menus sometimes break in users’ browsers due to version incompatibility or because users disable JavaScript.

Second-Level Navigation on Office Depot Web Site

Takeaways

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.

Facebooktwitterredditlinkedinmail

About the Author

2 Comments

  • Leah March 19, 2007 at 9:19 pm

    I cannot tell you how often I have had a similar experience of trying to purchase something quickly and jumping to another site to find what I am looking for. My family lives out of state and I recently bought a gift card online for a nephew from a sports store in the Midwest. When my sister-in-law let me know what sports store they had in their area – I did a Google search and bought from the store A) with a website B) with a *good* website.

    Nice article! I wish more businesses would read it and put it to good use! It would make much more money for the business in the end – at least sports retailers in the Midwest!!

  • Kinya June 21, 2007 at 7:59 am

    Thank you for providing this insight on user navigational habits. The mouseover navigation (implemented by Lowe’s) is ideal for organizations who may experience Sharepoint 2003 pull-down menu limitations.

    Also, it looks as if Home Depot has implemented your suggestions for displaying categories & sub-categories for a more intuitive & improved user experience.

Leave a Reply