To navigate - PowerPoint PPT Presentation


PPT – To navigate PowerPoint presentation | free to download - id: 9286d-OWJkN


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

To navigate


Skilled designers created the icons. Test users where from the same company ... Conventions for placing navigation elements are emerging ' ... – PowerPoint PPT presentation

Number of Views:34
Avg rating:3.0/5.0
Slides: 44
Provided by: eulerMc
Tags: navigate


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: To navigate

To navigate
  • To steer or manage
  • Generally a ship or an airplane
  • To choose a path of travel over the Web.
  • Navigation choose a path through a website's
    information space
  • Key aspect of usability
  • Goal is to help users to
  • Know where they are
  • Give conficence when choosing where to go next

Navigation Design
  • Site-level navigation making it easy for the
    user to get around the site
  • Page-level navigation making it easy for the
    user to find things on a page
  • A navigational system is a visual representation
    of an organizational structure

Navigation connections
  • Good navigation builds on good content
  • Choose a navigation system that reflects the
    contents organizational structure
  • Based on users interviews
  • Visual design and navigation design are
  • Choose visual navigation elements that build
    context for a user

Strategies to create navigation system
  • Choose appropriate navigation system
  • To reflect content organization
  • Choose visual navigation system
  • To build context for the user
  • Take advantage of built-in services provided by
    Web borusers

Three types of navigation systems
  • Hierarchical
  • Derived from hierarchical organizational
  • Top down view
  • Ad hoc
  • Hyperlinks
  • Database
  • Search engines
  • Bottom down view
  • The most common is hierarchical, with many ad hoc
    links added

Rare to use only one
  • Most websites build on a judicious combination of
    these three, with one dominant theme
  • Hierarchical plus hyperlinks very common

A pure hierarchy is rare
  • We add links to facilitate moving around the
    hierarchy without going all the way to the top
    note extra links at bottom level

Global navigation
  • For a small site, possible to show the major
    links on every page

Global navigation
Global navigation bar can be vertical
Global navigation
First, Second, and Third level pages
  • A navigation bar is necessary if the primary
    links are not already displayed as part of the
    page layout
  • Provide a link back to the home page in secondary
  • Small sites may be served efficently by a global
    navigation system
  • A secondary navigation bar to third-level pages,
    is useful for a more complex system

Showing more levels in the hierarchy
  • Drop-downs or pull-outs can show the next level

  • Record of user's trail through the site
  • You are here, and this is where you came from
  • Consistency in placement of navigation bar across
    pages on the site is very important

Breadcrumbs show user This is where you are, how
you got here
  • Required for sites with great complexity
  • Subsite
  • Collection of pages within website that can share
    a common navigational system
  • Perhaps different from the rest of the website
  • Links in local navigation give access to subsite
  • Top-level navigation whitin subsite should afford
    global navigation

Many sites have subsites
Ad-hoc navigational system
  • Hierarchical system can't accommodate all
    relationships among content items on a site
  • Insert ad-hoc links once content is in place
  • These afford connections required by content
  • More editorial than architectural
  • Added, perhaps after testing
  • Convert words or phraces to hyperlinks
  • Make them into bullets, or place them at
    beginning or end of paragraph

Ad hoc links are very common
Batabase-driven navigational system
  • Implements database organizational structure
  • Bottom-down approach
  • Often used as a facility ancilliary to the main
    navigational system
  • Rarely used as the only navigational system
  • Even search-engine sites have additional
    navigation to supplement a purely database-driven

The most familiar example of database navigation
Building context
  • Helping users understand where they are and where
    they are going while visiting a website
  • Navigational elements helps build context
  • Visual organizations of text and graphics that
    display user's options and current position in a
  • Bars
  • Menus

Navigation bars
  • Collection of links group together on a page
  • Text based
  • Graphical
  • Have ability to display context clearly
  • But, take longer to download
  • Problem for limited bandwidth connections
  • Every image should have named ALT attribute
  • Hihger maintenance cost
  • Choice depend on intended audience, access to
    tools, and expected fluidity of site

