Web Site 101: Put Yourself in the User's Shoes

By Robin Peress

Real estate agents call it curb appeal. Anyone who's bought or sold a house knows curb appeal refers to the small outward details that convey, at a moment's glance, the desirability of a given place: the trimmed lawn, the clean windows, the tidy garage. Curb appeal persuades a prospect to stop for a peek at your property; without it, the same buyer may drive on by.

Now consider a very different "domain" with some not-so-different needs: your Web site. Just as a home's appearance speaks a visual and emotional language to the house-hunter, the look of a Web site — your Internet real estate — speaks volumes about you. (Maybe it's not called a "home" page for nothing.) The all-important first impression counts here, too.

You've posted your top-flight resume, roster of clients and other impressive credentials. Experts say that's not enough: Your information should be presented in an easy-to-read, easy-to-navigate, visually pleasing way, or Internet users will withdraw to find a site that aids their mission. In the words of renowned Web usability "guru" Jakob Nielsen, of Nielsen Norman Group and a Distinguished Engineer at Sun Microsystems until 1998, "If a site doesn't provide immediate gratification, they leave."

So, if your awards and patents are buried in text people must squint to read — or worse, can't understand — it's tantamount to strewing old rubber tires on the lawn of a gilded mansion.

That's not fair, you say. My work speaks for itself; I'm an engineer, not an "artiste."

Rather than knowing art, the key is to follow some rules of visual grammar and logic that apply whether you're an engineer or a dancer. No need to buy a book for dummies or hire a Web designer to festoon your site with Flash and applets. You already have the tools. But do you know how important they are?

Facing Up to the Interface

Usability is the Holy Grail for software engineers, graphic artists, psychologists, marketing pros and others who've worked to refine the recipe for optimal Web page design. Usability, the human-computer interface (HCI) and user-centered design are almost identical ideas, usually spoken of in the same breath.

Usability is a broad term that takes in technical performance, accessibility and design, among other traits. But its connotation goes further: Usability aims to make a computer and a person work together swiftly and seamlessly. It revolves around the person.

Usability, or the absence of it, greatly influences human behavior. The slightest difficulty or delay in extracting information can make people bolt. Take file formats. According to webcontent.gov, usability studies show that visitors can become frustrated when downloading additional software or plug-ins to access information, even if the software is free, because it's time-consuming.

Through more than a decade of studying such human behavior, a set of Web "heuristics" has emerged that are widely accepted and strongly encouraged.
Heuristics, from the Greek word heuriskein, "to discover," refers to the process of gaining knowledge through trial-and-error methods. In cyberland, heuristics (and similar terms like Web metrics) are the educated assumptions by which usability can be measured and promoted. "Anticipate the user's needs" is one such directive. An example of this heuristic might be to provide definitions of unusual technical words for newcomers to your Web site. Sometimes the phrase "best practices" also refers to heuristics.

An underpinning of best practices in Web design is the need to write and display your content to meet your user's expectations. Web users hunger for organization, clarity, unity, simple color composition, reliability, predictability and dozens of other factors. The better these needs are met, the better experience the user has. The better the experience, the longer the user will hang around to learn what you're about.

Some barriers to effective communication are obvious, like too-tiny print or a difficult-to-read font. Other obstacles are subtle or unseen, such as vague section headings or dead links. Jarring colors and helter-skelter text placement are known bugaboos, as are convoluted technical language and inconsistently placed task icons. Sites that ignore human-computer interface principles, especially those concerning appearance, risk alienating a significant percentage of their desired audience.

Good Looks = More Looking

In 2002, Consumer Reports WebWatch, an Internet research arm of Consumer Reports, conducted a study to determine how people judge the credibility of a Web site. The study involved some 2,600 users who each evaluated 100 sites representing various sectors including e-commerce, health, news, finance, travel and sports.

Of 18 criteria applied by the users — among them the perception of customer service, site functionality, name recognition, company motive and information focus — nearly half (46.1 percent) of the users rated "Design Look" as the key determinant of a site's credibility. In other words, the better the site looked, the more credible it seemed. The elements of Design Look included layout, typography, white space and color schemes. The next most important criterion, at 28.5 percent, was information structure.

CR WebWatch noted the way participants "relied heavily on the surface qualities of a Web site to make credibility judgments" and said that the data suggest "quality information alone is not enough…" If a site fails on the Design Look criterion, "…Web users are likely to abandon the site and seek other sources of information and services." This conclusion is echoed in usability research by other organizations including JupiterResearch and Forrester Research, most of it proprietary.

However, there's an abundance of excellent, practical guidance on the Internet: IBM's Ease of Use web pages and Sun Microsystems' Writing for the Web can help anyone harness the human-computer interface.

Two more authoritative tutorials are Usability.gov's Research-Based Web Design & Usability Guidelines and Webcontent.gov's Best Practices, both of which devote several subsections to choosing simple but compelling language, layout, graphics and typography.

You're bound to extract usable ideas from Jakob Nielsen's own site, www.useit.com, particularly his long-running Alertbox columns dating back to 1995 with such titles as Top 10 Guidelines for Homepage Usability, Let Users Control Font Size, and Do Interface Standards Stifle Design Creativity? One look at Nielsen's site tells you where he stands on Web site design. Crisp twelve-point Verdana sans-serif body copy, large and bold headlines, judicious use of color, the absence of slow-loading graphics…Nielsen eschews conventional prettiness for simplicity and clarity because he is user-directed, not self-directed.

Being on the User's Page

The following building blocks of usability are drawn from several online sources of Web wisdom. Together they add up to an oft-cited ideal: The best design is the one that doesn't get noticed.

• Write in plain language. Engineers may be tempted to weave a spell with technical, jargon-heavy talk about their work and accomplishments. Experts say to write for your least experienced audience. Be clear. Be succinct.

• Use a strong sans-serif typeface (not one with "thin" stylized lettering) in a size that's easy on the eyes — 12 to 14 points is ideal.

• Eliminate "clutter" and claustrophobia. White space — the areas without any text or graphics — gives the visitor a sense of breathing room and a place to "rest" ones eyes. Break up long paragraphs into shorter ones. Eliminate animation.

• Be consistent. Place menus, tasks and graphical elements in the same place from one page to another.

• Use "breadcrumbs" to help visitors navigate. Talking Heads has a song that goes, "You may ask yourself, how did I get here?" That's how a user feels when there are no so-called breadcrumbs providing a trail backward from their starting point in a Web site. These hierarchical locaters — e.g., Home → About Us → Jobs → NY Jobs — are usually in the upper left corner and are essential to a helpful site.

• Minimize the number of clicks required for moving around your Web site. Users' patience will wear thin if you pose too many steps that slow down their search.

• Use real-world symbols to represent tasks. Shopping carts, trashcans – everyone knows what they're for. Take the cue of e-commerce sites and use meaningful, recognizable icons to prompt action.

• Put yourself in good company. The engineering profession may stress innovation, but in Web site design, emulating the winners is a good thing. About.com's Top 25 sites run the gamut from E-Bay to the FBI. Howstuffworks.com, a hybrid site of information and consumer products, is a model of user-centered design, as is LandsEnd.com.

Robin Peress is a freelance writer in Hastings-on-Hudson, N.Y. Comments may be submitted to todaysengineer@ieee.org.