The Elements of Visual Interface Design
Interaction designers mostly create interfaces that are visual or at least have some visual component. Visual interface
, labels, the position of items on a screen, the position of the screen on the device, and a host of other interaction design elements.
Unlike the visual and industrial designers they often work
, interaction designers are typically less
about branding and pure
elements than they are about the controls and responses of the producthow the interface affects the interaction designand those are the elements of visual interface design that we'll focus on here.
Visual interfaces consist,
, of only a handful of elements. The way those elements work together is what defines the visual interface.
of all screen (and print, of course) visual design is
: where and how the features, controls, and content are placed. Layout provides the structure that these elements reside within. Layout provides hierarchy, letting users know what is important and what is less soa control that is visible at all times is perceived as more important than one that is buried in a drop-down menu. Layout is particularly important for small screens, since screen real estate is at a premium.
Designers can seldom go wrong starting with a grid system (
). A grid system helps designers organize information into a
pattern. Designers start by dividing the screen into basic, rational
, which are the blank spaces that separate rows and
. Designers can let elements such as images,
, and working spaces cross over gutters when necessary, creating larger blocks of combined rows and/or columns. The grid lines are only suggestions, not rigid areas. Grid systems aren't just designs on graph paper; done well, they help structure screens so that there is a clear visual hierarchy and flow through the elements on the screen.
Figure 6.1. Grid systems help designers organize information into a coherent pattern. Note the
: the blank spaces that separate rows and columns.
Several grid systems have become standards in interface design.
shows a typical layout seen in applications such as Microsoft's PowerPoint and Apple's iTunes: a thin, left panel and a large central window, along with top and bottom rows.
Figure 6.2. A grid system seen in such applications such as PowerPoint and iTunes. Top and left panels are used for controls or navigation, while a large central panel is the work area.
shows another familiar grid, used frequently in e-mail
and RSS readers: a thin, left panel with two panels on top of each other on the right.
Figure 6.3. A grid system used in e-mail and RSS clients. The large right panels are used for displaying multiple items such as a list of e-mail in the top pane, and a more detailed view such as a single e-mail in the bottom pane.
shows a common three-column Web site grid.
Figure 6.4. A grid system frequently used by Web sites. Navigation features or a banner is in the top row, while content, advertising, and other navigation features are in the bottom columns.
Even applications that seem freeform like Internet Explorer and the simple screens of mobile phones can be designed using a very simple grid system (
) that contains only a thin row at the top for a menu bar or tools such as a battery-life indicator, and a larger display or working space below.
Figure 6.5. A simple grid system used as the main screen in many applications. The top panel is for
and/or icons, and the bottom area is a working space.
One thing that grid systems do well is help designers plan
in the visual design. Whitespace is an area of blank screen that separates one filled area from another. A common mistake of interaction designers is to cram as many features onto a screen as possible, creating a very cluttered screen. Clutter creates visual noise and makes an application hard to use. The eye
from one thing to another, without seeing a clear flow and distinct
of the screen. Whitespace between features will create a cleaner, clearer design.
Another reason not to cram too much onto a screen is that when objects are close together, Gestalt psychology
us, the mind will assume that they are
. This is a good thing when designers want objects to seem relatedfor instance, a Submit button
to a text boxbut not so good when the pieces of functionality drifting into each other are unrelated.
Visual flow can be achieved in a number of ways, including by the use of the aforementioned whitespace. In the Western world, the eye
from left to right, top to bottom, and designers should be aware of this flow and design for it. Don't force users' eyes to jump all over the screen.
Designers need to provide cues regarding where the
(discussed later in the chapter) can be used to
the eye, as can contrasting fonts (larger, bold, and so on). Lines and boxes can
objects together, but these should be used sparingly, lest the users focus on the lines and boxes and not the featurestry to use whitespace instead.
Positioning and alignment of objects are also important. Objects that are aligned (
) will appear to be related, and objects should
be aligned horizontally and vertically to create a clean look. Objects that are indented
other objects (
) will appear to be subordinate to those above them, and objects near the top of the screen will generally seem more important than those farther down.
Figure 6.6. Objects that are aligned appear to be related.
Figure 6.7. Objects indented beneath other objects will appear subordinate.
Designers should always perform the squint test on their visual interfaces. By squinting at the screen, designers can manually smudge the details and see which items on the screen have prominence. This test can often lead to surprise,
that secondary or unimportant items seem overly important in the design. The squint test helps ensure that the layout is strong.
Typography is an important choice in any visual interface, providing not only a platform for usable, readable, and clear labels and text, but also personality.
Typefaces, commonly called fonts, are generally categorized into two groups:
. Serif typefaces, such as Times and Garamond, have detailsserifson the end of the strokes that make up their letterforms (
). Serif typefaces are easy to read and are
for long passages of text, as in books. Sans serif typefaces, such as Helvetica and Arial, have no or less prominent details at the ends of the strokes that make up their letterforms. They are traditionally used for shorter passages of text and for text that is
to be scanned quickly, such as signage. Thus, sans serif typefaces have become the default choice for interaction designers in screen or physical designs. They are excellent for button labels, instructional text, and menus. Some typefaces, such as Verdana and Georgia, have been
designed for the screen. If you need each letter to be the same width, look for monospace or fixed-width typefaces such as Courier. For most projects, however, a typeface of medium width is best.
Figure 6.8. A collection of standard and classic typefaces.
There are a lot of typefaces out there. Avoid typefaces that appear very heavy or very light. For optimum legibility, designers can seldom go wrong choosing classic, time-
typefaces such as Meta, Univers, and Frutiger. Avoid using lots of typefaces at once, and avoid combining typefaces that are too similarthe result will look like a mistake.
In general, designers should avoid using too many different type sizes and weights (book, semibold, bold, italic, black) at the same time. It's best to start with book weight and a standard point
and sparingly use other sizes and weights for things like labels and headers.
Setting text in all capital letters severely retards readability. Use uppercase and lowercase
for optimum readability, except for single words or phrases, and never combine small caps and regular caps.
Always maintain the integrity of the typeface. Avoid stretching or distorting typefaces or
text on a curve.
Here are some other general typographic guidelines:
Type sizes for screens are generally 9 to 12 points, unless the screen is on a mobile device, in which case sizes of 6 to 10 points are typical. Anything below 6 points is extremely difficult to read. Type sizes on physical devices (for example, on the keys of a keyboard) depend on the size of the device, but text of 6 to 9 points is
Flush left and ragged right alignment is more legible than flush right or justified. Justify only text that has a long line length, and use flush right sparingly and never for long passages of text.
when the white spaces between words seemingly line up and form a "
." Avoid these.
Widows and orphans.
Avoid widows (a word left on a line by itself) and orphans (a single word at the beginning of a column or page).
Apply the Goldilocks Principle to the line length for blocks of text: not too long, not too short, but just right. Forty characters (about an alphabet and a half's worth of letters, spaces, and punctuation) should be about the minimum for a block of text. In general, strive for line lengths of 55 to 75
Leading, the vertical space between lines, should be 20 percent more than the font size, typically +2 points. For example, a 10-point font should have 12-point leading, and an 11-point font should have 13-point leading. One exception to this rule is very small type (below 8 points), which needs more leading to make it more legible.
refers to how dense type appears; the less optical gray text is, the more readable it is. More leading makes text less optical gray. Also, the longer the line length, the more leading is required, so add leading of 3 or 4 points to long lines. The same also holds true for short line lengths, where adding leading of 2.5, 3, or 4 points is a good idea. (Never add more than 4 points, though.)
Kerning is the horizontal space between letters. Ideally, the spaces between the letters of a word will
to be (though not
) even. Unless you are working in a point size larger than 18, you likely won't have to do much kerning, except possibly to tighten up a word to fit in a space. Kerning over a number of letters or words is called
. Try not to add spaces between lowercase letters. The person who would do so is the type of person who would also, in the famous words of typographer Frederic Goudy, "steal sheep."
Color has a number of functions in visual interface design. While color can be used to create personality and tone, interaction designers are most interested in how color can provide cues for use. Red buttons, for instance, as on a mobile phone, can signal stop or end, while green ones can signal go or send. Color also can establish relationships between disparate objects; for example, buttons at a Web site, no matter where they are placed, could all be one color. Color can
importance: a highly
blue box will attract the eye more quickly than a pale yellow one.
However, color can be greatly misused. Most of us have seen applications or Web sites that either are flat and dull from lack of color or look like a circus from too many colors or colors that are too saturated. Designers should also remember that about 10 percent of the male population have some
of color blindness, which
greens and reds as shades of gray.
All colors have three main properties: hue, value (or brightness), and intensity (or saturation). Hue refers to the color itself, or, technically, the particular color within the optical (visible) spectrum of light. Value refers to the amount of black in a colorhow dark or light it is. Intensity refers to the brightness or dullness the of color is.
Designers should become familiar with the color wheel (Figure 6.9), which is helpful not only for choosing a color scheme, but also for avoiding color-related problems. There are three
: red, blue, and yellow. Mixing two primary colors together creates the
: purple, green, and orange.
are those that are adjacent to each other on the color wheel. Analogous colors are excellent for creating color schemestry using three or four of them together, such as red, orange, and yellow, or blue, green, and yellow.
are those that are across the color wheel from each otherfor example, red and green. Although they have been used by
for centuries, care should be taken when using complementary colors together. Although they will make each other
, used together they can also be difficult to focus on.
Figure 6.9. The color wheel. Knowing its basic principles will help designers avoid clashing colors.
The painter Josef Albers noted that a color doesn't exist until it meets another color. Designers should look at the edges of colors and see how they work together. White backgrounds tend to
, and can even deaden, colors. Black backgrounds tend to lighten colors. Try backgrounds that aren't pure white or black, such as light gray. Very pale yellow backgrounds with black type are good for older eyes.
Care should be taken to avoid an effect called
, which occurs when two colors side by side seem to cause both colors to vibrate. Red and blue togetherfor instance, blue text on a red background (
)will often create this effect,
' eyes. In general, colored text on a colored background is difficult to execute well.
Figure 6.10. Blue text on a red background creates chromostereopsis. Avoid this.
When working in color, ensure that sufficient contrast exists between the foreground color and its background. Vary the saturation and brightness to make foreground items stand out. But when initially picking a suite of colors, try to keep them all at around the same value. Colors with equal values and saturation will create a coherent, even appearance.
Since the human eye is very attuned to color and the human brain responds to color both consciously and unconsciously, color is one of the most powerful tools in visual interface design.
Material and Shape
Visual interface design isn't only about screens. What
those screensif there even is a screenmatters greatly as well. As noted in Chapter 3, the physical form of a device tells a lot about how and where the device is meant to be used. That physical form is made of some sort of material, often metal and plastic, but also wood, clay, ceramic, cloth, rubber, glass, leather, or some combination.
Each of these materials has its own characteristics, feeling different in the hand and with a different visual impact. And these basic materials
can have drastically different looks and feelsmetal may be industrial iron or high-end brushed nickel; plastic may be a thick slab or a brittle strip. Materials also determine weight, which is an important factor
in mobile or portable devices.
Imitating another material (typically with plastic materials) can cause a device to be
and treated differently. Clear plastic, although it can be firm and solid, is often treated like glass, for instance. You don't see many clear mobile phones, although they could be made.
of Luke Wroblewski
Luke Wroblewski is an interface designer, strategist, and author of the book Site
-Seeing: A Visual Approach to Web Usability
as well as
articles on software interface design. He sits on the board of directors of the Interaction Design Association and is a frequent presenter on topics related to interface design.
In most applications, audio cues need to be used sparingly and instructional text is rarely read. As a result, the visual design bears the responsibility of communicating the possibilities, limitations, and state of interactions. It tells users what they are seeing, how it works, and why they should care.
When visual elements are applied without an understanding of the underlying interactions they are meant to support, however, the wrong message may be sent to users. Visual styling that obscures or clouds crucial interaction options, barriers, or status messages can have a significantly negative impact on user experience.
Think of visual design as the "voice" of interaction design and information architecture. It communicates the importance of (and relationships between) the content and actions within an application.
Visual design can be thought of as two interwoven parts: visual organization and personality. Visual organization utilizes the principles of perception (how we make sense of what we see) to construct a visual narrative. Through applications of contrast, visual designers can communicate the steps required to complete a task, the relationships between information, or the hierarchy between interface elements. So clearly visual organization is a key component for successful interface designs.
Unfortunately, the bulk of discussions about the effectiveness of visual design don't focus on visual organization systems. Instead, they are limited to a
analysis of the personality (look and feel) of an interface. Personality is achieved through a judicious selection of colors, fonts, patterns, images, and visual elements designed to communicate a particular message to an audience. But just about everyone has a color or font preference, so when asked to evaluate visual design, that's where they
My advice to interaction designers is to take the time to learn the principles underlying visual organization. You'll be better able to communicate with the visual designers on your team and, more importantly, with the end users of your product.
The most common interface design mistakes I see are overstatements of visual contrast. For example, designers will want to make sure everything on a screen can be found and therefore apply an equal amount of visual weight to each element to ensure it's "discoverable." The problem is when every element on a screen is shouting to get noticed, no one gets
. As a user, you can recognize these types of designs because your eyes bounce from one element to the next. There is no hierarchy and as a result no flow through the content and actions on the screen.
Similarly, many designers will overemphasize the differences between individual interface elements through multiple visual relationships: different font, size, color, and alignment. You don't need excess visual contrast to distinguish objects or make things findable. Think about ways to "eliminate the unnecessary so that the necessary may speak."
Whether you've thought about it or not, people will ascribe a personality to your product based on the way it looks and acts. Therefore, it is in your best interests to be aware of the personality you are creating for your site through visual design (or lack of it) and make certain it is telling the story you want.
Luckily, there's a huge visual vocabulary available for establishing an appropriate personality for your application. Millions of colors, hundreds of thousands of font choices, and innumerable patterns and images are all at your disposal. The trick is settling on the right combination of these for your particular needs. Consider what you want to communicate to your audience and how; then locate visual elements that
that message in the world around you. You'll be surprised at what you can find when you look!
The material and form of any physical controls (discussed later in this chapter) are crucial components of any device. After all, if a device cannot be turned on, it can't be used. Keyboard keys need to be set firmly enough for many repeat pressings, but not so firmly so that they are a chore to press. Ergonomics and human factors come into play in the size and shape of controls. How small can a button be before most people can't press it? Should a dial have a ridged edge or be smooth?
The overall size and shape of a device are important visually as well. A thick black box made of plastic with
and dials on it probably belongs on the shelf with other multimedia equipment, while a thin sliver of the same black plastic about the size of a pack of cards probably slips into a purse or pocket. Does it have a strap? If so, it's supposed to be carried around. Are its buttons visible or hidden? Is the on/off control a switch or a button or a knob? There are literally dozens of design decisions for the physical form of a device, and each has meaning and, from a business standpoint, an associated cost. An extra nice button might add only an extra 2 cents to each unit, but 10 million devices later, those 2
have added up to $200,000.