Using Design Principles 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:

Persuasive design for lead gen forms
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 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.

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.

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.

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.

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:

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

[How to] Use Design Principles to Increase Conversions