8 Ways your Landing Page Design is Sabotaging your Click-Thru Rate

Testing and optimizing landing pages can be a fun and frustrating game of cat and mouse. Every time the mouse gets away, it feels like self-inflicted sabotage. After all, as marketers we really don’t want to eat the mouse, we’re just inviting them to play!

In this post I’m going to show you how to design landing pages that create a cat and mouse snuggle-fest. Let’s start by looking at the facts. The elements that can be tested and optimized on a landing page include:

  1. The headline
  2. The product image
  3. The call-to-action
  4. The copy
  5. The page layout

Over half of these elements involve design, yet the majority of conversations on “how to increase landing page click-thrus” have to do with optimizing copy. In this article I’ll focus on the importance of your landing page design, and specifically how to avoid making these mistakes:

  1. Lack of Balance between Images and Copy
  2. Not Optimizing for Mobile
  3. Letting your Brand Control the Color Scheme
  4. Using Images that do Not Evoke an Emotional Response
  5. Using Navigation on the Page
  6. Testing too many Design Changes at Once
  7. Not Giving Your Layout some Breathing Room
  8. Saying too Much at Once

Ok y’all ready?

1. Lack of Balance between Images/Video and Copy

I’m a huge fan of great copy, but landing pages that rely too heavily on copy and do not:

  1. show the quality of the product
  2. an image that illustrates my pain point
  3. or how the product or service relieves that pain

Lack of imagery means you miss out on the opportunity to add another (visual) layer of connection and communication with visitors.

If you haven’t already, stop by Karri Flatla’s site and pick up her free “short copy” copywriting report “Sales Page Relief Manifesto“. Karri makes a great point that as the web has matured, so have consumers eye for quality products. Long, copy-heavy sales pages are not what an increasingly savvy web consumer is looking for when there are other, more professionally presented options.

Check out the examples below with an over-emphasis on copy and lack of images. Notice anything? It takes longer to figure out exactly what they’re offering!

Don’t forget about video

Great copy does not have to live in text format alone. Consider ways your copy can also be published as a video. There are lots of producers of “explanatory videos” that can bring your copy to life in ways that will:

  1. Keep the visitors attention
  2. Tell your story (in a succinct and unique way)
  3. Show them how your product or service actually works!

Even if you don’t hire someone to create the video for you, doing a simple screencast of what you have to offer is helpful. For a list of screencasting software tools and explanatory video producers, see the list in the “Resources” section below.

Do this next:

  1. Create a “Design Document” for your Landing Page, using this design document template to start. This is where you will document the content that will live on the page.
  2. In your design document, create an outline of the landing page content. Include:
    1. Audience profile
    2. Audience pain
    3. Product or service solution. Create a list of features and benefits.
    4. Conversion goal
    5. Potential Headlines
    6. Supporting sub-headlines and content modules
    7. Call to Action
    8. For each of the above items, make a note of imagery and/or video that will help deliver the message
  3. Once you have defined each of these elements, sketch out your landing page on paper. Create several potential layouts for the content you’ve outlined, then pick one as your starting point.
  4. Do all of the above before before hopping into Photoshop or your Landing Page publishing platform.

Y’all are doin’ great – let’s keep moving. :)

2. You are Ignoring Your Mobile Audience

A recent study by the Pew Reserach Center found that one-third of American adults own a smartphone and of that group:

“Some 87% of smartphone owners access the internet or email on their handheld, including two-thirds (68%) who do so on a typical day. “

Are you optimizing for mobile? Oopsie daisy!

What is your behavior when you hit a landing page that is not optimized for mobile? Do you take action? Probably not. Why? Because not only does the design make the page difficult to read, the call to action is typically not optimized for mobile either.

You have to consider the variety of devices where your landing page will be seen, AND the action you’re asking them to take. Again, balance your design and messaging.

The tricky part is you can’t anticipate when people will be using their mobile devices versus their computers. For example, let’s say your landing page goal is to drive sales for your web application. If they hit the page from their mobile device how will they purchase the product? Did you lose a sale just because consumers hit the site on their mobile device and haven’t reached a comfort level with mobile e-commerce?

One solution is to create two designs for your landing pages. One that is optimized for mobile devices and one for your typical desktop and/or laptop web browser. When the visitor hits the URL from a mobile device, a redirect sends them to the mobile optimized design that contains a mobile-friendly call to action.

Do this next:

  1. In your Design Document, copy and then modify your landing page outline to create a complimentary mobile counterpart. Remember you’re working with a limited screen size so your mobile content outline should look more like this:
    1. Headline
    2. Image
    3. Call to Action – make sure the CTA is within a mobile users comfort zone

Y’all are awesome let’s keep rollin’…

