4. Basic Principles
• Navigation can provide users with both a
map and compass
• Highlight to show the user “you are here”
• Maximum of seven items
• Give user feedback on hover or click
• Be direct
o User research helps determine naming
• Be consistent
5. Types of navigation
• Hierarchical – drill down from the home
page to other pages
• Global – users can get to any page from
any other page
• Local – users can drill down to get to a
section and from any page get to any
other page within the same section
14. Utilities
• Other elements that help users get to
pages but aren’t considered “navigation”
• Includes:
o Search
o Terms of Use and other policy documents
o Help pages
15. Breadcrumbs
• Also called “navigation trail”
• Can show users where they are in the
hierarchy
• Alternatively can show users how they got
to a page
• Helps users construct a mental map of
your site
16. Searchers vs. browsers
• Some users go straight to the search bar
or “quick links”
• Other users have the patience or time to
browse all of your pages
Do you browse the aisles or do you ask
someone?
17. Directory vs. Index
• Yahoo! presents information in a directory
• Google presents information as an index
• Online portals provide different ways of
getting to information, they also try to
serve as many of your needs as possible
to keep you there. Guess why. Ads.
19. Button States
• Up – Appears when the page first loads,
the default image
• Over – Appears when the mouse moves
over the image
• Down – Appears after the image has
been clicked, a “pressed” state
• Over While Down – Appears when the
mouse moves over the image in the
Down state
25. Add jQuery to the page
• Put this between the <head> tags, all on
one line
<script type="text/javascript"
src="jquery-1.4.1.min.js">
</script>
26. Effects
• jQuery includes a set of simple,
standard animations
‣ List of effects
27. Fade Out and Fade In
$('#box').fadeOut(1000);
$('#box').fadeIn(1000);
28. Timeline
March April May Last day of class
9 16 23 30 6* 13 20 27 4 11 18 25
Strategy
Present final projects
Research and discovery (two days)
Design
Interaction design
Validation
Visual design
Site development
Prototyping (Text-only HTML) Present
revisions
Layout and styling (CSS)
User interface dev (images and backgrounds)
Production
29. Homework due April 27
• Read Chapter 8: Positioning Page
Content
• Apply CSS to your final project site
(but no images)
• Use CSS to:
oAdjust the layout and positioning
oAdd style–text colors, headings,
and font faces
