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

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.

Last week, we published Part I of Joshua Porter’s interview with Luke. Here’s Part II:

As you have written, web pages make more sense to people if they have a strong page hierarchy, or an easily understandable and logical flow. What techniques do you recommend to designers who are interested in strengthening page hierarchy? Are there times when a strong hierarchy is not desirable?

An effective page hierarchy should be tied to prioritized user needs. The first step I always take when developing a page design is listing out what people want to do and see on that page, which depends on its purpose and context, and then prioritizing it. From that prioritized list, I start at the top and give each element on the list less or equal visual weight as the previous element. This helps ensure there is enough contrast between the way elements are presented on the page.

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.

The only time I’d advise not having a clearly delineated visual hierarchy is when a site’s primary focus is unstructured exploration. In this case, presenting all the content and actions with relatively equal importance encourages continuous exploration. This works great for sites with a web organization (where everything is connected) vs. a more rigid content hierarchy.

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.

How are new design approaches, such as Rich Internet Applications and AJAX, changing how we think about our sites’ visual design? Are there new challenges?

As more dynamic interactions, previously found in only Desktop applications, make their way into Web sites, we need to ensure users know they are available and how they can use them. Interactions that reveal themselves in context, such as auto completion of user input, don’t require very different behavior on the part of users. Just start typing as you usually do and suggestions show up when needed.

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.

When a team is first approaching revitalizing the visual design of an existing site, what are some common pitfalls to avoid?

Personally, when I design a site, my first iteration is often quite heavy graphically. As I put together the visual hierarchy I walked through earlier, I end up with more unique visual treatments than the design actually needs. At that point, it’s a good idea to work through the elements on the page again and bring more visual consistency to related elements.

It’s also very valuable to look at the visual design from the perspective of what is absolutely necessary to communicate. Do you really need a different background, font size, font color, and drop shadow to distinguish that content? Would just a background color suffice? A common tendency I see is over designing, such as employing too many different colors and too many different graphic elements, which ultimately result in visual noise or just design-for-design’s sake.

The process of removing what isn’t needed helps the important stuff get seen. Edward Tufte refers to visual noise as “chart junk.” Anything that isn’t adding value is taking away from it. So I’d say be wary of too many visual elements and look for the fewest possible “words” to communicate what you need.

Do you need a skilled graphic artist to make a difference in the site’s visual design? Are there things anybody can do that will come out looking impressive?

Most people that set out to learn visual design simply fire up Photoshop or a different image editor and start moving colors and images around on the screen. Rarely, do they take the time to learn about the fundamental principles that enable effective visual communication. Starting with understanding how people make sense of what they see is a much better way to build your design vocabulary. People definitely can learn the fundamentals. But, like all crafts, visual design requires practice and experience.

Do you recommend having a visual designer as a full-time staff member? Is it something you can hire out?

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.

When hiring, what should a manager look for in a prospective visual designer?

First would be an awareness of the principles underlying visual design and an ability to explain those principles in action. As I mentioned [in Part I of this interview], being able to speak beyond the subjective aspects of a visual design is an important way to make teams and stakeholders aware of the decisions driving a specific visual treatment.

Second would have to be a broad approach to product design. Yes, aesthetics are a large part of product design. But, they are not the only part. Visual designers with experience in or an understanding of business, engineering, usability, or information architecture can better account for those considerations within a product design. This point is especially important when you consider the visual design of a product is the voice of the interaction design, information architecture, and the business. The more a visual designer can appreciate the goals of these lateral considerations, the better they can “speak” for them to the customer.