Where Am I? Navigation and Interface
Where Am I? Navigation and Interface
The Rise of the Interface Department
Traditional designers and art directors work in Design Departments and Creative Departments. The existence of these departments indicates the importance traditional media businesses place upon design-and rightly so. In such businesses, designers play an essential role in the formation of concepts and images that convey brand attributes and communicate meaningful intellectual and emotional propositions.
Sadly, many otherwise savvy Web agencies do not have Creative or Design Departments at all. Nor do creative directors or lead designers show up often enough on some of these companies' organizational charts. What they frequently have instead are Interface Departments, implicitly or explicitly staffed by "interface designers." This departmental label trivializes and may even constrict the Web designer's potential usefulness as brand steward, conceptualist, structural architect, and user advocate. When a Web designer is reduced to the handwork of graphic design, somebody else determines the overall focus and architecture of the site. Nevertheless, the rise of the Interface Department is telling because it underlines the supreme importance of interface design to Web development.
Designing interfaces is only part of a Web designer's job in the same way that working with actors is only part of a movie director's job. A director who can't work with actors will make a lousy movie, and a Web designer who can't devise the most communicative interface for each particular site will serve up mediocrity. Web sites provide content; interfaces provide context. Good interfaces support the visitor's (and client's) goals by visually and structurally answering two urgent questions:
- What is this? What kind of site is this? What is its purpose? What messages are being conveyed or services offered? For whom is this site intended? If it's intended for me, does it offer the product or information I've been seeking, or is it all show and no substance?
- Where am I? What kind of space is this? How does it work? Can I find what I need? If so, can I find it quickly? If I take a wrong turn, can I find my way back?
When a Web designer fully understands the nature of the product or service, as in the example of the Narcotics Anonymous prototype above, then content and context, meaning and architecture, are one. Not only does the Narcotics Anonymous prototype quickly reveal the site's purpose by emphasizing appropriate text, it also understands and fulfills its potential viewer's gut-level needs by functioning simply and transparently. A wife who fears her husband is becoming an addict does not have time to waste. If the site confuses her, she's gone.
When a Web designer does not fully understand the nature of the product or service-or understands but is not empowered to act upon that understanding-we get sites that excite and engage no one. Or we get potentially engaging sites that confuse and estrange the very people they worked so hard to attract.
There are too many such sites on the Web. What businesses must understand is that vague, non-engaging interfaces are a death sentence because they alienate potential readers, members, or customers rather than reassuring them that they've come to the right place. Good Web design plunges the visitor into the exact content appropriate for the most efficient (and personal) use of the site and continues to guide him or her through each new interaction.
Movies immediately plunge a protagonist (and the audience) into conflict and action. Entertainment sites can work the same way.
Newspapers carry many stories but call the reader's attention to the most important ones. Content sites can work the same way.
Stores sell many products, but special displays on featured products arrest shoppers' attention as they enter. Commercial sites can work the same way.
Form and Function
Effective interfaces not only lead visitors to the content but also underscore its meaning, just as chapter divisions underscore the meaning of a book's content. Without usable, intuitive interfaces, Web sites might as well offer no content at all-because no visitor will be able to find it.
At their most basic level, Web interfaces include navigational elements such as menu bars, feedback mechanisms such as interactive forms and buttons, and components that guide the visitor's interaction with the site such as magnifying glass icons and left or right arrows. Tired interfaces offer exhausted metaphors such as the ubiquitous folder tab and the heinous beveled push-button. Better interfaces are uniquely branded and help reinforce the site's thematic concerns (see Figure 3.1).
Figure 3.1 The Mary Quant siteÂthe perfect combination of solid design and ease of use (www.maryquant.co.uk).
The Mary Quant site is a study in quick visitor orientation and structurally grounded design. The dominant but fast-loading photograph telegraphs "1960s" and "mini-skirt," which are the essence of fashion designer Mary Quant's legacy. The flower motif reinforces the 1960s theme as well as Quant's identity. A large flower fills in the space behind appropriately minimal text content; this is a fashion site, not a Ph.D. dissertation. Smaller flowers brand the five simple structural divisions: History, Makeup, Press Office, Shops, and Homepage.
The History label is faded to reinforce the visitor's position within the site's hierarchy. The Previous and Next buttons are placed left and right where a western audience would expect them and where even non-English speakers (at least those who read from left to right) will likely understand what these buttons do.
Although this is a fashion site, its structure is nearly identical to that sketched out in our imaginary Narcotics Anonymous prototype. The Previous and Next buttons provide linear navigation. Menu icons let the visitor jump from section to section. Engaging visual and text content match the desires of the intended audience. Sophisticated interfaces work on multiple levels. On a well-made catalog site, not only will visitors find a main navigation bar, they also will be guided by contextual, user-driven navigational elements throughout the page. Both the photograph and the text description of a blue parka can serve as links to more detailed photographs and information or to an order form. The product photo caption may include a link to More Items Like This One, initiating a new and more focused search. Navigation does not live by menu bars alone.
Figure 3.2 Multi-level navigation in action: The Gap site presents visitors with an overall menu bar but does not limit them to it. Clicking the model's photographÂ
Figure 3.3 Â links the visitor to a page displaying the jacket the model is wearing, along with relevant text information and the opportunity to buy the item (www.gap.com).
Created: April 5, 2001
Revised: April 5, 2001