Design + Copy: The Sum Is Greater Than the Parts
Sometimes the sum is greater than the parts.
This is one of those times.
Yes, good copy and a driving message are important to conversions. But your website’s design can make or break that copy.
People are visual, and knowing that, you can tap into some powerful techniques that combine a strong message with aesthetics to grab people by the hand and walk them toward your Buy button.
Here are six design tricks that do more than just make your website pretty. They increase engagement and conversion too.
Having seductive sales copy is important, sure. But where you place that copy is just as important.
Any information presented above the fold will get noticed. Anything below the fold may get noticed — but then again, it may not.
“Above the fold” is a term borrowed from newspaper publishers, referring to the information that shows up when the folded newspaper sits in a stack, ready for purchase.
It’s the information that people can see without picking up the newspaper — or on Web, the information visible without scrolling.
According to the Nielsen Norman Group,
“Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.”
In short, your most important message needs to be at the top of the page.
Here’s how LinkedUniversity does it:
As soon as the page opens, you see a strong sales message, “The definitive training program for building your business on LinkedIn,” and a video/opt-in form combo.
The purpose of the page is to get visitors to opt in, so visitors are asked to do that right away.
Notice that there’s no elaborate sales copy to persuade people to join. The headline says it all.
Notice also that this is a home page, so the standard home-page stuff is there too. It’s just pushed below the fold so no one is distracted by it.
See what I mean.
At the bottom of the page, there are two links to start your explorations of the website, but there’s little else to distract you from the video and opt-in.
First, consider the top of the Web page as your highest value real estate.
Don’t fill that space with fluff. Put something there that grabs people’s attention. Give them a chance to respond right away, or give them something that makes them want to keep reading.
Second, make page elements below the fold easy to scan. Research has shown that once people begin scrolling, they usually scan rather than read.
In order to increase response rates, you need to make it easy for people to see buttons and calls to action, and you need to make it easy to respond.
That’s where contrast comes in. While you can create contrast with placement, subject matter, clarity, and more, it’s easiest to use color.
Stark differences tend to create focal points. So when designing buttons and other important page elements, use light-dark combinations and contrasting colors to make them stand out.
Look at the screen shots from LinkedUniversity above.
The overall page color is white and blue. Everything on the page blends with these colors — the text, the text boxes, even the two “learn more” buttons at the bottom of the page.
They don’t draw the eye because they aren’t supposed to.
Meanwhile, in the banner, beside the video, and after the testimonial, you have yellow buttons that stand out like neon signs.
The call to action varies slightly — “join now” and “get started” — but there’s no doubt these are the focus of the page. The stark color contrast is an unmistakable visual clue.
On a side note, you also need to have good contrast between the button color and the button’s text color. LinkedInUniversity uses black text on yellow buttons for an easy-to-read combination.
If you need help figuring out the best combination for your Web page, use this Color Contrast Checker from WebAim. As you can see, black text on a yellow button passes with flying, um, colors
Generally, when items on a page vary in size, bigger items appear to have greater importance. Can you guess what the feature articles are on this National Geographic screen shot?
It’s easy to tell which links are being featured simply by comparing the size of the graphics.
Use bold colors to make your buttons stand out on the page. And make important page elements bigger.
The undisputed leader in white-space design is Apple. As you can see, they keep it as simple as possible.
But can you make good use of white space with a busier layout? Yes.
Take a look at Amazon’s home page:
Busy? Definitely. But there’s an underlying structure to this page that keeps it from feeling chaotic — and plenty of white space to give you a clean background while separating one element from another.
As a general rule, when you want a design element or message to stand out, put more padding around it.
Give your design elements breathing space. It makes it easier for first-time visitors to see what’s important, and to read and understand your message.
When someone arrives at a website for the first time, they scan the page to understand what’s there and how it’s organized.
Essentially, they’re looking for a hierarchy of information. They know that information at the top of the page is most important and that bigger items need to be looked at first.
You can use a similar hierarchy with fonts, so people can easily see the underlying structure of your copy.
Take this page from iTunes:
As you can see, distinct hierarchies can be created simply with font size and style.
Generally, the larger the size of your headlines compared to the rest of your body text, the more attention they get. Then each successive “level” of text is smaller still. So, for instance…
This text has an H2 tag.
And this text has an H3 tag.
H4 is smaller still.
See the hierarchy. It makes it easy for readers to see the structure of the information on the page simply by looking at the size of the font.
Bold typefaces also draw the eye’s attention. So if you have an important point that you think will be lost in the middle of a paragraph or page, add weight: make it bold.
Be careful not to overuse this technique, though. Too much bold is the same as too little. A few focal points draw attention. Too many create confusion.
By strategically using placement, contrast, white space and font size, you can direct people to the important elements on your page.
What should get priority treatment?
- Benefit statements
- Call to action
These elements need to be easy to see and easy to respond to. So make them the focal points on your page. Anything that distracts or draws attention from these elements needs to be removed.
A few guidelines
- A sidebar can be very distracting. If you can, let your landing pages stand alone.
- Ads take people off your website. If you want to communicate an important message or make a strong call to action, reduce or remove ads from that page.
- Make your headline a large font in a bold color. Studies have shown that putting the headline in red (or the red family) tends to improve response rates.
- Set your offer apart. Give it an attention-getting subhead. Then place a graphic of the product being offered beside your offer… put it in a text box… or create a bulleted list of the items buyers will get.
- Make your call to action stand out. Put buttons in a bold color that contrasts with your color scheme.
- Make it easy to respond on any device: laptop, tablet or phone. The iPhone Human Interface Guidelines (by Apple) recommend that buttons be 44px by 44px. Windows’ Phone UI Design and Interaction Guide recommends 34px with a minimum touch target size of 26px. Place enough padding around the button to make it easy to select with a finger or thumb.
In general, combine strong design with persuasive copy to get people engaged with your Web pages as soon as possible. By focusing on both, you don’t just get the sum of two disciplines — you can turbocharge your marketing.
Because the sum really is greater than the parts.