Landing Pages: The Science Behind Designing for Conversion
Is your landing page converting well? Is it converting badly? Do you know why? I mean, do you really know?
This article will give you the science and psychology of why your landing is engaging to visitors, or, why you might be getting traffic - but no conversions, to guide you through the best practices of landing page optimization.
I’ll take a look at 5 principles of landing page design that can mean the difference between a successful page and one that’s just taking up space (or fumbling around in the dark).
Let’s get started.
1. Directional Cues
Directional Cues are key in landing page design as they tell people what to focus on.
The most important thing to remember when designing your landing page is that people do not view it like they do a book. It’s not left to right, top to bottom. You have to tell people how to read your page, and directional cues (as well as encapsulation and contrast, below) are how you do this.
My recommendation is to decide two things on your landing page that you especially want to drive attention to (say, your CTA and your product image, or maybe a USP). Then integrate a couple of the strategies below into your design and A/B test it. Maybe your audience responds well to the overt arrow, or maybe the more subtle eye-gaze. Test it for yourself.
There’s three main ways that we signal a focus point in landing pages:
Arrows and lines:
The most straightforward way to direct attention at an object or heading is to draw an arrow or line to it. Students of art will know the importance of lines, as humans have a natural (subconscious) impulse to follow them to their origin or their destination. This works great to focus people’s gaze on your CTA, USP, value proposition or product image.
Humans are incredibly good at recognizing the eye-focus point of the people around them. I recommend using an eye-tracking software on your landing page to determine where people are focusing, and whether this focus is resulting in an increased click-through-rate.
What I’m talking about (thanks to Neil Patel for the eye-tracking examples):
Faces are the most eye-attracting image you can use (see #5 below), and the eyes are the most eye-attracting part of the face.
You’ll notice the woman on the left is looking directly at the camera (or visitor to your page). The woman on the right is looking at the product that Sunsilk is trying to sell. You can see in concrete terms how the initial gaze goes to the woman’s eyes and then tracks left to the product, whereas the face on the left gets all the attention and the product none.
I highly recommend you use an image of a person in your landing page, as it’s proven to be the most engaging picture (more on that later, though). Something to test, however, is having that model gesturing or pointing towards something you want to focus attention on.
This is a dangerous one, though, as (in my mind) it can come across as cheesy if done incorrectly. Test what your audience responds to. I’ve seen this both increase and decrease conversion rates in many case studies.
Contrast is essential when designing landing pages. The human eye is naturally attracted to contrasting color. I recommend you consider color contrast for your USP and CTA - perhaps an orange CTA button on a dark blue background.
The idea of blank space is well-known in the graphic design world, and no less a vital part of landing page design. The idea is that blank space is extremely influential in focusing attention on non-blank space. For instance:
Another way of utilizing blank space is with encapsulation. Rather than putting a border around your CTA, USP or list of benefits (see my article Landing Page Fundamentals and Conversion Principles for the essential landing page variables), try making the area around it devoid of anything interesting. Wash out the color, remove the image. This will effectively draw attention to your object, as it will stand out far more than if it’s in a busy area.
Will this work better than a directional cue? Test it for yourself and find out!
Formatting size (of font, for instance) also attracts the eye. In a 4-week multivariate test in 2010, Paras Chopra tested the performance of 12 different combinations of a Call-to-Action and descriptive link:
Option 10, with the largest contrast in color, hue and size (as well as the word Free) generated a 60% improvement in conversion rate.
Color is extremely (though unconsciously) effective at eliciting emotion in viewers. I took an in-depth look at color psychology in my series on the science behind a successful Facebook Ad, so check it out for a comprehensive analysis (with science!).
For now, here’s a breakdown of how humans are influenced by color - and how this knowledge can improve your conversion rates:
Blue : Blue is, across both genders and all age-groups, most people’s favorite color 35% of women and 57% of men. It is said to create the sensation of trust and security. Lighter blues are calming while darker blues denote professionalism and sincerity.
Orange : Eye-catching, bright and sunny, orange is one of the most popular colors for landing page Calls-to-Action. While a good tone and amount of orange is seen as warm and inviting, too much has been associated with naivete and a lack of professionalism.
Red : The color red is associated with passion, excitement and urgency. It’s a dangerous color in advertising, as many people associate red with negativity and mistakes. However, it attracts the eye better than any other color and gives the impression that time is passing faster than it is (as it causes our heart to beat faster) causing us to act when we otherwise wouldn’t.
Green : Associated with wealth as well as environmental subjects, green is the easiest color for the eye to process. Green also signifies positive action (think,’green means go’) and affirmation.
Green and teal have also been associated with shoppers on a budget shoppers on a budget. It’s also the second and third most popular color among men and women respectively.
Purple : Associated with calm, femininity, and wealth, purple is the second most popular color among women, at 23%. Interestingly, as women get older, their liking for the color purple increases. On the other hand, purple is the favorite color of 0% of the male population.
Black : Powerful, sleek and intellectual, black signifies permanence, sincerity and sophistication. While black can, like red and orange, be a dangerous color if used too much, it can communicate professionalism and sophistication when used in conjunction with a strong, clear white (avoid greys or tans, as they’ll wash out your message).
I could discuss the effectiveness of a picture of a smiling person on your landing page for hours (and I have…) but just trust me that having an image (especially a person) will likely improve your conversion rates.
Something I’ve seen recently, actually, is incorporating a customer testimonial with the main landing page image. Choose a photogenic customer and post it up next to an awesome-sounding affirmation of how your product or service made their lives easier.
But let’s leave that for the moment, assuming you recognize its importance, and talk about why it works:
- We respond far more emotionally to people (or pets, though people generally elicit a stronger response) than we do to words or random images
- A picture of a person provides subtext to your landing page - a story which people respond to.
- We, completely subconsciously, focus on the faces of people we see (especially the eyes). In every eye-tracking image I’ve ever seen, the hottest points are the face and eyes. Unless, of course, the image is of a woman and we’re talking about a male demographic. Then the eye-tracking software shows our attention to be… elsewhere…
In my research for this article I came across an article by V.S. Ramachandran (a neuroscientist from Oxford) who wrote that oftentimes a line drawing is more powerful than a photograph. He writes that this is because the ‘idea’ of a person is more appealing than the truth of it (why so much of art is exaggeration of the human form, or why caricatures are so aesthetically pleasing). Leave out the details, and all you’re left is the essence of a thing.
Although I haven’t yet seen an example of this in a landing page or incorporated it into my own, I believe that whoever does will see a dramatic increase in click-throughs. Get creative and let me know how it goes!
5. Typography and style
You’ll think that I’m getting too detailed here, that different typographies, text formats or styles can’t actually increase or decrease conversion rates enough to matter.
Here’s the thing with A/B testing: details do matter.
Let’s say your Ecommerce site’s landing page is currently converting at 23%. You’re seeing traffic of around 2,000 visitors per week and their average purchase is worth 50 dollars to your business. You’re making $23,000 per week.
Let’s say we change your page’s headline length and change the image from one of a woman looking at the camera to one looking at the CTA (small changes, you’d agree?). You see a conversion rate increase of 10%. Suddenly you’re converting at 25.3% and you’ve increased your weekly income to $25,300. Yearly revenue increase? $27,600.
Typography and style changes to A/B test:
- Font size for headings and body copy (and the difference between them)
- Heading length (short and succinct vs long and detailed)
- Number of different font sizes (too many makes your landing page confusing - I recommend two or three)
- Fonts: Keep in mind that different fonts are, for whatever reason, viewed as more amateurish than others. We at Wishpond like San Sarif for headlines and Sarif for body copy. Avoid cursive (except, maybe for a header) and comic sans is a no-no for a professional business
- More text vs less (I like a simple landing page - get to the point and leave any extraneous information for later emails or different tabs. But test this for yourself!)
Hopefully you now understand a little more of the science and psychology behind landing page design best practices for a proper landing page optimization. Remember to provide visual clues for where you want your visitor to focus. Don’t forget the details, like typography or eye-direction.
And keep testing! You can always improve your landing page conversion rates. Trust me.
- How to Create a Landing Page that Converts
- Landing Pages: The Fundamentals and Conversion Principles
- How to A/B Test your Landing Page to Maximize Conversions
- 7 Landing Page Mistakes that are Costing you Conversions
- 4 Ways to Create Facebook Ad and Landing Page Combos to Maximize Conversions
Have you had success (or frustration) implementing these design fundamentals? Let me know in the comments below!