The E-Business Software Weekly is a series profiling trends and developments in software and applications that support e-business, the Internet, and other electronic communication channels. Look for a new story each week in this space.
Creating a Customer-Friendly Web Environment: Part I
At Circle.com, the Web has come full circle. One look at the company's Web site tells you that it's a little different than your average Yahoo-cloned Web site. Actually, a lot different. There's life in the site's visual imagery. Power. Focus. The messages are simple and clear. You know in an instant what the company does: they design great Web sites. In fact, you don't even need to read the words to understand--the site's visual language tells you what you need to know. Unlike so many Web sites, whose design is no more inspirational than the local phone book, the Circle.com site (and many of its clients' sites) recalls the artful layout, typography, and imagery of an exceptionally well-designed print magazine.
That shouldn't be a surprise. During the 1970s and 1980s, Roger Black, the chief creative officer for Circle.com, was one of the most influential American print media designers. As art director for The New York Times and Rolling Stone (which received the National Magazine Award for Design under his direction), Black developed what one colleague has termed "an immediately identifiable style: sparse, clean layouts, a strong use of classic [type], a style that made editorial its priority." In addition to the aforementioned publications, Black went on to redesign Newsweek, Esquire, Foreign Affairs, and Ad Age. Later, in the mid-1990s, he and two fellow designers founded the San Francisco-based Interactive Bureau (acquired in 1999 by Circle.com), one of the most successful of the early Web design firms, whose pathbreaking work included such high-profile, information-rich sites as USA Today, Discovery Online, and MSNBC (currently, the Web's leading general news source).
Black admits that he and his colleagues are still searching for the right visual metaphors for the Web. "The fact is, we're not there yet," he writes in "Web Sites That Work," his 1997 Web design manifesto whose words still ring true four years later. "We don't really know what the Internet is. It's too big..." But he's not worried: the Internet, after all, is still in its infancy. "There's plenty of time," he says, "to get it right."
Getting It Right
"Getting it right" is a goal of no small importance to companies using the Internet to conduct some or all of their business operations. As discussed in this space a few weeks ago, there remains a significant "customer experience gap" on the Web. Recall the observation of Mark Hurst, president of the New York based e-business consultancy Creative Good. "The unfortunate reality," he says, "is that companies are losing unbelievable amounts of money online. Customers who can't buy, won't buy. Companies spend millions of dollars driving visitors to their sites, but once there, visitors find the sites too hard to use."
In that column, we offered some preliminary thoughts about what it takes to create a great customer experience online--specifically, the ingredients required for building an ideal Web environment in which people would enjoy themselves and spend a great deal of time (and money). In this and the succeeding two columns, we will go beyond these theoretical issues in order to focus on some very practical applications, answering the question: "Once we agree that designing customer-friendly Web sites is an important thing to do, exactly how does a company go about doing it?" The current column accepts this challenge, addressing the pivotal matter of Web site design; the following two take up the equally weighty issues of site navigation and content.
The subject of design comes first among this triad for a very important reason. "Web sites," explains Roger Black, "are even more dependent on good design than print is. After all, even a magazine with minimum design gets its information across." But Web sites are visual: one screen at a time. "It is not enough to get people through the front door, to your home page. You have to bring them inside and, once they are in, try not to confuse or frustrate them... Otherwise," he says, "they don't come back..."
Ten Rules of Good Design
The Web may be a relatively new, still poorly understood communication medium, but that novelty doesn't mean that everything about the Web must be new and innovative as well. Indeed, we have already noted in a previous column that would-be Internet entrepreneurs, felled by the Internet shakeout of the last year, have painfully learned the hard lesson that the Web hadn't rewritten the laws of economics. Well, the surviving companies may soon discover (if they haven't already) that it hasn't rewritten the laws of good design either.
On the contrary, Circle.com's Black contends that "the principles that have informed quality print design for hundreds of years are equally valid online--in some cases, even more so." To make these principles concrete, he sets out 10 key rules of good Web design, an inspired (and all-too-frequently violated) Web design playbook from which the following list is adapted.
1. Put content on every page. Design, Black notes, shouldn't be mere decoration. Instead, "it must convey information." The proliferation of "splash pages," "landing pages," and similar time-wasting visual preliminaries that have become so commonplace on the modern-day Web are no more welcome to most Internet users than an obstacle course would be to patrons of a hospital emergency room. The fact is, whether in magazines or on the Web, argues Black, "people skim and surf. If you don't give them something quickly, they absorb nothing. So you have to make sure there's content on every page."
And one more thing: makes it easy to read. Most sites, says Black, try to crowd too much content onto a single page. Much better, he urges, to break information into smaller pieces. "This is not to suggest you always throw out text; just make it as accessible as possible." Achieving this objective is one of the most difficult and yet most important challenges of good Web design. On most sophisticated Web sites, there is more content available for display than there is room to display it. But as important as the site owner thinks this content is, site visitors will typically focus on one or two things and then move on--and so these one or two things had better be the right things. "At some point," says Black, "you have to make strong editorial choices..."
2, 3, and 4. The first color is white. The second color is black. The third color is red. Perhaps Black's most surprising--and controversial--recommendations are these. Certainly, not all (or even most) of the best Web sites employ only these three colors. Amazon, for instance, uses blue and gold as its main accent colors. EBay's color palette includes shades of blue, red, green, and yellow. And IBM has long been known as "Big Blue" primarily because of the color of its logo--a color choice that also dominates its Web site.
But for a great many other leading publications and Web sites, including CNN, Time, Newsweek, and BusinessWeek, the white, black, and red combination is central to their design. Such a selection of colors is hardly arbitrary, but is actually informed by both physics and psychology. White light (and hence white on a computer monitor) is a combination of all other colors, and hence, as the brightest color, it makes the best background. Black, as the absence of all color, provides the strongest contrast to white, and so black type on a white background is the easiest to read. And, unlike blue, green, and yellow, which tend to wash out against either or both of black and white, red stands out sharply against both. Moreover, psychological research suggests that humans may be hard-wired to react more strongly to red than to any other color (perhaps because bleeding is a sign of imminent mortal danger). In fact, surveys have shown that magazines with red headlines often outsell publications with headlines of other colors by a factor of two to one.
5 and 6. Avoid trendy typography. Don't use all caps in body text. Print publications and even some Web sites are awash in trendy typography. While such type can often be effective in limited circumstances (such as headlines), it is typically harder to read than classic body typefaces. The basic rule is: if you want to win design competitions, use lots of fancy type; if you want to communicate information to your readers, use clear, classic typography.
In a similar vein--again with the exception of headlines or very brief text blocks--the use of all caps should be avoided. Humans employ a variety of visual cues to quickly glean the meaning of a printed (or Web) page. Because of their familiar and distinctive shapes, upper- and lowercase letters, used together, offer readers a rich array of immediate visual hints as to the words on the page, actually conveying information before the words are linguistically processed by the brain. Because capital letters are generally all the same height and roughly the same shape, these additional visual clues are lost with all-cap text, making such text more difficult to read.
7. Create a visual focus for the reader. One of the most significant problems with even some of the most sophisticated Web sites is that the site visitor doesn't know where to look first. This is potentially a more serious problem than many site owners would choose to admit. For unlike visitors to physical stores and places, where would-be customers have usually invested an appreciable amount of time just to get there, Web site visitors have arrived in mere seconds and, if they become lost, they can go somewhere else just as quickly.
An easy way to create this kind of orienting focus is by using a single, large image. As Black notes, a single image of a human being--preferably an attractive and popular one--"will sell more magazines than multiple images or all type. The same with books, ads, and [Web site] home pages..." Of course, large images can create unacceptable delays for Web site users on dial-up modems who are as turned off by long download times as they are by a lack of focus, and so similar strategies, like the use of graphically arranged typography, may need to be employed. In any event, while speed is important and while competing priorities must be appropriately balanced, good design should not be excessively sacrificed to a single-minded desire to achieve ever-faster download times at the expense of all else, lest the user experience be degraded, perhaps fatally so.
8. Make everything as big as possible. What the "Godzilla" movie poster declared applies equally well to visual communication: "Size does matter." As Roger Black puts it, "Type looks great in big point sizes" and even "a bad picture always looks better bigger." Compare, for instance, the impact of the Circle.com Web site with that of Scient, another Web developer. The former site uses one large, focal image, creating significant power and impact, while the latter (at least as of this writing) uses a multiplicity of very small images, to notably less power and effect. And yet, ironically, despite its large images, the Circle.com site actually seems to load more quickly than Scient's across a dial-up modem.
9. Use only one or two typefaces. This is perhaps one of the most well-known rules of good design, one made especially necessary by the growing abundance of inexpensive digital type, an embarrassment of riches that apparently led some designers to believe that the strength of their design was measured by number of typefaces they used. But like photographic images, well-designed type creates a subconscious, visceral reaction--and hence an emotional context--for a particular communication. And just as a large quantity of similar size images or text blocs makes it difficult for a reader to focus on what is most important on a page, the use of a multiplicity of typefaces within a single site or article makes it hard for the reader to focus on a particular mood or mindset--leeching the communication of any emotional impact it otherwise might have had.
10. Get lumpy. "The trouble with most design," says Black, "is that it contains no surprise. Page after page of HTML type may be okay if you're running a scientific research site, but if you really want normal people to pay attention, you have to change pace." He notes that, even in some popular print publications, particularly newspapers, "what we too often get is a monotonous rhythm of picture, headline, picture, text, ad, headline, picture, text, ad, and so forth. A pudding without raisins. A stew without lumps." Web sites are even worse offenders. "Why do 95% of Web sites have a graphic home page followed by legions of pages that look like mimeograph newsletters with snapshots stapled to them?" he asks. While consistency is vital to orienting the reader and to building familiarity and context, that consistency needs to be accented by at least some visual variety if effective communication is to be achieved.
What Not To Do
The Hippocratic Oath--the moral underpinning of modern medicine--states the physician's mandate: "First, do no wrong." Perhaps a similar rule should be applied to Web sites: "First, design no wrong." Unfortunately, many Web sites (including a distressingly large proportion of e-commerce sites) expend so much effort implementing poor design principles that their developers have little energy left to focus on doing what is right. To that end, Black offers a companion set of 10 verboten design practices that can seriously impair a site's ability to communicate with its visitors:
1. Don't blindly repurpose. Effective brand extension requires transporting print and other media to the Web, but content should be customized--redesigned and, often, rewritten--rather than blindly copied onto a Web site.
2. Don't confuse the reader. One of the most important yet most overlooked rules of good design is maintaining consistency of color and style throughout the site. "Sadly," says Roger Black, "even in the most expensively designed pages, this is not always done. One is constantly tripping over new colors and new button styles. Sometimes you can't tell if you're still in the same site."
3. Don't confuse the reader, part 2. As noted earlier, if someone gets lost in a Web site, they quite likely will never come back. To help keep them from getting lost, Black advises to make sure buttons and navigational directions are simple, clear, and parallel. For instance, "if buttons represent departments, don't add non-departmental things to the button bar."
4. Don't make oversize pages. Laptop monitors--perhaps the most common Web-viewing platform among tech-savvy business executives--are typically sized at 800-by-600 pixels. And most consumers don't use larger than a 15" monitor with a similar screen size. If a Web site's pages are larger than this, readers won't be able to view the entire page, both confusing them and diminishing the quality of the user experience.
5. Don't design pages that require scrolling. Emphasizes Black: "Just as 75% of people will only read the top half of a folded newspaper, most [Web users] will never scroll." Another advantage of non-scrolling pages is that "shorter pages also break up the content in easy bite-size pieces, which is much more appealing" to most readers.
6. Don't use big slow graphics. To quote Excite@Home's Richard Gringas, "the only acceptable delay is no delay." At a minimum, Web pages should load within a few seconds. Large, non-optimized graphics--especially if they don't deliver any information--usually aren't worth the wait, and will wind up driving site visitors away.
7. Don't use a lot of colors. Not only do sites with two or three colors run faster and look cleaner, but also they make it easier to establish a recognizable brand identity on the Web, where sites often have only a few seconds to make an impression.
8. Don't use blurry drop shadows. They look great in print, but terrible on a low-resolution monitor. And when applied to type, they can make the text almost impossible to read.
9. Don't use a lot of text. Says Black, "Nobody reads anything anymore." While not strictly true, most Web users are too busy to spend a lot of time reading in order to get to the point. And they won't remember most of what they read anyway. Better to put everything that's important right up front--and omit the rest.
10. Don't use tiny type. As hard as it is to read in a magazine or newspaper, small type is almost impossible to read on a computer monitor. As Black emphasizes, "if you really want somebody to notice something, make it easy to read."
No Small Accomplishment
Good design, as important as it is, won't bring traffic to a Web site that no one knows about nor will it save a poorly thought-out business model from almost certain extinction. What it will do, however, is ensure that site visitors know what they should do when they get there, have an enjoyable experience while they are there, and be motivated to return to the site on a regular basis. And that, in view of the less-than-desirable user experience that so many Web sites offer, is no small accomplishment.
ADVERTISING FEATURE