Graphical navigation bar
Building context for the user with navigation bars
Graphical navigations
  • Icons or metaphores as links in navigation bar
  • Always include text to explain them
  • Extremly difficult to represent concepts
    pictorially that are universally understood

Be careful with metaphors what do these mean?
Intended meanings. Moral add words, too!
Graphical navigations
  • Skilled designers created the icons
  • Test users where from the same company
  • Had very similar user profiles
  • It is this hard to creat effective icons for a
    homogeneous group,
  • Imagine how hard is it to creat them for a larger
  • Best to include accompanying text explaining the

So add words!
Effective Labels
  • Look at the results of your card-sorting
  • Best resource
  • Participants named the piles
  • Patters or trends in those names will be usefull
    in creating navigation labels
  • Labeling systems on the Web
  • There are standard meanings for certain lables

Some standard meanings
  • Label and meaning
  • Home the main entry point of a Web site,
    generally containing the top-level links to the
  • Search find related pages by supplying a word or
    a phrase
  • About Us information about the company that
    created the site
  • Shop browse for merchandise
  • Check Out supply shipping and billing
    information, complete transaction

Consitent navigation
  • Use labels consistently throughout the site
  • Consistency is key
  • Choosing navigation labels
  • Placing navigation bars on each page
  • Conventions for placing navigation elements are
  • home -- upper left corner or bottom center
  • Internal site links on the left side

  • Prensent links as
  • Drop-down list
  • Scrollable list
  • As navigation elements, menus helps reduce number
    of clicks required to reach a page
  • Con help pack large number of options into a
    single page

Menus pack in a lot of information note the
dropdown from Software
  • Big advantage by reducing the number of clicks
  • Two disadvantges
  • Not all options are visible at one time
  • The user must act before seeing the menu
  • Not all users know to do that
  • Provide efficient navigation alternative
  • Take great care in selecting lables for menu items

Site maps
  • Textual
  • Takes work
  • For a big site, must be selective
  • Graphical
  • Coolfor a small site.
  • A site map is no substitute for good navigation

Graphical site map example
  • A frame is an area of the browser window that
    stays visible as the user moves from page to page
  • A simple way to provide global navigation
  • But hogs screen real estate you cant do
    anything else with that space
  • May not print
  • Hard (impossible?) to bookmark
  • Used much less often than formerly
  • See Jakob Nielsen, Why Frames Suck (Most of the

Built-in browser services
  • History of pages visited
  • Back button
  • Forward button
  • Color coding of links
  • Unvisited
  • Visited
  • Active
  • Dont mess with the convention that blue is an
    unvisited link.

Page-level navigation aids
  • Remember proximity, alignment, consistency make
    the layout obvious
  • Make size of text field box appropriate to the
    amount of data
  • How many forms have some box which is MUCH too
    small for necessary input?
  • What were those people thinking?
  • Users do not like text field boxes that forces
    them to scroll horizontally

Page-level navigation aids
  • Mark required fields clearly,
  • with or Required
  • Make button placement consistent
  • before or after its associated labels
  • Do not force the user to figure out correct
    button label association
  • This waste user's time
  • Increases input errors

Make input-error reports clear
  • Best practice is to present form to user again
  • All input correctly in place
  • Message explicitly identifying the problem
  • Perhaps change the color of the offending box
  • Show as many errors as possible on one page
  • dont make user correct one error per attempt
  • Consider using Go to the next error
  • A link to the field causing the problem with and
    explanation and a link to the next error

Make input-error reports clear
  • Dont make user re-enter correct data
  • Sounds obvious, huh?
  • Then why are so many forms terrible?
  • Sales are lost at this point,
  • in big quantities

  • Effective navigation is a combination of
  • good content organization and
  • good visual organization
  • The main navigational system is hierarchical,
    with a lot of hyperlinks added
  • Learn from all the bad sites youve suffered