WEEK 11-12 Required Reading
Screen Design Link Multimedia Usability Navigation Accessibility
[Home] [Contact] [Site map]
Definition
Navigation Samples (The Trunk Test)
Flowcharts
Storyboarding
MISC LINKS

Site References

 

 

NAVIGATION

Important elements of Navigation (Krug, 2000; McCracken & Wolfe, 2004; Williams & Tollett, 1998)

  • Good navigation is based on content organization not graphics. Creative graphics can aesthetic value for visuals example colored tabs
  • Visual Organization (sections/subsections) - page layout can help with effective navigation
  • Repetition & Consistency is important to make the user feel comfortable. Krug's refers this as the trust level.
  • A good navigation system gives the visitor a sense of location. "Where am I?". Krug uses the "You are here" as an example of breadcrumb techniques.
  • Use a site map to help users know what the site is about. A site map is a graphical representation of the site which shows the site's organization and structure of the page links.
  • Site level navigation shows the macro level of the entire site or site architecture
  • Page level navigation focuses on individual pages. Page layout and placement of navigation items. Example may also include labelling of buttons
  • Examples of navigation types - Global/Main Navigation, Drop down menus, breadcrumbs
  • Examples of Navigation items - buttons, text links, icons, symbols
  • Try to focus on designs that ultizes the browser's function ssuch as back and forward button

FLOWCHARTING & STORYBOARDING

Before design a site, it is very important that designers should brainstorm what the project is about. Designers use flowcharts and storyboards to help with project planning. Flowcharts are like blueprints or map that represents the hierarchy organization and navigation scheme of the site. Meanwhile storyboard are drafts visual placement of how a page looks like.

Flowcharting Diagrams & Symbols

Flowcharting Concepts #1

Flowchart Concepts #2

Storyboarding Process #1

Storyboarding Process #2