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