Luke Wroblewski Interview
Visual Interaction Design

How can visual design support (or detract) from interaction 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.

What do interaction designers need to know about visual design?

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 subjective 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 were they turn first.

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.

What are some of the common interface mistakes that new interaction designers make?

The most common interface design mistakes I see are over statements 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 heard. 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 over emphasize 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” and aim for the least effective difference between elements.