Web standards and guidelines

Navigation

The LTS websites are designed to allow users to navigate using hyperlinks and navigation built in to the site. The built-in navigation includes the left-hand navigation and a variety of other navigation options.

Left-hand navigation

The navigation which sits on the left-hand side of most LTS websites is used for navigation through that particular site. Studies into the usability of websites have shown that the optimum number of items in a left-hand navigation area is between eight and ten. This example, from the Education for Citizenship website, shows nine items.

The home page of each website has the name of the site followed by 'home'. Titles in the left-hand navigation only have capital letters on the first word, unless the title is a proper name.

Screenshot showing part of home page from Education for Citizenship website

Hyperlinks

A hyperlink uses a link embedded in text to direct the web visitor to another page, section or website, or to allow the user to open a file. The text in blue at the end of the next sentence is a hyperlink. More information on the use of hyperlinks is available in the Writing for the web section.


Using sibling navigation to create ‘tabs’

Sibling navigation can be used to create tabs to aid navigation. Tabs can be useful to group information on a related topic, such as different aspects of the same case study. This screenshot shows tabs used for a case study to split it up into various categories.

Screenshot showing case study on MFLE website

When using tabs you should avoid grouping more than four or five pages as siblings, as the tab navigation can begin to get cluttered when you use six or more tabs.

Equally, if you are using three or fewer tabs in your navigation it may be that the small amount of content you are using could be better displayed using an alternative method.

Naming pages used in sibling navigation

Care should always be taken when naming pages which are to be used in a tab structure as the navigation title of the page will become the name of the tab. Navigation titles for these pages should only be up to a few words long.

Consistency in naming tabs

A group of case studies may consistently use navigation titles such as ‘Introduction’, ‘Preparation’, ‘Learning themes’, ‘Assessment’ and ‘Outcomes’ across all case studies. Some case studies may include only some of these areas, but if information is available under, for example, ‘Assessment’ it should be presented under a tab called ‘Assessment’.


Other navigation

Arrows

You can also use arrows or words to navigate through and out of sections. This screenshot illustrates the use of arrows.

The arrow pointing upwards will take you to the start of the section - the picture shows the hover text you'd find if you rested your cursor over the arrow.

The arrow pointing to the left takes you to the previous page.

The arrow pointing to the right takes you to the next page.

Screenshot of arrows used for navigation in Scottish History website

Words

Here you can see the words 'Back' and 'Next' being used at the bottom of the page to allow the user to go though the section easily.

Screenshot of words used for navigation in Curriculum for Excellence website