Navigation

1. Where am I?
2. How did I get here?
3. What is happening?
4. Where can I go next?
5. How do I get there?
6. What can I do?

Linkage Topologies

The link topology of a website or multimedia movie refers to how the pages or screens are linked together. There are several standard layouts Hierarchical, Linear and Webbed / Composite.

Linear

• Linear navigation systems only allow the user to navigate through the interface in one way.
• Linear systems are normally non or minimally interactive, with start, next and back buttons but no others.
• Linear systems are the most structured of all the topologies.

Hierarchical

• A hierarchical based site is similar to a family tree in that every page has a parent page.
• Each page has only one path leading to it.
• The structure of sites of this type is very rigid, but can be useful for organisations with discrete departments requiring a section each.
• Breadcrumb trails can also be used in a hierarchical site.

Webbed

• A webbed topology allows the user to navigated in a more fluid fashion.
• The range of webbed topologies is quite broad, ranging from almost hierarchical with additional links, to where each page will link to others of similar or related topic but where there is no underlying catagorisation by topic.

Deep or Shallow Linking

Deep linking requires that the user is presented at any one time with only a small amount of choices in the form of links which they can then click to access the next set of choices and so on until they have narrowed down the choices sufficiently to have reached the desired content. Many usability experts believe that this method is the most effective at getting the user to the correct content. However, if the links are not clear enough to the user, or if the user is not exactly sure what they are looking for, or what category it might be found, then this method could leave the user aimlessly searching path after path to try to find the required content.

Shallow linking means that most links are available to the user at any one time and they can easily get to their desired destination in one or two clicks. This is the concept behind sitemaps. However, some usability experts claim that seeing too many links at once can confuse the user, particularly if they are novice users, or cognitively impaired.

Navigation Visibility

Some sites have navigation bars which show all the links available all the time. Others require that the user hover over a link or click a tab to get access to a second level drop down menu.

The use of drop down menus has been shown to cause problems to users in some situations, particularly if the user is new to the internet, or has slight motor problems. As drop down menus require fine motor control people with hand tremors may not be able to control the mouse sufficiently well to access the sub nav.

In addition these sub nav systems are quite often coded so that they can only be accessed via a mouse, for example using an onMouseOver (javascript) or onMouseEnter (lingo) event handler, thereby alienating keyboard only users.

Mega menus have become popular in recent years. Read more about these on Mega Menus Work Well for Site Navigation

Mega footers are also popular. The additional links help with SEO, although some users do use them to get a sense of the structure of the site, as it functions as a mini sitemap.

Tabbed Navigation Systems

Good for usability generally because of the visual cues given to the user regardign what section they are in. Read more about using tabs here: 14 Guidelines For Web Site Tabs Usability

Sitemaps

The idea of a sitemap is to allow the user to access all the pages (and sometimes subsections of a page) in one click. It is a Priority 2 accessibility requirement of Checkpoint 13.3 of the WCAG 1.0. Sitemaps are an example of Shallow Linking.

Breadcrumb Trails

These are useful links, normally found at the top of a page, which

• allow the user to trace their way back through the hierarchy of a site
• allow the user access to other pages in a logically organised fashion which are similar to the page they are on
• give the user a sense of the organisation of the site structure

Breadcrumb Trails can only be used in a hierarchical site, as in other structures there may be multiple paths leading to each page.

Link Colour

Default Unvisited Links

• Keeping the link colour blue and underlined has been found to help users to navigate.
• Never use a blue underlined style for any text that is not a link.
• It may be possible to change the shade of blue of an unvisited link with affecting usability.

Visited Links

• Visited links should always look different to unvisited links.
• The default colour of visited links is maroon.
• If changing the visited link colour, ensure that it is less saturated than the unvisited link colour as users generally understand that concept.

Hover

• Some usability and accessibility investigators have claimed that the best colour combination to use for a link hover effect is the inverse colours of the link and the background.
• For example, if the link is normally orange text on a blue background, the most visible hover effect would be blue text on an orange background.

Active Links

• Active links are normally brighter or more vibrant in colour to either visited or unvisited links.
• Active link colours help the user by making it clear that the link they have just selected has been actually selected and the page is being loaded.

Link Text

Always use link text that gives the user information about what comes next.

In general don't use 'Click Here' or 'More Info', because this gives no clue to the user about what the subject of the next page is.

In some instances it may be preferable to use 'Next' and 'Back' links, such as in a picture gallery, where the Next and Back links are in context.

Opening New Window

In general it is bad to open links in new windows, because it disables the back button. Novice users, visually impaired users and cognitively impaired users in particular, rely on the back button to return to a previous page. The back button is the most used button on a browser! Read more: 4 Design Patterns That Violate Back-Button Expectations

Responsive Design Navigation

Once of the most difficult problems to overcome when dealing with responsive design is where to put the navigation. Convention is to leave it turned off, until the user decides to activate it. The navigation toggle on / off is normally designated with a '3 bar' icon. Read more: 11 ways to improve the navigation on your mobile site

Further Reading

• Is Navigation Useful?
• Drop-Down Menus: Use Sparingly
• Why Frames Suck (Most of the Time)
• Scrolling and Scrollbars
• Deep Linking is Good Linking
• Guidelines for Visualizing Links
• Change the Color of Visited Links
• Using Link Titles to Help Users Predict Where They Are Going
• When Bad Design Elements Become the Standard
• 14 Guidelines For Web Site Tabs Usability
• Mega Menus Work Well for Site Navigation
• 4 Design Patterns That Violate Back-Button Expectations
• 11 ways to improve the navigation on your mobile site

• AA
• XHTML
• CSS

© ilikecake 2005-2008