3. Letting Your Brand Control the Color Scheme

As a designer, it is in my DNA to create color palettes and designs that stay “on-brand”, connect with users on an emotional level, and therefore communicate a strong message. Unfortunately what I think works isn’t always what resonates with visitors. I know, I can’t believe it either, but this is why we test.

There is a certain amount of “brand memory” you want to maintain with your visitors. Changing the basics of your brand guidelines is not recommended. However, finding elegant compliments that break out of your defined color scheme is part of the testing process.

It is (for me) a difficult task. Seeing what you thought was a perfectly crafted design getting picked apart. Salt is then rubbed in the wound when you see improved results. This is where you eat humble pie, and simply get used to the fact that your landing page visitors help dictate the design.

As an example, in this A/B test, Performable broke out of their green/grey/white color scheme to test a red call to action button with improved results.

As hard as it is to break out of “brand guidelines” or test a color that the CEO hates, you have to do it. The boss-man will understand when conversions go through the roof. (In this case the red button converted 21% better).

Do this next:

  1. In your Design Document, add a section to define color palette options. For example you might list out different hexadecimal colors for:
    1. Headlines
    2. Call to Action Buttons
    3. Background Colors or Patterns

Can y’all smell the mouse getting closer?

4. Your Images do not Evoke an Emotional Response

Paras Chopra’s article on how “Human Photos Double Your Conversion Rate” explains how we can use imagery to influence connection with our audience:

“It is a well studied scientific fact that in a scene or image full of different objects, one’s attention is subconsciously drawn to human faces. Even toddlers and monkeys look towards faces for a much longer duration than they’d look at other objects.”

Check out the below landing page. Does this world map punch you in the gut or explain anything about the service this company offers?

What about this landing page? Not only does the image quickly explain the product, it also backs up the claim that it is “fun” to use!

This page for Debt Free 123 is an excellent example of a page that dials in on a pain point and illustrates the “result” of using their products: A happy, debt-free family.

In the example below, Super Circuits goes with a striking image of every homeowner’s worst nightmare, rather than opting for an image of the equipment they sell. Excellent choice.

Another nice touch is the video camera directs your eye towards the opt-in form. Subtle and effective use of graphics!

And it is not just human faces that evoke an emotional response with your visitors. Showing a image that resolves a pain point is also effective. Check out how Campaign Monitor marries a punchy headline and image, tapping into a designer’s desire for passive income by managing their client’s email campaigns.

Do this next:

  1. In your Design Document, review the images you have selected to include in your outline. Ask yourself what they will make your visitors feel. If the emotional response is nil or not supporting your message, keep searching until you find the right match.

Before things get too “emotional” let’s move y’all along…

5. Using Navigation on the Page

I unwittingly tested this well-documented fact on a page I designed for the Landing Page Design Kit.

The kit includes 100′s of landing page design resources that (I presumed) would need to be be showcased in actual-size, on a long sales page. Because the page was so long, I opted for a navigation bar on the left that jumped users up and down the page to view the graphical assets they were interested in.

As you can see from the heatmap images below (created using Crazy Egg), visitors were so busy clicking up and down the page using the left nav, they ignored the “download” call to action button.

Any navigation that does not move your visitor towards the landing page goals can actually distract the user from taking the desired action!

Do this next:

  1. If your page includes any navigational elements that are not related to the Call to Action, think carefully about what purpose the link serves. If it’s not moving your visitor down towards your CTA, remove it and test the change.

Don’t y’all love CrazyEgg? I do.

6. Testing too many Design Changes at Once

This is pretty obvious, but worth mentioning. When a page is not performing well, I tend to want to overhaul the page, and then test it against the poorly performing page. Approaching design changes in this way does not tell you which of the many changes you made is having a affect!

Take a deep breath and test one design change at a time. Let the page get a significant amount of traffic before moving forward with another change. Twenty visits to a test isn’t going to give you a true marker of how the majority of visitors will interact with your page.

Do this next:

  1. In your design document, define a list of 5 items you want to test, and the milestones the will trigger each test. For example, you may define that a change takes place every 1,000 visitors, or every 2 weeks.

Are y’all still hangin’ with me here? Cool :)

7. Not Giving Your Layout some Breathing Room

Giving your landing page design space to breathe will save you a lot of time when you’re tweaking the design for A/B testing.

For example, imagine you’re testing a button that has a copy change, requiring it to be 20px longer. Does your layout allow for a wider button?

Or what if you want to test adding just a couple of words to your call to action as Soocial did in this example. Adding two words beside the CTA button increased conversions on this page by 28%. Luckily the button does not have anything on the right side, and the “it’s free” copy has plenty of space to live.

