Transcript Principles of Web Design Chapter 4

Chapter 4
Planning Site Navigation
Chapter 4
Principles of Web Design
Objectives
•
•
•
•
•
Create usable navigation
Build text-based navigation
Link with a text navigation bar
Add contextual linking
Use graphics for navigation and linking
Principles of Web Design 2nd Ed.
Chapter 4
2
Chapter 4
Principles of Web Design
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?
Principles of Web Design 2nd Ed.
Chapter 4
3
Chapter 4
Principles of Web Design
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
Principles of Web Design 2nd Ed.
Chapter 4
4
Chapter 4
Principles of Web Design
Creating Usable Navigation
• Provide consistent, easy-to-understand links
• Provide alternatives to the browser’s Back
button that lets users return to their starting
point
Principles of Web Design 2nd Ed.
Chapter 4
5
Chapter 4
Principles of Web Design
• Figure 4-1
• Figure 4-2
Principles of Web Design 2nd Ed.
Chapter 4
6
Chapter 4
Principles of Web Design
Limit Information Overload
• Create manageable information segments
• Control page length
• Use hypertext to connect facts, relationships,
and concepts
Principles of Web Design 2nd Ed.
Chapter 4
7
Chapter 4
Principles of Web Design
Using Text-Based Navigation
• Text-based linking is often the most effective
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
Principles of Web Design 2nd Ed.
Chapter 4
8
Chapter 4
Principles of Web Design
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
Principles of Web Design 2nd Ed.
Chapter 4
9
Chapter 4
Principles of Web Design
Sample Text Navigation
The following screens demonstrate a variety
of text-based navigation options:
• Between the previous and next chapter
• Within chapter pages to each topic
• To related information by using contextual
links
Principles of Web Design 2nd Ed.
Chapter 4
10
Chapter 4
Principles of Web Design
• Figure 4-3
• Figure 4-4
• Figure 4-5
• Figure 4-6
• Figure 4-7
• Figure 4-8
• Figure 4-9
• Figure 4-10
• Figure 4-11
• Figure 4-12
• Figure 4-13
• Figure 4-14
• Figure 4-15
Principles of Web Design 2nd Ed.
Chapter 4
11
Chapter 4
Principles of Web Design
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 graphics to reassure the user
• Use easily understandable graphics
Principles of Web Design 2nd Ed.
Chapter 4
12
Chapter 4
Principles of Web Design
• Figure 4-16
• Figure 4-17
• Figure 4-18
• Figure 4-19
• Figure 4-20
• Figure 4-21
• Figure 4-22
• Figure 4-23
Principles of Web Design 2nd Ed.
Chapter 4
13
Chapter 4
Principles of Web Design
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 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, make sure you
provide plenty of location cues to let the user
know where they are
Principles of Web Design 2nd Ed.
Chapter 4
14
Chapter 4
Principles of Web Design
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> tags to provide alternate navigation
options for the user
Principles of Web Design 2nd Ed.
Chapter 4
15