Chapter 3: Navigation
Contents of Book Chapter
-
Introduction to Navigation
-
Link Functions
-
Navigation Affordances
-
Link States
-
Navigational Text
-
Navigational Images
-
Navigation Organization Tools
-
Link Reliability
-
Navigation and Accessibility
Resources
-
Creating a
rollover button
in Fireworks (pdf format).
-
Dingbat font chart
(.rtf file, so that you can import it into your word
processor and add your favorite dingbat fonts, if you
choose).
-
Web Menus with Beauty and Brains,
by Wendy Peck. New York: Hungry Minds, 2002.
-
Web Pages that Suck (1998)
and Son of Web Pages that Suck (2002),
by Vincent Flanders and Michael Willis. Alameda, California:
Sybex.
-
Creating favicons:
back to top...
Exercises
(mouseover answer boxes to reveal answers)
Check Your Reading Comprehension
-
Which of the following should be avoided as formatting
changes for text link rollovers? Why?
-
List at least six of the eight principles of navigation.
-
Create simple, visible, and consistent navigation.
-
Take advantage of what visitors already know.
-
Orient visitors with “You Are Here” markers.
-
Minimize visitor effort.
-
Provide multiple ways to access information.
-
Provide for visitors with varied skill levels.
-
Provide feedback.
-
Make sure the navigation is flexible and expandable.
-
The term for visual characteristics that indicate an
element is a link.
perceived affordances, or just affordances for
short
-
List the five possible link states.
-
Available/at rest.
-
Available/rollover.
-
Active.
-
Visited.
-
Current (link actually removed).
-
Number the following CSS pseudoclasses to reflect the
order in which they should normally appear in the
stylesheet.
-
3
a:hover
-
2
a:visited
-
4
a:active
-
1
a:link
-
List at least three ways to “jazz up” text links:
-
Use CSS to show link status, including rollover
effects.
-
Use a tag-along graphic or icon next to the
link.
-
Use HTML’s bulleted list feature to place a
graphic of your choice to the left of the
link.
-
Fake a button by using CSS 3-d borders around
the text link.
-
Fake a button by floating the text link over
a button image placed in the background.
-
Write the CSS that sets the following characteristics
for links, placing the style rules in the correct
order.
-
Active links are black with an underline.
-
Visited links are blue with no underline.
-
Rollover links are red with an underline.
-
Standard links are green with no underline.
<style type="text/css">
a:link {color:#00ff00; text-decoration:none;}
a:visited {color:#0000ff; text-decoration:none;}
a:hover {color:#ff0000; text-decoration:underline;}
a:active {color:#000000; text-decoration:underline;}
</style>
-
Re-arrange the CSS in the prior question so that hover
effects don’t show up for visited links.
<style type="text/css">
a:link {color:#00ff00; text-decoration:none;}
a:hover {color:#ff0000; text-decoration:underline;}
a:visited {color:#0000ff; text-decoration:none;}
a:active {color:#000000; text-decoration:underline;}
</style>
-
When a navigational graphic takes on the appearance
of a functioning real-world device, such as a button,
lever, dial, etc., it’s termed
isomorphic correspondence.
-
List at least five navigational graphic affordances
recognized by a typical web surfer.
-
Symmetrical shapes.
-
3-D bevels.
-
Drop shadow.
-
Rollover effects.
-
Pictures or icons of real-world objects.
-
Autonomy of the symbol.
-
Appearance of functioning real-world devices,
such as buttons, levers, dials, etc, termed
isometric correspondence.
-
Replacing one image with another, often triggered on
mouse rollover, is called a(n)
image swap
-
The term for an area designated as a link on an image
hotspot
-
The toolbars and buttons on a browser are called its
chrome
-
The term for text links set within body text and indicated
by a formatting change.
embedded links, contextual links, or inline links.
-
The term for a custom icon that appears next to the
name in a favorites menu or on the desktop.
favicon
back to top...
Critical Thinking Exercises (long answer)
Use vocabulary and concepts from the text to answer the
following questions. Provide examples to document your
explanation.
-
Explain the advantages and disadvantages of choosing
a broad-but-shallow hierarchical structure over
a narrow-but-deep structure.
Advantages: A broad-but-shallow structure requires
fewer clicks and page downloads to reach content
and results in more precise and therefore clearer
wording on navigation elements.
Disadvantages: Violates the Rule of Seven and requires
careful chunking of menu elements.
-
Explain why we should disable and somehow mark the
current link but should not remove it from a menu
structure. What’s the best way to disable it?
We disable it so that the visitor doesn’t accidentally
reload the page and we mark it somehow so that
it can serve as a “You are here” indicator.
We don’t remove it from the menu because deleting
it would change the menu from page to page,
which would be confusing for our visitors.
The best way to disable the current link is
to remove the surrounding <a> tags.
-
Although navigational graphics can be appealing and
impressive, there are downsides to them. Explain
those downsides.
Each unique navigational image requires download.
If you are using rollover effects, there are
twice as many images to download. A menu system
with 100 unique entries would then require
downloading 200 images. Additionally, there
would be 200 images to maintain. Therefore,
the images must certainly add enough impact
to the site that both the download costs and
the maintenance costs are worthwhile.
-
Discuss the implications of opening an external link
in a new window. If you choose to open a new window,
what guidelines should you follow?
Opening an external link in a new window clutters
the visitor’s screen with windows and violates
accessibility rules as well. If you choose
to do so anyway, you should notify the visitor
first and, usually, avoid changing the window
size and or removing browser chrome.
-
List the circumstances in which the expense of developing
a search function might be worthwhile.
-
The site is very large, such that browsing
isn’t a reasonable way to find something.
-
The site is complex, with many cross-references
and inter-related information.
-
The site is fragmented, with ambiguous and
overlapping categories.
-
The target users expect to see a search function,
and they will use it frequently enough
to justify the cost.
-
The site has highly dynamic content.
-
List at least eight guidelines for making navigation
accessible.
-
Use a consistent layout style on all pages.
-
alt attributes should be used on all navigation
images, and references to the image from
elsewhere on the page should refer to the
alt text rather than to any visual attributes
of the image.
-
If incorporating image maps, offer equivalent
text links, too.
-
If employing frames, include a descriptive
title attribute on the frameset and each
frame.
-
If using some feature other than underline
as the major affordance on text links,
make sure the difference is obvious when
viewed in grayscale.
-
On drop down menus that display only on rollover,
make the text or image that triggers the
dropdown a link to a menu-only page with
the same links as the dropdown menu.
-
Include some kind of visual and readable content
between two adjacent text links; spaces
alone aren’t adequate.
-
Provide multiple means of navigation so that
visitors can choose the method that works
best for them, such as a search utility,
site map, site index, breadcrumbs, and
keyboard shortcuts.
-
Provide a “skip navigation” or "Skip to content" link
so that visitors don’t have to wait for a screen
reader to read through the same repetitive
navigation system on every page.
-
Avoid opening new windows, but if you do, it's
best to notify the visitor first.
-
Provide HTML pages as alternatives to Flash-only
pages
back to top...
Hands-on Exercises
-
Pick an existing web site on the web. Answer each of
the following questions and discuss whether or
not the choices made on this site are appropriate
for its content and audience.
-
Is the site using a broad-but-shallow or narrow-but-deep
hierarchy?
-
Is the site using frames?
-
Are there multiple means of navigation? What
are they?
-
Is the site using text links, navigational
graphics, or both?
-
Are current links disabled?
-
Are external links opened in new window(s)?
-
Does the site seem to be accessible?
-
Pick an existing web site on the web and evaluate it
based on the entire architecture and navigation
checklist at the end of the chapter. What did the
designers do right, and what did they do wrong?
-
Surf the web to find a site that has “killer” navigation,
and another one that has poor navigation. Compare
and contrast what the “killer” site did well that
the other site didn’t do so well. How would you
redesign the site that has poor navigation?
back to top...
Ongoing Case Study Exercise
-
Building upon the site analysis you did in Chapter
2 as you began the the ongoing case study, design
at least two navigation schemes for both the home
page and all lower-level pages. Evaluate the two
schemes and choose the one that seems best.
-
Flesh out the chosen navigation scheme that you created
for the previous question. Write and test the preliminary
HTML for just the menu system.
back to top...
|