If you’re a web designer or developer, you know about landing pages. Chances are, you’ve dealt with your fair share, and you know that a good landing page will capture a visitor’s attention, drive ROI, and ultimately generate conversions that create more business. But what happens if your landing page is poorly designed?
Well, none of those things.
If you’ve been working on landing pages for a while and haven’t seen a significant boost to your conversion rates or leads, you may be making a few fatal design errors.
Today we’re looking at the biggest design mistakes when it comes to landing pages and what you can do to avoid them. Let’s dive in…
If you’re a web designer or developer, you’re probably sick of hearing about optimizing your images. But the reason you hear about it so often is that images are a big deal when it comes to design. Pictures have the power to connect and communicate with your audience and draw attention in ways that words alone can’t achieve. But when your images aren’t optimized properly, they can do far more harm than good.
One of the biggest mistakes when it comes to images on your landing pages is keeping them uncompressed. An uncompressed image – or an image that renders at full size every time the page loads – will cause your site to load significantly slower. If you’ve done your homework, you know that site speed is a major factor in conversions. If the design of your site relies on images (which it should, but we’ll get to that), make sure your graphics are working for you and not against you.
How to fix it? CreativeBloq has a list of compression tools available for designers and developers to help compress images.
While file size and type have a dramatic impact on your design, it turns out the subject of your images is equally important to optimization.
When it comes to visual marketing, people love bold images of other humans. Human faces draw more attention than any other type of image on the web, and people tend to mimic the behavior of the images they’re seeing. If you have a picture where a person is looking in a certain direction, for example, your visitors will typically follow the image’s line of site, too.
A good example of line of site from Chemistry.com.
People also tend to copy the emotion they see in the images. One study conducted by Basecamp actually showed that by featuring an image of a smiling person on a landing page, they increased conversions by 102.5%. Basically, if you’re not using your images to convey human emotion and connection, you’re missing out on a huge opportunity.
How to fix it? Choose high-quality images with an emotional appeal (specifically, happy people) and use graphics that include a line of sight that points to specific content whenever possible.
Of course, when you’re designing a landing page, you should probably be using more images than text anyway. Why? Because people are statistically more likely to skim text-heavy pages, whereas sites with simple designs that minimize text and focus on images are far more likely to engage visitors.
Too Much Text
One of the biggest mistakes when it comes to designing a landing page is including too much static text without enough visually pleasing elements to balance it out. As a designer or developer, you may not have a ton of control over how much content needs to be included on the page, but you can use the design to minimize a text-heavy look.
The best way to do this is using white space strategically to make certain features stand out (images and graphics) while minimizing other features (long paragraphs or unnecessary text). Of course, the best thing for your site is to remove unnecessary copy all together, but if that’s not an option you can always use the layout and design to your advantage.
How to fix it? Incorporate white space throughout your site to highlight specific elements, such as the CTA button or a lead capture form. If possible, eliminate or combine text to make it easier to skim. Jimdo blog has some great recommendations for designers working with text.
Clean web design and good use of white space by the Amble App site.
Too Many Options
Another common content overload error is presenting your visitors with too many options to click through. One study by Sheeya Iyengar, a social psychologist at Columbia University, found that people react differently when given multiple options versus limited options; specifically, the more options they have to choose from, the less likely they are to choose at all.
What this means for your design is that having too many places to click, multiple CTAs, or a general “cluttered” look will turn visitors away fast.
How to fix it? The easiest solution is to keep your designs simple. Cut away any excess until you’re left with only the absolute essentials. Keep navigation to a minimum (that means eliminating drop down menus wherever possible, too), create one clear CTA per page, and don’t redirect visitors off your page unless you need to.
Your call to action (CTA) is another major player when it comes to having an effective landing page. But the problem with CTAs is that if they’re not executed well, they’re not going to do you any favors. If you want to really engage visitors, you’ll need to avoid these common CTA mistakes.
The biggest mistake when it comes to CTA is location. You’ve probably read endless articles giving you a variety of advice on where to put it – whether it’s above the fold or below or whether it should be on every landing page or a select few.
For the most part, the “right” location will depend on your website design and visitors. Most of the time, you’ll probably want to include a CTA above the fold – or in the top part of your design, incorporated with a strong image or graphic that grabs attention. According to some studies, most people spend around 80% of their time above the fold when they visit a site.
But as we’ve noted before, the location really depends on your visitors. If your visitors already know what you’re about when they come to your landing page for the first time, then having a CTA above the fold is the best thing you can do. However, if all of your visitors will be visiting to learn who you are and what you’re about, then having a CTA after some vital information may be more beneficial.
How to fix it? Know your customer base. Because location of your CTA is important, you’ll need to determine whether or not the people visiting your page have brand awareness of your company, product, or service before they visit your site. Brandwatch has some good suggestions for testing your brand awareness.
Besides placement, the next biggest mistake when it comes to CTAs is choosing the wrong color. Surprising? Well, don’t be shocked. In a study called Impact of Color in Marketing, researchers found that up to 90% of snap judgments are based on color alone.
Kissmetrics actually made an infographic about how colors affect purchases. While some studies note that no single color is the “right” choice (because color is often associated with personal experience) they all show that color choice does play a role in conversions.
How to fix it? Choose colors for your CTA buttons associated with the goals of your site and customer base. Blue, for example, is often associated with trust and security, while green works well for the budget-conscious crowd. Here are a few tips from CoSchedule to help you choose the right color for your site.
Firefox uses a classic green CTA button for its free product.
While the other mistakes listed above are certainly faux pas, the number one biggest mistake when it comes to designing landing pages is not optimizing for mobile viewing. In other words, if your theme isn’t responsive, you’re doing it wrong.
This is especially true if a lot of your visitors come from social media and search. According to research, nearly 80% of all Facebook users access the web exclusively through mobile, and a quarter of all Internet searches happen via mobile devices. These statistics are only going to increase as the number of internet-connected devices increase, too.
How to fix it? This really comes down to choosing a good responsive theme for your website as a whole, but you should also optimize each landing page to be designed for mobile use by using images, scroll-friendly layout features, and text that’s easy to convert to small screens.
Making sure your landing pages are doing their job can be tough, but there are a few great ways to minimize mistakes and boost conversions.
Optimize your images for fast speeds and choose pictures that people can relate to (i.e. happy!).
Minimize unnecessary content and focus on creating a visually appealing website that’s simple to use, so you don’t confuse or overload visitors.
Create a clear CTA that grabs attention where you need it and works for your purposes by choosing the right color, style, and placement.
Go mobile! Make sure your theme and landing pages are designed to be responsive to all screen sizes.