User Experience Design Blog

Commentary on strategy and design of interactive products.

Examples and Trends of Headers and Navigation

August 18th, 2008 by Sergio Paluch

This survey takes a look at the various example and trends of headers and navigation across major websites. (Scroll down to see examples.) In particular we focus on headers coupled with horizontal navigation as that has become the industry standard. Many top sites, like those shown below, have adopted this paradigm. A few notable exceptions include shopping sites like Amazon.com and news sites like NYTimes.com and BBC.co.uk. Typically those sites that opt for vertical main navigation tend to have too many top-level navigation categories to fit in the horizontal space and resort to a vertical listing out of necessity.

For the majority of other well-known sites the header and horizontal main navigation ensemble offer a compact and elegant solution allowing users to access all major areas of the site as well as critical functionality like site-wide search. In addition, this solution frees up the entire horizontal real estate below the header and main navigation–a welcomed benefit considering conventional size limitations.

Header and Horizontal Navigation Trends

It is well known by now that the top of the page is by far the most precious real estate on a web page and making the best of this space is vital. By using desktop applications and by continually encountering similar navigation paradigms, users have come to expect the top of a web page or web application to provide pathways into the most important sections of a web site as well as access to critical functionality like site search. At the same time, web sites and web applications seek to promote their brand, spread their message, make money, and drive users to high-value actions such as uploading media. And even though almost all of the sites surveyed share the same goals in designing their headers and main navigations, there are two main schools on designing a user experience to meet them.

One school of thought is to make the header and navigation as simple as possible and thus to focus user attention and interaction on a small handful of sections and interactions. This, of course, has the serious limitation that users have to perform more actions to get to many of their destinations or to perform desired tasks. The master of this approach is none other than Apple on apple.com as well as other popular sites also surveyed here like YouTube.com, Veoh.com, and LinkedIn.com.

The other approach is to expose a great number of navigation paths and interactions allowing users to quickly get to their goal. Conversely, the latter paradigm spreads users’ focus and interactions among many items. The best example of this approach in our survey is ESPN.com. The majority of the sites that we looked at fall somewhere in the middle.

Other smaller trends that we have found are that more sites now put a prominent search bar in the header, more sites put large advertisements in the header, and some are starting to move user-centric navigation like login close to the branding on the left.

(Examples are listed in alphabetical order.)

Apple.com Header and Navigation

Apple Header and Navigation

CNN Header and Navigation

CNN Header and Navigation

Current TV Header and Navigation

Current TV Header and Navigation

DeviantART Header and Navigation

Deviant Art Header and Navigation

Digg Header and Navigation

Digg Header and Navigation

Ebay Header and Navigation

Ebay Header and Navigation

ESPN Header and Navigation

ESPN Header and Navigation

Flickr Header and Navigation

Flickr Header and Navigation

Flixter Header and Navigation

Flixter Header and Navigation

Hotels.com Header and Navigation

Hotels.com Header and Navigation

Hulu Header and Navigation

Hulu Header and Navigation

LinkedIn Header and Navigation

LinkedIn Header and Navigation

MetaCafe Header and Navigation

Metacafe Header and Navigation

MTV Header and Navigation

MTV Header and Navigation

MySpace Header and Navigation in Logged-in State

MySpace Header and Navigation in Logged-in State

MySpace Header and Navigation in Logged-out State

MySpace Header and Navigation

Netflix Header and Navigation in Logged-in State

Netflix Header and Navigation - Logged-in State

Netflix Header and Navigation in Logged-out State

Netflix Header and Navigation

Sony Playstation Website Header and Navigation

Sony Playstation Header and Navigation

Technorati Header and Navigation

Technorati Header and Navigation

Veoh Header and Navigation

Veoh Header and Navigation

Yelp Header and Navigation

Yelp Header and Navigation

YouTube Header and Navigation

YouTube Header and Navigation

Zevents Header and Navigation

Zvents Header and Navigation



Subscribe to Montparnas' User Experience Design Blog (RSS) Subscribe to Montparnas' User Experience Design Blog

3 Comments add a comment

Post Comment

Required fields are denoted by an asterisk (*)

(will not be published)


    Comments (RSS)    Follow Montparnas on Twitter Follow us on Twitter
Montparnas User Experience Design Blog is proudly powered by WordPress.