satisfying customers with color, shape, and type
November, 1999.
By Molly E. Holzschlag. (Link to original article.)
Did you know that a site visitor has formed his or her first impression of your site within the first nine seconds of a visit? So how in the world—taking download time into account—do designers effectively entice and satisfy visitors? The answer is simple: appropriate design.
In basic terms, appropriate design is the act of matching the demographics and content of your Web site to specifically chosen colors, shapes, and type styles. This ensures that the combination of visual elements adds up to a design that's suitable to the content, and fits the audience with no need for additional tailoring.
Whether a site visitor knows it or not, he or she responds to visual cues on a psychological level. Well-educated graphic designers have been taught how to strategically create and place such cues to tease, please, and ultimately satisfy their visitors. And the satisfaction doesn't end with the visitor, of course. A happy site visitor is more likely to engage in the goal of your site—whether it is meant to inform, entertain, or to sell goods or services.
Note that the information in this article assumes that the visitors to your site have normal vision. While this article's focus is visual design, next month I'll be covering accessibility and HTML 4.0 so that you can design sites that not only look great, but can be enjoyed by your low- and no-vision visitors as well.
The most obvious way to work on a visitor's psyche is to use color as a means of conveying messages about the site and its information or products. Shape—an often overlooked design element—is also extremely powerful in what it represents, how it's combined with other elements, and the way it expresses information on a subtle level. Typography has its own unique challenges on the Web, but type is also a major element when communicating on a more cerebral plane with audiences.
This article will look at color, shape, and type from a psychological perspective, and help you apply each with forethought and intention to provide your audiences with the best possible user experience.
Paint it black (or red, or gold, or green... )
Color choice is paramount in eliciting an appropriate visual response from visitors. Color is one of the first things your audience sees, and you can set up your pages so that color appears immediately. This quickly sets the tone for the entire site experience.
To achieve effective color design, begin by selecting colors that express your site's intent. The palette that you develop must match the site's personality and goals. If you're representing a community Web site, for example, you'll typically want to choose warm colors to create a sense of comfort and ease. If your site is meant to be informative, with the words carrying most of the weight, the site colors should be simple and not distracting. Select colors based on the information in Table 1, which can help you understand the general psychological relationship between colors and people.
Not only must your color palette match the site content, but you should choose colors that reflect your audience's values. Some fascinating studies exist about how people around the world respond and react to color. The color orange, for example, represents goods that are inexpensive—except on Halloween and St. Patrick's Day! In the United States, blue is a color that represents trust. However, in Korea, trust is gained visually via pastels—especially pink. An understanding of what colors represent to your demographic will help you design a site that will appeal to your audience.
Let's go ahead and begin a comparative experiment using two fictitious companies. The first, KnobMakers, is a corporate entity interested in providing information about the company to its affiliates around the U.S. The color palette I chose for this site includes blue, deep red, and white—see Figure 1(a). My objective is to represent the company's conservatism and trustworthiness (blue), its power (red), and its precision and order (white). I'm sure no reader in the U.S. will miss the obvious: These colors are reminiscent of the U.S. flag—conveying a patriotic sense and further expressing the conservative personality of the company.
Figure 1. (a) The palette on the left suggests conservatism and trustworthiness, power, precision, and order; (b) while the one on the right expresses warmth, energy, nature, and health.
The second one, To The Max, is a surf company located in California. Appealing to the unconventional, this site is the place to get information and purchase surf gear online. For this site, I chose a palette (Figure 1(b)) that represents warmth and energy (orange), nature and health (bright green), the ocean (blue), and precision (white).
While these certainly weren't the only colors I could have used, they are effective in achieving the goals of expressing the site's intent via color, and expressing a specific array of ideas to the audience visually.
Getting in shape
Shape also offers an opportunity to get a strong response from audiences. This is advantageous to both communicating the site's goals and comforting the visitor. Using effective shapes in a design can result in a wide range of psychological reactions that can motivate consumers, inspire visitors, and provide an enjoyable adventure even if the audience is unaware of why specific feelings arise.
Shapes are a bit more subtle in their influence, but they're well defined in their meanings. Table 2 describes common shapes and what psychological results can generally be expected from them.
Shapes can also be combined for greater impact. Think about using a circle and triangle in combination—the results can convey an energetic, dynamic community. Or, combine a circle and a rectangle for warmth and security.
The impact of shape and shape combinations has been demonstrated in a wide range of applications. The design of automobiles, buildings, product packaging, and company logos all include the use of shape as enticement. In the late 1980s, car manufacturers became aware of the fact that many more women were making decisions about auto purchases. Car designs, as a result, began to include more curves!
The impact of shape is perhaps most obvious when dealing with logo design. One of my favorite examples of the impact of subtle shape combination is that of FedEx's logo. Figure 2 shows FedEx's home page. Look carefully at the logo in the upper left corner. Now, look at the shape formed by the space between the E and the x. It's an arrow pointing to the right. Unless you've had this pointed out to you by someone, it's highly unlikely that you've ever noticed it—but rest assured, this is no accident! Think, now, as to which shapes have combined to make up this arrow. A rectangle and a triangle. Meaning: secure movement. A powerful lesson in design, indeed.
Figure 2. FedEx's logo cleary demonstrates the psychological impact of shape. Notice the negative space between the E and the x is in the shape of an arrow pointing to the right.
Turning to my fictitious designs, it's easy to determine that for the corporate, conservative KnobMakers, the way to go is rectangles, with some use of triangles. My goal is to express solidity, order, logic, and science. However, with the wilder To The Max site, I want to include circles and free-form shapes, expressing connection, warmth, and movement.
Typing it up
Typography is a fine art in and of itself. It's complex, and its complexities in the context of Web design are deepened due to the inherent problems of the medium. Web type can be created as part of a graphic, with conventional HTML, or with style sheets. HTML and style sheets create a hit-or-miss situation in terms of how a page is displayed, because a specified typeface must be available on the visitor's machine. If the typeface is not resident, he or she will see a named alternate or a default face instead.
However, designers can make choices about the type they set on graphics, as well as the general typefaces used for body text. There are so many typefaces it's impossible to say how many actually exist. As a result, it's difficult to ascribe specific psychological influences to individual faces without writing a massive document. However, there are categories of type, and these general categories do have some identifiable attributes (see Table 3).
Typically, designers will use several type styles on a page. Headers and ancillary elements can make use of decorative and script styles, whereas body text should almost always be a serif or sans-serif typeface (sometimes monospace is used with effective results). To use type design for psychological impact, choose a typeface that expresses the same things you're looking to achieve with shape and color. For example, a conservative site will be best served by serif, simple sans-serif, and very clean decorative fonts. A wilder site can be a bit more daring in its use of decorative and monospace fonts.
Figure 3 shows my KnobMakers design, complete with conservative colors, shapes, and typefaces. I've used the Times typeface for the entire page, providing a uniform and straightforward look. Clean, simple, serious.
Figure 3. Mock-up design for KnobMakers. Conservative shapes, colors, and typeface express a serious design.
In Figure 4, you'll find the colorful design for To The Max. This site uses Burweed ICG—a fun, decorative font—for its headers and navigation. I've used Arial for the body text, as I like the rounded letterforms. The results are a fun design that doesn't sacrifice readability by going—if you'll pardon the pun—overboard.
Figure 4. Free-form, energetic, and lively, the shapes, colors, and typefaces in this mockup design express vitality and fun.
The great switcheroo
OK, we're going to have some real fun now! I've switched the design concepts and the companies around. I've given the conservative KnobMakers the color, shape, and typographic elements of To The Max, and vice-versa.
Does it work? Figures 5 and 6 will help you decide just how important color, shape, and type can be in providing your site visitors with the very best in customer service and satisfaction, while increasing their participation at your Web site.
Figure 5. To The Max with a conservative approach. Ho-hum.
Figure 6. KnobMakers in wild style. Can you say "inappropriate"?
