Hong Kong Baptist University

Week 4

Planning Site Navigation

01/02/2010

Dr. Tony Chun-Kuen WONG

Coordinator, BBA(Hons) Information System Management Major
p
Department of Finance and Decision Sciences
School of Business

Hong Kong Baptist University

Objectives
 Create usable navigation
 Build text-based navigation
 Li k with
Link ith a ttextt navigation
i ti b bar
 Add contextual linking
 U graphics
Use hi ffor navigation
i ti and d lilinking
ki

2
 Hong Kong Baptist University

Creating Usable Navigation

Provide enough location information to let the

user answer the following navigation questions:

• Where am I?
• Where can I go?
• How do I get there?
• How do I get back to where I started?

Hong Kong Baptist University

Creating Usable Navigation

To answer these questions, provide the

following information:
• Let users know what page they are on, and
what type of content they are viewing
• Let users know where they are in relation to
the rest of the site
• Provide consistent, easy-to-understand links
• Provide alternatives to the browser’s Back
button that lets users return to their starting
point 4
Hong Kong Baptist University

Hong Kong Baptist University

6
 Hong Kong Baptist University

Limit Information Overload

 Create
C t manageable bl iinformation
f ti segments t
 Control page length
 Use hypertext to connect facts, relationships,
and concepts
p

Hong Kong Baptist University

Using Text-Based Navigation

 Text-based
T tb d lilinking
ki iis often
ft ththe mostt effective
ff ti
way to provide navigation on your site
 It can work in both text-only and graphical
browsers
 Always provide a text-based set of links as an
alternate means of navigation
g

8
 Hong Kong Baptist University

Sample Text Navigation

The following screens demonstrate a variety

of text-based navigation options:
 To main pages (home, table of contents,
index)
 To the top of each chapter
 Within the table of contents page to chapter
descriptions
 From table of contents page to specific topics
within each chapter
p
9

Hong Kong Baptist University

Sample Text Navigation

The following screens demonstrate a variety

of text-based navigation options:
 Between the previous and next chapter
 Withi chapter
Within h t pages tto each h ttopic
i
 To related information by using contextual
links

10
Hong Kong Baptist University

11

Hong Kong Baptist University

12
Hong Kong Baptist University

13

Hong Kong Baptist University

14
Hong Kong Baptist University

15

Hong Kong Baptist University

16
Hong Kong Baptist University

17

Hong Kong Baptist University

18
Hong Kong Baptist University

19

Hong Kong Baptist University

20
Hong Kong Baptist University

21

Hong Kong Baptist University

22
 Hong Kong Baptist University

23

Hong Kong Baptist University

Graphics for Navigation

 Standardize your navigation graphics

 Provide predictable navigation cues for the
user
 Repeat graphics to minimize download time
 Use consistent placement and design of
navigation
i ti graphics
hi tto reassure th
the user
 Use easily understandable graphics

24
Hong Kong Baptist University

25

Hong Kong Baptist University

26
Hong Kong Baptist University

27

Hong Kong Baptist University

28
Hong Kong Baptist University
Chapter 4

29

Hong Kong Baptist University

30
Hong Kong Baptist University

31

Hong Kong Baptist University

32
 Hong Kong Baptist University

Summary

 Work from the user's point of view. Think

about where users want to go within your
site, and make it easy for them to get there.
 Add plenty of links so it's
it s easy to get around
your site. Link to fragments as well as whole
pages. Make it easy to get back to your
navigation options.
 In addition to providing links
links, make sure you
provide plenty of location cues to let the user
know where they are
33

Hong Kong Baptist University

Summary

 Do you have to use graphics for linking?

Rethink the objectives of your site and
determine whether text will do as well. Every
additional graphic adds to download time.
 Don't forget to provide ALT values to your
<img>
img tags to provide alternate navigation
options for the user

34