In the below example, Skype allows a lot of space in the header image to have a longer headline and experiment with button text.

Do this next:

  1. In the landing page sketches you created earlier, review them for breathing room.

If my point isn’t clear, y’all just pretend your landing page elements are claustrophobic.

8. Saying too Much at Once

If a visitor to your page is confused, the likelihood of them taking the action you desire is slim. Visual clutter is one of the top reasons visitors abandon a landing page.

Check out this example from Which Test Won, where the clearer Version A beat out the form layered over the image. A quote I always keep in mind when I’m designing is by Antoine De Saint-Exupery:

“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”

Do this next:

  1. Review your Design Document and look for redundancies or pieces of content that do not support the main message or Call to Action. Remove the clutter!

Have I overwhelmed y’all yet? I hope not!

Bookmark this post and use it as a reference point for your next landing page design project.

After all, don’t you want this…

What landing page design techniques work for You?

I’d love hear about your design-related experiments! Leave comments below to share:

  1. Design techniques that work well for your pages
  2. Design techniques that do not increase engagement

Thanks y’all for reading!

Resources

Below are links to additional articles and resources you may find interesting.

Design Related Articles

8 Visual Design Techniques to Focus Attention on your Landing Pages
Do human photos on a landing page increase sales and conversions?

Video Screen-casting Software

Screenflow (for Mac)
Camtasia Studio (for PC)

Sources for Explanatory Videos

Marc Strong (I can personally vouch for Marc’s work – Tapptics iPhone app design)
Switch Video
Epipheo Studios

– Jen Gordon

This is a guest post, entered in the 2011 Unbounce Conversion Fest Blogging Contest. All opinions are those of the author.

Designer and writer Jen Gordon makes her living teaching others how to make things pretty. Her two geeky passions are landing page design and iPhone app design. If you haven’t already, you should follow her on Dribbble here.

