« UI Design is about Compromise | Main | The Elements of Style for Designers »

Friday, 04 August 2006

UIE Interview with Luke W

UIE recently interviewed Luke Wroblewski on the relationship of visual design and usability.

Part 1 tidbits


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.

many usability findings only focus on what happened and don't delve into why:

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.

"ugly design" of Craigslist, MySpace, etc.:

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?

Part 2 tidbits

visual hierarchy:

Too often, everything on a Web page looks the same and users don’t know where to start. Conversely, everything looks very different and users end up bouncing between elements that are competing for their attention. An effective hierarchy employs just enough meaningful differentiation to walk users through the unique content and actions on a page in a purposeful order.

continuous exploration:

You mentioned sites like Craigslist and MySpace [in Part I] and I think you’ll see a lot less visual hierarchy there because the predominate user action is continuous exploration. Little visual hierarchy however would be a very bad thing for a task-specific site. In that case, using hierarchy to communicate how to accomplish a task clearly is indispensable. The fluid, flattened, exploratory nature of MySpace would quickly become aggravating when you are trying to book a flight.


Other rich interactions that technologies like Ajax enable, however, don’t just show up when they are useful. In fact, actions like right-click and drag-and-drop aren’t visible at all and are not expected within the Web browser. In these instances, we’ve increased the need for effective visual communication because through the presentation of the interface, we have to tell users these features are available and how to use them.

Currently, many sites do this through Help text that explains what’s possible. Moving forward though, I think we’ll see more conventions emerge that use visual indicators to better communicate the availability of rich interactions.

Consider the shopping cart icon. No e-commerce sites explain what that indicates with inline Help text anymore. Over time, it becomes part of the vernacular online.


I recommend having a full time interface, interaction, or Web designer—call them what you will—who is either capable of developing the visual design for a Web site or versed enough in the principles behind visual design to work with a visual designer. I say this because, in most cases, Web sites have moved beyond the simple navigation of information.

Web applications, instead, enable people to communicate with each other, to get work done, or to create and share content. These interactions require a holistic approach to task flows, information architecture, and more. Your core design talent needs to have the ability to see the big picture and translate it to a series of Web pages and/or UI elements. If that person can represent the big picture visually—all the better. If not, they need to communicate with a visual designer that can.


TrackBack URL for this entry:

Listed below are links to weblogs that reference UIE Interview with Luke W:


The comments to this entry are closed.