5 ways to design a nav bar for a media website
Advertisement
Media websites have tried some experiments with navigation bar design, though the standby, horizontal bar across the top of the page continues to be the most common.
Several considerations about a site's content and audience go into navigation bar design. Here are five examples of how media companies are designing navigation bars, from the traditional to the avant garde.
Reuters
Reuters' nav bar represents an emerging trend in navigation bar design: having a small number of items open to a dropdown with numerous options. Reuters does this in a prominent way with large boxes of content, including rich media. The site also uses vertical navigation to house market information, which expands from the side.
Other media companies employing the dropdown style include Examiner.com, NPR and Slate. The goal is to simplify the nav bar, putting more content into the second layer. However, the large boxes risk being overwhelming.
The New York Times
The New York Times takes a traditional approach and employs both horizontal and vertical navigation. On its homepage, the publisher skips the horizontal bar altogether in favor of (what must be a well-paying) ad, as well as social, search and subscription options. The top left corner offers broad navigation (“today's paper,” “video,” “most popular,” and “Times Topics”).
For a really old-school Web feel, the website's vertical navigation lists sections in a print-like categorization fashion. Those sections turn into a more modern horizontal bar once a reader clicks on an article:
Vertical navigation still pops up on media sites, but more often as a way to showcase hot topics rather than site sections. (For example, Meister Media's CropLife Media Group also uses the vertical navigation to highlight topics.)
The Times' navigation bars aren't exactly forward-thinking and more of a print translation to digital — but, after all, you probably have more leeway to be traditional when you're a brand like The New York Times.
Gawker
It's almost cheating to put Gawker on the “navigation bar list,” because the recently redesigned site doesn't have much of a navigation bar. The top navigation offers few options, such as the choice to see the most popular posts and conduct a search. To navigate by section, readers have to click on the topic in the stream.
Gawker's controversial less-is-more navigation could either be the next wave of navigation — or a failed experiment in usability.
People.com
People.com keeps navigation pretty clear and simple and aims the section titles at exactly what readers are looking for (such as “red carpet,” “style” and “babies”). This is supplemented with a few teasers of top stories sitting above the bar.
The simple horizontal bar of topics is very prevalent on media websites; I just chose one design randomly. In an example from a newspaper company, USA Today uses a colorful horizontal bar to designate sections and a second row to designate essential topics.
CNET
The CNET navigation incorporates several navigation bars, including vertical, horizontal and a “catfish” bar, which stays pinned to the bottom of the screen as you scroll. After killing our slide nav, we use the catfish as our main navigation.
At CNET and other websites, the catfish nav is often used as social navigation, where users can see recently viewed products or share content on social media. Reuters uses the bar for a personalization element, displaying news in topics chosen by the reader:
What other navigation bar design trends do you see on media websites? What works/doesn't work? Please share. In a future article, we'll explore what media companies should consider when designing a navigation bar.
Read more about navigation bars.
Join the discussion
There are no words for the amount of disdain I have regarding Gawker's site redesign. They have turned an easily navigable blog into a mishmash of frames, confusing (or is there any?) navigation and obstructive advertisements. Redesigns are fine, and innovation is great, but being innovative means being better. This is not better. I'll take a bedazzled MySpace profile or a circa-1997 Geocities page over the new Gawker any day.
Christopher,
I personally agree with your take on Gawker's redesign, but I applaud them for breaking outside of the norms. Someone has to push the envelope, and it's nice to see someone take a 25% hit in traffic and then wait it out to see what the long-term impact is. Most publishers would pull this right away, but I'm interested to see what Gawker learns.
I disagree that innovation means being better. Innovation is about trying, failing, learning, and then succeeding. So, I think it's totally appropriate to bring in something in the "trying" stage of the game.