Navigation Bars - PowerPoint PPT Presentation

Loading...

PPT – Navigation Bars PowerPoint presentation | free to view - id: 23ec76-ZDc1Z



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Navigation Bars

Description:

Graphic bars tend to look nice, but can slow down the page-loading speed. ... Because global navigation bars are often the single consistent navigation ... – PowerPoint PPT presentation

Number of Views:26
Avg rating:3.0/5.0
Slides: 21
Provided by: lisab97
Category:

less

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

Title: Navigation Bars


1
Navigation Bars
  • Lisa Baehr
  • March 20, 2003
  • Information Architecture
  • University of Texas, School of Information

2
Introduction
  • Bad navigation is like a roach motel. Users go
    in, but they can't get out. Doren Berge,
    Lycos
  • Design challenge Users arrive at any given site
    in different ways.
  • Accommodate different types of users.
  • Three types of embedded navigation systems
    global, local, and contextual.

3
Global Navigation
  • Should permeate an entire Web site
  • appear on every page throughout the site
  • take the form of a navigation bar at the top of
    the page
  • allow direct access to key areas and functions,
    no matter where the user travels in the sites
    hierarchy (Rosenfeld and Morville, p. 113)

4
  • http//www.washingtonpost.com
  • Washingtonpost.com positions their global
    navigational bar across the top of each page.

5
What Is a Navigation Bar?
  • Distinct collection of hypertext links that
    connect a series of pages, enabling movement
    among them
  • Supports global, local, and contextual navigation
  • Can be text or graphics, pull-downs, pop-ups,
    cascading menus, and so on

6
Why Are Nav Bars So Important?
  • Context!
  • Where am I?
  • Where do I want to go next?
  • How do I get there?
  • Link to the sites home page
  • Link to a search function
  • Reinforce the sites structure
  • Provide contextual clues to identify the users
    location
  • But dont overwhelm the user!

7
What Are the Best Labels to Use?
  • To prevent a potential disconnect between
    designer and user, a sites labels should speak
    the same language as the sites users. (Rosenfeld
    Morville, p. 77)
  • Match content and scope of the page or section
  • Strive for consistency (e.g., verb phrases)
  • Problem Some options can be labeled with
    different, but equally effective, words or
    phrases (e.g., news, events, and announcements)
  • Use scope notes (brief descriptions)

8
  • http//www.nortonsimon.org/
  • The designers of this Web site figured out a way
    to imbed a scope note into their horizontal
    global navigational bar.

9
Which Are Better, Textual or Graphical
Navigational Bars?
  • Graphic bars tend to look nice, but can slow down
    the page-loading speed.
  • More expensive to design and maintain.
  • Consider people who are visually impaired and
    people using wireless devices
  • Use the ltALTgt attribute to define replacement
    text for the image.

10
  • http//www.nationalgeographic.com/ngkids/index.htm
    l
  • National Geographic for Kids uses a variety of
    graphical and textual elements on their homepage.

11
Which Are Better, Textual or Iconic Labels?
  • Textual labels
  • easiest to create
  • most clearly indicate the contents of each option
  • Icons
  • more difficult to create
  • can be ambiguous, but . . .
  • can provide support for users unfamiliar with the
    language used on the site
  • Icons by themselves are problematic because they
    are not always universally understood across
    cultures or even within a culture. (The Design of
    Sites, p. 551)
  • Rosenfeld and Morville recommend a combination of
    textual labels and icons, at least on the home
    page. (p. 120)

12
  • http//www.petco.com/
  • This Petco.com navigation bar uses a combination
    of textual labels and icons.

13
Where on the Page Do Navigation Bars Belong?
  • Three typical types of navigation bars based on
    their physical orientation (The Design of Sites,
    p. 551)
  • The top-running navigation bar stretches across
    the top of a Web page. Usually acts as top-level
    navigation, linking directly to different
    subsites or categories.
  • The side-running bar often runs down the left
    side of a web page. One benefit--less space is
    used. Usually show more categories and can
    provide second-level navigation that provides
    links within a subsite.
  • The top-and-left navigation bar, which resembles
    an upside-down letter L, is a combination of the
    two. Often the top-running portion provides broad
    navigation across subsites and the side-running
    portion provides deep navigation within the
    current subsite.

14
  • www.utexas.edu
  • The University of Texas at Austin homepage uses a
    combination horizontal and vertical global
    navigation bar.

15
How Many Options Should Be Included in a
Navigation Bar?
  • Real estate is dear
  • Horizontal space is especially tight
  • Icons usually take up more space than textual
    labels.
  • A combination of the two will take up even more
    space.
  • Text or graphics should not be reduced so much
    as to become illegible or unrecognizable.
  • According to The Design of Sites, the number of
    categories that a tab row can effectively manage
    on one line is between 10 and 15. (p. 556)

16
  • http//www.amazon.com/
  • A peek at the Amazon.com Web site reveals a
    horizontal cluster of eight tabs at the top of
    the page over a horizontal cluster of five
    textual labels.
  • Clustering prevents the user from feeling
    overwhelmed by too many options.

17
What Are Qualities of Successful Web Site
Navigation?
  • According to Jennifer Fleming, author of
    Navigation Designing the User Experience,
    navigation that works should
  • Be easily learned
  • Remain consistent
  • Provide feedback
  • Appear in context
  • Offer alternatives
  • Require an economy of action and time
  • Provide clear visual messages
  • Use clear and understandable labels
  • Be appropriate to the sites purpose
  • Support users goals and behaviors

18
What Else Should Be Considered?
  • Mistakes happen.
  • Examine other well-designed sites.
  • Study resources on Web design.
  • Don't forget to test for usability!
  • Because global navigation bars are often the
    single consistent navigation element in the site,
    they have a huge impact on usability.
    Consequently, they should be subjected to
    intensive, iterative user-centered design and
    testing. (Rosenfeld and Morville, p. 113)
  • Usability testing should be conducted during and
    after the design process.

19
References
  • Fleming, Jennifer. (1998). Web Navigation
    Designing the User Experience. Sebastopol
    OReilly.
  • Rosenfeld, Louis, Morville, Peter. (2002).
    Information Architecture for the World Wide Web
    (2nd ed.). Sebastopol OReilly.
  • Van Duyne, Douglas K., Landay, James A., Hong,
    Jason I. (2003). The Design of Sites Patterns,
    Principles, and Processes for Crafting a
    Customer-Centered Web Experience. Boston
    Addison-Wesley.
  • Williams, Robin, Tollett, John. (2000). The
    Non-Designers Web Book (2nd ed.). Berkeley
    Peachpit Press.

20
Images
  • Amazon.com. Accessed March 5, 2003, via
    http//www.amazon.com/
  • National Geographic for Kids. Accessed March 5,
    2003, at http//www.nationalgeographic.com/ngkids/
    index.html
  • Nick.com. Accessed March 5, 2003, at
    http//www.nick.com/index.jhtml?TimeZone-1
  • Norton Simon Museum. Accessed March 5, 2003, at
    http//www.nortonsimon.org/
  • Petco.com. Accessed March 5, 2003, via
    http//www.petco.com/
  • University of Texas at Austin. Accessed March 5,
    2003, at http//www.utexas.edu
  • washingtonpost.com. Accessed March 5, 2003, at
    http//www.washingtonpost.com
About PowerShow.com