Menu

Beta — We’re reformatting our articles to work with the new site, but this is one hasn’t been done yet; it may contain formatting issues. No need to report this. We’re working on it.

Where Visual Design Meets Usability – An Interview with Luke Wroblewski, Part I

by Joshua Porter
on June 22, 2006

Our first introduction to Luke Wroblewski was when we read his book, Site-Seeing: A Visual Approach to Web Usability.  We were impressed by Luke’s clarity in describing how visual design can improve
a site’s usability. We then started following his blog, Functioning
Form
,
where he offers cogent discussions on all aspects of design. We’re thrilled
he’s speaking at the upcoming User Interface Conference.

Recently, UIE’s Joshua Porter managed to get a little of Luke’s time to answer
some questions about the role of design, which we’re publishing in two parts.
Here’s Part I:

UIE: Some people might consider the subtitle of your book, “A
Visual Approach to Web Usability,” to be an oxymoron. What do you say
when people ask: Isn’t usability mostly about actual usage and visuals
mostly about looking good?

Luke Wroblewski: Well, let’s take a look at “actual usage.” When
you’re interacting with a web site, you’re reading text, navigating
menus, examining images, scanning lists, and filling in forms. The whole time
you are using your eyes to make sense of what’s on the screen because
all the elements that enable these interactions are presented to you visually
(unless, of course, you are using a screen reader).

The way each element is presented tells you a lot about it: is it more or
less important than other elements; is it similar or different from other elements;
can you take action on it? This type of information helps you ascribe meaning
to what you see on the screen.

As a result, you can use visual design to communicate key concepts to your
users. By addressing the question “What is this?” we communicate
usefulness. By addressing “How do I use it?” we communicate usability.
By addressing “Why should I care?” we communicate desirability. Clearly
this communication goes beyond mere styling and “looking good”.

When properly applied, visual design is all about communication. The better
at communicating we are, the easier it is for our users to use and appreciate
the web sites we design.

Why do you think that these two topics (usability and
visual design) aren’t often associated with each other?

Well Curt
Cloninger
once wrote that usability
experts are from Mars and graphic designers are from Venus
,
so it could be that. But truthfully, I think it stems from the fact that
many people aren’t versed in what determines how we make sense of what we
see. As a result, the assessment of usability largely focuses on “actual
usage”—to use your earlier description—instead of the way that
usage is or isn’t supported through visual communication.

To wrap that up in a concrete example, let’s say a usability test shows that
users did not notice a certain feature on a web page. The researcher might
note that this particular feature is “not discoverable” at which
point the product will likely be sent back to the designer to “increase
the discoverability” of that key feature. The designer will go away and
come back with a few adjustments and they will measure the usage again.

What’s missing in this scenario is the reason why the user overlooked that
particular feature and what the designer changed to address that. Odds are
the visual contrast between all the elements on the page was too low and everything
looked the same to users, so they glossed over the feature. Or, perhaps the
visual contrast was too high, so every element was screaming “look at
me,” in which case none of them got noticed. Whatever the exact reason,
there’s likely a visual organization issue at the heart of the problem.

But the discussions about the cause of the problem largely don’t happen. So,
the two disciplines of visual design and usability don’t have an opportunity
to develop a shared language about the way they are communicating concepts
to end users. Were more of those conversations to happen, I think you’d see
more of a convergence between the two. My personal effort to create that shared
language was Site Seeing. In it, I outlined both usability and visual design
considerations with examples that showed how they overlap.

You recently said “visual design can be thought
of as two interwoven parts: visual organization and personality.” Why
do you explain visual design in this way? How can designers use this distinction
to their advantage?

Let me start by defining what I mean by visual organization
and personality. Visual organization applies visual contrast and ultimately
visual hierarchy to create page layouts that guide users through content. If
you were to strip away all the aesthetic properties of an interface design,
you’d still be left with a good amount of visual design—or rather visual
organization—that illuminates the relationships between and the relative
importance of page elements.

The other side of visual design is personality, or look and feel, which requires
selecting the right fonts, colors, shapes, textures, and images to communicate
an appropriate message to your target audience. Most visual designers will
tell you these two aspects of visual design are virtually inseparable. This
may have led to the commonly held belief that visual design is simply decoration.
Personality, after all, communicates so instantaneously and powerfully that
it may mask the deliberate visual organization “beneath” it.

I intentionally try to separate discussions about personality from discussions
about visual organization, to separate subjective decision making from applications
of tried and true principles. As I mentioned, the color and font selections
that establish a web site’s personality communicate very strongly. They demand
a personal, subjective reaction. This is why discussions about visual design
often recede to conversations about color preference like: “I don’t like
orange.”

If you put aside that visceral reaction to a web site’s personality for a
moment, you could instead explain how you’ve applied the principles of perception
and visual organization to achieve particular business goals or user needs.
For example, “Our research has shown that this information is what most
users are looking for on this page. As a result, it has the most visual weight
on this screen—achieved through a strong contrast with the background.” Outlining
how visual design decisions enforce the relationships between pieces of content
while guiding user actions tends to remove the subjectivity inherent in many
design reviews. This can help designers explain and sell their concepts.

Do all sites have a personality? What elements of design
make a good personality, and how can designers discern the personality of their
site (or what it should be)?

Well everything has a personality, whether it wants to
or not. Studies by Byron Reeves and Clifford Naas in the Media Equation show
that we even ascribe personalities to our TVs, computers, and other forms of
media. Since the Web is another type of media, you can bet the web sites we
create have personalities as well.

To bring it back to the design process, even if you deliberately don’t consider
your site’s personality, it will end up with one anyway. The colors, content,
and visual elements—or lack thereof—all make an impression on your audience,
intentional or not. Therefore, it is in your best interests to be aware of
the personality you are creating for your site and make certain it is sending
a message you want.

I don’t think it is a question of developing a “good” personality.
It’s much more about establishing an “appropriate” personality. An
appropriate personality is memorable, it reflects the core essence of your
brand, and it encourages continued engagement. Consider the personality created
by the color, font, and layout choices on Apple’s Web site. The message is “cool,
easy to use technology” and the personality reflects that.

Figuring out an appropriate personality for your site requires distilling
your primary message to a few core adjectives or statements and then making
sure each choice of font, color, whitespace, texture, or image supports that
message.

With the recent successes of not-so-attractive sites,
such as Craigslist, MySpace, and Del.icio.us, there is a lot of conversation
around the notion of “ugly design.” Why do these ugly designs work?
What can we learn from their success?

On more than one occasion, I’ve had a senior business
manager tell me that we needed a less-refined visual design for our product
because sites that are “less designed” are more successful. To a
certain degree, there’s some truth in that. Sites with confusing navigation
systems and unclear page hierarchies may generate more page views because users
are confused and clicking wherever they can. Sites that use visual design to
make ads look like content may increase their click-through rates and thereby
revenue because users think they are clicking on content when really they just
clicked on an ad. In almost all other instances, however, design is a good
idea.

Dismissing visual design as just a matter of making things pretty or ugly
cuts off your ability to communicate with your customers at the knees. As I
outlined earlier, design is a means to communicate, not mere styling.

Sites like Craiglist and Del.icio.us remain popular on the merits of their
content. But, does their audience enjoy bumping through the site’s awkward
graphics and hard to read text? No, but the personality of the content — It
could be high quality, funny, worthwhile, and more—makes the rest more than
bearable. Would their audience be happier if the personality of the presentation
matched the personality of the content? Of course. They like the content, don’t
they?

Check out part II of this interview.