web site navigation. slide 2 web site navigation we use various navigational systems in our everyday...
Post on 19-Dec-2015
220 views
TRANSCRIPT
Web Site Navigation Slide Slide 22
Web Site Navigation
We use various navigational systems in our everyday lives
• Maps• Street signs• A Compass
Web Site Navigation Slide Slide 33
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 Slide 44
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 Slide 55
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 Slide 66
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 Slide 77
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 Slide 88
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 Slide 99
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 Slide 1010
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 Slide 1111
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 Slide 1212
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 Slide 1313
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 Slide 1414
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 Slide 1515
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 Slide 1616
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 Slide 1717
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 Slide 1818
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 Slide 1919
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 Slide 2020
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 Slide 2121
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 Slide 2222
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 Slide 2323
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 Slide 2424
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 Slide 2525
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 Slide 2626
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 Slide 2727
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 Slide 2929
HierarchicalThe Primary Navigation System
Home
Level 1
Level 2
Level 3
Level 4
Web Site Navigation Slide Slide 3030
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 Slide 3131
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 Slide 3232
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 Slide 3333
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 Slide 3434
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 Slide Slide 3535
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 Slide 3636
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 Slide 3737
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 Slide 3838
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 Slide 3939
Enhance Navigation
• Provide clues to current location ‘You are Here!”. Not everyone comes in the ‘front door’