[How to] Use Design Principles to Increase Conversions

By | Google+ , February 24th, 2013 in Conversion | 21 comments
design to increase conversions
This image shows the classic design principles of directional cues, whitespace, color contrast and the golden spiral. (Source)

Design rules. Design RULES! A subtle difference, but which would you pay more attention to? My guess is the second, as it’s been crafted (albeit not very subtly) to be more persuasive. Designed.

The image above is all about design, you just need to know what to look for:

  • A directional cue: shows the motion of the butterfly, by way of the trail of stars and bubbles.
  • Whitespace: is shown by the lack of clutter around the subject.
  • Color & contrast: are used to make the butterfly stand out from the dominant hue of the photo.
  • And finally the golden spiral is utilized, where the inferred location of interaction between the subject, and it’s destination, is positioned directly on a dynamic focal point.

With that in mind, I’m taking this post old-school, to show you how fundamental design principles can be used to increase conversions on your landing pages, breaking it down into two important aspects of conversion centered design:

  1. Persuasive design for lead gen forms
  2. Persuasive design for calls-to-action (CTAs)


Part 1. Persuasive Design For Lead Gen Forms

In the first segment we’ll explore the progressive design of a lead gen form, applying the design principles of encapsulation, color & contrast and directional cues to take your form from zero to hero in three simple steps.

If you have a form on your page, it’s likely to be your conversion goal 99% of the time (if not, it shouldn’t be there), so why bury it? Your form should stand out from the rest of the page, and be designed in a way that draws your eye directly to it – in the same way the intro photo drew your attention to the butterfly. Step one of our lead gen form’s evolution is the use of encapsulation:

Step 1: Using Encapsulation to Increase Conversions

encapsulation

The arch forces you to pay attention to the view inside it.

Encapsulation refers to the use of a container to highlight what’s inside. It’s a classic technique used to hijack your visitor’s eye and create a tunnel-vision effect. Think of it like creating a window on your landing page where your CTA is the view. In the example opposite, a circular arch creates a frame for the feature in the distance, preventing your eye from wandering elsewhere in the photo.

Landing page tip: Use strong dynamic shapes to constrain your point of interest. This can be seen in the progression below, where the form goes from being lost in the page, to becoming a focal element by virtue of the encapsulated area.

design to increase conversions encapsulation

Notice how the form stands out more in the version on the right, due to the use of an encapsulation container. This is most often done simply by placing the form in a containing box to provide a contrasting background.

Step 2: Using Color & Contrast to Increase Conversions

increase conversions with color and contrast

The color here is so extreme that you can’t help but pay attention to it. This example also illustrates the contrast of color compared to the muted surrounding area.

Color can be used to create an emotional response from your visitors. Orange, for example, is known to generate positive feelings and as such is a great choice for the color of your CTA. (You can also consider the positive affect of Green for go, or Blue, as the classic ‘click-me’ link colour).

The idea of using color &amp contrast is founded on the concept of “isolation via difference”. An “in your face” approach if you will.

Some say that button color is irrelevant, but this a falsehood. Color contrast is the real problem. Yes, red might not perform better than green under normal circumstances, but if the page is dominantly green, then a red button will naturally attract more attention than a green one.

Landing page tip: Use a single color (with a variety of tones) for your entire landing page – except for the CTA. Make it jump off the page.

design to increase conversions color contrast

Now the form is really starting to pop. Notice how there are two primary areas of the form that are brought forward by the use of color & contrast: the form header and the CTA. the reason for using the same contrasting color for both is to provide a sense of correlation. The header should contain pertinent information that describes what you are getting by submitting the form, and the benefit of doing so. For example: “Download our free ebook to master the art of conversion.” Using the same color as the CTA will naturally allow your eye to follow the trail down to the CTA after reading the contents of the header.

Step 3: Using Directional Cues to Increase Conversions

directional cues to improve conversions

Good luck not following the directional cue here.

As directional cues, arrows are about as subtle as a punch in the face – which is why they work so well. With so little time on your page, guiding the user to the checkout is a smart move.

Arrows let you say, “ignore everything else and pay attention to this please.”

The example opposite shows 3 cues all at once. The arrow is a directional pointer, the man opposite is then firing you right back to the guy with the arrow using his eyes, and finally the upside-down text acts as an interruption that make you stop and stare (and most likely rotate your head to figure out what it says).

Landing page tip: Call attention to your most important page elements by using strangely placed and angled arrows. Tie a sequence of arrows together to define a path for the visitor to follow, ending at your CTA.

design to increase conversions directional cues

Notice the use of two arrows in the example on the right. By taking the previous version and adding some extra visual persuasion to the form, the first arrow brings your attention from the introductory copy to the form header (which as described above, should contain the description of the purpose of your form) and a second arrow from the form header down to the CTA.

» So there we have it. A more effective lead gen form created using the principles of design.

See how I used arrows there?


Part 2. Persuasive Design for CTAs

Your CTA is the second most important element of your landing page – after the headline. After all, nobody will consider clicking your CTA if they weren’t coerced into sticking around to convert by a persuasive headline. Here, as in the form design section above, I like to use what I call the M.I.R.B.O principle – Make It Really Bloody Obivous.

In this second segment I’ll get more specific and focus just on two steps: your CTA design using whitespace, and your CTA copy placement.

Step 1: Using Whitespace to Increase Conversions

