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

by Joshua Porter

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.

Published here on June 22, 2006.