Chapter 10. The Right Amount of Visual Design
Learn how much visual design you really need.
Understand how visual design can affect the usability of your product.
Learn some tricks for getting a good enough visual design without spending a fortune on an expensive designer.
We’ve spent a lot of time talking about design, but you’ll notice that I haven’t really brought up the one thing that most people consider to be “design.” In this chapter, we’ll finally talk about visual design and how it relates to the user experience of your product.
If one more person confuses visual design and interaction design, I’m going to cry. I can’t tell you how many times I’ve asked people about their UX strategy, and they’ve said, “Oh, we have someone who knows Photoshop.”
Let’s go over this one more time for the folks who are still confused: Interaction design and visual design are not interchangeable. Visual design is how something looks. Interaction design is how something works.
Visual design is a part of general user experience design, but user experience design doesn’t necessarily have anything to do with visual design.
Let’s look at a few examples:
The exact copy that is shown on a button is a UX question.
The color of a button and whether it has a gradient is a visual design question.
How many steps a checkout flow has and which pieces of the flow go on which pages are UX questions.
The font sizes and colors on the form labels are visual design questions.
As you can imagine, the color of a button can have a large impact on user behavior. However, you shouldn’t start a user experience design with the color of a button, because that’s leaving out all sorts of important elements of usability, like whether the button should exist in the first place.
In other words, visual design can be a critical part of the user experience, and you shouldn’t neglect it. You just shouldn’t do it first. Remember, form follows function for a reason. So let’s explore how you can get a great visual design in a Lean way.
Why Is Visual Design Important in UX?
I was at a conference recently, and one person asked how important visual design is in user experience, while another asked how much time I spend on visual design early in the design process. The answers to those two questions are “Incredibly important” and “Not much.”
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 nonexistent.
So you may reasonably wonder, why is visual design important to your startup or new product, and why should you 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 the following:
Enhancing your information design
Reinforcing desired user actions
Setting the tone for your product
Visuals Enhance Information Design
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 the very important 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 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 hide important screen elements, rendering a perfectly decent interaction much harder to notice and perform. Conversely, a good visual design can improve the interaction by making important things seem more important.
Take a look at some of your favorite fashion- or food-related sites. Notice how the visual design tends to favor large images of beautiful products or meals while the rest of the design is kept relatively simple? That’s a conscious visual design choice—one that draws attention to the most important parts of the product.
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. Adults were far more likely than children to spend money on the product, 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 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 in 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, he’s making an almost instantaneous decision about whether this product is what he’s 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 she 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 he has 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 up front. 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 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.
How Much Visual Design Do YOU Need?
Lean UX has a well-deserved reputation for focusing on things that convert well over things that look good. In other words, if you’ve got a gorgeous new redesign that everybody loves the look of but that decreases your sales by 20%, Lean UX is going to insist that you change that gorgeous visual design to something that doesn’t lose you money.
And that makes perfect sense. You’re running a business, not a museum. The most gorgeous visual design in the world isn’t worth what you’re paying your designer if it doesn’t improve conversion.
That said, Lean UX does not require that your product be ugly. The truth is that some types of products require a much higher level of visual design than others in order to convert well. You need to keep this in mind when figuring out how much effort to put into your visuals.
Let’s say you’ve got a product that solves a severe problem for general contractors. Imagine that you don’t have any serious competition in this particular space, and you’re selling directly to the contractors with a dedicated sales force. Now let’s say instead that you’re creating a flash sale site for extremely upscale handbags. You’re relying on social sharing to drive customer acquisition.
Which product do you think is going to need a higher quality visual design?
You see, good visual design can improve trust and encourage interaction. Better looking products can make people who stumble across them feel safer and more comfortable interacting with them. If you release some sort of high-price-point e-commerce site with a cheesy visual design, you’re not going to move a lot of handbags, mostly because consumers in this space have a huge number of choices, and they expect a certain level of visual appeal.
On the other hand, visual design often has very little to do with purchasing decisions for complex enterprise products that solve serious business problems. In those cases, users are more likely to buy products based on how much they benefit the business. The vast majority of businesses would rather buy something that they think will save them money instead of something they think is pretty.
Is this the go-ahead to make your enterprise software hideous? Not really. It’s important to realize that the line between enterprise products and consumer products is constantly blurring. After all, those corporate folks who are staring at your ugly product at work are playing with their iPads at home.
People are getting used to products that are uncluttered and easy to use. Even business users almost never expect to need a user manual these days. But when a product solves a serious problem for somebody that they simply can’t get solved anywhere else, visual design becomes far less important.
As with any changes you’re making to your product, when you spend time and money on visual design, you’re trading off other things you’d be able to build. You have to figure out how much of a return on your investment you’re getting.
In the case of a high-end flash sale site, the return on a sophisticated visual design can be quite high if it helps instill trust and encourages people to make a purchase. In the case of an enterprise product, or really any product that solves a serious problem for people that they can’t get solved in any other way, the return may simply not be there.
As with all design decisions, you need to make sure you’re testing as well as you can so that you can truly understand what sort of return you’re getting for your visual design dollar.
Using Visual Design to Enhance Usability
A big part of any user experience design is figuring out where to put stuff. This may sound obvious, but it’s best to put stuff where people are most likely to use it. That means associating calls-to-action with the thing that is being acted upon.
Here’s an example you may have considered: Where do you put a buy button on a page? Well, when a user is trying to decide whether or not to buy something, which pieces of information is the user most likely to need? He definitely needs to know how much he’s paying for the item. He might need pictures of the item. He almost certainly needs to know the name of the item and perhaps a short description.
Considering those needs, the buy button should probably go near those things on the page. It should even go in a defined visual area with just those things. Here’s the hard part: It needs to go near those things even if it looks better someplace else.
Look, I’m all for having a nice visual design. I believe that a page should be balanced and pretty and have a reasonable amount of white space and all that. But if one element of your gorgeous visual design has separated your buy button from the information your user needs in order to decide to buy, then your gorgeous visual design is costing you more money than you think.
This isn’t just true for buy buttons; it’s true anytime the user has to make a decision. The call-to-action to make the decision must be visually associated with any information that the user needs to make that decision. Additionally, any information that is not related to the decision should be visually separate.
This also applies to things that aren’t calls-to-action, of course. Related information should all be grouped together, while unrelated information should be somewhere else. It’s just that simple. Oh, and bonus points if you keep all similar items in the same place on every screen of your product so people always know where to look.
The Smartest Visual Design You Can Do
I was speaking with an entrepreneur the other day who told me a relevant story. Apparently, she had spent time on visual polish for a login screen. There were a few things that took a while to implement, but they made the screen look much better. Unfortunately, the next week she had to rip it all out to change the feature, and all that time pushing pixels was wasted.
On the other hand, I’ve heard dozens of people talk about gorgeous and delightful interfaces from products like Path and Mint. Would they have gotten that kind of buzz without spending time on the visual details? Most likely not.
So what does this mean for you? Should you spend time on pixel-perfect screens and delightful visual design? No. And yes.
Here’s what you should do: Spend a little time developing clean, flexible, easy-to-implement visual design standards.
It’s probably not worth your time to fret and sweat over every single pixel on every single new page, mostly because you should always plan on iterating. When you’re a startup, any new feature may be killed or transformed in a week’s time.
If you spend days getting everything lined up beautifully on a product detail page, that could all be blown to hell as soon as you add something like Related Products or Comments.
Many people think that the right answer is to have a grand vision of everything that will eventually go on the page, but things change far too rapidly for this. Imagine that you’ve carefully designed a tabbed interface with just enough room for four tabs. Now imagine that you need to add a fifth tab. I hope you didn’t spend too many hours getting all that spacing exactly right.
What You Should Do Instead
How about spending time on the basics that won’t have to change every time you add a feature?
For example, you could establish standards for things like the following:
An attractive color palette
Font sizes and color standards for headers, subheaders, and body text
Column sizes in grid layouts
A simple and appealing icon set
Standards for things like boxes, gradients, backgrounds, and separators
A flexible header and footer design
Why you should do this
The great thing about having standards like these is that engineers can often combine them with sketches to implement decent-looking screens without having to go through a visual design phase at all.
Also, since these things are reusable and flexible, there’s no wasted effort in creating them. Killing a feature doesn’t make knowing that your H1s should be a certain size and color any less valuable.
The best part is that you save time in a few important ways. First, as I mentioned, you don’t necessarily need to involve a visual designer every time you want to create a new screen.
Second, this sort of approach tends to encourage a much simpler, cleaner, more flexible design, since items need to work in various combinations. And lastly, it tends to keep things more consistent across your product, which means that you’re less likely to have to go back later and do a complete redesign after things have gotten hideously out of whack.
A set of design standards won’t solve all your visual design woes, but it will make developing new features go faster, and you won’t be quite as sad when the new features fail miserably and you have to kill them.
Loosely Related Rant: The Best Visual Design in the World
As I’ve mentioned, I don’t do visual design. It’s not that I don’t think it’s important. I’m just not very good at it.
Even though I can’t produce gorgeous visual designs, just like every other person on the planet I know what sorts of visual design I prefer. I don’t have one particular style that I’m in love with, but I have pretty strong reactions, both positive and negative, to different “looks.”
Recently, I worked with a company that had a visual design I didn’t like. Now, since I’m not a visual designer, I’m not going to speculate on whether it was badly designed or just not to my taste, but I will tell you that when I showed it to many people in Silicon Valley, they didn’t like it either.
In fact, enough people reacted negatively that I stopped showing it to people in the Valley. I even found myself apologizing for it, despite the fact that I didn’t design it, and I don’t love it.
And then I did some user testing on the site. And do you know what? The users loved it. They loved it. It was absolutely fantastic for this particular demographic, which, by the way, had nothing to do with the Silicon Valley CEOs and designers who were horrified by it.
I was showing some wireframes, with the usual disclaimers of “This isn’t how it will look; these are just black-and-white mockups of the final site; we’re not losing the other color scheme.” Despite repeated statements to this effect, users would periodically interrupt the test to volunteer how much they loved the visual design of the site and how they really didn’t want it to change.
Why is this important? It’s a great example of the fact that your visual design should reflect the aesthetic of your target market and not you. Say it with me, “You are not your user.”
Designing a beautiful, elegant, slick site that will appeal to designers, Silicon Valley executives, and Apple users is fantastic...if you’re selling to designers, Silicon Valley executives, or Apple users. That wasn’t the market for this company, so it was smart to build a product that appealed to its own market instead.
Is there such a thing as bad visual design? Sure. I’ve certainly seen visual designs that interfered with usability. Buttons can be too small; calls-to-action can be de-emphasized; screens can be too cluttered; navigation can be hard to find. But just because something isn’t visually appealing to you doesn’t make it a bad visual design. The only people who have to like it are your users.
In your next design meeting, remember this: The best visual design in the world is the one your users love.
Go Do This Now!
Understand what your users expect: Try having a conversation with some of your regular users about some of their favorite products. Ask them why they like the ones they like. You may be surprised how many love really ugly but useful things.
Make a visual standards guide: Try going through your product and listing things like fonts, colors, and button treatments that you’re currently using. Now put this list where everybody who codes can easily access it and ask them to try to reuse visual styles whenever possible.
Prioritize function over form: The next time you find yourself tempted to make something more difficult to use just because it looks better, try stopping and thinking about what that’s really going to do to your key metrics. Will you lose customers because of it? Will you lose money? Is it really worth it?