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.
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)
http://www.washingtonpost.com • Washingtonpost.com 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 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!
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)
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.
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.
http://www.nationalgeographic.com/ngkids/index.html • 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://www.petco.com/ • This Petco.com 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.
www.utexas.edu • 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 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)
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.
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
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.
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.
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