Here at Dovecot, we were recently faced with being caught with our navigation down. We were creating a new web design for a client and had instructions to stick to a relatively conventional 3-column design. So we invoked the holy trinity: left hand navigation, middle content, right hand related content.
All seemed well… until we hit the visual design phase. The designer wanted a wider content column to work with and removed the right column in the first draft mockups. To compensate, he moved our lovingly prioritized right column elements into the left column, under the navigation.
While there’s a pretty strong consensus that today’s web users are more comfortable with scrolling, eye-tracking heat maps tell us the bottom left side under the navigation is still a cold spot. And since this went directly against one of the main goals of the redesign — to surface related content and give more focus to calls to action — we needed to present other options. And fast.
This lead to a round of brainstorming and a review of research, articles, and discussions about the best patterns for second level navigation design.
While search for the “perfect” navigation solution may have reached at zenith a few years ago with series of posts entitled: “The Case Against Vertical Navigation”, “In Defense of Vertical Navigation”, and “Response to in Defense of Vertical Navigation”, it still very much comes down to the style and goals of a particular project.
Since we had to weigh the pros and cons of different approaches for supporting second level navigation without using the traditional left column placement, we thought we’d share what we found:
1. Horizontal navigation.
Adding a second horizontal navigation bar is the most obvious and common way to present local navigation without taking up vertical space. Visual design elements can help visitors understand at a glance where they are within the site without taking away focus & real estate from content. Less important items can be included under an additional drop-down “More” link (though we have to question if something isn’t important enough to show, does it really need to be in the menu?). This approach is particularly popular with content-dense sites such as USA Today and CNN’s sports section.
- Fulfills the navigation ideal : clearly available when you look for it, but not in the way when you don’t
- Has the added effect of forcing organizations to think critically about their content and priorities
- Reduces the distance users have to move to select an item
- Gives more priority to the leftmost items, allowing you to nudge users towards critical content
- Labels need to be as short as possible. Usability studies have suggested that longer navigational labels help users make better choices, shorter labels could result in sacrificing clarity
- The fixed space available means you need to design specifically for the length of the navigational labels and any additions or changes may require design changes as well
2. Skip it altogether. Use your global navigation to display both level 1 and 2.
All you need to do here is make sure your dropdowns or mega menus from the global navigation are clearly indicated and uncluttered. Emphasized breadcrumbs a bit more than you might normally to help users know where they are in the site.
A great example of this is the Michael J Fox Foundation. Their menus are perhaps a bit full for our taste, but still clean and easy to use. They offer access to level 2 landing pages as well as level 3 sub-items.
Content pages have no dedicated second or third-level navigation, but they do use in-page links to give access into the deeper content.
Some sites have a “sticky” effect where the global navigation remains visible, following as you scroll down the page, making it easier for users to remember to use it for moving around the site. This effect might not work for your site’s brand or corporate culture, so use it carefully.
- Clean & roomy content pages
- You can expose more content in a mega menu than a single column of nav links on a page
- More and more people like to use the main navigation as their default wayfinder
- The sub-navigation isn’t visible at all times
- Requires visitors to take an extra action to expose the menu
- Fly-out menus can be overwhelming to users if too cluttered
- The current/active menu item cannot be indicated, only the top-level item
3. Put it on the right
Right-hand navigation has come and gone a couple of times in the last decade and right now it seems to be going again — with even such prominent examples as Audi (“Challenging the Status Quo: Audi Redesigned”) and Airbnb switching back to a more traditional left-hand nav. Sites that successfully use right hang nav make sure that it is clearly labeled and doesn’t get lost in a muddle of ads or related content.
- Puts the focus on the content
- Gives a novel, edgy feel (YMMV)
- Depending on which study you believe, it might be faster for users who keep their mouse by the scrollbar on the right
- People just don’t expect it to be there
- Either you lose a “hot spot” for calls to action or important related content OR you end up mixing the navigation with other elements
- If you do have related content in the other (left) column, people may mistake that for navigation and become confused when it doesn’t act like it
As usual with any IA problem, the best solution is going to depend on the particulars of the site’s content, goals, and audience. If you find yourself repeatedly reaching for the same solution, it might be time for some research and brainstorming to make sure you haven’t fallen into a rut. And finally, don’t forget to test, test, and test some more — no blog post about best practices or industry leader opinions can replace interaction with actual users.