How to design a good Web navigation bar

What should media companies consider when designing a navigation bar for their websites? In other posts in this series, I've discussed our own experimentation with navigational design; compiled several examples of navigation bar designs at media companies; and explored the taxonomy and purpose of a navigation bar.

To put this information in perspective, here are tips for media companies to create a user-friendly navigation menu. There's no one-size-fits all approach, but this advice from experts can be broadly applied to many types of media companies.

Start with a content classification system

As discussed in my previous article, a good navigational structure begins with properly tagged content. Once content is classified, it can be applied to any navigational structure on various platforms, noted Seth Earley, CEO of Earley & Associates, Inc., an information management consulting company.

Do audience testing

Experts stress the importance of navigational testing on an audience. For instance, what kind of information is your audience looking for? Peter Eckert, chief creative officer of the design firm projekt202, said media companies should start with upfront research using personas of the demographics (e.g. a middle-aged housewife and a member of Generation Y).

Readers might go to a traditional newspaper site looking for sections of a traditional newspaper (USA Today handles this by offering both sections and topics in its menu). Or business readers might go to sites looking for specific business functions.

Providing business information quickly was the thinking behind Reuters' navigation bar, which was dramatically revamped at the end of 2009 during a redesign. Reuters developed focus groups of its target audience of elite business professionals, said to Liesel Kipp, vice president and global head of product management at Reuters Media.

In the past the Reuters content menu was organized in a more traditional way, using categories defined by the publisher. Kipp said they decided to turn the thinking on its head to organize the content for the audience in a presentation easy to consume.

For Reuters, the solution was a few narrow but deep buckets of topics. The bar opens to giant dropdown boxes — a feature that has popped up in the design of more media websites, though less dramatically so.

Kipp noted that in the previous design, information could be three levels deep. “We really wanted to get this idea of topical-based content to the floor of the experience so that our audience could consume information and greater discovery would happen,” she said.

Choose the right design for your audience

Research can help inform design decisions. Horizontal navigation continues to the most popular design for media companies, as studies show that the eyeball falls in that area when looking for information. "Based on the tests we have run, people typically respond well to top navigation; intuitively people tend to look at the middle of the screen,” said usability expert Cia Romano, CEO of Interface Guru. The left bar is typically useful for content overflow.

Some say vertical navigation will make a comeback as design shifts to the tablet, but this is debatable; experts also note that its hard to compare tablet design to Web design.

Romano summed it up this way: Publishers and designers have to keep a keen eye on the tablet space because it’s inevitable that tablet design will touch web design. “But the solution to each problem is different because the device you are using to access the content is literally different.”

Navigational structures have more options (even beyond vertical and horizontal bars, evidenced by what we've tried at eMedia Vitals). “New technology enables you to do more creative things,” said Christopher Dreher, a freelance Web developer. For instance, dropdowns have allowed media companies to add a subcategory to the navigation menu (e.g. Reuters).

Don't overwhelm the user

Some experts warn that dropdowns can offer too many choices. Romano has a “rule of 7:” Dropdowns should have no more than seven to 10 subsections. She said if you need more than seven, you might consider using an ancillary left navigation. The main navigation bar itself should have no more than 10 categories ― and that's pushing it, she said.

Eckert agrees that “less is more,” keeping the navigation simple and intuitive.

When choosing actual terms for the navigation, Romano said media companies don't have to limit themselves to one word if two words would explain the category better. For instance, "shop" is good as one word but "web design" is better explained in two words.

Don't marry a design

The important part of choosing a navigation design is in putting the user first ― rather than the design.

“There are a lot of things that I’d love to put in that look really cool ― but really cool sometimes doesn’t work best,” Dreher said. “It’s a balancing act between all these different demands.”

Romano said media companies can't fall in love with a visual design before finding out what works. “It's like buying a really great pair of shoes and saying 'I hope they fit me.'”

The key is to start with the user interface and information architecture, and then move to visuals. “Useful does not have to be ugly, but at the end of the day the navigation has to be useful and usable,” she said.

Anchor the reader

Romano said one of the key uses of the navigation bar is to let the reader know where they are on the site. Media companies can achieve this by displaying a visual difference in the bar.

This becomes even more important when traffic comes through search and social rather than a site's homepage: With a clear navigation bar, readers coming to a piece of content from somewhere else can have a clear view of where they are on the site.

"You should still be able to anchor yourself … It takes a little visual construction to get to that," Romano said.

Monitor what works

After Reuters redesigned its nav bar, Kipp said they were curious to see what the learning curve would be. The result was positive — higher click-through rates in the nav bar and more engagement on sub-sections of the site.

Even if Reuters didn't follow all of the rules (the dropdowns are much larger than what experts would recommend), something was working for the particular audience.

Sometimes analytics will display what needs to be improved: Monitoring analytics led us at eMedia Vitals to change our nav bar and will continue to inform us. In Google Analytics, in-page analytics can give publishers an idea of how many people are clicking on the nav bar.

If there's a lesson learned from the navigation redesign, Kipp said that “it's always about the user and audience.” Since launching more than a year ago, Reuters has watched audience behavior and continued to fine tune the navigational design. “And I think you'll see further iterations on its design,” Kipp said.

Read more about navigation bars.