Navigation

How much of the structure to expose to the user, and where. Careful naming can help users understand what a group is about and where a link will take them.

Some principles

1 Search is the start

Most people landing on any specific page arrive having used a search engine (almost always Google) to find an answer to a question. Shorter, more specific pages help search engines get this right.

2 Break up long pages

People can skim a short page quickly, find their answer or the most likely link to it. Connect small specific pages linearly.

3 Journeys continue logically

If the search landing page is close to the answer, it does not need the ability to get the user to every other article across the site.

Navigation available on most pages must cover:

4 You are here

Revealing these layers of global, structural and local navigation is good, but make it crystal clear where the current item sits in those. Bold highlights on active areas. Clear paths back to the homepage.

5 Reading hypertext is navigating

Inline links as part of the copy are much more likely to be clicked than links to the side, so make them relevant and use them with care.

6 Related link overload

When the only next step is a list of related links this puts a large cognitive load on the user – they ask “of all these, which one is best, next?”

We must be more selective and guide “next” better.

7 The web is for reading

A website should not rely on links to read self-contained print orientated documents as PDFs. Guides like this should be implemented on the web as a set of pages with a linear reading order, a web guide if you like.

8 The eye follows the mouse

If a navigation item must reveal a menu when selected, place the menu near the mouse pointer – not across the page.

Some practicals

1 Consolidate elements

Put all the important pieces of the page in one place. This is the orthodox solution and typically has these items all in one unit: Logo, top level titles, search field plus these secondary items Language change, user account entry points, one key tool

2 Main navigation bar

Depending on the final shape of the information architecture we expose to the user, we may end up with 4, 5, 6 or 7 top level items where some or all have a menu available directly.

Here are some sample layouts that integrate these possible iA requirements with a brandmark and search in the expected standard places.

multiple-nav-numbers

A top level count of 6 items, three of which access deeper content through a megamenu, will have excellent accessibility without taking up huge amounts of vertical space (50pixels) with one compromise - a 230 pixel wide brandmark.

navbar-6-items

Working with 7 main area headings, we may be better using the normal logo (arches positioned above the logotype) which blocks out useful space for secondary items.

navbar-7-items

You can see this on a live page example here.

3 Naming

Concise naming is strongly recommended for top level navigation.

simple-named-nav

Example showing the improved clarity when simpler naming is used


4 Megamenus: down, not across

The use of nested menus to provide deeper links will be reworked to present links to the most appropriate articles.

Our megamenu should link to the most relevant types of product discussed, and the most useful tools available. Links to full sub-section indexes of articles, products or tools are available too.

A directed, helpful, deliberate approach reduces the work users have to think through before they commit to a click.

megamenu-in-action

These menus aim to provide a good 80:20 solution, that is 20% of the content provides the answer for 80% of the people. The links to indexes should be a straightforward solution for the rest. Alternatively they may attempt a search.

A megamenu could contain descriptive text or images to support a simplified name

5 Sub navigation

Use the left hand column to reveal other section titles that belong to the same broad group as the current page.

When the current page is listed here, highlight accordingly.

To allow flexible organisation, a sub-level may be used within this group.

sub-sub-example

6 Secondary navigation & breadcrumbs

Use breadcrumbs to reveal hierarchy for article locations. This should be a few steps between the top (home) and the article in a category structure.

Only show one path. If there are two completely equally valid categorisations, just pick one. Related links should provide crossover.

If the article is also part of a life stage, a single path to that should be shown at the top of the related links section.

mas-breadcrumbs%2Blife-event-in-related
Email this page Print this page
Next



Hide or show annotations

As of the end of 2011, Google took a 91% share of all UK searches
- Hitwise Dec 2011

Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.
- Neilsen March 2010

Why won't users stay and just read our text? It might be natural and ingrained - Information Foraging is a compelling theory which can explain skimming, scanning behaviour.

Designing around search engine use, and users following an "information scent" means we can have multiple, parallel sets of navigation links connecting shorter pages, as long as there is also a single strong path to follow - see 6

Neilsen on Megamenus : Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.

And an addendum, on how not to implement this menu format