Alan Cooper, Robert Reinmann, David Cronin - About Face 3- The Essentials of Interaction Design (pdf)

by About Face 3- The Essentials of Interaction Design (pdf)

Brand, customer experience, and the user interface

  Most successful companies make a significant investment in managing their identity and building brand equity. A company that cultivates substantial brand equity can command a price premium for its products and services, while encouraging greater customer loyalty. Brands indicate the positive characteristics of the product and suggest discrimination and taste in the user.

  In its most basic sense, brand value is the sum of all the interactions people have with a given company. Because an increasing number of these interactions are occurring through technology-based channels, it should be no surprise that the emphasis placed on branding user interfaces is greater than ever. If the goal is consistently positive customer interactions, the verbal, visual, and behavioral brand messages must be consistent. For example, if a customer is trying to get pricing for DSL in her area and she finds the phone company’s Web site doesn’t give her a

  19_084113 ch14.qxp 4/3/07 6:07 PM Page 307

  Chapter 14: Visual Interface Design

  307

  useful answer after making her do a lot of work, it leaves her with the impression that the phone company itself is an irritating, unhelpful institution, regardless of how stunning the site’s visual design is. The same is true of other channels: If she doesn’t get the answers she needs, it doesn’t matter if the computerized phone voice sounds friendly and accepts voice input in a conversational fashion, or if the human customer service rep says “Have a nice day.”

  Although companies have been considering the implications of brand as it relates to traditional marketing and communication channels for some time now, many companies are just beginning to address branding in terms of the customer experience. In order to understand branding in the context of the user interface, it can be helpful to think about it from two perspectives: the first impression and the long-term relationship.

  Just as with interpersonal relationships, first impressions of a user interface can be exceedingly important. The first five-minute experience is the foundation that long-term relationships are built upon. To ensure a successful first five-minute experience, a user interface must clearly and immediately communicate the brand.

  Visual design typically plays one of the most significant roles in managing first impressions largely through color and image. By selecting an appropriate color palette and image style that supports the brand, you go a long way towards leveraging the equity of that brand in the form of a positive first impression.

  First impressions can also have a significant impact on the usability of a product.

  This is described as the “Aesthetic-Usability Effect” in Lidwell, Holden, and Butler’s eminently useful Universal Principles of Design. According to this principle (which is based in research), people perceive more aesthetically pleasing designs as easier to use than less aesthetically pleasing designs, regardless of actual functionality.

  After people have developed a first impression, they begin to assess whether the behavior of the interface is consistent with its appearance. You build brand equity and long-term customer relationships by delivering on the promises made during the first impression. Interaction design and the control of behavior are often the best ways to keep the promises that visual branding makes to users.

  Avoid visual noise and clutter

  Visual noise within an interface is caused by superfluous visual elements that distract from the primary objective of directly communicating software function and behavior. Imagine trying to hold a conversation in an exceptionally crowded and loud restaurant. It can become impossible to communicate if the atmosphere is too noisy.

  The same is true for user interfaces. Visual noise can take the form of overembellished

  19_084113 ch14.qxp 4/3/07 6:07 PM Page 308

  308

  Part II: Designing Behavior and Form

  and unnecessarily dimensional elements, overuse of rules boxes and other visually

  “heavy” elements to separate controls, insufficient use of white space between controls, and inappropriate or overuse of visual properties, including color, texture, and contrast.

  Cluttered interfaces attempt to provide an excess of functionality in a constrained space, resulting in controls that visually interfere with each other. Visually baroque, disorderly, or overcrowded screens raise the cognitive load for the user, causing what Richard Saul Wurman calls “information anxiety,” and interfering with users’

  speed, comprehension, and success.

  Keep it simple

  In general, interfaces should use simple geometric forms, minimal contours, and a restricted color palette comprised primarily of less-saturated or neutral colors balanced with a few high-contrast accent colors that emphasize important information. Typography should not vary widely in an interface: Typically one or two typefaces, specified to display at just a few sizes, will be sufficient. When multiple design elements (controls, panes, windows) are required for similar or related logical purposes, they should be visually rendered in a consistent fashion to take advantage of the concept of inheritance. Inheritance provides the opportunity for an understanding of one element to transfer to other elements that are similar.

  Elements intended to stand out should be visually contrasted with any regularized elements through adjustment of one or more visual properties, such as size, color, and position.

  Unnecessary variation is the enemy of a coherent, usable design. If the spacing between two elements is nearly the same, make that spacing exactly the same. If two typefaces are nearly the same size, adjust them to be the same size. Every visual element and every difference in color, size, or other visual property should be there for a reason. If you can’t articulate a good reason why it’s there, get rid of it.

  Good visual interfaces, like any good visual design, are visually efficient. They make the best use out of the minimal set of visual and functional elements. A popular technique used by both graphic designers and industrial designers is to experiment with the removal of individual elements in order to test their contribution to the clarity of the intended message.

  Take things away until the design breaks, then put that last thing DESIGN

  principle

  back in.

  19_084113 ch14.qxp 4/3/07 6:07 PM Page 309

  Chapter 14: Visual Interface Design

  309

  As pilot and poet Antoine de Saint Exupery famously said: “Perfection is attained not when there is no longer anything to add, but when there is no longer anything to take away.” As you create your interfaces, you should constantly be looking to simplify visually. The more useful work a visual element can accomplish while still retaining clarity, the better. As Albert Einstein suggested, things should be as simple as possible, but no simpler.

  Related to the drive for simplicity is the concept of leverage, which is where a single interface element is used for multiple, related purposes. For example, in Microsoft Windows XP, an icon is presented next to the title of the window (see Figure 14-8). This icon is used both to visually communicate the contents of the window (for example, whether it is an Explorer window or a Word document) and to provide access to window configuration commands such as Minimize, Maximize, and Close.

  In general, interaction designers, not visual designers, are best suited to tackle the assignment of multiple functions to visual elements. Such mapping of elements requires significant insight into the behavior of users in context, the behavior of the software, and programming issues. Don’t go overboard in doing this, though —

  many designers get caught up in the idea of creating a more efficient elegant solution and end up adding too many functions to a control, ultimately confusing users.

  Figure 14-8 The icon in the title bar of windows in Windows XP is a good example of leverage. It both communicates the contents of the window and provides access to window configuration commands.

  19_084113 ch14.qxp 4/3/07 6:07 PM Page 310

  310

  Part II: Design
