Website navigation

The Monash web templates support a range of navigation systems. You will need to design your navigation systems and customise your templates to reflect your design.

Designing global navigation

Faculties and sub-branded sites must customise the global navigation bar. This will provide site-wide navigation and requires careful planning. Options for global navigation include links to the main content sections on the site, or links to the most-used features.

Design global navigation in conjunction with home page navigation. Home page screen real estate must be used well and should not simply repeat the items in the global navigation bar. Section navigation will also need to be considered at this stage.

The navigation for the main Monash website was designed through a series of workshops with a range of stakeholders. Global navigation focuses on providing access to information about the core business of the university, through links to Faculties, Campuses and About Monash. Primary contact information is also provided. The home page navigation provides access to the same content, but the focus is on catering to target audience groups.

Global navigation must:

• include a link to the site's home page
• do not use "home" as the label since this may be confused with "Monash home"; use "[sitename] home", e.g. "Arts home"
• remain constant throughout a website. The exception is the link to the site's home page which should not appear on the global navigation bar used on the home page (a server-side include in the page header controls this)
• ensure that the bar does not wrap when viewed at a screen resolution of 800x600 (with default text size settings); check this on pages where the link to your site's home page is displayed (i.e. not just on your home page)
• do not remove the vertical bars that appear between navigation links; these are an accessibility requirement for older user agents that do not provide clear distinction between adjacent links.

Using a site map to determine global navigation

Using Monash Commercial as an example, the relationship between the site map and the global navigation can be seen. The following site map shows the Monash Commercial home page and its four sections (research commercialisation, products and services, about us, and contact us). This site map does not show the number of content pages under the section home pages.

The following screenshot shows how the four sections in the site map become the links in the global navigation - with each link pointing to the appropriate section home page.

Examples of global navigation design

The screenshot below shows the global navigation used on all Monash Masterbrand websites. It includes the following links: Monash home, About Monash, Faculties, Campuses, Contact Monash.

On the Adobe website, the global navigation provides access to the main sections of the site: products, solutions, support, purchase, company

The global navigation elements on the Macromedia website (Home, products, support, solutions, store) are similar to those on the Adobe website, which is not unusual given the similarity between the two companies.

Designing utility navigation

• On faculty and sub-brand websites, the links to the site map and the A-Z index must point to the sub-site site map and A-Z index, while the staff directory must link to the main staff directory at http://search.monash.edu.au/email
• Do not remove the vertical bars between each of the links.
• Ensure that the global utility bar does not wrap when viewed at a screen resolution of 800x600 (with default text size settings).
• Faculty and sub-brand websites must link back to the main site map and A-Z index from their sub-site site map and A-Z index pages. This link must be the first link on the page.
• Masterbrand sites must link to the main version of the site map and A-Z index. Local site maps and site indexes may be linked from the home page and subsequently from the section navigation.
• Search:
  • All sites should offer a limited-scope search so users can search within a sub-site or section. A drop-down menu must be used and the default should be to display the limited-scope search. Multiple search options may be included.
  • Top-level masterbrand pages and single page sites do not require their own limited-scope search option.
  • The drop-down list must include, as the last item, the option to search "All of Monash".
  • If multiple limited-scope search options are offered their ordering is not important as long as the "All of Monash" option appears last.
  • Labels for search options must be clearly worded and concise.
  • Search provided on publicly-accessible sites must include filters to prevent intranet and mailing list content being displayed in search results.

Limited-scope search example

This example shows how the limited scope search is used on the Web Style Guide sub-site.

Designing the breadcrumb bar

A script generates the breadcrumb bar used on Monash web pages. A configuration file allows for customisation of the bar.

Guidelines for the breadcrumb bar:

• it must be used on all Monash web pages except the Monash home page
• the bar must show the location of the current page in the navigation hierarchy
• the Monash home page must be the first link on the breadcrumb bar; it must be labelled "Monash University"
• the sub-site home page must be the next link on the breadcrumb bar; do not use the word "home" in this label (e.g. "Arts", not "Arts home")
• labels must be meaningful, but concise.

Designing section navigation

Section navigation provides navigation around a section of a website. In the case of Masterbrand sites, section navigation may provide site-wide navigation (eg the ITS website).

Guidelines for section navigation design:

• Include a link to the section home page (or site home page in the case of Masterbrand sites) at the top of your section navigation column; not all users are familiar with breadcrumb navigation bars.
• Do not introduce new navigation links or hierarchies in section navigation columns.
• Navigation options should always be displayed on the section home page first, and navigation choices in the section navigation column should remain consistent throughout the section in which they are used.
• Section navigation templates may only be used on content pages (ie not on home or section home pages), except on Masterbrand sites where section navigation acts as site-wide navigation.
• Nested lists should be used for section navigation when a hierarchical style is used (eg when section links are grouped into content categories).

Example of section navigation

The screenshot below shows the section navigation used within the Web Style Guide sub-site. All navigation options were available from the style guide home page.

Designing contextual navigation

Contextual navigation is used to provide links to related information. These links may be embedded within the text of a web page or grouped together and labelled "related links" or "see also".

Guidelines for contextual navigation:

• a highlight box may be used to present contextual navigation
• where contextual links are embedded in text, the default link style must be used (blue in colour and underlined) so that links are obvious to all users and are implemented consistently across the entire Monash website
• text that is not a link should not be underlined
• do not use "click here" or variants that do not accurately describe the content of the target page; use the title attribute to provide more information about the target page
• avoid repeating link text that is used to describe another link on the page; use the title attribute to distinguish one link from another if this cannot be avoided.

See also

• Accessibility guidelines for navigation

Resources

• Breadth vs depth
• Essential navigation checklists for web design
• How many items should go in a menu?
• The right trigger words
• Testing the three-click rule