Taking Your Talent to the Web

65

TOUCH FACTOR

When designing a book, your choice of materials and textures is limited only by the client’s budget. When designing a website, you have no textures whatsoever. There is no “touch factor” in work designed for the digital screen. But this lack of sensory input does not mean that the site must be a cold, detached, clinical object. There are many tools to help you bring humanity and warmth to the Web.

Appropriate Graphic Design

Interactivity can go a long way toward simulating the effect of the “touch.”

For instance, when you move your mouse over or press the buttons at www.k10k.net, they seem to respond to your touch—like buttons in the real world. Intuitive, user-centered navigation helps as well. If the architecture is designed the way users think, navigating the site will be simple pleasure. There will be more on all that in Chapter 3. Smart, appropriate copywriting, which reads the way people talk, also can go a long way toward bringing warmth and humanity to the onscreen experience.

These approaches enable anyone to create a site that feels like a living entity. Failure to use these tools results in a site that feels cold and dead— high tech, but not high touch.

ACCESSIBILITY, THE HIDDEN SHAME

OF THE WEB

The framers of the Web intended it to be a medium of universal access—a medium whose wealth of information would be accessible to anyone, regardless of physical, mental, or technological disability. Anything that stands in the way of that accessibility is contrary to the purpose of the Web. It is also inhumane, and, as we alluded to earlier, it is now against the law:

66 WHY: Designing for the Medium: Accessibility, the Hidden Shame of the Web

Section 508 of the Workforce Investment Act (www.usdoj.gov/crt/ 508/508law.html) requires all United States Federal Agencies with websites to make them accessible to individuals with disabilities. Inaccessible sites can be shut down by the government. In the private sector, inaccessible sites face lawsuits. In 1999, a group of blind citizens successfully sued America Online because its service was not accessible to them.

How do you design for the blind? It sounds like a paradox, but on the Web it is actually fairly easy.

The Web Content Accessibility Guidelines of the W3C (www.w3.org/TR/ WAI-WEBCONTENT/) spell out everything designers must do to make their sites accessible to all.

Here are some of the things you can do to make your site accessible:

■Your <IMAGE> tags should include <ALT> text for the benefit of the visually impaired; adding <TITLE> attributes is a good idea as well. <ALT> and <TITLE> attributes can be spoken by audio browsers used by the blind, so they don’t have to miss out on any content. For example, your web page on the wreck of the Titanic includes a photograph of that ill-fated ship. A bad <ALT> attribute reads “Image, 24K.” Well, what good is that to the disabled user? So your site has an image, so what? A good <ALT> tag will read “S.S. Titanic.” The <TITLE> attribute can provide additional description: “Photograph of the Titanic on her maiden voyage.”

■If you use frames, include <NOFRAMES> content in the frameset document. <NOFRAMES> text shows up in browsers that cannot view frames. Old browsers fall into this category, but so do text browsers such as Lynx and special browsers for the blind. By copying your text and pasting it into the <NOFRAMES> area, you guarantee that anyone can access the information on your site, even if he or she cannot view your spectacular visual design efforts.

■Even if most users will be navigating via snazzy visual menu bars at the top of your site, be sure to include simple HTML links somewhere on the page so that the disabled—or folks with older, non-JavaScript- capable browsers—can still find their way around the site.

Taking Your Talent to the Web

67

For more on accessibility and the law, see Alan Herrell’s article in A List Apart, “Accessibility: The Clock is Ticking” (www.alistapart.com/stories/ access/).

USER KNOWLEDGE

A website must be designed so novice users can find their way through it without trouble. At the same time, a good site offers shortcuts and power tools for more experienced users. How do you serve these two very different audiences at the same time? We’ll discuss that in the very next chapter.

chapter 3

Where Am I? Navigation

& Interface

“I LEFT MY BABY DAUGHTER in the car while I went to buy dope. Then I drove away. I’d gone about five blocks when I realized my daughter wasn’t in the car any more.”

So begins a brief personal narrative that fills most of the screen of a web page. At the conclusion of this woeful tale, we see a link or button labeled More Stories. We are likely to click it.

Before doing so, we notice that a small Narcotics Anonymous logo appears in the upper left area of the screen and that four menu items appear in a column on the right. The Face of Addiction, reads one. There Is a Solution, reads another. Meetings, says a third, and Membership, reads the fourth.

Meetings takes us to a map of the United States. Clicking any city takes us to a schedule of Narcotics Anonymous meetings in that city. The Narcotics Anonymous logo, consistently placed at the upper left of every screen on the site, takes us back to the first page, with its riveting personal narrative and easily understood menu structure. Perhaps when we return to the home page we are served a different personal story. This story may be a bit longer than the first we encountered. After all, our attention is now engaged because we have committed at least a few minutes of our time to the site. At this point we are ready to involve ourselves with a slightly more elaborate narrative.