Navigation for online content

Effective navigation for online content means that users can find the information they want quickly and easily, and that they are guided to other useful content. Effective navigation is achieved through the following:

• Logical structure. All websites should have a structure that makes sense to the user, and allows them to create a mental model of the content and see how the various parts of the material form a coherent whole. The ‘logic’ behind the structure should suit the content (e.g. it may be organised in sequential or hierarchical sections). See Navigation and Information architecture for more details about how to create a logical online structure.

• Scannable content. Headings and subheadings should break the content up into clear sections, allowing the user to scan the material. Short paragraphs and toploaded summary content allow users to quickly understand and move through the material. See Web content for more details on how to write for the web.

• Navigational support. Online content has other options to support navigation, such as menu bars, breadcrumbs, content tags, crosslinks and search functions. Using these options can help users easily find the information they want and encourage them to explore information across the site.

Menus

Menus are the main way that users find their way around online content. Several types of menus are common in online content, and you can use these individually or in combination:

• Top and bottom menu bars. Menu bars along the top or bottom of a page of content are intuitive and familiar to users. The bar may have drop-down menus that appear when the user selects a category to show the choices within it. Using a ‘sticky’ navigation bar allows the menu to remain visible regardless of how far the user scrolls down. More complex sites may have several menu bars, such as
  • a top menu bar that contains information about the organisation
  • a main menu bar with information by topic
  • a bottom menu bar that contains information about the site, permissions, and so on.

Top menu bar

Bottom menu bar

• Sidebars. Vertical menu bars that go along the left or right side of the screen are flexible tools, which can hold more items than top or bottom menu bars because users can scroll vertically indefinitely. Sidebars have a useful role in housing content that is organised differently from the rest of the material and its hierarchy. For example, if the top menu bar is topic based, the sidebar might highlight the most important, most popular or most recent content. Sidebars can also show content in alphabetical order. This is helpful when the sidebar holds an extensive list of similar items that would be difficult to group in another way.

• Menu icons. The menu appears when the user selects the icon. The menu icon may be

  • 3 horizontal bars (often called a hamburger icon); this is usually placed in the homepage banner and produces a drop-down menu
  • a sidebar arrow, which extends a menu from the left of the screen.

  Expandable menus have the benefit of creating a cleaner, less cluttered site, and freeing up space to be used for other purposes. However, the trade-off is that site contents are not immediately apparent to users, because this information is hidden behind the menu icon or sidebar arrow. Expandable menus are most useful for mobile platforms.
   

Wayfinding

Wayfinding aids help users quickly identify where they are within a set of pages. Wayfinding allows users to know:

• absolute location – where they are with respect to the content as a whole

• relative location – how their current location relates to where they have come from

• direction – how they can proceed from here through the rest of the content.

The most common wayfinding aids are:

• breadcrumb trails, which show hyperlinked text of the levels the user has travelled through to reach their current destination (e.g. Home > Business customers > Applications)

• linked text such as ‘return to previous page’ or ‘back to homepage’

• a site map (sometimes called a site index) that summarises the essential structure of the contents

• icons, including the ‘house’ icon that indicates that it will return the user to the home page, the ‘back’ arrow that indicates that it will take the user to the previous page and the ‘magnifying glass’ that indicates a search function.

Tagging

Tags are used within websites to alert users to related content. Pages or articles each have a set of tags. Users select a tag to find other articles with the same tag.

Tags should:

• encourage people to find everything that might be useful and related to a particular topic

• be short, preferably just 1 or 2 words (e.g. growing herbs, mulch)

• be simple, so that people have a good idea of what they will get when they select them

• be general enough to ensure that a few articles will be against each tag

• be specific enough to ensure that there will not be a long list of articles against a single tag.

You can develop a tag list using:

• search terms that have been identified through user research – that is, terms that users are already using

• existing content groupings, so the tag captures content that is not under a particular heading but is related to it

• potential audience groupings

• groupings from similar websites.

Crosslinks

Crosslinks can help users find their way across websites and alert them to other relevant content. They can also provide a way to layer content, so that summary information is presented up front and users can click through to more complex or supporting material.

For example, you can add a ‘Read more’ button or link. This appears at the relevant point in the main text and takes the user to a separate page with further content on the topic. The cue should carry a brief indication of what the extra content is about (e.g. Read more about the artist’s background) to help users decide whether or not to expand the page’s content.

Links can be internal (which take the user to other parts of the site) or external (which take the user to another site). Links should connect to specific, concrete nouns rather than verbs or abstract concepts, to ensure that the user understands what they are selecting.

Links can be a valuable way to make sure information is kept in a single, most relevant place on the site, rather than being repeated on multiple pages. This means that the number of site pages is minimised, and any updates to a topic need only be done in 1 place.

When deciding whether to add links, think about the purpose of each link and ensure that the user needs to be directed to other material at that point. Each link should have a clear function that does not duplicate other elements in the material, such as navigation bars and menus.

Although some content creators worry that including external links will take users away from their content, remember that no publication can be fully comprehensive, and it is a good idea not to try to ‘reinvent the wheel’. Linking to high-quality resources that you recommend will help your users to view your material as authoritative and helpful, making them more likely to return.

Search tools

Search tools help users to find specific information on your site. Search tools are critical for sites with a large amount of content, and many users will use a search function rather than menu navigation.

Search functionality, commonly indicated with a magnifying glass icon

Web developers can use a ‘best bets’ function to prioritise search results, to ensure that the first results from an internal website search are as relevant as possible. Often, the content developer will put together the best bets list for the web developer to implement. To develop a best bets list, put terms into the site search engine and see what comes up; if the first 2 or 3 results listed are not the most relevant, list the pages that should be used instead.

The terms should be based on:

• common search terms – these are generally collected as part of the research phase of a project, and may include Google search terms (what users have typed into Google or another search engine) or onsite search terms (what users have typed into the search function on the site itself)

• abbreviations – if you have used full names rather than abbreviations in your content, think about the abbreviations that users may type in (e.g. ANDS instead of Australian National Data Service)

• other ways to phrase things – users may use different terms or may not know the exact term for something, so you will need to think about what else they might type in (e.g. break or holiday).

• misspellings – you do not need an exhaustive list of possible misspellings, but common ones can be put in to help users find what they need (e.g. accomodation for accommodation, attourney for attorney). The Wikipedia list of common misspellings(Opens in a new tab/window) is a useful resource for this. Also, take note of possible American spellings (e.g. behavior for behaviour)

• incorrect punctuation – dropping a hyphen or apostrophe can change search results (e.g. person centred care is not found, but person-centred care is). Some search functions will be able to find the correct result even if the punctuation is wrong (known as a ‘fuzzy search’), but some will not. Check with your web developer whether best bets are needed for incorrect punctuation.

As well as a search function, you can include an A–Z website index. This has hyperlinked entries that take the user to a webpage or a specific location on a page. This tool is similar to a back-of-book index in a print publication, with alphabetical (as opposed to hierarchical) organisation.

Indexes bridge the gap between searching and browsing, as all the references are already identified in the index, rather than requiring the user to type free-form text into a search box. Common misspellings are therefore not an issue with A–Z indexes because the correct spelling is provided by the index, rather than needing to be typed by the user. A–Z indexes can also accommodate synonyms and alternative search terms, and be based on ideas and concepts, rather than keywords.

However, A–Z indexes must be manually created and maintained, so the initial and ongoing labour should be considered when deciding whether to include such an index. Online material that is constantly changing or is very small in scope is unlikely to benefit from this type of index.