ing Behavior and Form

  Text in visual interfaces

  Text is a critical component to almost all user interfaces. Written language is capable of conveying dense and nuanced information, but significant care must be taken to use text appropriately, as it also has a great potential to confuse and complicate.

  People recognize letters primarily by their shapes. The more distinct the shape, the easier the letter is to recognize, which is why WORDS TYPED IN ALL CAPITAL

  LETTERS ARE HARDER TO READ than upper/lowercase — the familiar pattern-matching hints are absent in capitalized words, so we must pay much closer attention to decipher what is written. Avoid using all caps in your interfaces.

  Recognizing words is also different from reading, where we consciously scan the individual words and interpret their meaning in context. Interfaces should try to minimize the amount of text that must be read in order to navigate the interface successfully: After a user has navigated to something interesting, he should be able to read details if appropriate. Using short, easily recognized words facilitates navigation with minimal conscious reading.

  Our brains can rapidly differentiate objects in an interface if we represent what objects are by using visual symbols and idioms. After we have visually identified the type of object we are interested in, we can read the text to distinguish which particular object we are looking at. In this scheme, we don’t need to read about types of objects we are not interested in, thus speeding navigation and eliminating excise. The accompanying text only comes into play after we have decided that it is important.

  DESIGN

  Visually show what; textually tell which.

  principle

  When text must be read in interfaces, the following guidelines apply:

  Use high contrast text — Make sure that the text is in high contrast with the background and do not use complementary colors that may affect readability.

  We aim for 80% contrast as a general rule of thumb.

  Choose an appropriate typeface and size — In general, a crisp sans-serif font such as Verdana or Tahoma is your best bet for readability. Serif typefaces such as Times or Georgia can appear “hairy” onscreen, but using a large enough size and font smoothing or appropriate anti-aliasing can often mitigate this issue.

  Type sizes of less than 10 pixels are difficult to read in most situations, and if you must use small type, it’s usually best to go with a sans-serif typeface without anti-aliasing.

  19_084113 ch14.qxp 4/3/07 6:07 PM Page 311

  Chapter 14: Visual Interface Design

  311

  Phrase your text clearly — Make your text understandable by using the fewest words necessary to clearly convey meaning. Also, try to avoid abbreviations. If you must abbreviate, use standard abbreviations.

  Color in visual interfaces

  Color is an important aspect of almost all visual interfaces. In these days of ubiquitous color LCDs, users expect color displays even in devices like PDAs and phones.

  However, color is much more than a marketing checklist item; it is a powerful information and visual interface design tool that can be used to great effect, or just as easily abused.

  Color is part of the visual language of an interface, and users will impart meaning to its use. For most applications, color should be used sparingly and integrate well into the other elements of the visual language: symbols and icons, text, and the spatial relationships they maintain in the interface. As discussed earlier in this chapter, when used appropriately, color can draw attention to important items, indicate relationships, and communicate status or other information.

  There are a few ways that color can be misused in an interface if you are not careful. The most common of these misuses are:

  Too many colors — Adding one color to distinguish important items in a set significantly reduces search time. Adding more colors still improves user performance, but at seven or more, search performance degrades significantly. It isn’t unreasonable to suspect a similar pattern in any kind of interface navigation, since this number is consistent with how much information we can hold in our short-term memories; when there are too many colors, we spend time trying to remember what the colors mean, so that slows us down.

  Use of saturated complementary colors — Complementary colors are the inverse of each other in color computation. These colors, when highly saturated and positioned adjacent to each other, can create perceptual artifacts that are difficult to perceive correctly or focus on. A similar effect is the result of chromostereopsis, in which colors on the extreme ends of the spectrum “vibrate”

  when placed adjacent to one another. Just try looking at saturated red text on a saturated blue background and see how quickly you get a headache!

  Excessive saturation — Highly saturated colors tend to look garish and draw too much attention. Moderately saturated colors can be appropriate in small swatches to capture a user’s attention but should always be used sparingly.

  When multiple saturated colors are used together, chromostereopsis and other perceptual artifacts often occur.

  19_084113 ch14.qxp 4/3/07 6:07 PM Page 312

  312

  Part II: Designing Behavior and Form

  Inadequate contrast — When object colors differ from background colors only in hue, but not in saturation or value (brightness), they become difficult to perceive.

  Objects and background should vary in brightness or saturation, in addition to hue, and color text on color backgrounds should also be avoided when possible.

  Inadequate attention to color impairment — Roughly 10% of the male population has some degree of color-blindness. Thus care should be taken when using red and green hues (in particular) to communicate important information. Any colors used to communicate should also vary by saturation or brightness to distinguish them from each other. If a grayscale conversion of your color palette is easily distinguishable, color-blind users should be able to distinguish the color version. There are also applications and filters, such as Fujitsu’s ColorDoctor, that can be used to see how people with various forms of color-blindness would perceive your product.

  Visual interface design for handhelds

  and other devices

  Many of the practices we’ve discussed in this chapter have their roots in design for the desktop platform and the accompanying large screen size and stationary usage context. Clearly, designing for a handheld or other device such as a mobile phone or medical equipment has its own set of challenges related to a smaller screen size, mobile usage context, and diverse input methods. While this certainly isn’t a comprehensive list, it’s worth considering the following:

  Onscreen controls should be prominent. Because handheld devices are used while standing, walking, riding on bumpy trains, and in all sorts of busy medical and industrial environments, onscreen controls must be much more obvious than their desktop counterparts. Different hardware and contexts require different tactics, but as a general rule using high-contrast designs is a good idea. If your hardware limits your ability to do this, you may have to resort to size, color, or line weight to accomplish this.

  Provide visual landmarks. To accomplish a task, handheld users frequently must traverse several screens. As a result it’s important to use visual cues to orient users.

  Onscreen controls should be large if you’re using a touch screen. If you are using a touch screen on your device, controls should be large enough to be touchable by fingers. Styli can get lost, and because of this (and the nerd factor), younger users are often put off by the use of a stylus.

  19_084113 ch14.qxp 4/3/07 6:07 PM Page 313

  Chapter 14: Visual Interface Design

  313

  Use larger, sans-serif fonts. Serif fonts are hard to read at low resolution; sans-serif fonts should be used for low-resolution handheld displays.

  Clearly indicate when there is more data offscreen. Many people aren’t used to the idea of a small screen with scrolling information. If there is more data than
fits on a screen, make sure to boldly indicate that more data is available, ideally with a hint as to how to access it.

  Principles of Visual Information Design

  Like visual interface design, visual information design also has many principles that the prospective designer can use to his advantage. Information design guru Edward Tufte asserts that good visual design is “clear thinking made visible,” and that good visual design is achieved through an understanding of the viewer’s “cognitive task”

  (goal) and a set of design principles.

  Tufte claims that there are two important problems in information design: 1. It is difficult to display multidimensional information (information with more than two variables) on a two-dimensional surface.

  2. The resolution of the display surface is often not high enough to display dense information. Computers present a particular challenge — although they can add motion and interactivity, computer displays have low information density compared to that of paper.

  Although both points are certainly true, the visual interface designer can leverage one capability not available to the print information designer: interactivity. Unlike a print display, which must convey all of the data at once, electronic displays can progressively reveal information as users need more detail. This helps make up, at least in part, for the resolution limitations.

  Even with the differences between print and digital media, some universal information design principles — indifferent to language, culture, or time — help maximize the effectiveness of any information display.

  In his beautifully executed volume The Visual Display of Quantitative Information (1983), Tufte introduces seven “Grand Principles,” which we briefly discuss in the following sections as they relate specifically to digital interfaces and content.