Common examples of information design challenges include charts, graphs, and
19_084113 ch14.qxp 4/3/07 6:07 PM Page 290
290
Part II: Designing Behavior and Form
other displays of quantitative information. Edward Tufte has written several seminal books that cover the topic in detail, including The Visual Display of Quantitative Information.
Industrial design
Although it is beyond the scope of this book to discuss industrial design issues in any depth, as interactive appliances and handheld devices become widespread, industrial design is playing an ever-growing role in the creation of new interactive products. Much like the difference in skills between graphic designers and visual interface and information designers, there is a similar split among the ranks of industrial designers. Some are more adept at creating arresting and appropriate forms for objects, whereas others emphasize logical and ergonomic mapping of physical controls in a manner that matches user behaviors and communicates device behaviors. The increase of software-enabled devices that make use of rich visual displays demands a concerted effort on the part of interaction designers, visual designers, and industrial designers in order to produce complete and effective solutions.
The Building Blocks of Visual
Interface Design
At its root, interface design is concerned with the treatment and arrangement of visual elements to communicate behavior and information. Every element in a visual composition has a number of properties, such as shape and color, that work together to create meaning. There is rarely an inherent meaning to any one of these properties. Rather, the differences and similarities in the way these properties are applied to each element come together to allow users to make sense of an interface.
When two objects share properties, users will assume they are related or similar.
When users perceive contrast in these properties, they assume the items are not related, and the items with the greatest contrast tend to demand our attention.
Long before children are capable of using and understanding verbal language, they possess the ability to differentiate between objects with contrasting visual treatments. Just as Sesame Street relies upon this innate human capability with sketches where children are asked, “Which of these things is not like the other? Which of these things doesn’t belong?,” visual interface design capitalizes on it to create meaning that is far richer than the use of words alone.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 291
Chapter 14: Visual Interface Design
291
When crafting a user interface, consider the following visual properties for each element and group of elements. Each property must be applied with care to create a useful and engaging user interface.
Shape
Is it round, square, or amoeba-like? Shape is the primary way we recognize what an object is. We tend to recognize objects by their outlines; a silhouette of a pineapple that’s been textured with blue fur still reads as a pineapple. However, distinguishing among different shapes takes a higher level of attention than distinguishing some other properties such as color or size. This means it’s not the best property to contrast when your purpose is to capture a user’s attention. The weakness of shape as a factor in object recognition is apparent to anyone who’s glanced at Apple’s OS X
dock and mistakenly selected iTunes instead of iDVD, or iWeb instead of iPhoto.
While these icons have different shapes, they are of similar size, color, and texture.
Size
How big or small is it in relation to other items on the screen? Larger items draw our attention more, particularly when they’re much larger than similar things around them. Size is also an ordered and quantitative variable, which means that people automatically sequence objects in terms of their size and tend to assign relative quantities to those differences; if we have four sizes of text, we assume relative importance increases with size, and that bold type is more important than regular.
This makes size a useful property in conveying information hierarchies. Sufficient distinction in size is also enough to draw our attention quickly. In his classic The Semiology of Graphics, Jacques Bertin describes size as a dissociative property, which means that when something is very small or very large, it can be difficult to decipher other variables, such as shape.
Value
How light or dark is it? Of course, the idea of lightness or darkness is meaningful primarily in context of the value of the background. On a dark background, dark type is faint, whereas on a light background, dark type is pronounced. Like size, value can be dissociative; if a photo is too dark or light, for example, you can no longer perceive what’s in it. Contrasts in value are something people perceive quickly and easily, so value can be a good tool for drawing attention to elements that need to stand out. Value is also an ordered variable — for example, lower-value (darker) colors on a map are easy to interpret as deeper water or denser population.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 292
292
Part II: Designing Behavior and Form
Hue
Is it yellow, red, or orange? Differences in hue draw our attention quickly. In some professions, hue has specific meaning we can take advantage of; for example, an accountant sees red as negative and black as positive, and a securities trader sees blue as “buy” and red as “sell” (in the United States, at least). Colors also take on meaning from the social contexts in which we’ve grown up. To Westerners who’ve grown up with traffic signals, red means “stop” and sometimes even “danger,”
whereas in China, red is the color of good luck. Similarly, white is associated with purity and peace in the West, and with funerals and death in Asia. Unlike size or value, though, hue is not intrinsically ordered or quantitative, so it’s less ideal for conveying that sort of data. Also, we don’t want to rely on hue as the sole communication vector, since color-blindness is quite common.
Color is best used judiciously. To create an effective visual system that allows users to identify similarities and differences between elements, you should use a limited number of hues — the carnival effect overwhelms users and limits your ability to communicate. Hue is also where the branding needs and communication needs of an interface can collide; it can take a talented visual designer (and skilled diplomat) to navigate these waters.
Orientation
Is it pointing up, down, or sideways? This is a useful variable to employ when you have directional information to convey (up or down, backward or forward). Orientation can be difficult to perceive with some shapes or at small sizes, though, so it’s best used as a secondary communication vector. For example, if you want to show the stock market is going down, you might want to use a downward-pointing arrow that’s also red.
Texture
Is it rough or smooth, regular or uneven? Of course, elements on a screen don’t have real texture, but they can have the appearance of it. Texture is seldom useful for conveying differences or calling attention, since it requires a lot of attention to distinguish. Texture also takes a fair number of pixels to convey. However, it can be an important affordance cue; when we see a textured rubber area on a device, we assume that’s where we’re meant to grab it. Ridges or bumps on a user-interface (UI) element generally indicate that it’s dragable, and a bevel or drop-shadow on a button makes it seem more clickable.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 293
Chapter 14: Visual Interface Design
293
Position
Where is it relative to other elements? Like size, position is both an ordered and a quantitative variable, which means it’s useful for conveying information about hierarchy. We can leverage the reading order of a screen to locate elements sequentially, with the most important or first used in the top and left. Position can also be used to create spatial relationships between objects on the screen and objects in the physical world.
Principles of
Visual Interface Design
The human brain is a superb pattern-processing computer, making sense of the dense quantities of visual information that bombard us everywhere we look. Our brains manage the overwhelming amount of data our visual sense provides by discerning visual patterns and establishing a system of priorities for the things we see, which in turn allows us to make sense of the visual world. The ability of the brain’s visual system to assemble portions of our visual field into patterns based on visual cues is what allows us to process visual information so quickly and efficiently. For example, imagine manually calculating the trajectory of a thrown baseball in order to predict where it lands. Our eyes and brains together do it in a split second, without conscious effort on our part. To most effectively communicate the behavior and functions of a program to the people that interact with it, visual interface designers must take advantage of this innate visual processing capability.
One chapter is far too little to do justice to the topic of visual interface design. However, there are some important principles that can help make your visual interface more compelling and easier to use. As mentioned earlier in the chapter, Mullet and Sano provide an accessible and detailed analysis of these fundamental principles; we will summarize some of the most important visual interface design concepts here.
Visual interfaces should:
Use visual properties to group elements and create a clear hierarchy
Provide visual structure and flow at each level of organization
Use cohesive, consistent, and contextually appropriate imagery
Integrate style and function comprehensively and purposefully
Avoid visual noise and clutter
We discuss each of these principles in more detail in the following sections, as well as some general principles governing the appropriate use of text and color in visual user interfaces.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 294
294
Part II: Designing Behavior and Form
Use visual properties to group elements
and provide clear hierarchy
It’s usually a good idea to distinguish different logical sets of controls or data by grouping them by using visual properties such as color and dimensional rendering.
By consistently applying these visual properties throughout an interface, you can create patterns that your users will learn to recognize. For example, in Windows XP, all buttons are raised with rounded corners and text fields are rectangular, slightly inset, and have a white background and blue border. Because of the consistent application of this pattern, there is no confusion as to what is a button and what is a text field, despite a number of similarities.
DESIGN
A visual interface is based on visual patterns.
principle
In looking at any set of visual elements, users unconsciously ask themselves “What’s important here?” followed almost immediately by “How are these things related?”
We need to make sure our user interfaces provide answers to both of these questions.
Creating hierarchy
Based on scenarios, determine which controls and bits of data users need to understand instantly, which are secondary, and which are needed only by exception. This ranking informs the visual hierarchy.
Next use hue, saturation, value, size, and position to distinguish levels of hierarchy.
The most important elements should be larger, have greater contrast in hue, saturation, and value in relation to the background, and be positioned above or outdented in relation to other items. Items meant to stand out are best rendered in saturated colors. Less important elements should be less saturated, have less value and hue contrast against the background, and should also be smaller, or indented.
Desaturated, neutral colors tend to recede.
Of course, adjust these properties with restraint, since the most important element doesn’t need to be huge, red, and outdented — often, varying just one of these properties will do the trick. If you find that two items of different importance are competing for attention, it’s often a good approach to “turn down” the less important one, rather than “turn up” the more important. This will leave you with more
“headroom” to emphasize critical elements. (Think about it this way: If every word on a page is red and bold, do any of them stand out?)
19_084113 ch14.qxp 4/3/07 6:07 PM Page 295
Chapter 14: Visual Interface Design
295
Establishing a clear visual hierarchy is one of the hardest challenges in visual interface design, and takes skill and talent. A good visual hierarchy is almost never noticed by users — it is only the lack of one and an accompanying confusion that tends to jump out at most people.
Establishing relationships
To convey which elements are related, return to your scenarios to determine not only which elements have similar functions but also which elements are used together most often. Elements that tend to be used together should generally be grouped spatially to minimize mouse movement, while elements that aren’t necessarily used together but have similar functions may be grouped visually even if they are not grouped spatially.
Spatial grouping makes it clear to users what tasks, data, and tools relate to each other, and can also imply sequence. Good grouping by position takes into account the order of tasks and subtasks and how the eye scans the screen: left to right in Western languages, and generally from top to bottom. (We discuss this in more detail later in the chapter.)
Items in proximity to one another are generally related. In many interfaces, this grouping is done in a heavy-handed fashion with bounding boxes everywhere you look, sometimes even around just one or two elements. In many cases, you can accomplish the same thing more effectively with differences in proximity. For example, on a toolbar, perhaps you have four pixels between buttons. To group the file commands, such as open, new, and save, you could simply leave eight pixels between the file command buttons and other groups of buttons.
Group items that are not adjacent by giving them common visual properties, forming a pattern that eventually takes on meaning for users. For example, the use of dimensionality to give the feel of a manual affordance is perhaps the most effective way to distinguish controls from data or background elements (see Chapter 13 for more about affordance). Iconography is a common application of this strategy.
Mac OS X uses bright colors for application icons and subdued ones for seldom-used utilities. A green button to start a device can be echoed by a green “running”
icon to indicate that it’s functioning properly.
After you have decided what the groups are and how best to communicate them visually, begin to adjust the contrast between the groups to make them more or less prominent in the display, according to their importance in context. Emphasize differences between groups, but minimize differences between items within a group.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 296
296
Part II: Designing Behavior and Form
The squint test
A good way to help ensure that a visual interface design employs hierarchy and relationships effectively is to use what graphic designers refer to as the squint test.
Close one eye and squint at the screen with the other eye in order to see which elements pop out and which are fuzzy and which items seem to group together.
Changing your perspective can often uncover previously undetected issues in layout and composition.
Provide visual structure and flow
at each level of organization
It’s useful to think of user interfaces as being composed of visual and behavioral elements, which are used in groups, which are then grouped together into panes, which then may, in turn, be grouped into screens, views, or pages. These groupings, as discussed earlier, can be accomplished through spacing or through shared visual properties. There may be several such levels of structure in a sovereign application, and so it is criti
cal that you maintain a clear visual structure so that a user can easily navigate from one part of your interface to another, as his workflow requires.
The rest of this section describes several important attributes that help define a crisp visual structure.
Alignment and the grid
Alignment of visual elements is one of the key ways that designers can help users experience a product in an organized, systematic way. Grouped elements should be aligned both horizontally and vertically (see Figure 14-1). In general, every element on the screen should be aligned with as many other elements as possible. The decision not to align two elements or groups of elements should be made judiciously, and always to achieve a specific differentiating effect. In particular, designers should take care to:
Align labels — Labels for controls stacked vertically should be aligned with each other; unless labels differ widely in length, left-justification is easier for users to scan than right justification.
Align within a set of controls — A related group of check boxes, radio buttons, or text fields should be aligned according to a regular grid.
Align across control groups and panes — Groups of controls and other screen elements should all follow the same grid wherever possible.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 297
Chapter 14: Visual Interface Design
297
Figure 14-1 Adobe Lightroom makes very effective use of alignment to a layout grid. Text, controls, and control groups are all tightly aligned, with a consistent atomic spacing grid. It should be noted that the right-alignment of control and control group labels may compromise scanability.
Alan Cooper, Robert Reinmann, David Cronin - About Face 3- The Essentials of Interaction Design (pdf) Page 41