Comments

  1. Jean-Marie says:

    Hi Jen, and thanks for this informative article!
    For me, the most interesting point was #4, emotional response images. The examples you gave “speak” for themselves!
    I’ll add this page to my “unbounce” bookmarks folder ;-)

  2. [...] 8 Ways your Landing Page Design is Sabotaging your Click-Thru Rate | Unbounce. [...]

  3. [...] 8 Ways Your Landing Page Design Is Sabotaging Your Click Through Rate Cancel reply [...]

  4. This is the best how-to that I’ve seen for landing pages. Their is a delicate balance between aesthetics, SEO, and Calls-to-action. Some of our sites are not balanced enough in order to drive conversion.

    • Jen Gordon says:

      thanks kathy i agree it’s just been through a tough series of trial and error that i’ve found these patterns repeating. definitely tough to know the balance for sure until you put it out there! :)

  5. Kristi Hines says:

    Absolutely love the cat & mouse images – amazing tips here too, but I was drawn in by the kitty! Great post Jen! :)

    • Yomar Lopez says:

      Hehe.. The cat and mouse reeled me in too! The right picture for the right time.. And here’s your social proof! I’d say I am sold. I’d also like to mention that images have great SEO/SEM value. Just look at Tumblr and Flickr. I also prefer books with lots of pictures. ;o)

    • Jen Gordon says:

      hehe thanks y’all I wasn’t sure if the metaphor was really “working” so i appreciate the positive feedback! :D

  6. Yomar Lopez says:

    I am surprised by the suggestion of human images to enhance web copy because I find pages with random photos of people to be rather fake. You make a strong case, though! I hear that stock photos works for some but I rather see “real people” instead of actors, ya know? I think the big thing there is to grab attention so your key content matters (and your call to action sticks out). You have me rethinking some strategies here, Jen.. Good stuff! 8)

    • Jen Gordon says:

      cool i’m glad it’s been helpful – i think you have a point with the “fake” type images, and it’s important for the person to look natural and “real” in the image. otherwise it totally distracts from the message!

  7. Steve says:

    This is a fantastic article, i’m currently working on a couple of landing pages so will re-read this a couple of times.

  8. [...] 8 Ways your landing page design is sabotaging your click thru rate Websites zijn vaak een compromis tussen wat verschillende mensen graag willen zien. Dat zorgt er ook voor dat bepaalde zaken steeds weer naar voor komen. Unbounce overloopt de 8 meest voorkomende fouten op je landingspagina. [...]

  9. uudens says:

    Under number 4, first image, it is a World Map, not a US Map!
    I do get your point and it’s good. But hey, seeing the world map first thing that comes in your mind is really the US?
    Anyway, great article, just wanted to point this out :)

  10. El says:

    Very nicw article. Thanks for sharing with us

  11. Vivek Parmar says:

    Thanks for sharing this cool post. If you are in affiliate marketing, then its necessary to create effective landing pages so that you achieve maximum conversion rate

  12. IgniteWebsites says:

    I agree that to much info or clutter on the page can greatly increase bounce rates. Great article!

  13. Marilyn says:

    Awesome. This post is absolutely fundamental for developing strong landing pages that convert. I’ve bookmarked it, too. Thanks, Jen.

  14. [...] guest post, 8 Ways your Landing Page Design is Sabotaging your Click-Thru Rate, is an especially helpful look at the how and why of landing page design, from beginning to end [...]

  15. Tortoise Web says:

    One of the best articles on landing pages that I have read. Fantastic work.

    Think I’ll use this as a checklist on my designs in future.

    So many websites try to cram every last detail about their business onto the landing page. It’s almost a fear that a visitor will only visit one page on their website so every piece of information needs to be on there.

    As an advocate of minimalism in web design, I feel like I’m constantly convincing clients that they need to avoid this!

  16. Russell says:

    Thank you Gen for the informative article on Landing Page Design, you have a good humour as well .

  17. Wes says:

    Typically we talk about increasing Conversion Rates for Landing pages and Click-Through Rates for Ads. Am I missing something? (because it is highly possible).

    • Jen Gordon says:

      hey Wes great question :) to answer it, I have no idea :P I’ll tell you what I was thinking when I wrote the headline tho — Not every desired action is a “sale” or “signup” or “conversion”. However, every desired action is a “click” or “click-thru” meaning typically a desired action for a page is not for someone to look at it and not click on something. :) In a nutshell, I wanted to stay generic in addressing the interaction on the page. I’m not saying it’s right, but that’s what I was thinking :D

  18. Jessica says:

    Wow – great examples! I know about testing to increase conversions, but I had no idea two little words or NOT having a left navigation menu would do it. Definitely bookmarking this one. :)

  19. [...] 8 ways your landing page design is sabotaging your click through rate from Unbounce delivers what it promises. [...]

  20. [...] 8 ways your landing page design is sabotaging your click through rate from Unbounce delivers what it promises. [...]

  21. Cédric says:

    That’s really a great article !
    I think it would be really helpfull for the french audience too.
    Would you allow me to translate it to french on my blog, with a link to your original article, of course ?

    Best regards,
    Cédric

  22. [...] Deze post is mede geïnspireerd door een post van Jen Gordon.  [...]

  23. [...] 8 Ways your Landing Page Design is Sabotaging your Click-Thru Rate http://unbounce.com/landing-pages/8-ways-your-landing-page-design-is-sabotaging-your-click-thru-rate… by Jen Gordon (@itsjengordon): “Lack of Balance between Images and Copy; Not Optimizing for [...]

  24. Kael says:

    A really nice share. But right now I got 2 questions and hopefully someone can me..

    Which comes first? Should I fill-in the “Landing Page Design Document” or do my “Keyword Research” first?

    Secondly, by always reading contents in unbounce.com, I’m starting to wonder if landing page should have a 300+ words on it for SEO purpose? Also, can “landing page” top search engine results?

    My SEO theories are really in a dance right now and actually I don’t know what to do or what should be done first.

    Many thanks for your time…

  25. [...] post “8 Ways your Landing Page Design is Sabotaging your Click-Thru Rate” discussed the importance of design and conversion. This was definitely one of the best [...]

  26. [...] 8 Ways your Landing Page Design is Sabotaging your Click-Thru Rate Jen Gordon из компании Unbounce перечисляет 8 ключевых причин, по которым landing pages имеют слабую конверсию. Хотя сам посыл не особо свежий, статья хорошо и подробно описывает проблему. [...]

  27. [...] фразы вроде «6 грустных кальмаров обнимаются нежно».8 Ways your Landing Page Design is Sabotaging your Click-Thru RateJen Gordon из компании Unbounce перечисляет 8 ключевых причин, [...]

  28. [...] 5. 8 Ways your Landing Page Design is Sabotaging your Click-Thru Rate [...]

  29. Amgad says:

    This gave me a few ideas to improve my landing pages. Thanks for awesome article!

  30. I believe, design with no sync with the images or the concept of the website is the biggest problem to the Conversion rate.

  31. [...] 8 Ways your Landing Page Design is Sabotaging your Click-Thru Rate Jen Gordon из компании Unbounce перечисляет 8 ключевых причин, по которым landing pages имеют слабую конверсию. Хотя сам посыл не особо свежий, статья хорошо и подробно описывает проблему. [...]

  32. sap says:

    Great article after reading your article I developed my site with your tips and page CTR increased to 50% Thanks for sharing to us.

  33. AbhiM says:

    thanks a lot for your article. it will definitely help me in developing my site… Many thanks