Navigation BarsLisa Baehr

March 20, 2003Information 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 site’s 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 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!

7

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)

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 <ALT> attribute to define replacement

text for the image.

10

http://www.nationalgeographic.com/ngkids/index.html

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 site’s 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: 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 Customer-Centered Web Experience. Boston: Addison-Wesley.

Williams, Robin, & Tollett, John. (2000). The Non-Designer’s 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