DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Content May Be King, But Presentation is the Crown Prince

by Peter Boyle

Designing for higher conversions ain’t easy. Most CROs focus on tweaking their headlines, optimizing USPs and crafting compelling CTAs.

Don’t get me wrong, these elements are incredibly important. Copy is after all at the heart of optimization. If you neglect to test and optimize your copy even the prettiest of landing pages won’t save you from a failed campaign.

However, design still plays an integral role in increasing conversions, specifically in capturing attention .

You can spend all your time beefing up your content and crafting killer offers, but if your prospects aren’t immediately interested in what they see, you’ve got little chance of wooing them with your persuasive content.

What Designing for Conversions Isn’t

Designers often have one aim with site design, to create a thing of beauty. They’ll spend hours tweaking site design but, it’s sad to say that beauty isn’t what drives conversions. In fact, you can even go in the opposite direction and have an ugly site that still converts like crazy!

A beautiful design doesn’t hook the attention of your prospects. No, a clear communication of the primary benefits is what hooks prospect’s attention.

So let’s ignore the generic advice all over the web for creating a beautiful piece of content or landing page and instead look at what you should be doing to create a page that converts.

Keep Your Pages Structured

Whether you’re a fan of long form landing pages or short capture forms, structure is incredibly important. Before you write even one word of copy or select a single image for use, you need to know the overall structure and flow for your page.

Too many CROs leave the optimization of design until after launch, stating test data and statistics as a necessity for optimization. Well, they’re half right.

Test data is needed to optimize your page. But you don’t want to half ass your launch with a terrible page. You’ll see poor initial sales and have terrible data to optimize from.

Starting off strong is imperative for a new product or page launch. Not only does it ensure your later optimization efforts are exactly that – optimization and not a full redesign – but it also gives you better test results to work with.

The first step you’ll need to structure your page and figure out the flow of your messaging is to follow the good old AIDA model.

A Visual representation of the AIDA Marketing model

Image Credit

We’ve all heard of AIDA before and it’ll come as no surprise that I’m recommending it here. However, how exactly do the stages of AIDA correspond to the structure of your landing page?

Attention – Capture the attention of your prospects with a killer, relevant headline or USP

Interest – Using a video explainer is an often utilized method for gaining the interest of your prospects.

Desire – Dig a little deeper on the actual offer. Offer a concise list of benefits and features to keep prospects engaged and appeal to their needs. Further these benefits with the use of social proof and reviews.

Action – Finally comes your CTA. If you’ve followed the above steps successfully then asking for a sign up or purchase should seem like the next natural step to your prospects.

The AIDA model certainly helps decide upon the flow of your messaging, but we’re also going to need to look into the specifics of design. We’ll need to figure out whether the visual elements of your AIDA influenced design are going to work well together and create a cohesive flow.

For that, we’ll need the help of a wireframe.

A wireframe is a visual representation of your website. It’s been the go-to planning method for developers and designers for years and should map out in detail what you want to achieve and where you’re going to place elements of your page.

Don’t mistake your wireframe for a full visual mock up though. They’ll be no end visuals and nothing past basic design. Eduardo Esparza from Design and Function offers the best description when he says that wireframes should show how your site works, not how it will look.

Eduardo goes on to outline a great method for taking your wireframe from basic planning to preliminary layout and finally ending with filling in the detail (which can be seen below).

How to fill in the details for your conversion wireframe structure

Structure’s a huge part of creating successful landing pages. It’s kind of the equivalent of setting a hypothesis and keeps the rest of your design optimization campaign on track.

Mapping out a structure helps walk your prospect through the stages of AIDA and take them through an experience which should end in them taking the action you want them to.

Typography

If your copy’s difficult to read then it’s completely worthless.

For most of us, typography optimization extends no further than choosing a popular, easy to read font. It’s a good start, but this oversimplification overlooks many of the small tweaks that can help squeeze those extra conversions we’re all after.

Without going into the complexities of typography (if you’d like the details read this killer piece by Ankit Oberoi over on KISSmetrics), I’ll explain how changing the way your font appears can help increase the effectiveness of your sales and landing pages.

Perception

It’s strange to think that the simple change of a font can alter the way we perceive certain information.

One of the primary ways you can take advantage of this is through similarity, or in this case, the absence thereof.

As CROs we’re always harping on about how to make your CTAs pop out from the page or how to bring enough attention to the key benefits. More often than not, the go-to solution is to create contrasting button colors or through the smart use of white space and bullet points.

These are good points, however, why are we getting overly complicated? We could just as easily be focusing on a simple method of drawing attention – a change of font.

If every element on your landing page is visually similar and written in the same font, surely the one sentence or CTA that differs from the norm is going to stick out like a sore thumb.

It’s a far more subtle method for bringing key elements into the foreground of your sales page and can work to great effect however, it’s not without its risks.

Despite my bashing simple font selection in the opening of this section, making the right choice is pretty important and can change the way prospects engage with your copy.

A study conducted by Errol Morris in The New York Times discovered that readers responded differently to the same text when it was presented in different fonts. Below is a screen cap of an infographic Neil Patel put together for Quicksprout on typography’s effect on perception.

How typography influence perception in conversion optimization

If you want to be taken seriously and get prospects on your side, steer clear of Comic Sans (as if I needed to tell you that!) and Helvetica.

Readability

It’s a sad fact that the average attention span is now down to a shockingly low 8.5 seconds.

