INTEGRATING VISUAL DESIGN As an interaction designer, you put a lot of effort into understanding your product's users. You also spend time crafting the interface's behaviors and the presentation of the . content that helps users achieve their goals. However, these efforts will fall short unless you also dedicate significant work to clearly communicating to your users both what content is available and how they can interact with it. With interactive products this communication almost always happens visually, via a display. (With custom hardware, you can also communicate some product behavior through physical properties.) In this chapter, we'll talk about effective, goal-directed visual interface design strategies. In Part III, we will provide more details about specific interaction and interface idioms. Visual Art and Visual Design Practitioners of fine art and practitioners of visual design share a visual medium. How­ ever, while both must be skilled in and knqwledgeable about that medium, their work serves different ends. Art is a means of self-expression on topics of emotional or intel­ lectual concern to the artist and, sometimes, to society at large. Few constraints are imposed on the artist, and the more singular and unique the product of the artist's exer­ tions, the more highly it is valued. Designers, on the other hand, typically aim to create artifacts with specific utility for the people who use them. Whereas the concern of contemporary artists is primarily self-expression, visual designers are concerned with clear communication. As Kevin Mullet and Darrell Sana note in their book Designing Visuallnterfaces (Prentice Hall, 1994), "design is concerned with finding the representation best suited to the communi­ cation of some specific information.'.' In keeping with a Goal-Directed approach, visual designers should endeavor to present behavior and information in such a way that it is understandable and useful, supporting the.organization's branding objectives as well as the personas' goals. To be clear, this approach does not exclude aesthetic concerns, but rather places such concerns within a goal-directed framework. Although visual communication always involves some subjective judgment, we endeavor to minimize questions of taste. We've found that the clear articulation of user experience goals and business objectives is an invaluable foundation to designing the aspects of an interface in support of brand iden­ tity, user experience, and emotional response. (See Chapter 3 for more about visceral processing.) The Elements of Visual Interface Design At its root, visual 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. The ways in which these properties are applied to each element (and how they change over time and with interaction) allow users to make sense of content and the graphical interface. For example, when two interface objects share the same color, users assume they are related or similar. When two objects have contrasting col­ ors, users assume the objects have some categorical difference. Visual interface design capitalizes on the human ability to differentiate between objects by distinct visual appearance, and in so doing creates meaning that is richer than the use of words alone. When crafting a visual interface, keep in mind the following considerations. Context, context context Every single visual design guideline is subject to the context in which it is used. Are your users doing information work on large-screened desktop computers with overhead lighting? Are they standing in a dark room scanning the screen for the tiniest of biolog­ ical details? Are they walking across a city holding your design in the glare of the sun? Are they cuddled up on a couch just playing around? Similar to conveying the brand (see below), the context of use must be taken as part of the givens that constrain the visual design. 406 Part II : Maki ng We ll-Behaved Products 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 prop­ erties, such as color or size. This means it's not the best property to contrast when your purpose is to capture the 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 the round iTunes icon instead of the round iDVD icon, or latched on to the photo in iWeb and mistook it for iPhoto. These icons have different shapes, but they are of sim­ ilar 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, for example, we assume that relative impor­ tance increases with size, and that balded content is more important than regular. This makes size a useful property in conveying information hierarchies (more on them in a minute). Sufficient distinction in size is also enough to draw our attention quickly. Be aware that using size can have a cost. In his classic The Semiology ofGraphics (University of Wisconsin Press, l983),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. Color Though most people speak of color loosely, designers must be very precise and deliberate when considering colors in an interface. Any choices should first take into account the users' goals, environment, the content, and the brand. After that, it's most useful to think of interface color in terms of value, hue, and saturation. Value How light or dark is it? Of course, the idea oflightness or darkness is meaningful primar­ ily in the context of an object compared to 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 too light, for example, you can no longer perceive other details about it. People perceive contrasts in value quickly and easily, so CH 17. Integrating Visua l Design 407 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. Hue Is it yellow, red, or orange? Great differences in hue draw our attention quickly, but users often have multilayered associations with hue. 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 (at least in the Western systems we're familiar with) a securities trader sees blue as "buy" and red as "sell." 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, but 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. Color is best used judiciously to convey important meaning in an interface. To create an effective visual system that allows users to keep track of implied meanings, you should use a limited number of hues. The "carnival effect" of having a crowded color palette over­ whelms users and limits your ability to communicate. Hue is also where an interface's branding and communication needs can collide; it can take a talented visual designer (and skilled diplomat) to navigate these waters. Hue is also tricky since color blindness is common among the general population, and there are many types of color blindness. Saturation Is the hue brilliant, like springtime flowers, or dull, like a gray stone? Saturation draws attention similar to the way that hue and value do, that is, when there is a strong con­ trast at play. The sapphire object will stand out amidst an array of moss green objects. Saturation is quantitative, in that greater saturation ties tightly to higher values. Though saturated colors can imply excitement and dynamism, it can also read as loud and cacophonous. The "carnival effect" mentioned above can be exacerbated with too much saturation across the palette, and can compete with actual content. HSV in combination Hue, saturation, and value are three variables that together can describe any color in an interface, in a model sensibly named HSV. (Another common system, RGB, lets designers specify the red, green, and blue values for a given color.) Designers should be judicious in how they use contrasts within these variables as well as how they relate across the entire palette. 408 Part II: Maki ng Well -Behaved Prod ucts 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).