Transcript ch4

Chapter 4
Planning Site Navigation
Principles of Web Design, 4th Edition
Objectives
•
•
•
•
•
Create usable navigation
Build text-based navigation
Add contextual linking
Summarize text-based navigation
Use graphics for navigation and linking
Principles of Web Design, 4th Edition
4-2
Creating Usable Navigation
Principles of Web Design, 4th Edition
4-3
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, 4th Edition
4-4
Creating Usable Navigation
(continued)
• 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, 4th Edition
4-5
Creating Usable Navigation
(continued)
• Provide consistent, easy-to-understand links
• Provide an alternative to the browser’s Back
button that lets users return to their starting
point
Principles of Web Design, 4th Edition
4-6
Principles of Web Design, 4th Edition
4-7
Principles of Web Design, 4th Edition
4-8
Limiting Information Overload
• Create manageable information segments
• Control page length
• Use hypertext to connect facts, relationships,
and concepts
Principles of Web Design, 4th Edition
4-9
Building Text-Based Navigation
Principles of Web Design, 4th Edition
4-10
Building 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, 4th Edition
4-11
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, 4th Edition
4-12
Sample Text Navigation
(continued)
• The following screens demonstrate a
variety of text-based navigation options
(continued):
– Between the previous and next chapter
– Within chapter pages to each topic
– To related information by using contextual
links
Principles of Web Design, 4th Edition
4-13
Principles of Web Design, 4th Edition
4-14
Principles of Web Design, 4th Edition
4-15
Linking with a Text Navigation
Bar
• The Table of Contents page must link to
the other main pages of the Web site,
allowing users to go directly to the
pages they want
• Achieve this by adding a simple textbased navigation bar
Principles of Web Design, 4th Edition
4-16
Principles of Web Design, 4th Edition
4-17
Linking to Individual Files
• The Table of Contents page needs links
to the individual chapter files in the Web
site
Principles of Web Design, 4th Edition
4-18
Principles of Web Design, 4th Edition
4-19
Adding Internal Linking
• Add a “back to top” link that lets users
return to the top of the page from many
points within the file
Principles of Web Design, 4th Edition
4-20
Principles of Web Design, 4th Edition
4-21
Principles of Web Design, 4th Edition
4-22
Adding an Internal Navigation
Bar
• You can use additional fragment
identifiers in the table of contents to add
more user-focused navigation choices
Principles of Web Design, 4th Edition
4-23
Principles of Web Design, 4th Edition
4-24
Principles of Web Design, 4th Edition
4-25
Linking to External Document
Fragments
• You can let users jump from the table of
contents to the exact topic they want
within each chapter
• This requires adding code to both the
Table of Contents page and each
individual chapter page
Principles of Web Design, 4th Edition
4-26
Principles of Web Design, 4th Edition
4-27
Adding Page Turners
• You can enhance the functions of the
navigation bar in the chapter pages by
adding page-turner links
• Page turners let you move either to the
previous or next page in the collection
Principles of Web Design, 4th Edition
4-28
Principles of Web Design, 4th Edition
4-29
Principles of Web Design, 4th Edition
4-30
Principles of Web Design, 4th Edition
4-31
Adding Contextual Linking
Principles of Web Design, 4th Edition
4-32
Adding Contextual Linking
• Contextual links allow users to jump to
related ideas or cross-references by clicking
the word or item that interests them
• These are links that you can embed directly
in the flow of your content by choosing the
key terms and concepts you anticipate your
users will want to follow
Principles of Web Design, 4th Edition
4-33
Principles of Web Design, 4th Edition
4-34
Using Graphics for
Navigation and Linking
Principles of Web Design, 4th Edition
4-35
Using Graphics for
Navigation and Linking
• 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, 4th Edition
4-36
Principles of Web Design, 4th Edition
4-37
Using Icons for Navigation
• One of the main problems with icons—not
everyone agrees on their meaning
• Especially with a worldwide audience, you
never can be sure exactly how your audience
will interpret your iconic graphics
• This is why so many Web sites choose textbased links
Principles of Web Design, 4th Edition
4-38
Principles of Web Design, 4th Edition
4-39
Principles of Web Design, 4th Edition
4-40
Principles of Web Design, 4th Edition
4-41
Principles of Web Design, 4th Edition
4-42
Using the alt Attribute
• Provide alternate text-based links in addition
to graphical links
• Do this by including an alt attribute in the
<img> tag of the HTML code for the graphic
Principles of Web Design, 4th Edition
4-43
Principles of Web Design, 4th Edition
4-44
Principles of Web Design, 4th Edition
4-45
Principles of Web Design, 4th Edition
4-46
Summary
• Work from the users’ 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, 4th Edition
4-47
Summary (continued)
• 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, 4th Edition
4-48