Transcript Navigation Bars - School of Information

Navigation Bars
Lisa Baehr
March 20, 2003
Information Architecture
University of Texas, School of Information
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.
2
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 site’s
hierarchy (Rosenfeld and Morville, p. 113)
3
http://www.washingtonpost.com
 Washingtonpost.com positions their global navigational bar across
the top of each page.
4
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
5
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 site’s home page
 Link to a search function
 Reinforce the site’s structure
 Provide contextual clues to identify the user’s location
 But don’t overwhelm the user!
6
What Are the Best Labels to Use?
To prevent a potential “disconnect” between designer
and user, a site’s labels should speak the same
language as the site’s 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)
7
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.
8
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 <ALT> attribute to define replacement
text for the image.
9
http://www.nationalgeographic.com/ngkids/index.html
 National Geographic for Kids uses a variety of graphical and textual
elements on their homepage.
10
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)
11
http://www.petco.com/
 This Petco.com navigation bar uses a combination of textual labels
and icons.
12
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 upsidedown letter L, is a combination of the two. Often the top-running
portion provides broad navigation across subsites and the siderunning portion provides deep navigation within the current
13
subsite.
www.utexas.edu
 The University of Texas at Austin homepage uses a combination
horizontal and vertical global navigation bar.
14
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)
15
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.
16
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 site’s purpose
 Support users’ goals and behaviors
17
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.
18
References
 Fleming, Jennifer. (1998). Web Navigation: Designing
the User Experience. Sebastopol: O’Reilly.
 Rosenfeld, Louis, & Morville, Peter. (2002). Information
Architecture for the World Wide Web (2nd ed.).
Sebastopol: O’Reilly.
 Van Duyne, Douglas K., Landay, James A., & Hong,
Jason I. (2003). The Design of Sites: Patterns,
Principles, and Processes for Crafting a CustomerCentered Web Experience. Boston: Addison-Wesley.
 Williams, Robin, & Tollett, John. (2000). The NonDesigner’s Web Book (2nd ed.). Berkeley: Peachpit
Press.
19
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
20