Navigation Bars - PowerPoint PPT Presentation


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


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Navigation Bars


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


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

Title: Navigation Bars

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

  • Bad navigation is like a roach motel. Users go
    in, but they can't get out. Doren Berge,
  • 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.

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)

  • http//
  • positions their global
    navigational bar across the top of each page.

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

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
  • But dont overwhelm the user!

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)

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

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.

  • http//
  • National Geographic for Kids uses a variety of
    graphical and textual elements on their homepage.

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)

  • http//
  • This navigation bar uses a combination
    of textual labels and icons.

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.

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

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
  • A combination of the two will take up even more
  • 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)

  • http//
  • A peek at the 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.

What Are Qualities of Successful Web Site
  • 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

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.

  • Fleming, Jennifer. (1998). Web Navigation
    Designing the User Experience. Sebastopol
  • 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
  • Williams, Robin, Tollett, John. (2000). The
    Non-Designers Web Book (2nd ed.). Berkeley
    Peachpit Press.

  • Accessed March 5, 2003, via
  • National Geographic for Kids. Accessed March 5,
    2003, at http//
  • Accessed March 5, 2003, at
  • Norton Simon Museum. Accessed March 5, 2003, at
  • Accessed March 5, 2003, via
  • University of Texas at Austin. Accessed March 5,
    2003, at http//
  • Accessed March 5, 2003, at