To navigate - PowerPoint PPT Presentation

Loading...

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



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

To navigate

Description:

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
Category:
Tags: navigate

less

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

Title: To navigate


1
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

2
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

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

4
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

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

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

7
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

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

Global navigation
9
Global navigation bar can be vertical
Global navigation
10
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
    pages
  • 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

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

12
Breadcrumbs
  • 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

13
Breadcrumbs show user This is where you are, how
you got here
Breadcrumbs
14
Subsites
  • 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

15
Many sites have subsites
Subsites
16
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
    relationship
  • 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

17
Ad hoc links are very common
18
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
    system

19
The most familiar example of database navigation
Google
20
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
    site
  • Bars
  • Menus

21
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

22
Graphical navigation bar
23
Building context for the user with navigation bars
24
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

25
Be careful with metaphors what do these mean?
26
Intended meanings. Moral add words, too!
27
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
    group
  • Best to include accompanying text explaining the
    icon

28
So add words!
29
Effective Labels
  • Look at the results of your card-sorting
    interviews
  • 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

30
Some standard meanings
  • Label and meaning
  • Home the main entry point of a Web site,
    generally containing the top-level links to the
    site
  • 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

31
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
    emerging
  • home -- upper left corner or bottom center
  • Internal site links on the left side

32
Menus
  • 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

33
Menus pack in a lot of information note the
dropdown from Software
34
Menus
  • 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

35
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

36
Graphical site map example
37
Frames
  • 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
    Time)

38
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.

39
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

40
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

41
Make input-error reports clear
  • Best practice is to present form to user again
    with
  • 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

42
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

43
Summary
  • 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
About PowerShow.com