Where Am I? Navigation and Interface | 3

[previous]

Where Am I? Navigation and Interface

Ten (Okay, Three) Points of Light

In her book, Web Navigation: Designing the User Experience (available at www.oreilly.com/catalog/navigation/), Jennifer Fleming describes ten qualities shared by successful navigational interfaces. Fleming's ten points defy quick summarization, so we'll settle for three of them. In Fleming's view, good interfaces should:

• Be easily learned
• Remain consistent
• Continually provide feedback

Be Easily Learned

A designer who buys Adobe Illustrator will accept the product's learning curve; an online shopper will not invest the same kind of energy into figuring out how www.halfpricefurniture.com works. Overly complex interfaces may please the designer who came up with them, but they rarely win favor with those trying to find their way through the site.

Why do most of us hate the remotes that come with our TVs and VCRs? Because there are too many buttons to push, and there is rarely an intuitive logic to the placement and size relationships of these buttons. We are always hunting for the button that resets the clock or programs the channels (and discovering that this function actually lies buried deep in a series of onscreen menus). We approach even the most basic tasks with the sense that we are somehow being forced to prove our mastery over a troublesome object.

Unless we wish to watch one TV channel for the rest of our lives, we have no choice but to click our way through the madness. But Web users always have a choice-they can visit a Web site that is easier to use.

Remain Consistent

Each site presents the visitor with a unique interface. Compelling content or useful services are the only reason users bother learning how your site works. After they've gone to that trouble, they will not appreciate your changing the interface, misguidedly groping after "freshness."

Web users are not mind readers. After they've learned that flowers serve as visual links (as in Figure 3.1), you'd be foolish to switch to a folder tab metaphor. If there are five main menu items per page, suddenly adding a sixth and seventh at the same hierarchical level could make naive Web users think they've somehow linked to an unrelated site. Sophisticated users will think the site is being redesigned, and they've somehow caught you in mid-process.

Many times beginning Web designers feel that each section of a site requires its own distinctive signature. It usually makes more sense to provide a consistent interface, acknowledging the new section (if at all) with a subtle color change or a simple section title.

Continually Provide Feedback

In Chapter 2, "Designing for the Medium," we remarked on the "look and feel" issue and discussed a major difference between print and the Web. On the computer screen, there are no matte or glossy papers, no subtly textured finishes, no chance for the designer to emboss or overprint to achieve a richer look.

But what we lack in ink and paper choices, we make up for with an almost limitless variety of interactive options. On the Web, the images we create can respond to the visitor's virtual touch. This not only adds richness to our design; it helps the visitor comprehend the interface.

In the real world, buzzers buzz and doorknobs turn. Good Web design mimics this kind of feedback, using techniques such as the JavaScript rollover (image swap) to create a sense that the site is responding to the visitor's actions.

Such digital responsiveness is nothing new. It began with the desktop computer revolution and specifically with the Apple Macintosh Graphical User Interface (GUI).

GUI, GUI, Chewy, Chewy

A Web site's GUI includes all its non-text visual elements. The GUI allows users to perform actions by interacting visually with the various graphical elements. Familiar GUI elements from the Macintosh Operating System (pre-OSX, anyway) include file and folder icons, scroll bars, and the Apple Menu. Windows has its own unique GUI with familiar elements such as the Task Bar and Start Menu.

If you were still awake a few paragraphs above when we made the big stink about consistency, hold your nose 'cause here we go again. Logic and consistency are two reasons that Windows, Mac OS, and other UI-based computing systems are more popular than command-line interfaces. GUIs succeed by being clear (users don't wonder what a certain button does) and remaining consistent (if the File menu is on the left, it stays on the left). Because your visitors are using a computer to view your site, they expect such consistency. It is worth studying existing GUIs (such as Mac OS and Windows) to figure out what their conventions are and why they work. If your GUI works in similar ways, you are that much less likely to baffle your audience.

It's the Browser, Stupid

On the Web, the browser predetermines many elements of the GUI. For instance, in nearly all browsers, dragging a mouse cursor over a live link causes the cursor to change from an arrow to an upraised hand. These browser-based conventions help Web users make sense of sites. Folks rely on these elements to understand what is happening without having to learn an entirely new set of conventions each time they load a new URL.

Web designers can change or override these conventions-for instance, by using Cascading Style Sheets (CSS) to place a hand cursor over plain text rather than live links-but it is rarely desirable to do so unless your goal is to confuse your visitors. There are sites, such as www.jodi.org and www.superbad.com, whose purpose is just that. These fall under the heading of fine art, and many Web designers adore them. Even if they're not to your taste, you can learn a great deal about Web users' expectations by studying the way these sites subvert them. On most sites, though, confusing visitors is usually not among the client's objectives.

Though the browser creates many GUI elements (underlined links, changes to the cursor state), the rest is up to the designer. Indeed, in a graphical browser, one could consider commercial sites custom GUIs whose purpose is to enable visitors to perform tasks while subliminally absorbing the client's brand.

[previous]