Transcript Your Website Navigation

Navigating Your
Website
What is Navigation?
Website navigation is what helps
visitors find information on your site.
 Navigation can be images, links,
navigation bars and menus.
 Navigation should take the guess
work out for your visitors

Before You Build Navigation





How is your information structured?
What is your audiences screen
resolution?
Do you have any trend information on
what your audience uses most?
What is your brand?
Consider using focus groups, surveys to
assist in deciding what should be
included in navigation.
Four Key Elements

Navigation should be:
 Accessible
 Meaningful
 Understandable
 Prevalent
Types of Navigation

Vertical

Horizontal

Horizontal
and vertical
Navigation Menus

Fly-out

Dropdown

Expandable
Navigation Menus

Yahoo/custom style-

Rollover (or mouse over)-

Flash menu-
Provide an option for that of
left navigation or a custom window driven navigation menu (referred
as QuickView)that is similar to a mega dropdown with the exception
the menu window remains on screen unless the end user selects to
close it.
On mouse over of
each menu item, each heading visually changes and provides some
textual description of the sub-items. Since this is a one-level menu,
there must be a sub-level page that provides links to the sub-topics.
Clicking on a heading opens the menu item to
show its sub-items, and automatically closes the previously opened
menu. The "auto-close" feature may annoy some users.
More Navigation Options

Footer Navigation:

Tabbed navigation:

Mega dropdowns:
Things like legal/privacy policies,
contact, site map, FAQ, and other general information about the site
or company.
This is getting fairly popular,
I’m sure you’ve seen it before. Tabs make each section of the site
clear, and provide clean organization.
More like little panels that
dropdown from a navigation item that display many options.
Navigation Best Practices








Use same navigation on all pages
Consistent placement of navigation
Provide breadcrumbs
Provide a “site map”
Use descriptive words on links
If you use flash, offer text based as well
Use CSS to emphasize links, or visited
links
Remember the three click rule
Home Page Navigation Tips
Always include a link to your home
page as part of your navigation.
 A user may not enter your site on
the home page, so make the
navigation that they can use it no
matter what page they enter your
site on.
 Home page links should be clear and
concise and ALWAYS current.

Other Key Points of Navigation




Navigation layers generally exist in a good
website design.
Primary navigation (most important links,
categories etc),
Secondary navigation (secondary links,
subcategories etc),
Position of navigation, link titles, number
of links per page etc.
Navigation Mistakes







Using confusing or lengthy flash transitions for
navigation
Relying on images to communicate hyperlinks
content
Having navigation lead to orphan or dead-end
pages
Positioning navigation different places on your site
Making navigation same color, font, etc. as your
content
Adding sound on navigation
Putting a link to every page on your navigation
Going Mobile?
Many users surf websites using their
mobile devices.
 For dropdowns and fly-out menus it
is a good practices make the heading
or top-level link a landing page.
 In addition to mobile devices, people
with styles disabled in their browser
may experience similar issues.

In Summary

Your navigation should answer:
 Where
am I?
 Where I have been?
 Where can I go?
Your navigation should be consistent
 Your navigation should not be ever
changing

On-line Resources

Usability:
http://usability.gov/pdfs/chapter7.pdf
 http://www.w3.org/TR/WCAG10


Navigation:
http://webdesign.about.com/cs/webnavigation/a/aaeffectivenav.htm

Footer navigation example:
Tabbed navigation example

Mega dropdowns examples–

http://www.bbc.co.uk/
–
http://www.smashingmagazine.com/2009/04/06/showcase-ofwell-designed-tabbed-navigation/
http://www.useit.com/alertbox/mega-dropdown-menus.html
Questions?

For any follow up questions, you may
contact:
 Kathie
Glassel: [email protected]
717-526-1010 x 3353
Or
 Nic Poague: [email protected]
717-526-1010 x 3354