designing to improve conversion whitespace

In this example, the blank spaces of the meadow drive your eye to the Pronghorn positioned in the corner.

Whitespace (or more correctly termed blank space) is an area of more or less nothing surrounding an area of importance. The reason I say blank space is that the color of the space isn’t important.

The purpose is to use simple spacial positioning to allow your Call To Action (CTA) to stand out from it’s surroundings and give your eye one (and only one) thing to focus on.

Landing page tip: Give your CTA some breathing room to make it stand out from the rest of your design.

design to increase conversions whitespace

Notice how in the example on the right (pretend the arrows aren’t there – they are for illustrative purposes only), the CTA has much more room to breath and thus stands out more than the cramped version on the left.

Step 2: Using CTA Copy Design & Placement to Increase Conversions

Finally, I want to touch on a technique that utilizes different approaches to CTA copy placement and layout to create a more powerful and descriptive button. You really want your CTA to encompass two concepts. 1) To be short and sweet and 2) to describe exactly what will happen when clicked. Let’s look at some examples:

design to increase conversions cta design

In the first example you can see that if you need a longer description in the CTA copy, you would have to use a large button to accommodate the long button text. Not a bad thing, but not always possible depending on your overall design.

The ideal technique here is to break up the copy into primary and secondary statements, with the secondary copy supporting the primary. Examples two and three show different approaches to this: one inside the button and one outside. The choice is up to you, but they are both more effective than the first example at communicating without breaking your design.


I told you design rules…

– Oli Gardner


About The Author

Photo of Oli Gardner

Co-Founder of Unbounce. Oli has seen more landing pages than anyone on the planet. He is an opinionated writer and international speaker on Conversion Centered Design. You should follow Oli on Twitter
» More blog posts by

Comments

  1. Shell says:

    There are design principles I instinctively use which I know work, but it’s great to having a visual guide to refer back to and I agree with everything you’ve highlighted.

    Great article Oli!

    • Oli Gardner says:

      Thanks Shell – appreciate the comment. The fundamentals of design are often overlooked and replaced with subjective visual design (I’m as guilty as anyone) – but when you take the time to understand why something works the way it does, it can change the way you work. Repetition of smart behaviour in time results in smart design.

  2. Deyson says:

    Thank you, thank you and thank you for such a well written article! :)

    Great advice. I now have some things to keep my busy on my online store! :)

  3. Andy Kuiper says:

    Nice tutorial – thanks :-)

  4. Gerben says:

    Thanks for this nice read! Always try to work with these principles but from time to time an article like this is needed to persuade some team-members.

    • Oli Gardner says:

      Well I hope it helps Gerben. It can be tough to convince people sometimes – that’s the value that testing brings. Or even just a new topic presented in a familiar way.

  5. Rob Kingston says:

    Great list, Oli.

    I almost couldn’t tell when the post had stopped – you’re obviously practicing what you preach under each and every article you post. ;)

    • Oli Gardner says:

      Thanks Rob! Hope you enjoyed it and got something useful from it. I know I often notice something in our own work that needs updating after I write something – a long forgotten landing page or CTA – but yeah, try to eat my own dog food as much as possible :)

  6. Shane Powers says:

    You had me at “golden spiral…dynamic focal point.”

  7. Ravi says:

    Great post Oli, I especially liked the arrows under directional cues. The flow got me anticipating how it would be applied on the landing page example at each point.

    • Oli Gardner says:

      Glad you liked it Ravi. It’s really interesting how you can lead someone around a page using the directional cues – keeps people on the path towards your conversion goal.

  8. I think the biggest turnoff for a lot of people visiting landing pages or lead gen sites is their spamming feeling. If the website is not trying to spam or scam anyone, they NEED good design. Good design reassures the person that everything is alright and the business cares enough to invest time and money in their own site, so you can trust them.

  9. I’m a big fan of simplistic design… great article on better design principles. gives me something to take into account with my upcoming projects.

    Nathan

  10. Veronika says:

    Unfortunately, the corporate design pronciples and furious designers are often the biggest conversion killers :(

  11. I think I have to absorb this tips and put to implementation soon. Thanks.

  12. Kelly Fisher says:

    …I feel like I am last…wait, I am last writing here. I just started this blogging thing, and I appreciate all you have posted…I am following…or trying to follow your articles.
    Thank you for helping me to get going here!

    K

  13. I really like the tips, time to implement it in my website. Thanks Oil!

  14. Leo says:

    CTA’s are the life-blood of my business, but we’ve found it is really important to focus on how the user views our site when creating the CTA. Our revenue model is affiliate marketing, so if people don’t click through and purchase things from our partners sites, then we can’t keep the lights on. That said, people value our sites, because they provide trustworthy, objective information. If we try to hard to say “click here” with our design and language, we wind up turning off our users. For our content, sometimes a well placed text-link outperforms a well-spaced, colorful button. As always, you must consider the customer when applying these design rules.

    All that said, I think it’s a great, well thought out article. Appreciate the information.

  15. David Chris says:

    I have read a lot of your articles and once again, nicely written. Thanks for sharing Oli

  16. John says:

    You’re right, I SHOULD follow Oli on Twitter! (and so I will ;)

  17. Harper says:

    Wow, so much going on in one image. Incredible. I’ve found encapsulation to be an incredibly effective method for improving conversions