User-Centered Website Development: A Human - Computer ...aguercio/CS27101Slides/Chap06.pdfAnd if not, there is little penalty in clicking \൯n them to see what they do. In general,

$Page 1: User-Centered Website Development: A Human - Computer ...aguercio/CS27101Slides/Chap06.pdfAnd if not, there is little penalty in clicking \൯n them to see what they do. In general,$
Chapter 6: Navigation Copyright © 2004 by Prentice Hall

User-Centered Website Development: A Human-Computer Interaction Approach


Daniel D. McCracken City College of New York Rosalee J. Wolfe DePaul University With a foreword by: Jared M. Spool, Founding Principal, User Interface Engineering PowerPoint slides by Dan McCracken, with thanks

to Rosalee Wolfe and S. Jane Fritz, St. Joseph’s College


Credits

Slides 10 and 12: Courtesy of Helen L. Martch. Slide 13: Copyright © 1999-2002 drugstore.com, inc. All rights reserved. Slide 14: Home page of www.useit.com. Slide 15: Courtesy of Google, Inc. Slide 16: Courtesy of W. Atlee Burpee & Co. Slide 17: These materials have been reproduced by with the permission of eBay Inc. Copyright EBAY Inc. All rights reserved. Slide 20: Courtesy of MetaDesign. Slide 22: Courtesy of CDW.


6. Navigation Design

In this chapter you will learn about: Site-level navigation: making it easy for the user to get around the site Page-level navigation: making it easy for the user to find things on a page


Navigation: connections

Good navigation builds on good content organization (Chapter 4)

Choose a navigation system that reflects the content’s organizational structure

Visual design (Chapter5) and navigation design are interrelated

Choose visual navigation elements that build context for a user

A navigational system is a visual representation of an organizational structure


Three types of navigation systems

Hierarchical Derived from hierarchical organizational structure

Ad hoc Hyperlinks

Database Search engines

The most common is hierarchical, with many ad hoc links added


Rare to use only one

Most websites build on a judicious combination of these three, with one dominant theme Hierarchical plus hyperlinks very common


A pure hierarchy is rare

We add links to facilitate moving around the hierarchy without going all the way to the top; note extra links at bottom level


Global navigation

For a small site, it may be possible to show the major links on every page

Global navigation

Presenter

Presentation Notes

I will change this grab when the second half of the PowerPoints are submitted. Get the stuff about the preprint out of there. And to be perfectly honest, these global navigation links do not appear on every page of my site.


Global navigation bar can be vertical

Global navigation

Presenter

Presentation Notes

And note the little bullet beside Home. That changes as the user moves around the site, thus providing more context, and helping to answer the user’s basic questions: “Where am I, how did I get here, and where can I go from here?” The outstanding sites never leave the user without answers to those questions.


Showing more levels in the hierarchy

Drop-downs or pull-outs can show the next level


Breadcrumbs show user “This is where you are how you got here”

Breadcrumbs

Presenter

Presentation Notes

“Where am I, how did I get here, and where can I go from here?” The navigation designer’s mantra. When breadcrumbs are links, as they almost always are, they also give the user another way to move about the hierarchy. Note that the little bullet in the global navigation bar is now beside Projects. Another answer to, “Where am I?”


Many sites have subsites

Subsites

Presenter

Presentation Notes

Fairly obvious, perhaps. The point is to introduce the term and concept of “subsite.”


Ad hoc links are very common

Presenter

Presentation Notes

Yes, we know that “ad hoc” is Latin and should be italicized. Common usage has overtaken that one. It should also be pronounced “odd hoke” to be approximately correct Latin, but how many people do that? I know one such person, and all it gets him is funny looks.


The most familiar example of database navigation: Google


Graphical navigation bar

Presenter

Presentation Notes

The Burpee site is a delight in many ways. Note here that although we call it “graphical navigation,” the designers are careful to use words also. In the bottom line, a few leaves by themselves would not shout “Herbs!” to everybody. See the examples of icons that were misunderstood badly, two slides later.


