Nav bar design: one media company's story

Like many of our stories about digital strategies for publishers, this topic was inspired by our own experiences at eMedia Vitals. This post looks into the thought process behind our recent navigation experiments. Future posts will offer advice from experts about best practices for designing navigation bars, as well as some examples of what media companies are experimenting with.

 

When eMedia Vitals first launched in mid-2009, the site had a fairly traditional horizontal navigation bar:

 

 

About six months ago we rolled out a dramatic, forward-thinking redesign, built for new platforms and consumption habits. One new element was the “slide nav,” or a navigation module that followed you down the page as you scrolled and expanded when you clicked on it to reveal topic pages and other inside content. Though I can't recreate how the nav bar would chase you down the screen, it looked something like this: 

 

 

 

Jennie Lee, our creative director, says the sliding nav bar was aimed at making the traditional horizontal navigation bar more iPad-friendly. After all, media companies like ours don't have the resources to pour into custom mobile apps, prompting us to consider how to make our website more browsable from smartphones and tablets.

 

Our CEO, Prescott Shibles, is a big fan of sites like Gawker for “pushing the envelope on interface design” and trying new strategies to reorient readers (Gawker has received considerable flak for its redesign). “When everyone does navigation the same, you're never going to improve performance,” Shibles said. “And as tablets like the iPad come out, there's a need to explore better interface design.”

 

If we were going to get really non-traditional, we'd throw out the navigation bar entirely. After all, newsletters, search and social are the main drivers of our traffic, not direct traffic to the homepage. But, Lee said, because some readers still like nav bars, in some ways we felt obligated to have one.

 

Nav bars also have the chance to entice readers once they land on a site. Here's where a good taxonomy gets put to work. The nav bar gave readers a way to find archived articles about topics they like (e.g. “iPad” or “content aggregation”). The articles are tagged and populated on topic pages, which we are still building out. 

 

While you can still navigate eMedia Vitals by very broad categories (newspaper-style), such as “editorial” or “design,” the topical taxonomy is much closer to how people navigate on websites.

 

“It's not about creating the Dewey Decimal system for your site,” said Shibles. Instead, topics should answer the question: “What are the problems people are trying to solve right now?”

 

The mission of our taxonomy remains in place, but the execution has changed. After a few months, the nav bar was not attracting many clicks, and the only feedback we received was negative. (From one anonymous commenter: “The 'Browse by topic' thing on this page is so annoying I can't even read the article.”)

 

Part of what we learned from the nav bar experience was to trust our analytics, instead of relying too heavily on our own preferences or assumptions about what appeals to an audience. "I was a big fan of the slide nav, and loved the way it followed you down the page,” said our COO, Mitch Speers. “The fact that the analytics showed nobody agreed with me just emphasizes the importance of using data when making decisions about the effectiveness of any site element.”

 

The slide nav is history, but we still haven't reverted back to the horizontal nav. Now we utilize a "catfish" design (named for its bottom-dwelling existence). Scroll and you'll see that the new design pins the navigation to the bottom of the screen regardless of where you are on the site. 

 

Lee got the idea from sites like cnet, which have a similar bar across the bottom. However, most sites use the catfish for supplementary material (such as social media), whereas we use it for our main navigation. 

 

Since implementing the new nav bar, traffic has improved slightly, though the bar is still not a huge driver of clicks from the homepage. On the upside, the new design is less cumbersome to the users who complained and is getting more attention. On the downside, the catfish doesn't work on the iPad, Lee noted. (Some of the design experts I interviewed told me the translation of Web directly to the tablet will be cumbersome; this is one sign.) 

 

The catfish will continue to be a test in new styles of navigation. "We're doing something experimental because part of our mission is to be cutting edge and out in front of trends for media companies,” Lee said.

 

Does our non-traditional design work for you? What are your site designers experimenting with? Share your experiences below.

 

Read more about navigation bars.