home > usability > navigation > image maps as navigation

image maps as navigation

Image maps are single graphics which have "hotspot" areas on them which are links and correspond to different pages in the web site.

• If you use image maps as navigation, as with graphical navigation, try to ensure you provide textual links in addition to the image map
• This is so people with graphics switched off in their browsers can see the links, and visually impaired people can use a speech synthesizer to follow the links accurately.
• Try to use client-side image maps, which use html to determine the link "hotspot" and can have alt text defined for each area, this makes it much more user-friendly.
• Server-side image maps are harder to use as the link destination can change frequently and no alt text can be determined.
• Try to make sure you provide a visual means whereby visitors can see which
  section of the site they are in, rather than use a single, static image map
  as the navigation on all pages.
  • For example, Amazon (http://www.amazon.com), uses several image maps for its tab-based navigation. Each time the visitor clicks on a tab and visits a
    different section of the web site, the image map changes to show the current section having a different colored tab visible.
    • Tab-based navigation is fairly user-friendly as long as you clearly show
      visitors which section they are currently in.
    • If you use tabs, such as Amazon (http://www.amazon.com), make sure they look like real tabs (i.e. as you would find in an office). Visitors understand these.
• The main disadvantage of image maps is that it's difficult for the visitor to see where they have already been