Usability


Objective
  • Create navigational elements that make it as intuitive as possible for the user to find the information that's useful to them.
Overview
  • Hyperlinks are the defining quality of websites.
  • The user experience is not determined by the content of the website, but by the manner in which the user moves through the website.
Hyperlinks
Usage
  • Favor using underscores for default links.
  • Always use underscores for active links.
  • Favor blue or black for default link color.
  • Favor blue or red for active link color.
  • Avoid changing the size of a linked element when the mouse is over it; this can cause a small amount of motion sickness.
Navigational bar
Tab bar
  • Avoid having a tab bar extend any farther left or right than the rest of the page elements.
Menu bar
  • Horizontal or vertical
  • Pull-down or non-pull-down
  • Automatic pull-down or manual pull-down
  • Automatic horizontal pull-down menus are terrible for usability; they usually appear when the user doesn't want them--often covering the page element the user wanted to get to--and part of the menu may be offscreen.
Usage      
  • There should be no non-hyperlinked areas between the elements in a navigational bar.  When moving the mouse from one link to the next on the navigational bar, the mouse icon should never change.  Clicking anywhere on the navigational bar (between the first and last element) should activate a hyperlink.
  • The non-active tabs should appear to be farther away, less prominent
  • The size and shape of a tab should remain exactly the same, whether it's active or non-active
  • Favor using rounded corners for tabs
  • Allowing the eyes to easily and quickly pass over the navigational bar on their way to the content is much more important than visually establishing the functionality of the navigational bar.
Bread crumbs
  • Use hyperlinks for all but the right-most element (which represents the current page).
  • Favor using low emphasis for bread crumbs, especially for the right-most element.
  • A bread crumb doesn't necessarily show the path the user took to get to the current page (if they need to backtrack, they can use the browser's "back" button), it shows the organizational heirarchy of the current page.  Each page may have multiple paths by which the user can reach it.
Generic links
  • Home
  • About Us
  • Contact Info
  • Search
  • Site map
  • Careers
  • Help
  • Shopping cart
  • Subscribe / Join
  • Sign in
  • Sign out