The Ultimate Guide to Conversion Rate Optimization(8): Designing for Conversion


When researching for this guide I seemed to, time and again, come across Ross Johnson of 3.7Designs, a web designer and blogger on the East Coast. His discussions about design psychology were invaluable.

He was kind enough to supply me with a quote, and, as I couldn’t explain it any better myself, here’s what he has to say about the importance of psychology in web design:

“Whether you’re looking to sell a product, collect leads, or spread your point of view, designing with psychology methodology is the most effective path to success. Ultimately we’re emotional beings, despite the reassurance of logic. Every click, every sale, every form-submit originates from a feeling. You feel as if an action is worth your time; you feel like a product is worth your money; you feel this website is worthy of your email address. You may justify your decision with logic, but the decision originated in your subconscious.

Only by understanding how your users think can you craft an experience that triggers the right emotions, appeals to their sense of logic, and persuades them to convert.”

  • Ross Johnson, Professional web designer

#20. Contrast

Imagine you’re on the fields of Africa, 25,000 years ago. You’re on watch, while the rest of your family forages for food. They’re relying on you to notice and alert them of predators.

But what are you looking for?

The answer is contrast. You know what your home area should look like. You know that, with the wind coming from this direction, there’s no reason why the grass should be moving that way. You know that that shade of yellow or brown is abnormal, dissimilar from the norm and the colors around it.

Contrast means danger, and we’re hyper-aware of it.

A quick example….

It’s incredibly easy for us to notice the contrast within this image:

Different color, different shape; different size, even a shadow. It stands out like a sore thumb.

But what about this image?

Isn’t it slightly awesome how easily we’re able to notice that there are actually two contrasting circles within this group? The slightest change to shade or irregularity in a circle and we notice immediately.

Psychological Case Study

The most famous (and oft-repeated) example of contrast in conversion rate optimization is that of Paras Chopra’s 12 CTA’s multi-variate test. His control was a simple “Download” text-link above the word “PDFProducer v1.3” (in the same font, size, and color).

He tested 12 alternatives:

Option 10, which features large red font reading “Download for Free” above the default PDFProducer v1.3 text converted at 63.2%, an increase of 60%. It is also the option which contrasts most clearly (large red font vs smaller black font).

How you can use this psychological factor for conversion rate optimization:

  • Implement color, size, and font contrast to catch the eye of your prospective and existing customers.
  • Use color contrast on the Facebook platform within your ad images by contrasting against the blue and white of Facebook’s platform.
  • Use it in your landing pages within your CTA buttons by contrasting it against the page’ color scheme.

#21. Common Regions (Also known as Encapsulation)

In 1992, Dr Stephen Palmer ran several studies theorizing that the most powerful way to group objects or design elements was not proximity or similarity, but, in fact, common region.

Again, this is one of those things which people just know, but it’s actually an incredibly valuable thing to remember when designing your webpages for for conversion rate optimization.

After all, why does the encapsulation of the circles below supersede their coloring?

An example of form encapsulation/common region implementation in the Wishpond landing page builder.

How you can use this psychological factor for conversion rate optimization:

  • To encourage your form field to stand out within your landing page, encapsulate it with a simple box (particularly one of a different color).
  • When designing your Facebook or banner ads, consider placing a border around your image text (no more than 20% of the image, remember) to get the text to stand out from the image.

#22. Eye Direction

People are instinctively drawn to the human face, firstly to determine if a person is known to us, and secondly to determine if they’re friendly or not. As soon as we’ve determined these things we look at their eyes (though female chests can tie for second).

We attribute a huge amount of importance to eyes. After the muscles of the face, they give us the clearest idea about what a person intends (this is all left over from before language existed).

And we’re phenomenal at tracking an individual’s eye-direction (an evolutionary need to determine where a predator was in the tall grass by watching the eyes of our friends). We follow eye-direction just as unconsciously as we focus on the eyes themselves.

Psychological Case Study

The images below are from an eye-tracking study run by Neil Patel and his site Quicksprout for a client. On the left side you see the model’s eye directed straight ahead at the person viewing the advertisement…

And on the right you see, quite clearly, the model looking to her right (at the product being advertised). You also see a distinct red streak going from her eyes to the product itself (following her eye direction). Which do you think drove more sales of the shampoo?

How you can use this psychological factor for conversion rate optimization:

  • Have a model on your landing pages, homepage and advertisements “looking” at your desired focus point – no matter if that’s your chief selling point, your CTA button, your form or a picture of your product.

#23. Continuation

One of the primary rules of Gestalt design (the idea of seeing the whole before the parts and, equally, how the whole becomes more than the sum of its parts) is called continuation.

Think of continuation like momentum. It’s the idea that once you’ve started to move in a particular direction, you will continue to move in that direction until the world tells you otherwise.

Equally, once your eye starts moving in a direction it will continue to do so until it sees something significant enough for it to stop and dwell on that thing (and that’s the element which is a psychological factor which affects online for conversion rates).

With continuation, you can direct the eye of your website visitors towards a point of focus (increasing the chance of them really ‘seeing” that focus point and engaging with it). We discussed earlier the idea of information overwhelm; continuation is a strategy to combat it.

Continuation in Monet:

Notice how your eye is drawn to the island in the middle of the page? Not only are there 5 distinct lines directing your attention to the focus point, but the boats are also pointing towards it.

How you can use this psychological factor for conversion rate optimization:

  • Just as you’ve included a model looking at your page’s primary objective or selling point, also add lines (even half lines) which aim in the direction of your focus point.
  • Avoid using blatant arrows, as a subconscious nudge is just as effective (if not moreso as people respond negatively to blatant attempts to get their attention).

#24. The “F” Shape

I likely don’t need to dwell too long on the theory of the “F” shape in website design, as it is likely the most well-known of all the factors in this guide.

But no guide to for conversion rate optimization is complete unless I do, so let’s get into it a bit.

Psychological Case Study

”Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.”

In Nielsen’s 2006 eyetracking study of 232 internet users, they found that the primary way they read a webpage was relatively consistent (no matter the site or task). It has three primary components:

  • An initial, horizontal swipe from left to right across the upper area of the page.
  • A second horizontal swipe from left to right across the middle of the top-of-fold.
  • A third, vertical swipe from top to bottom which includes them “reading” the first couple words of each paragraph to determine whether or not they are going to read further.

How you can use this psychological factor for conversion rate optimization:

  • The “F-Shape” is especially relevant when writing blog content, as it reiterates the importance of writing in a way that appeals to skim readers. For instance, in each section of this guide I’ve placed the “how you can use this… section” in bold, allowing readers to quickly and easily find the actionable strategies, without having to read all the psychological mumbo-jumbo.
  • The “F-Shape” is also extremely relevant for lead gen landing pages. Ensure your headline is at the top (top horizontal swipe), your short “why you should read this” section below it and on the left (second horizontal swipe), and your form fields on the far right side (so visitors arrive at it naturally at the end of their second horizontal swipe).

Further Reading on Designing for Conversion:

Next Chapter

To head back to the Table of Contents, click here.


Leave a Reply

Your email address will not be published. Required fields are marked *