Navigation

A clear and consistent navigation is essential because it provides the orientation for users.

 

The ever increasing number and variety of devices mean it’s getting harder to know whether someone is using a pointing device such as mouse, or a touchscreen, or both. With this in mind the navigation should be adapted to work well with a range of devices and screen sizes and use the relevant conventions accordingly, e.g. two-stage hover and click for pointing devices, but touch equals action for touchscreens.

 

Top Navigation

The top navigation works like a table of contents, or a store directory so that a user knows at all times whereabouts they are and where to look for more information. Visitors do not have to use the navigation, but it is important for them to know where it is if they want to.

 

image

 

Where there are multiple levels of content navigation should be extended using the left-hand navigation and flyouts.

 

Some situations where left-hand navigation is not required:

  • in an ordered workflow

  • content is not organised hierarchically. e.g. solely by topic as in a magazine or blog

 

On a site with multiple levels of content, breadcrumbs can really help. 

 

image

 

Support Navigation

The support navigation groups together functions that are relevant for the whole website. Functions can also be placed elsewhere on the page: search as part of the top navigation or the sitemap in the footer of the page.

image

 

Sample Items (in alphabetical order)

Bayer Global

Link to the Bayer Global portal

If there is not a prominent link to the Bayer global portal in the header

Contact

Link to contact form or e-mail addrees

Required

Language

Allow user to switch between content languages

If the website exists in more than one language

Login/Logout

Link to login form or logout function if a user is logged in

Required if users can log in

Search

Link to website search

If the website has a search form

Sitemap

Link to sitemap

If the website has a sitemap

 

Templates 

Product Websites

Corporate Websites