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

Web Site Navigation Web Site Navigation Web Site Navigation Web Site Navigation

Web Site Navigation Slide Slide 22

Web Site Navigation

We use various navigational systems in our everyday lives

• Maps• Street signs• A Compass


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


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


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


What is A Navigation Bar?

• A collection of hypertext links grouped together on a page composed of either graphics or text


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


Text Nav Bars

• Advantages– Quick and cheap to produce– Load fast– It is very easy to add new options

• Disadvantages– May lack a little in interest or

novelty


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


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


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


Pull-Down and Pop-Up Menus

• Pull-down menus are created using interactive forms

• Pop-up menus are created in Java or JavaScript


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


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


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


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


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


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


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


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


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


Site Map Difficulties

• Maps are used to navigate physical space rather than intellectual space. Not typically used for navigation through text.


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


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!


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


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


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


Types of Navigation Systems

• Hierarchical• Global• Local


HierarchicalThe Primary Navigation System

Home

Level 1

Level 2

Level 3

Level 4


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


Flattened Hierarchy

• Allow you to move laterally through a websites categories

• It allows cross-navigation through a group of cross-navigational links


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


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


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


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


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


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


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


Enhance Navigation

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


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. Slide 2 Web Site Navigation We use various navigational systems in our everyday lives Maps Street signs A Compass.

Documents

web site navigation

web site navigation

text slide

web site navigation

user slide

website slide

compass slide

javascript slide