3 Key Factors that Affect Landing Page User Experience
When you work on a landing page, you probably hear the following all the time:
A/B test it!
It makes sense. Headlines, copy, layout - changing all of these things can have a large impact on your conversion rates, whether you're making a "coming soon" landing page or running a social media promotion. And even though there’s no shortage of strategies that have been cemented as “landing page best practices”, we know testing everything is the key to optimization success.
That’s great and all, but often we become so invested in the significance of our testing results that we forget about the people who are directly affected by the changes we make: the users. At the end of the day, it’s still important to create a user experience that’s both friendly and intuitive. Even if it boosts your conversion rate by 1%, having 4 exit popups probably isn’t the best way to go.
When it comes down to it, your users should be at the forefront of your mind when you build your landing page. Often, a landing page is the first point of contact a potential customer has with your brand. Breaking any barriers inhibiting these users from having a good experience on your landing page is an important first step towards building a good relationship with these users.
But don’t fret, you data-driven digital marketers, because there’s still testing to be done. In this article, I’m going to push aside the typical A/B tests you’ve heard about time and time again to focus on reacting to factors that affect user experiences on your landing pages.
But first, a quick note…
Unfortunately, it can be difficult to understand the behavior of the people who visit your landing pages. More often than not, we don’t know where they are and when they’ll be browsing.
Because of this, the situations covered in this article can be quite specific - but there’s something to be learned from each of them. My goal is to get marketers thinking about these situations when they design landing pages with the goal of finding happy mediums and making landing pages more accessible to a greater number of people.
Okay! Let’s get started...
Often, we design landing pages in ideal environments - under the simple lighting of an office, on a large monitor or the Retina display from a MacBook, sitting a good distance away.
Though these conditions are perfect for translating creative ideas into clean landing page design, we often lack the opportunity to test these ideas under more realistic conditions.
The first of the conditions that I’ll cover in this article is lighting. While it’s one thing to test your landing page in the generous brightness of your desk at work, there’s a good chance that isn’t where your audience will see it.
When designing your landing page, think of your user - is there a good chance they’ll be in the glare of the sun at midday? The darkness of their bedroom? Though the tech world has come a long way towards increasing screen brightness, contrast, and saturation, there’s only so much technology can do under extreme lighting conditions.
Even then, there are ways to optimize landing page design based on certain lighting conditions. Understanding the browsing habits of your audience can be a big help when it comes to optimizing your landing page for user experience.
Let’s take a look at the two obvious lighting extremes and how you can design for the conditions they present…
Whether it’s the harsh fluorescence of an office or the fiery afternoon sun, bright lighting can make it difficult for your audience to read and navigate your landing pages. With the increasing prevalence of glass screens (smartphones, MacBooks, and iPads galore!), glare can prove to be a huge problem for readers even with screen brightness cranked up.
What you can do:
To combat the effects of glaring lighting, the first thing to keep in mind is contrast. You want to maximize contrast when designing landing pages for users who are likely to be in bright-lighting conditions. Your muted color scheme might look great in practice, but nothing beats plain old black and white when it comes to clarity. Here’s a quick example…
If you’re not keen on using black and white, you can emphasize contrast by employing complementary colors: combinations like blue and orange, purple and yellow; and red and green. Though clarity is always important, it’s a much larger concern for pages with a lot of information. Help important text stand out by laying text over white or over a background with its complementary color.
Here’s a little infographic I put together for your reference:
Another great way to improve readability under harsh lighting conditions is to bump up the size of elements on your page. High-contrast text still won’t be readable if it’s too small to see. Increasing the size or weight of elements on your page - whether this is by making them bold, giving them a little more space or literally just making them bigger - helps to minimize the effect of harsh reading conditions on a user’s experience.
Reading in dim conditions is a common occurrence these days - we’re all guilty of using our phones or tablets before going to bed to catch up on news or check up on my social accounts. In these cases, even the lowest brightness on a modern smartphone display can prove to be too much. Bright landing pages can shock viewers who are browsing in the dark, greatly reducing the chances they continue reading and eventually convert.
What you can do:
Surprise! To minimize the possibility that your landing page causes issues for users reading in dim lighting conditions, you’re going to want to reduce the contrast of the elements on your landing page. This is where toned-down visual schemes shine.
The best way to reduce contrast on a landing page is to “squash” your color scheme. This means slightly turning up the lightness of your dark tones (for example, dark grey instead of black) and turning down the lightness of your brighter colors.
If this still proves to be too much, bump down the saturation of your color scheme to create a softer, more muted palette.
You may also want to reconsider your color scheme in general. Warm colors like orange, red, and yellow are more visually “active” - they tend to stimulate the viewer much more than cool colors like blues and greens, which tend to calm and relax.
On one hand, using cool colors for users reading in dim lighting can help to ensure they’re not disturbed while reading. On the other hand, using warm colors can help to “shock” them into being more interested in the content on your page.
Something else you may want to consider trying is changing your background color to something that isn’t white. Let me explain…
Each pixel on a device like a laptop or smartphone is composed of three color dots: red, green, and blue. When they need to produce white light, all three dots fire at full brightness.
Selecting a different color (or even a light grey) reduces the brightness of these pixels, which ensures even at minimum brightness your page won’t be too bright for viewers.
If you’re using a good landing page editor, you should already have a variation of your landing page suitable for other devices, like smartphones or tablets. This feature, known as mobile-responsiveness (or adaptiveness - there are a few differences but they’re not too important here), ensures your page will be optimized for readers, no matter the screen size of the devices they use.
Ensuring your pages are mobile-optimized is becoming increasingly important, especially as the number of internet users browsing on other devices is rapidly growing.
GlobalWebIndex found in a 2016 study that a staggering 87% of internet users now have smartphones. In fact, some regions around the world, such as Latin America, the Middle East, and the Asia Pacific, internet users are more likely to have a smartphone than a desktop or laptop. SimilarWeb discovered in 2015 that roughly 56 percent of traffic to the leading US websites was from mobile devices.
Long story short? Mobile is more important than ever.
What you can do:
Like I mentioned earlier, a good landing page editor should automatically optimize your pages for other devices. Often, though, some elements may not translate perfectly - and there’s always room to improve.
Let’s go through some things you may want to check over when optimizing your landing pages for mobile…
Font sizes: Though your body text will often translate pretty well to your mobile pages, double-check your headers to make sure there aren’t any widows or orphans (single words with their own line). Fix this by changing line length or text size for mobile.
Image sizes: When you’re building a landing page, you might, for example, assign a width of 50% to an image. This works well when you view the page from desktop, but once you move to mobile you’ll see the image takes up only half the screen. Make sure to check your image sizes on mobile so you’re not wasting precious screen real estate.
Layout: The dramatic difference between desktop and mobile aspect ratios means a layout that looks gorgeous on a widescreen display may look completely different on mobile. Consider making specific layout changes for mobile if your layout doesn’t translate well across platforms. Check out this example of a page I designed for Wishpond’s sales team:
Copy length: Though this can be tough to do, you might want to reduce the amount of copy you use on your mobile landing pages. The combination of a small screen and a vertical aspect ratio means lots of scrolling when there’s copy aplenty - which doesn’t add up to the greatest user experience. Pare down your copy so mobile users don’t feel like your landing page is excessively lengthy.
Device type: Though it might feel like it sometimes, not everybody has an iPhone. Test your page often and on different devices to ensure everyone has a uniform experience when visiting your landing page. Unless you have tons of phones lying around, you’ll need a way to test for different devices. Using Google Chrome is the way to go - click “View” in the menu bar, and then “Developer”, and then “Developer Tools”. You’ll see an icon on the top left that looks like a phone and a tablet - click this, and you’ll be able to simulate your page on a multitude of device types. Nifty.
It’s incredibly unlikely that viewers of your landing page will be looking at it in a calm, quiet setting, free of distractions. Chances are, they’ll be taking a look at it whenever it is they come across it - whether that’s on their train ride home after work or in a busy Starbucks downtown.
Though you can’t possibly think of every possible distraction - let alone pre-emptively remedy them - it’s always good to be aware of them. You know your audience best: think of the distractions that are most likely to affect them, and take precautions to circumvent them.
Let’s take a look at them…
Obvious jokes aside, there’s many times when people are browsing on their smartphones with a coffee in hand or a hand on the train railing.
What you can do:
There are a few ways to make a landing page accessible to users browsing with one hand on a smartphone.
The first is to make buttons large and wide. Having buttons span the full width of a smartphone screen means they’ll be easy to click, regardless of which hand the viewer is using.
Next, move the exit buttons on any popups you might have on your page to the bottom. Smartphones are getting bigger and bigger (have you looked at an iPhone 4 recently? They’re tiny) and people’s hands aren’t changing. Moving your “close popup” button to the bottom of your popup means users don’t need to partake in any hand acrobatics to close your popups.
Lastly, look at web form design on your landing pages. One-handed typing is a tough task for all but the deftest of smartphone users, so you want to minimize the amount of typing your users have to do on your pages. If there are any form fields you can turn into dropdown menus, do so - this reduces the amount of your work a viewer has to do and improves the likelihood of conversion.
There’s a lot of loud places, and a lot of people in them - which means there’s a pretty decent chance that someone viewing your landing page is somewhere noisy. Because it’s incredibly distracting, noise can decrease viewers’ attention spans, lowering the chance your viewers will convert on your landing page.
What you can do:
Unfortunately, you can’t 3D print a pair of earplugs out of your viewers’ devices (yet). Until that day comes, here’s a couple things you can do…
First, you might consider removing videos from your pages. If you feel they’re completely necessary, you can leave them in. Viewers in loud areas will likely skip over them entirely, so if there’s an alternative way to share the content your videos contain, like through a series of GIFs or even through good ol’ text, you may want to consider that.
If you feel like you can’t remove the videos on your page, add subtitles for any spoken portions. This way, viewers who can’t hear your videos can still follow along - this is particularly important for videos that might show off or demonstrate your product.
Lastly, decrease the amount of copy you have on your page. Noise and distraction can make it difficult to read a large amount of copy, so minimizing the amount on your page can help to maximize your conversion rate.
I’ve only just touched on the tip of the iceberg on this article when it comes to factors that affect landing page user experiences. Honestly speaking, it’s tough - nearly impossible - to optimize your landing pages perfectly for all of your users. I’ve written this article in the hopes that it gets you thinking about the little things - the things that might not be so obvious when you’re first designing your pages.
Remember at the end of the day that you know your user best. These tips obviously won’t work for everyone, but they’re there to help those they do work for. Every company, product, and page is unique and each of these will come with their own share of factors that have an impact on user experience.
Finally, remember to test everything. None of this means anything if it’s not getting you results. If people convert 50% better being blinded by a bright blue and yellow landing page, who are we to say “no”?
Thanks for reading - let me know if there are any other rarely-mentioned factors that you’d like me to cover. And, as always, let me know what you thought in the comments below!
- Landing Page FAQ: What's the Difference Between a Landing Page and a Squeeze Page?
- How to Create a Sales Funnel with Landing Pages
- 3 Pre-launch Landing Pages [Critiqued]: How to Generate Buzz for Your Biz
- The Beginner's Guide to Creating a Squeeze Page
- Facebook Landing Pages: 38 Ideas, Tips and Examples
- 5 Clever Coming Soon Page Strategies You've Never Tried