How Visual Design Makes for Great UX

November 17th, 2015
Published on
November 17th, 2015

In Don Norman’s book, Emotional Design: Why we Love (or Hate) Everyday Things, Norman describes a study in which he discovered “…the degree of [a] system’s aesthetics affected the post-use perceptions of both aesthetics and usability, whereas the degree of actual usability had no such effect.” In other words, visual design has as much of an effect on the overall experience as actual usability.

It doesn’t sound right, the idea that visual design could be as or more important than usability. But it shouldn’t surprise us. Humans are attracted to things and people they find aesthetically pleasing, to the point that studies have shown that both adults and children are more likely to trust someone they find attractive. The same theory seems to be true of apps and sites: people are more likely to give an attractive application the benefit of the doubt.

In this article we’ll look at why people prefer attractive interfaces, what it says about us as humans, and how we as UX practitioners can use this knowledge to create better user experiences.

What is attraction?

Before we discuss aesthetics in UX, there’s a question we need to answer. What does it mean for a thing to be objectively attractive? It is, quite literally, a question for the ages. Philosophers going as far back as Pythagoras have asked what beauty is, with Pythagorean followers determining that beauty is “a manifestation of harmonious, mathematical relations such as the golden section.” Many mathematician philosophers have since attempted to quantify beauty.

Photo of an eye, with the words Beauty is in the Eye of the Beholder

Voltaire, on the other hand, argued that beauty is impossible to define, perhaps giving rise to the statement “beauty is in the eye of the beholder.” Empiricists follow this belief, seeing beauty as akin to pleasure, and as reflective of the person who sees the beauty as the thing that is beautiful.

There are scientists who believe that the things we find aesthetically pleasing are those that are healthiest for us. Thus, illness makes people look “unattractive,” and things like berries, which are good for us, are also things we find visually pleasing. There are significant holes in that theory (just think of beautiful poisonous frogs), but there may be merit in it.

Alternatively, some argue that beauty comes from societal and cultural attitudes. Consider the fact that in the United States, most children watch Disney films at a young age, reinforcing the idea that witches and evildoers are ugly, and heroes and heroines are beautiful, but it goes deeper than that. Plenty of fashion items, facial hair trends, even body shapes are deemed attractive now, influenced heavily by the media surrounding us daily; in ten years, those same trends will seem embarrassing or sad. As cultural attitudes change, so does how that culture defines beauty.

Let’s translate that to UX design. There may be certain interactions or site elements that we feel are attractive because we associate them with usability. At the same time, there are web trends and visual assets that may seem attractive now, but won’t hold the same pull in a few months or years. For example, there was a time that comic sans was the font of choice, and flash splash pages were a symbol of a well-designed site.

Visual Design in UX

With the understanding that there is no one “perfectly beautiful” aesthetic, we can now delve into the role of visual design in UX. After all, it’s far more than merely making things pretty.

Usability.gov defines visual design as “strategically implementing images, colors, fonts, and other elements,” in order to enhance a design or interaction, and engage users. Visual design differs from interaction design. Interaction design focuses on the functionality needed to accomplish a task. Visual design engages users by drawing the eye to the correct functionality, prioritizing tasks on a page through size, color, and the use of whitespace, and even increasing brand trust through the use of visual cues.

visualdesign

In some ways, visual design can be thought of as a mix between graphic design and user experience design. With the caveat that these fields are constantly evolving, it’s fair to say that graphic design is typically the design of static images or visuals. User experience design incorporates interaction design and user interface design, thus focusing on communication. Visual design sits right in the middle, incorporating static images and visuals with the purpose of improving communication and usability.

Visual design can actually make a huge difference in the way users see a screen (pun intended). It’s even possible that users have come to expect more from visually attractive screens: better functionality, more usable, and more human.

The Correlation

Luke Wroblewski, Product Director at Google, has spent years exploring the correlations between visual design and user actions. In his 2008 presentation, “Communicating with Visual Hierarchy,” he explains the role of visual design in UX. He states that visual hierarchy, or where we place items on a screen and how we call attention to them, helps us to:

  • communicate messages,
  • illuminate actions, and
  • organize information.

He goes on to share numerous tips and recommendations, all designed to encourage designers to consider where and how they display information. An attractive visual hierarchy is also a usable one.

Screenshot 2015-11-17 08.19.54

Yet 7 years later, there is still little being said about the importance of visual design in user experience work!

Over at StackExchange, the conversation continues. Where one user points out “Does one [really need] research to point out that the look of the UI is, of course, going to affect the experience? Ultimately, humans do judge books by their cover.” Yet another reminds us “If visual design matters then how do you explain the amazing success of Microsoft’s crappy products? I’ve been using Outlook for almost 20 years and it seems to me it’s never the same interface twice (no, I’m not an idiot). And yet it has a consistently high market share!”

What does this mean? Is beauty in the eye of the beholder, and some users find Microsoft to be beautiful? Or is visual design a nice-to-have after all, and not a table stake, as Luke Wroblewski defined it?

One StackExchange user seems to strike the balance: “…visual design affects one or more aspects of the overall user experience. It may not necessarily be the most important part in the context of helping the user achieve their goals, but it is inevitably tied to the perception of the user.” Of course, he adds “”Does good/bad visual design really affect UX?” And I think you’ll agree that the answer is YES, but in what way? That’s the $64,000 question.”

It’s logical to assume that a visually attractive site receives the same advantage as a well dressed person at an interview: the benefit of the doubt. When users come to an unattractive site, if they have a good experience they will still leave happy. However, if there’s a hiccup with an unattractive site, users are more likely to give up quickly. When the site is attractive (whether in a classic way or a currently trendy way), users inherently trust it more, and are willing to give it a second chance.

What it means for UX designers

For UX designers, there are two main takeaways. First, don’t rely on visual design alone to save a bad experience. The most attractive visuals won’t fix features or functionality that is wrong for the user or poorly constructed. Second, don’t ignore visual design! We all have competition, and visual design can be the strategic differentiator that encourages users to value one application over another equally usable one.

Jerry Cao from UXPin has helped with articles on Creative Bloq and Fast Company, both offering lists of rules for visual design. Here’s a best of, for UX designers looking to get started:

  • Stay consistent. Inconsistency will turn even the most beautiful design into an ugly mess. This is one area where feeling leads vision; if a user is confused by the site, that feeling will make a site appear ugly in their eyes.
  • Test visual concepts as well as paper prototypes. As Jerry tells us on Creative Bloq, “when people are online, they say they’re “looking” at a website, not “interacting” with one, even though the latter is more accurate.” We respond strongly to visuals, and branding done well can influence how much we trust and respond to interactions.
  • Don’t get distracted by trends. There’s a reason the little black dress has stayed in fashion over the past 100 years. It’s simple. It’s clean. It’s classic. Equally, a simple, clean, classic visual design will hold up over time, in a way that trends can’t promise. While it’s likely that some aspects of flat design will remain (for example), on the whole it’s likely to leave a lot of apps looking “so 2015” in a few years.

Looking for more visual trends? Let us know on Twitter or in the comments!