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
of (and relationships between) the content and actions within an
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
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
The most common interface design
mistakes I see are over statements of visual contrast. For example,
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
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.