1. Web Site Navigation

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

3. 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

4. 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

5. 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

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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

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

23. 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

24. 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

25. 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

26. 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

27. 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

28. Types of Navigation Systems
Hierarchical
Global
Local
Web Site Navigation

29. Hierarchical The Primary Navigation System
Web Site Navigation

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. 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

38. 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

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

40. 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