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
CNN Header and Navigation
Current TV Header and Navigation
DeviantART Header and Navigation
Digg Header and Navigation
Ebay Header and Navigation
ESPN Header and Navigation
Flickr Header and Navigation
Flixter Header and Navigation
Hotels.com Header and Navigation
Hulu Header and Navigation
LinkedIn Header and Navigation
MetaCafe Header and Navigation
MTV Header and Navigation
MySpace Header and Navigation in Logged-in State
MySpace Header and Navigation in Logged-out State
Netflix Header and Navigation in Logged-in State
Netflix Header and Navigation in Logged-out State
Sony Playstation Website Header and Navigation
Technorati Header and Navigation
Veoh Header and Navigation
Yelp Header and Navigation
YouTube Header and Navigation
Zevents Header and Navigation