This incredibly short attention span has CROs chasing every possible idea in their search for smart ways to hook attention in under 10 seconds.

Sure there are lots of smart tactics to be employed, but at the base of it all you need your content to be easily scannable. If your prospect struggles to read what you’ve written, they won’t be able to identify key benefits and they’ll leave your site .

What’s the best way to make text easily readable? Choose an easy to scan font. Once again Neil Patel’s infographic comes to the rescue and highlights the font findings of a Usability News study conducted by Michael Bernard.

How font size effects user engagement

According to that study, Arial size 14 seems to be the smartest all round choice.

Emotional Connection

Something rarely considered in the selection of font is how it resonates with your audience.

Just as colors can elicit certain emotional responses, so too can fonts. Typography isn’t just a method for making your text readable, a good font choice can build upon your brand image and appeal to your target audience’s values.

It’s why you’ll find brands aimed at a younger audience using more vibrant, expressive fonts while brands aimed at an older or more professional audience will err on the side of tradition.

the psychology behind typography

Choose a font that best overlaps the area where your brands personality meets your audience’s values for a stronger emotional connection and a solid lift in conversions.

The Color Conundrum

Experimenting with the color scheme of your site is one of the more enjoyable optimization tests to run. You’re not dealing with the complexities of CTA copy or pulling your hair out in the search for the perfect headline formula. No, playing around with the overall feel of your site is definitely more fun.

One of the go to color optimization clichés is that an orange CTA button will always convert better, because you know… Amazon uses it.

All of that’s rubbish in my opinion. There is no one color that converts at a higher rate across the board and you shouldn’t be relying on psychological trickery for conversion increase. As with every other element of A/B testing, color choice is about understanding what resonates with your particular audience and running proper tests to find the optimal variant.

Don’t test single colors to see what brings a higher conversion, look at combinations of colors. You’re not looking for combinations of pastel shades that give a more sophisticated or elegant feel to your site, you want to find the most complimentary contrast of colors.

Complimentary colors don’t help conversions, in fact they harm them. When key elements and CTAs are hard to identify your conversion rate is going to suffer. To increase conversions, you want to find contrasting colors to make convincing elements and CTAs jump off the page. 

Piotr Koczorowski of Usability Tools conducted a great study on contrast vs. color. Piotr set out to map the clicking behavior of participants across two separate pages, one with complimentary colors, one with contrasting colors.

The results are pretty self-explanatory.

Why you should focus on contrast not colour in CRO

How contrast works better than colour in conversions

In the original test the primary CTA won by a very small margin. Compare this to the second test where 75% of users clicked that CTA and it’s clear to see that contrast is the clear winner when it comes to color selection.

To top it all off, around 68% of participants actually preferred the second test page. Looks as though picking contrasting colors isn’t only good for CTR but also helps improve design.

When choosing colors avoid making your selection based on wishy-washy psychological trickery or the belief that it will present a certain image. Choose a primary color scheme and build your persuasive elements around contrasting shades to help them stand out and gather more attention.

Conclusion

Content is always going to be king, however, good content only works when your site design is optimized to highlight its key elements.

Don’t make the mistake of designing your site purely by aesthetic standards. Designing for conversions requires a completely different approach to designing an aesthetically pleasing page.

Map out a wireframe based on the AIDA model, choose the right typography and select contrasting colors and you’ve nailed the three basic conversion design elements many sites overlook. And most importantly, TEST! Don’t use this article to design your final landing page or site. Use it to develop your testing hypothesis.

This is admittedly a brief overview of designing for conversions. I’d love to hear what you guys think are key design features or elements that should be considered when designing landing or sales pages.

Read more Crazy Egg articles by Pete Boyle

5 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Peter Boyle

Pete Boyle is a conversion focused copywriter and marketing consultant. He helps brands increase their revenue through compelling copy and smart email campaigns. Click here to connect with Pete or download one of his free marketing guides.

5 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. Dee Blevins says:
    September 18, 2015 at 11:34 am

    Thank you for a well written piece that focused not just on “selling” or “converting” more, but on the psychology behind what drives people to act in all situations, but specifically how it ties to graphic design. Even before websites existed, these key design rules were taught to advertising students everywhere. There is no substitute for good design which includes beautiful typography, well thought-out font choices, and color schemes that drive consumers to act. Very helpful and relevant!

    • September 23, 2015 at 5:08 am

      You’re welcome Dee, I’m happy you enjoyed the article.

      Design has always played an important part in persuasion and compelling people to act in a certain way.

      As you’ve mentioned, typography, font choice and overall layout played an important part in commerce before the internet came around. Pick up any book on advertising from the print era and you’ll find huge sections dedicated to design advice.

      We need to remember that design choices are important and not focus on the seeming small changes and perceived easy wins of the internet era.

  2. Pablo says:
    September 18, 2015 at 8:06 am

    Great article! Totally agree that how you present your content is as important as the content.

    • September 23, 2015 at 5:03 am

      Thanks Pablo,

      Glad you enjoyed the article.

      You’re right in saying that presentation and copy go hand in hand. One without the other is like bread without butter!

  3. Rintu Biswas says:
    September 17, 2015 at 11:25 pm

    If I submit a disavow request to Google to ignore poor backlinks to my site, then is there any way to know Google has accepted my request or not?

    How to know my disavow request gets approved by google? Give me the proper solution. Thanks

Show Me My Heatmap

To capture data, @blueearth recommends website heatmaps #CrushinItMN

blueearth

@blueearth

What makes people leave your website?