Transcript Web Site Navigation

Web Site Navigation
Web Site Navigation
We use various navigational
systems in our everyday
lives
• Maps
• Street signs
• A Compass
Web Site Navigation
Slide 2
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
Slide 3
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
Slide 4
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
Slide 5
What is A Navigation
Bar?
• A collection of hypertext
links grouped together on
a page composed of
either graphics or text
Web Site Navigation
Slide 6
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
Slide 7
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
Web Site Navigation
Slide 8
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
Slide 9
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
Slide 10
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
Slide 11
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
Slide 12
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
Slide 13
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
Slide 14
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
Slide 15
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
Slide 16
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
Slide 17
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
Slide 18
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
Slide 19
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
Slide 20
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
Slide 21
Site Map Difficulties
• Maps are used to navigate
physical space rather than
intellectual space. Not
typically used for navigation
through text.
Web Site Navigation
Slide 22
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
Slide 23
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
Slide 24
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
Slide 25
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
Slide 26
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
Slide 27
Types of Navigation Systems
• Hierarchical
• Global
• Local
Web Site Navigation
Slide 28
Hierarchical
The Primary Navigation System
Home
Level 1
Level 2
Level 3
Level 4
Web Site Navigation
Slide 29
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
Slide 30
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
Slide 31
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
Slide 32
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
Slide 33
Global v Local
• The global navigation system should
always extend through the subsite, as people may need to get
back to the homepage
• Local navigation is only used to
complement a global system
Web Site Navigation
Slide 34
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
Slide 35
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
Slide 36
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
Slide 37
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
Slide 38
Enhance Navigation
• Provide clues to current location
‘You are Here!”. Not everyone
comes in the ‘front door’
Web Site Navigation
Slide 39
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 40