Why Is Visual Design Important in UX?
A lot of people, even a lot of designers, write off visual design as “making something pretty.” Frankly, I’ve been guilty of this myself. Meanwhile, companies like Google and Facebook have made fortunes while keeping their visual design so spare as to be almost non-existent. So you may reasonably wonder, why is visual design important to my startup or new product, and why should I bother spending time and resources on it?But visual design doesn’t just make things pretty. It’s instrumental in a lot of ways, including:
- Enhancing your information design
- Reinforcing desired user actions
- Setting the tone for your product
Visuals Enhance Information Design
Sure, Facebook has a very simple, blue, gray, and white look. That’s because Facebook is all about delivering an enormous amount of content and information to you quickly. A bright, distracting, or cluttered interface would make it hard to read large numbers of news items and could clash with user-posted pictures.Same with Google. Google, at least the main search product, is about getting you to type in a search term and then giving you access to everything on the internet that matches it. That’s a lot of information to process. Sites that are about delivering large quantities of information need to keep their visual design simple. But a simple design doesn’t mean no visual design at all.
Reinforcing Desired User Actions
There is something that you want your users to do with your product. Maybe you want them to buy books or make new friends or search for information. Whatever it is, good visual design can reinforce that behavior by drawing attention to the appropriate parts of the screens.Consider call to action buttons. Something as simple as making them look clickable and noticeable can have a huge impact on whether users actually follow through on the desired action. This is one of those gray areas where visual design and interaction design converge. A bad visual design can render a perfectly decent interaction much harder to notice and perform by hiding important screen elements. Conversely, a good visual design can improve the interaction by making important things seem more important.
Visuals Set the Tone
One company I worked with had a very distinctive visual design. It featured cartoony characters with giant heads and oversized anime eyes. The colors were bright and cheerful. When we ran usability tests with new people, their first response to the question, “Who is this site for?” was “pre-teens.” Many responded, “Oh, my 12 year old cousin would love this.” It was very clear that these users did not think that the product was for them.Unfortunately, the product WAS for them. A decent percentage of the users and revenue came from adults, but too many people in that age range felt that the product was for children based on their first impressions of the site, and would leave immediately rather than diving in and starting to use it. Luckily, the solution to this was simple. A sophisticated makeover of the visual design, especially concentrating on the landing pages, registration, and first few minutes of use, dramatically improved the response of adult users and increased the percentage who actually started using the product.
Depending on your industry and market, your company may be trying to convey trustworthiness, edginess, playfulness, warmth, or hundreds of other emotions to your users. Would you put your money at a bank that looked like a surf shop or a fast food restaurant? You probably wouldn’t even go inside. When a user first comes to your site or opens your product, they’re making an almost instantaneous decision about whether this product is what they’re looking for. Visual design plays a huge role in that decision making process.
Why I Put Off Visual Design
Just because it’s incredibly important, doesn’t mean that I spend huge amounts of time on visual design early in the process. In fact, I tend to nail down the vast majority of the interaction design before moving on to applying a good visual design. I do this for several reasons:- It is much faster for me to iterate on something if I don't have to worry about making it pixel perfect. When I get feedback from a user test or a beta customer, simple, grayscale wireframes can be changed quickly and without too much regard for things like margins and font sizes, while fully designed visual mockups can take much longer to fix.
- Remember how I said that visual design sets the tone almost instantly for a user? Because of this, visual design can screw up interaction testing. If your tester has an immediate positive or negative reaction to the visuals, you're going to get different information than you would if they could effectively ignore the visuals. Grayscale wireframes or Balsamiq-style sketches make it much easier to ignore the look and concentrate on the interactions.
- I am going to want to make several versions of visual design to test independently. That's easier for a visual designer to do if they have a reasonably nailed down version of the wireframes to work from. The last thing you want is to try to test various different versions of visual design along with different versions of interaction design, since it makes it much tougher to know which element is affecting the test results.
- Once some of the basic interactions are scoped, engineering can get to work on the product and then apply a visual design later. This means they’re not waiting around for me to get both the interactions and the visual design done upfront. Engineering, interaction design, and visual design can all be happening in parallel (provided you have at least three different people to work on the different areas).
- And, of course, if it’s a brand new product, your visual design is actually going to be significantly less important to highly motivated early adopters using a beta product than it will be once you’re trying to attract a larger, more mainstream market. Early adopters forgive a lot, but they’re more likely to forgive ugly than hard to use, so concentrate on making it easy and useful first, and make it pretty later.