This is an excerpt from the Interaction Design Best Practices ebook, written by Jerry Cao, Kamil Zięba, Matt Ellis, and originally published on UXPin.com.
Visual Direction in Interaction Design: How Appearance Affects Interaction
We don’t want to undercut the significance of words, but we don’t want to downplay visuals, either. Both are equally important elements of interaction design. Words are interactions, but the visuals (like icons, menus, graphics, etc.) are what users actually interact with.
While some usability experts might cite Craigslist or even Amazon as examples of ugly but usable (and popular) sites, there’s no doubt that aesthetics serve a function. Emotion is key to the user experience: websites with nice visuals relax users and improve credibility and usability. Considering the short attention span of most users, perception is oftentimes reality: if the visuals are terrible, users won’t bother diving deeper into your interaction design.
We’ll examine the importance of vision as it relates to interactions and how to ensure clear orientation, navigation, and consistency.
Respect the Dominance of Vision
Let’s start with a demonstration. Take a look at the word below:
Clearly, we all know which color the word “yellow” represents. But when most people read the above, they likely comprehend only red. The look of the typeface supersedes the actual meaning of word.
As humans, vision is our dominant sense. While other animals rely more on hearing and smell, we are sight-driven creatures. As David McCandless, Data Journalist and Infographic Expert, explains in a compelling TED Talk, we use all of our senses, but most of our brainpower goes into sight — though we may be hardly aware of it. Using the graphic below, he describes it with a computer analogy:
Your sense of sight is the fastest. It has the same bandwidth as a computer network. Then you have touch, which is about the speed of a USB key. And then you have hearing and smell, which has the throughput of a hard disk. And then you have poor old taste, which is like barely the throughput of a pocket calculator. And that little square in the corner, a naught .7 percent, that’s the amount we’re actually aware of. So a lot of your vision — the bulk of it is visual, and it’s pouring in — it’s unconscious.
But what does that mean for you with regards to interaction design? It means that every visual decision you make for your product will have an enormous impact on the interaction, even if only subconscious.
Stephen P. Anderson, Product Design Consultant, points out that visuals will affect more than the experience, they’ll also affect the user’s behavior. This means that a good visual design can improve sales, increase signups and conversions, and encourage certain user behaviors. Take a look at the two checkout forms below:
Keeping in mind that one of the goals of interaction design is to make the user think as little as possible, which would you guess is more conducive to a sale? Which is more visually pleasing?
The top sample seems to repulse users with its claustrophobic spacing and overload of text, while the bottom sample is clear, sleek, and feels manageable thanks to its 3-step process (even though the user will more-or-less enter the same data). Because interaction design is all about creating things that people actually want to use, attractive things are more desirable and therefore work better.
But more than just inviting interaction, smart aesthetic design also provides an extra layer of understanding. If you look at the Old Town Spice Shop example above, you can see how the cabinet layout of the site immediately suggests the company’s purpose and spice products. While you can debate whether users would see the cabinet first or the words like “Spices” and “Extracts” first, there’s no doubt that the two work in harmony.
Provide Clear Visual Orientation & Navigation
Users browsing the web are not unlike nomads. People have a general sense of where they want to go, but still need some direction and cues. The way they do it is by creating mental maps, and since we just established that humans are visual creatures, we’re going to need a few visual markers to find our way.
In a way, your navigation needs to act like a GPS. Users need to know their current location, what routes are possible, and what the next steps should be. Breadcrumbs are the most explicit way of satisfying all three requirements. A common UI pattern like its shown from Newegg below, this treatment leaves a clear visual trail for users to track their visit.
But breadcrumbs must be treated as a backup option for users, because they’re not a visually intuitive method of clicking between pages. They’re mostly used in sites with complex hierarchies, such as e-commerce sites, and aren’t required for simpler sites. When in doubt, refer back to your site map and see if adding breadcrumbs would improve usability or just add clutter.
Signifying words, breadcrumbs, links — in addition to menus, search fields, and clickable icons — are all sight-based tools in your design toolbox that help you create a sense of orientation and navigation. When it comes to the primary navigation, you need to make a strong visual impression.
As you can see below, Skullcandy’s Supreme Sound site is a great example of a visual-based navigation system. Not only does it have a simple and understandable vertical menu on the right side of the screen, but the icons themselves are enticing pictures. The verticalmenu highlights in red the current location (providing orientation), while the horizontal menu includes dropdowns for further exploration (providing navigation). If I’m interacting with the content, the blue calls-to-action also provide unmissable next steps (thanks to their standout color).
As you can see above, orientation and navigation are not mutually exclusive. Better orientation is usually linked to better navigation.
If you’d like to learn more about navigation best practices, check out our free ebook Web UI Design Best Practices, and this 5-part series on simplifying navigation for interaction design.
Ensure Visual Consistency
Consistency is important in all aspects of interaction design, not just visuals. However, inconsistencies in visuals are glaring (just check out the The World’s Worst Website Ever to get a vision of design hell).
Consistency creates a sense of logic in how your site is designed and arranged, which creates a more gratifying experience (and we all know happy users are returning users). People prefer consistency because, as we mentioned before, it improves predictability (which increases learnability).
And when your interface is easier to learn, it’s also more usable. People also don’t like unpleasant surprises, as the Principle of Least Astonishment states:
When two elements of an interface conflict or are ambiguous, the behavior should be that which will least surprise the human user.
The trouble with inconsistency is that it increases the “cognitive load.” As Kathryn Whitenton, UX Specialist at the Nielson Norman Group, explains in a blog post on the topic, cognitive load is how much the users have to think when using a product.
Every inconsistency forces the user to stop and process what the difference means, why it’s different, and how it affects their behavior. Therefore, the less inconsistencies, the smoother the interactions, and the better the experience.
As you can see in the above left example of StackOverflow, consistency applies to visuals and copy. The icon says Choose File, yet the copy says “click browse.” On the other hand, Imgur demonstrates consistency by highlighting action words like browse, paste, and drag and drop in green.
Radio buttons in one section of an interface that allow for a single selection shouldn’t allow multiple selections in other sections. This also extends to copy as well, since if you call it “Save” in one section, you shouldn’t call it “Store” in another. And as designer Timothy Smith suggests, if a picture opens up as a lightbox, it shouldn’t open as a new tab elsewhere. Base your interface decisions on the desired user behaviors.
Because inconsistencies are such a consistent problem, the two best strategies to combat them are following UI design patterns and using a style guide.
1. Use UI Design Patterns as a Baseline
Think of UI patterns as design best practices that are specific to use cases. Since users are already familiar with design patterns, their use reduces the learning curve for your interface. Common UI patterns include carousels, related links, slideshows… the list goes on (as you can see by this site dedicated to cataloging them).
For instance, Netflix employs a “Related Content” UI pattern to help users find other movies or shows they might like. Because the content is intelligently generated, the interaction with the user feels more like a person suggesting something helpful. This isn’t a groundbreaking design, but it is a quick and effective solution that makes your interface feel alive.
Of course, UI patterns aren’t just plug-and-play templates, so you should still customize them based on the look and feel of your site. To find the right patterns for your product, check out any number of pattern libraries, where you can browse patterns by their category, like “navigation” or “input.” This year, we have released 2 separate catalogues of UI patterns (along with analysis of use cases as demonstrated by Fortune 500 companies): Web UI Design Patterns 2014 and Mobile UI Design Patterns 2014.
2. Create Quick Style Guides
While UI patterns help improve familiarity, style guides ensure site-wide consistency. Style guides are manuals that list your product’s specific preferences for any area that could be hard to remember — things like the size and font for all site content, color gradients for secondary versus primary navigation, the behavior of buttons upon clicking, etc.
At UXPin, we create our style guides as we update our site. This helps eliminate extra work down the line because we can just add new screenshots with technical details to our internal company wiki. As we described in The Guide to Mockups, this “chop and paste” method works perfectly for lean style guides that can be shared with the whole company.
We discuss style guides at length in our Web UI Design Best Practices, including how to make one, and what they include.
For more examples of style guides, check out these great resources:
To learn more about consistency in interaction design, check out this overview of creating consistency in all areas of UX and this explanation of system, platform, and real-world consistency.
Takeaway
When people are online, they say they’re “looking” at a website, not “interacting” with one, even though the latter is more accurate. We rely heavily on sight, and visuals guide us in the creation of our opinions, our solutions to problems, and what we believe is our best course of action. Because interaction design is so closely linked to the user experience, using visuals to create the best UX will indirectly but assuredly lead to better interactions.
