Having recently presented my Visual Communication for Web Application Design overview at eBay, Yahoo!, and the BAYCHI/Interaction Designers Group, I’ve gotten a few recurring questions from attendees.
(Looking over the presentation should provide the right amount of context to understand these questions.)
Q: I understand how one could utilize the principles you’ve outlined to completely redesign a Web site or application, but most of my work involves small incremental improvements to an interface and not a full redesign. How I can I incrementally build an effective visual hierarchy and appropriate look and feel for my application?
A: Though a full redesign may be a better opportunity to establish a visual language for an application, you can move towards effective visual communication incrementally as well. Systems thinking, in both cases, gives you the opportunity to determine how elements should be presented within the context of an application. When adding an element to an application consider how it relates to the whole:
- Is it more or less important than other elements in the application?
- Is it very similar or very different from other elements in the application?
- Does it logically fit within specific content or actions?
- How does it relate to the overall goals and vision of the application?
Documenting these relationships provides an effective way to begin building a visual language that guides user action and understanding. Applying that language each time you make incremental changes gets you closer to more focused and thereby effective visual communication. In short, gradually build up a “style guide” informed by the relationships between elements, their hierarchy, and the goals of the application. Then continue to apply the guide as you make incremental changes.
Q: Do you have any advice on how I can communicate the design decisions I’ve made to stakeholders who all seem to have an opinion about my designs? How can I convince people this is the right design solution?
A: From my experience there are only two things you need to do. Understand both the business and user goals of the application. Then use the language of design to explain how you are meeting those goals.
Taking the time up front to really research and understand end users and business needs enables you to speak directly to consumer expectations and stakeholder objectives. You need to know what your design is trying to accomplish: who is it for? What does it do? And why does it matter?
You can then explain how you’ve applied the principles of perception and visual communication to achieve those goals. 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 (achieved through a strong contrast with the background) on this screen.” Outlining how visual design decisions enforce the relationships between content and guide user actions tends to remove the subjectivity inherent in many design reviews.
Q: How do I know if I have the right visual hierarchy in my designs? Do I need to test it?
A: As Jim Leftwich has pointed out: “It is very definitely possible to perceive and extrapolate user needs and develop successful interfaces without extensive user research, if one is adept at understanding generalized patterns.” This applies to visual communication as well. Understanding the foundational principles behind visual design enables you create effective designs without extensive testing.
That said, there is “no such thing as a bad usability test” -you can always learn something. As a result, testing a visual design can yield some valuable insights. However, there are a few guidelines for getting the right data from these types of tests. Asking users “do you like option a or option b?” rarely provides any useful information. Consider instead asking users to provide a few adjectives they’d use to describe the design or ask them to walk through a specific task. This process will help inform whether or not the visual design is effectively supporting user needs.
Q: I’d love to have an effective visual hierarchy on my site but every stakeholder wants their content or feature to be prominently displayed. What can I do?
A: Separate the discussion about hierarchy from the actual visual design. Create an ordered list of all the content and actions on a specific page and work with each stakeholder to prioritize it. If you have any data about the usage or importance (for end users) of the items in the list include it as well. You might even use that data to sort the list. Once you have buy-in on the list- use the language of design (mentioned above) to explain how your design reflects the list’s prioritization. If any stakeholders complain about their visual prominence in the design, offer to revisit the ordering of the list and bring in the rest of the stakeholders that already agreed to the prioritization.