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