Web Site Navigation
Most Recent Version: July 2004 Successful websites have logical navigation systems that have been built to meet the needs of the site user. 1. System Visibility Visitors to a website are operating in a virtual world system and need to be aware of the status of that system and their position within it. 1.1 Where am I? Where can I go? Where am I? And, where can I go? These are probably the two most important things the user of a web page needs to know. Not all visitors enter a site via the home page so the system should help orientate the visitor within the site. Labelling each page clearly and indicating its relative position in the site helps orientation. A meaningful title within the
element in the head section of each page, which reflects the page content, enhances the usability of a website. The page title is displayed in the window title-bar at the top of the screen, providing feedback and orientation to users of the site. The title is also displayed in the search results of most search engines helping users identify those pages that are likely to be of the greatest interest. Navigation systems and elements should be easy to locate and identify. And navigation labels should be short and use clear, everyday language. 1.2 Feedback Feedback can help users know where they are within a system and confirm the accuracy of their actions. For example, the use of a different link colour for visited pages provides useful feedback to site visitors. Matching the main heading on a page with the name of the link to it also provides feedback by telling the user that their choice of link was correct and the outcome successful.
1.3 Supporting Visual Clues Support the structure or architecture of a site by visual clues, for example if navigation buttons are differentiated with colour, the pages that relate to a specific button could also utilise that colour. The consistent use of heading hierarchy, style and sizes throughout a website are also supporting visual clues. 1.4 Matching the Real World The system world should match the user’s real world language and expectations. Use real world words and common, accessible phrases rather than jargon or organisational (institutional) terms. Follow real world conventions, making information appear in a natural and logical order. The use of icons should also match real world expectations. 1.5 Recognition not Recall It is usually easier to recognise something when you see or hear it, than to recall it. This is one of the reasons why many users prefer to make choices from a menu rather than trying to think of the appropriate words to use with a search engine. If users can recognise where they are by looking at the current page, rather than having to recall their path from the home page, they are less likely to get lost. The consistent use of icons, document/page titles and colour can all assist the process of recognition. 2. Navigation A well-designed navigation system is crucial to the success of a website. In real world navigation we rely heavily on contextual clues like landmarks or maps with “You are here” indicators to avoid getting lost. Also, real world travel is progressive and linear as we move from point to point. There are no natural landmarks on the web and visitors can move from anywhere to anywhere with the click of a mouse. Consequentially, it is very easy to get lost in a website. Helping the user go where they want to go and find what they want to find should be a prime aim of all websites. Website navigation should not be dependent on non-W3C Format material and should be accessible to users of assistive technologies. See Accessible Navigation
Website Navigation
Page 2
2.1 Web Conventions As the web has developed, platform standards or conventions have emerged. Web users know what the ‘back’ and ‘forward’ browser buttons do and use them often, they know that a piece of underlined text is likely to be a link and visited links are often a different colour. The use of a logo in the top left that links to the home page has become a web standard in recent years and so users now expect a logo in this position to be a link. When navigating a website, users prefer to bring this accumulated knowledge to the task, rather than having to learn a new set of standards that are unique to the site. 2.2 Site Consistency Some web style standards can be changed to meet the aesthetic requirements of a site. The introduction of any new navigation standards however, needs to done carefully to ensure that they are easy to understand and the use navigation elements should be consistent within the site. For example, many sites no longer use the default underlined blue text to indicate a link, but the links on these sites are usually in a different colour to the rest of the text and there are often other visual clues, such as a change in font style or size. The words used for navigation labels and links should match the main heading of the page they link to. 2.3 Consistent primary navigation Most sites have a number of key content areas. The primary (sometimes called global or top-level) navigation of the site should reflect these key areas. It is generally preferable to restrict the number of key content areas so as not to overload the user with a lot of primary navigation choices. These global navigation elements should be present on the home page. They should also be on all other pages of a site allowing users to move easily from one key area of content to another. Primary navigation elements in terms of page position and design should be consistent on all pages within a site. 2.4 Consistent second-level navigation On many large sites each content area may contain many web pages or electronic documents. Each of these areas becomes in effect a sub-site of the overall site. While it is important for the primary (global) navigation of the site to extend to these sub-sites it may be necessary to also provide second-level (local) navigation within each content area.
Website Navigation
Page 3
Second-level navigation elements should be used consistently on all pages within a content sub-site area. The concept of sub-sites was originally proposed by Jakob Nielsen. For more information see - www.useit.com/alertbox/9609.html 2.5 Consistent Colour Scheme Colours are often used to underscore a corporate identity or brand (for example red and Coca-cola) in both the real and virtual world. The consistent use of colour can also be used to define a particular section of each page within a site (eg. the left-hand strip containing navigation links on the Sydney Morning Herald site - www.smh.com.au), or particular key content or sub-site areas (for example www.amazon.com). Where colour is used, the pages must remain accessible for people with colour vision deficiencies. 2.6 Page Headings The information on most web pages is presented within a defined structure that uses a main heading at the top followed by a series of sub headings. The first heading on a web page (or the title of a document) should be appropriate and meaningful to users of the site and should reflect the words used in the navigation or text link to the page. Web content should be presented in sections with a heading for each section that is defined using (X)HTML header elements (h1, h2 etc). Headers should indicate the semantic structure of a web page, with a for the main heading, for second level headings etc. Heading levels should not be skipped. 3. Navigation Aids Tables of content, Indexes and Site Maps can provide alternative access to the basic structure of the website. They should not be used to compensate for a poor structure or navigation system. 3.1 Site map Site maps are strictly speaking a graphical representation of the web site. A site map should provide an overview of the hierarchal structure of the site enabling a user to see the location of each page on a site in relation to all other pages.
Website Navigation
Page 4
3.2 Index and table of content Indexes and tables of content are useful navigation alternatives for some sites. An index, which usually lists the site content alphabetically, can be useful for sites without a strong hierarchical structure. For sites with a strong hierarchy, a table of content may be more appropriate since they usually present the content of the site by category and subcategory. 3.3 Search engine A well-indexed search facility will allow users to find information in a site by entering keywords or phrases. Great care should be taken when designing or choosing a search engine. Poorly designed search input components and incomplete index databases can make it very difficult, if not impossible, for users to obtain the results they want. This can often lead users to believing the material they seek is not available on a site when in fact it is. 4. References and additional information • • • • • • Accessible Navigation , OICT Resource Information Architecture for the World Wide Web, by L. Rosenfeld and P. Morville. The Art and Science of Web Design, by Jeffery Veen. Don’t Make me Think, by Steve Krug. Designing Web Usability : The Practice of Simplicity, by Jakob Nielsen. Web Navigation: Designing for User Experience, by Jennifer Fleming
Website Navigation
Page 5