Web Site Navigation

Web Site Navigation We use various navigational systems in our everyday lives Maps Street signs A Compass Web Site Navigation

Navigation on the Web A website should have a well-designed navigational scheme A hierarchical organisation scheme helps users find their way A secondary navigation system is often needed to give greater flexibility of movement within the site Web Site Navigation

Elements of a Navigation System The tools used to work out your journey To determine where you are and hopefully find your way back We are concerned with tools used to navigate your website Web Site Navigation

Integrated Elements Elements that appear on all content-bearing pages and are used over and over again by the user Navigation bars (either text or graphic) Frames Pull-down menus Browser built-in features Web Site Navigation

What is A Navigation Bar? A collection of hypertext links grouped together on a page composed of either graphics or text Web Site Navigation

Graphic Nav Bars Advantages Can create interest for viewers Can use metaphors that hint at the content Disadvantages Slower to load Look different on different machines Cost more to design People turn off graphics for speed Text-only browsers Web Site Navigation

Text Nav Bars Advantages Disadvantages Quick and cheap to produce Load fast It is very easy to add new options Disadvantages May lack a little in interest or novelty Web Site Navigation

Frames for Navigation Frames are created using HTML code that divides the screen into 2 or more scrollable areas. Some of the screen areas may remain fixed and some may scroll and change Having an unchanging frame to hold links can make the site easy to use Web Site Navigation

Frames Advantages The designer can create a static or independent scrolling navigation bar that appears on every page. This separates the navigation system from the content It can add consistency and context for the user Web Site Navigation

Problems with Frames Disadvantages Frames take up a lot of screen space Can disable bookmarks and standard hyperlink colours Can be more difficult to print pages Back button may not work Frames are slow loading Problem of ‘frames within frames’ Different browsers display frame content differently Web Site Navigation

Pull-Down and Pop-Up Menus Pull-down menus are created using interactive forms Pop-up menus are created in Java or JavaScript Web Site Navigation

Menus Advantages People are familiar with menus as they are used in all software Easy to use as you need not remember options Disadvantages Menus may have too many options (clutter) Options are hidden from user until they click on them so what is available is not obvious Web Site Navigation

Browser Built-in Features Designers should NOT ignore the following built-in features of Browsers Open URL ….. can go to any web page if we know its address Back and Forward buttons …. backtracking capacity History …..records sites visited during current session Web Site Navigation

Browser Built-in Features Bookmarks/Favourites …… allow the user to store current page address for easy retrieval Hyperlink colours …… standard colours for unvisited and visited links Prospective view ….. as user hovers over a link, the destination URL appears on screen giving the prospective viewer a hint as to what will be found if that link is pressed Web Site Navigation

Remember Sometimes site designers ignore browser-based navigation features ie modifying link colours. This can cause confusion for users Web pages do not exist without a web browser so browser features should not be disabled Web Site Navigation

Remote Nav Elements Things that may only appear once in the site or only on the Homepage May only be used at start of a browsing session Table of contents Index Site Map Guided Tour Web Site Navigation

Table of Contents Gives a ‘birds-eye’ view of the site’s content A bit like software documentation or help systems Needs a further navigation system to reach the detail of the site Web Site Navigation

Advantages of TOC Provides a broad view of the content of the site Facilitates fast access to random areas of the site If based on hyperlinks it can bring user directly to portions of content they want Web Site Navigation

Disadvantages of TOC Useless unless the site’s organisation scheme is hierarchical May be a waste on a small site Can overwhelm the user with information The design should be kept simple Web Site Navigation

The Site Map Advantages Gives a graphical representation of the architecture of the website A bit like the Table of Contents only in graphical format ImageMaps can be used here sucessfully Web Site Navigation

Site Map Difficulties Maps are used to navigate physical space rather than intellectual space. Not typically used for navigation through text. Web Site Navigation

The Index A website index presents key words or phrases alphabetically Good if you KNOW the name of what you are looking for An index should lead directly to the content being sought Web Site Navigation

The Guided Tour A good tool to introduce new users to major content areas of a website Can be used as a marketing tool for the site Must remember that many people will never use it and few people will use it more than once! Web Site Navigation

A Navigation System should … Build context Help the viewer to know and understand where they are at all times Incorporate flexibility Use more than one route to arrive at a particular web page Web Site Navigation

Build Context Search engines bypass homepages People ‘print’ web pages to read later. This takes them out of context All pages should contain the organisation name User should be able to see the navigation structure of the site and where he/she is at all times Web Site Navigation

Flexibility Hypertext supports both lateral and vertical navigation. The user should have the option to move either way Give the viewer a couple of ways to get back to where they came from or go forward Web Site Navigation

Types of Navigation Systems Hierarchical Global Local Web Site Navigation

Hierarchical The Primary Navigation System Web Site Navigation

Hierarchical Structure Problems The branching structure is too deep breaking down into too many sub-categories The number of categories offered at the start is too many In many hierarchies the user is forced to return to the top (home page) to take another path Web Site Navigation

Flattened Hierarchy Allow you to move laterally through a websites categories It allows cross-navigation through a group of cross-navigational links Web Site Navigation

Global Navigation A good global navigation system allows the viewer access to any part of the site by using vertical and lateral navigation. It allows flexibility about which path to follow Web Site Navigation

Local Navigation Systems Additional to the global navigation system A product catalogue which viewers may have to search for a product they want to buy (CD, book etc) then this searching could have its own navigation system It is like a sub-site of the main site Web Site Navigation

Global v Local The global navigation system should always extend through the sub-site, as people may need to get back to the homepage Local navigation is only used to complement a global system Web Site Navigation

Some Rules Place the navigation bar at the top or bottom of the page (both if it is a long document) but be consistent All pages should provide links to the home page Each level should have links to the level above and below it Web Site Navigation

Rules cont/ Pages should not include links to themselves Navigation system should have a system to indicate ‘where you are now’ (context) People read from left to right so the ‘Homepage’ link should be on the left Web Site Navigation

Enhance your Navigation Buttons Familiarity. Users find it easy to associate buttons with links Bullets A column of items with bullets immediately draws the users’ attention Web Site Navigation

Enhance Navigation Reserve a distinct visual space for navigation To do this use borders, lines or other visually separating characteristic to show navigation area Label all images/buttons Use text as well as images where possible Be consistent Web Site Navigation

Enhance Navigation Provide clues to current location ‘You are Here!”. Not everyone comes in the ‘front door’ Web Site Navigation

Summary No single combination of navigation elements works well for all sites You need to remember you are: Building context Improving flexibility Helping users find the information needed Design at each level influences the design at subsequent levels Web Site Navigation