 | COMMONLY USED WEBSITE NAVIGATION MODELS
|
| |
|
|
Choosing the right navigation structure?
| This is the right time to remember that 'you are probably not the audience'. Your site's navigation should not be a reflection of your personal preferences. The model should be selected on the basis of the best strategic fit with the objectives of the site, the nature of the site's content and the needs and behaviors of the primary audience(s).
| Some questions that may help you narrow down the selection field ...
| In the section on accepted practice we looked at which of the following navigation models matched specific website requirements. Some of the questions that need to be considered include; how large is the site, do you want to guide or open all content, how much 'real estate' do you need for page content, and is the content itself doubling as navigation?
We explore ten of the most common navigation models below, including some real-world examples of each ...
|
|
|
|
|
| | TYPE 1 — SIMPLE HORIZONTAL MENU BAR
| A single horizontal navigation bar is neat and simple. Top down content flow is stronger that left to right, so it makes structural sense to have high-level navigation situated above page content. The primary problem with this model is the limited space available, making it potentially problematic for larger websites. In support of this model is the speed at which a visitor can make a navigation choice. Examples of this model include the following (click on thumbnail images to view larger version) ...
|
|
|
| | Mozilla
| Simple and elegant horizontal bar at top of page. Secondary navigation is included within content.
|
| | Link to site ...
| www.mozilla.com
|
| | | World Wide Web Consortium (W3C)
| Text-based primary navigation at top of page. Secondary navigation is included within page content.
|
| | Link to site ...
| www.w3.org
|
| | | My Space
| Primary navigation bar with some secondary navigation areas. Content on site often doubles as secondary navigation.
|
| | Link to site ...
| www.myspace.com
|
|
|
|
|
|
| | TYPE 2 — HORIZONTAL MENU BAR WITH DROP-DOWN PANELS
| A common way to partially address the space limitation of the simple horizontal menu bar is the addition of drop-down secondary menus for each item in the horizontal bar. This model is very common, generally easy to use and well accepted, however in certain cases, you may not want drop-down menus covering your page content. Examples of this model include the following (click on thumbnail images to view larger version) ...
|
|
|
| | Adobe
| Simple to understand horizontal menu with drop-down panel. Tertiary navigation changes depending on section of site.
|
| | Link to site ...
| www.adobe.com
|
| | | Louvre Museum
| Elegant menu bar with drop-down panels. Other navigation models apply appropriate to site sections.
|
| | Link to site ...
| www.louvre.fr
|
| | | Target
| Horizontal menu bar with multi-panel drop-down secondary navigation. Site includes a wide range of tertiary navigation styles.
|
| | Link to site ...
| www.target.com
|
|
|
|
|
|
| | TYPE 3 — HORIZONTAL MENU BAR WITH LEFT HAND INDEX
| Another way to address the space limitation of the single horizontal menu bar is the addition of a secondary navigation area on the left-hand-side of the page. This model is very common, easy for visitors to use and well accepted. It avoids the issue of secondary navigation covering page content, however it reduces the amount of space available for content. One of the strengths of this model is that the vertical index allows a larger number of items than the horizontal models. Examples include the following websites (click on thumbnail images to view larger version) ...
|
|
|
| | IBM
| Menu bar as principal navigation with secondary items to the left of page. Site also includes other navigation components.
|
| | Link to site ...
| www.ibm.com
|
| | | The New York Times
| Sectional menu bar at top of page with category sub menu down left hand side. Content items also used for navigation.
|
| | Link to site ...
| www.nytimes.com
|
| | | Mapquest
| Principal site areas in menu bar, with a hierarchical section menu down the left-hand side of page.
|
| | Link to site ...
| www.mapquest.com
|
|
|
|
|
|
| | TYPE 4 — SECTION TABS WITH LEFT HAND INDEX
| Very similar to the horizontal menu bar with the left of page secondary menu (type 3) is this model that uses tabs instead of a menu bar or text links. The subtle difference is that tabs imply a stronger sectional division in the website. As a result, this model is often used where the tabs signify different audiences or different functional parts of a website. Examples include the following websites (click on thumbnail images to view larger version) ...
|
|
|
| | You Tube
| Tabs separate the functional sections of the site and the left-hand index provides category based navigation.
|
| | Link to site ...
| www.youtube.com
|
| | | BBC
| Tabs separate the media arms of the BBC and the side index provides geographical, topic and functional navigation.
|
| | Link to site ...
| www.bbc.co.uk
|
| | | LinkedIn
| Tabs are used to separate the function sections of LinkedIn, subsidiary navigation is provided in the left hand index.
|
| | Link to site ...
| www.linkedin.com
|
|
|
|
|
|
| | TYPE 5 — DUAL HORIZONTAL MENU BAR (MULTI LEVEL)
| One way of addressing the space shortage of the 'single menu bar' is to add another secondary level that changes according to the primary selection. This keeps the structural elegance of this model, however it still has problems with the ultimate amount of available 'real estate'. Examples of this model include the following (click on thumbnail images to view larger version) ...
|
|
|
| | Apple
| Simple and elegant two-part menu at top of page. Other navigation changes through site.
|
| | Link to site ...
| www.apple.com
|
| | | Hewlett Packard (HP)
| Two-level navigation bar under brand image, with large secondary navigation area.
|
| | Link to site ...
| www.hp.com
|
| | | Internet Archive
| Two-part navigation bar at top of page, with multi-line secondary section to address space shortage.
|
| | Link to site ...
| www.archive.org
|
|
|
|
|
|
| | TYPE 6 — DUAL MENU BAR WITH DROP-DOWN PANELS
| In this model, a dual menu bar usually contains the primary and secondary navigation, with the third and sometimes subsequent levels of navigation contained within drop-down panels. This model demands more understanding from the site audience, however it is useful for large sites with a relatively deep and complex structure. Examples of this model include the following (click on thumbnail images to view larger version) ...
|
|
|
| | Dell
| Two part horizontal menu with multi-part drop-down panels. Certain sections also contain additional navigation models.
|
| | Link to site ...
| www.dell.com
|
| | | Forbes
| Complex news portal site, primary navigation is two-part horizontal menu bar with drop-down panels.
|
| | Link to site ...
| www.forbes.com
|
| | | Best Buy
| Two differing horizontal bars, second bar focussed on categories with drop-down panels. Navigation duplicated within left-hand panel.
|
| | Link to site ...
| www.bestbuy.com
|
|
|
|
|
|
| | TYPE 7 — DUAL MENU BAR WITH LEFT HAND INDEX
| A more complicated navigation model, with a dual menu bar, containing the primary and secondary navigation, accompanied by a vertical panel on the left-hand-side of the page that usually contains the third and subsequent levels of navigation or an alternative index. This model takes up a large amount of page real estate and demands more from the site audience, however it is useful for very large sites and signals to visitors that there is a large amount of content on the website. Examples of this model include the following (click on thumbnail images to view larger version) ...
|
|
|
| | Fox News
| Two part horizontal menu at top of page has an additional country and topic based vertical menu.
|
| | Link to site ...
| www.foxnews.com
|
| | | Hi 5
| Two-part horizontal menu at top is accompanied by alternative subject and topic groups in left-hand vertical panel.
|
| | Link to site ...
| www.hi5.com
|
| | | ABB
| Complex site navigation that includes two-part horizontal menu bar and subsidiary left-hand vertical panel.
|
| | Link to site ...
| www.abb.com
|
|
|
|
|
|
| | TYPE 8 — LEFT SIDE HIERARCHICAL INDEX
| One of the most common and most flexible navigation models is a hierarchical index down the left-hand-side of the page. Although giving up site 'real estate', this model allows a great deal of flexibility in relation to the length of the index. Various systems are utilized including collapsible trees, grouped indexes and alphabetical lists. Examples of this model include the following (click on thumbnail images to view larger version) ...
|
|
|
| | The White House
| Primary navigation is provided to the left in topical hierarchy under key headings of Issues, News and Speeches.
|
| | | | | Amazon
| Primary navigation is a hierarchical topic browsing menu on the left-hand-side. Other navigation models are also used.
|
| | Link to site ...
| www.amazon.com
|
| | | About
| Principal site navigation is an alphabetical topic categorization on the left-hand-side of the page.
|
| | Link to site ...
| www.about.com
|
|
|
|
|
|
| | TYPE 9 — LEFT SIDE SEGMENTED INDEX
| Another version of the left-hand-side index, is a multi-part segmented index. Usually, the primary navigation is in a section at the top, making use of this strong area of the page, and secondary navigation is provided in another section directly underneath the primary items. Slightly harder to understand that the hierarchical model, this does have the advantage of keeping the main index items at the top of the page. Examples of this model include the following (click on thumbnail images to view larger version) ...
|
|
|
| | Reuters
| Primary navigation is segmented at the top of the left-hand navigation panel, with additional navigation included below.
|
| | Link to site ...
| www.reuters.com
|
| | | The Library of Congress
| Although the site has many index pages full of navigation options, the primary segmentation is included in the left-hand panel.
|
| | Link to site ...
| www.loc.gov
|
| | | University of Florida
| Site has clear division between the segmented navigation panel on the left and the content area on the right.
|
| | Link to site ...
| www.ufl.edu
|
|
|
|
|
|
| | TYPE 10 — MIXED MODELS AND FULL PAGES
| There are obviously navigation models that do not fit the categorizations discussed above, some are hybrid combinations of these models, others are full-page content driven navigation models. In certain rare circumstances it may make sense to depart from well established and well understood navigation models (do so with careful consideration). Examples of some of these variations include the following (click on thumbnail images to view larger version) ...
|
|
|
| | Coca Cola
| One approach, particularly for entertainment and heavily branded sites is to make every element both content and navigation.
|
| | | | | Walmart
| Another approach is to use all the models, this can create confusion and also takes a large amount of page space.
|
| | Link to site ...
| www.walmart.com
|
| | | Yahoo
| Among the most visited websites in the world, Yahoo is also one of the most complex from a navigation perspective.
|
| | Link to site ...
| www.yahoo.com
|
|
|
|
|
|
Other website navigation devices
| We have focussed our attention on the principal website navigation models, however most websites also offer a range of alternative navigation options (often described as sub-navigation). Some of the more common and well understood by website visitors include search, hierarchical 'breadcrumbs', site map(s), index pages, protected access areas (extranets and intranets) and site tours. These options can be added in addition to a primary navigation model.
| In the coming weeks, we will provide more information on sub-navigation and when it is best used to improve the total effectiveness of your website.
|
|
|
|
|