Building context for the user with navigation bars


Be careful with metaphors: what do these mean?

Presenter

Presentation Notes

These were planned for a Sun Microsystems intranet, available only to employees. In other words, a reasonably homogeneous group. And the icons were devised by professional graphic designers. Fortunately, Sun did user testing—and dropped these icons.


Intended meanings. Moral: add words, too!

Presenter

Presentation Notes

A dollar sign by a doctor’s clipboard only reminds me of how bad my hospital’s patient accounting system is.


So add words!

Presenter

Presentation Notes

A couple of these icons would convey nothing at all without words. In fact, I’m not sure any of them would convey the intended meaning. They are essentially decoration.


Some standard meanings

Label and meaning Home: the main entry point of a Web site, generally containing the top-level links to the site Search: find related pages by supplying a word or a phrase About Us: information about the company that created the site Shop: browse for merchandise Check Out: supply shipping and billing information, complete transaction

Presenter

Presentation Notes

These probably are understood by even slightly experienced Internet shoppers. And if not, there is little penalty in clicking on them to see what they do. In general, we do not want users to have to click on things to find out what they mean; that should be obvious. But if somebody new to the Internet has to do a bit of that at the beginning, maybe that’s OK.


Menus pack in a lot of information; note the dropdown from Software

Presenter

Presentation Notes

In the CDW site these menus drop down on a mouse-over. It is not clear how many users know to move the mouse around a page to see what is “hot.” Don’t judge this one by yourself, if you haven’t done user testing! (Or have data from somebody who has done it.)


Site maps

Textual Takes work For a big site, must be selective

Graphical Cool—for a small site.

A site map is no substitute for good navigation


Graphical site map example

Presenter

Presentation Notes

Created by Rosalee Wolfe with the Ptolomaeus site mapping software.


Frames

A frame is an area of the browser window that stays visible as the user moves from page to page A simple way to provide global navigation But hogs screen real estate: you can’t do anything else with that space May not print Hard (impossible?) to bookmark Used much less often than formerly See Jakob Nielsen, “Why Frames “Suck (Most of the Time)”

Presenter

Presentation Notes

Fro the Nielsen article: http://www.useit.com/alertbox/9612.html Frames are being used less and less, apparently. Tempting, but they create too many problems.


Built-in browser services

History of pages visited Back button Forward button Color coding of links

Unvisited Visited Active

Don’t mess with the convention that blue is an unvisited link.

Presenter

Presentation Notes

In the book (Chapter 3) we cite Scott Weiss’ report that in 2000 a third of his potential users did not know what the Back button does. Although we don’t have data, we doubt that it is that bad in 2003.


Page-level navigation aids

Remember proximity, alignment, consistency: make the layout obvious Make size of text box appropriate to the amount of data (How many forms have you filled out where some box is MUCH too small for what you have to enter? What were those people thinking?) Show which fields are required, with * or Required Make button placement consistent: before or after its associated text


Make error reports clear

Say explicitly what the problem was Perhaps change the color of the offending box Show as many errors as possible on one page; don’t make user correct one error per attempt to send the data Don’t make user re-enter correct data Sounds obvious, huh? Then why are so many forms terrible? Sales are lost at this point, in big bad quantities

Presenter

Presentation Notes

The May 19, 2003, issue of the New York Times says that shopping cart abandonment rate as of that date was 49%. That was up, from 47% in 2001, but that probably reflects increased Internet shopping, not that sites are getting worse. We hope.


Summary

In this chapter you have learned that: Effective navigation is a combination of good content organization and good visual organization The main navigational system is hierarchical, with a lot of hyperlinks added You can learn from all the bad sites you’ve suffered with

Documents

User-Centered Website Development: A Human - Computer ...aguercio/CS27101Slides/Chap06.pdfAnd if not, there is little penalty in clicking \൯n them to see what they do. In general,