When it comes to page design, I’m fond of saying that we don’t need a designer as much as a draftsman. Their job is less about making things attractive and more about getting a visitor’s eyes to the right parts of a webpage.

What do I mean by “right parts?”

I mean that a visitor must know how to digest a page. They must know that they are in the right place, and why. This is the job of the headline and sub-headline.

They must know what choice they are being asked to make. Should they continue on in their journey? Buy something? Get the hell out?

They must know where to find answers to burning questions.

Designers are playing a game of tilt-ball, where the visitor’s attention must be carefully guided around obstacles and pitfalls. Literal pits to fall into.

Using visual cues, designers are playing tilt-ball with a visitor's eyes.

Using visual cues, designers are playing tilt-ball with a visitor’s eyes.

Designing a Web page is like a game of tilt-ball.

If the ball is a visitor’s eye, then visual cues provide the “gravity” that move the ball along the board.

This column is not for designers. It is for managers and marketers who are tasked with ensuring that the designs they get for their landing pages, ecommerce sites and home pages are competently designed to perform.

Pitfalls: Where the eyes get stuck

When someone says a page looks “cluttered”, the culprit is probably poor use of visual cues. Many of the pages we design have the job of “Help me choose.” This means that they must help the visitors choose a next step, a product, whether to sign up or not, or whether to leave.

1. Bridges to Nowhere

Two of the greatest visual cues you an employ are photos and arrows. Our love of images comes from big glossy spreads in magazines, where the images may be all that is seen as readers browse idly under their hair dryers.

Web readers are in a very different context.

Images and arrows are used gratuitously, to fill space or the “break up” a page. These elements will always draw the eye, but are they drawing the eye to a dead end?

What’s the Point?

Arrows are powerful sources of visual gravity. But they lose their power when they point to things that aren’t exciting, or are only exciting to the owner of the website.

This visual cue, an arrow, deadends at a weak call to action.

This visual cue, an arrow, deadends at a weak call to action.

The arrow promises something important. The button text breaks that promise.

This creates a visual bridge to nowhere.

Visually, arrows point to the most pertinent part of the page. If that doesn’t excite the reader, then the rest of the page seems unimportant.

If you’re going to use an arrow, make it point to something exciting for the visitor. The arrow below points at something a bit more exciting:

The arrow points to the way to get the offer. Source

The arrow points to the way to get the offer. Source

Arrows don’t have to point to extraordinary offers. They can be used as simple guides to increase scrolling, as long as they are working in the interest of the reader.

This arrow serves the visitor, letting them know that more follows.

This arrow serves the visitor, letting them know that more follows.

Arrows come in many forms. Here a simple chevron increased booking in this AB test.

Adding a simple chevron arrow increased scrolling and conversions. Source.

Adding a simple chevron arrow increased scrolling and conversions. Source.

Even words can be used as pointing devices.

Words can be used as visual cues to guide the eye.

Words can be used as visual cues to guide the eye. Source

Helpful tip: Point to something that is exciting to the reader, not just something you want them to see. Or better yet, make what you want them to see the most exciting thing on the page.

2. Faces of Death

Images of people will suck attention away from almost any important text on a page. This is why so many designers’ use of images works against the business.

Faces are visualy attractive to humans.

Faces are visualy attractive to humans. Source Tobii Technology

Faces draw our eyes. If someone attractive is looking at us, we look back.

We’ve written before about how stock photography and other forms of “business porn” are both a wasted opportunity on a page. Images will powerfully advance the value proposition of any page.

Images are also powerful visual cues when used correctly, yet too often, they’re dead ends.

The human face draws the eye, but doesn't do anything with it.

This human face draws the eye, but doesn’t do anything with it.

This image succeeds in enticing visitors to look away from the primary call to action.

Adding a caption indicating that this is a real person adds credibility.

Adding a caption indicating that this is a real person adds credibility.

With a caption, this image becomes a credibility builder and explains the “Watch Video” offer.

Consider adding calls to action in your captions and in-image copy.

Consider adding calls to action in your captions and in-image copy.

The direction of the eyes can be used as a visual cue. In the following image, the model guides the visitor toward the site’s navigation, but away from the primary call to action. Her body directs our gaze away from the copy as well. This is probably not an effective visual cue.

The gaze and body position are visual cues that, in this case, direct attention away from the copy.

The gaze and body position are visual cues that, in this case, direct attention away from the copy.

In the following page, the model is looking generally in the direction of the call to action. This image needs a caption below or overlaid on it to make it an effective visual cue.

The eyes draw attention to the offer, but this image needs a caption.

The eyes draw attention to the offer, but this image needs a caption.

Bryan Eisenberg uses an image to direct attention to the main offer on his website. Notice the subtle finger pointing downward in the following image.

Bryan Eisenberg uses his hero image to draw attention to the subscription offer on his home page.

Bryan Eisenberg uses his hero image to draw attention to the subscription offer on his home page.

Repeat your offers in and near images for maximum impact.

The visual cue is an image and the in-image messaging calls the reader to action.

The visual cue is an image and the in-image messaging calls the reader to action.

3. Motion for Motion’s Sake

Probably the most powerful visual cue is motion, any kind of motion. Like images, moving things can draw the visitors into a hole from which they never escape.

The most common source of motion on business websites today is the image carousel. This is a staple of the web because marketers can’t make hard decisions, or because politics require that everyone get a piece of limited home page real estate.

In our AB tests, we often find that removing rotating carousel images improves conversion rates. In situations where carousels win, the major contributor is the first slide. The second contributor to a winning carousel is a slow fade transition.

In other words, make the carousel look like a static image.

The reasons that a carousel might underperforms is threefold.

  1. Constant motion diverts the visitors’ eyes keeping them from getting into the page’s message.
  2. The burden of multiple large images increases page load time so much that it affects conversion rates.
  3. Technical issues prevent the carousel from displaying properly in certain browsers, devices and screen sizes.

There is a lot to lose with this kind of visual cue.

Rotating carousels of images have proven to be negative visual cues.

Rotating carousels of images have proven to be negative visual cues.

Carousels are also used to rotate customer logos, to slide through customer testimonials and to reveal products.

Carousels are all signs of indecision on the part of the business that owns the website.

While the rotating carousel does appear to be on the way out, it has been replaced with an even worse motion –based visual cue: full-size video animation.

The video in this animation is 1.5MBytes, a massive hit to load time. And it’s blurred out. What does this communicate?

Motion without purpose can have a chilling affect on conversion rate.

Motion without purpose can have a chilling affect on conversion rate.  Source

Designers justify this with unsupported statements like these:

Stunning video or animation in the background can easily make people stop and stare, then examine it, increasing the time they spend on the site, and hopefully lead to more interaction with the contents [sic] on the site.

The argument is that, if visitors stop and stare, it increases time on page. This, the errant thought continues, results in more interaction with the page. Here’s the punch line. The motion reduces engagement with everything else on the page, but only if the visitor is around long enough for it to load.

Businesses seem to be buying this.

Walking people. A factory. Big buildings. Was this background image really necessary?

Walking people. A factory. Big buildings. Was this background image really necessary?

The same thinking is used to justify parallax animations – that a more interesting page increases engagement. Our testing experience is that engagement often increases as conversion rate decreases. As it turns out, engagement is also a measure of how confused a visitor is.

The proper use of motion as a visual cue is to draw attention to something important.

If you don’t think that this sentence is important, then you are not human.

Nonetheless, if you’re going to use motion, use it to draw attention to something valuable.

In the animatiTest-na-anskioznost.gifon below, you can see how the popup “shakes” to indicate that the visitor made an error in entering data. This is actually helpful to the visitor.

Here, motion is used in the service of the visitor.

Here, motion is used in the service of the visitor.

Motion is SUCH a strong visual cue, that it can quickly overwhelm a visitor.

Unnecessary entrance animations prevent the reader from focusing.

Unnecessary entrance animations prevent the reader from focusing.

This parallax implementation only serves to hide content, making the page look blank at one point.

There is no gain in hiding content just so you can add motion to its reveal.

There is no gain in hiding content just so you can add motion to its reveal.

In affect, many of today’s parallax designs end up looking like this to the visitor.

This entire page is a collection of visual cues.

This entire page is a collection of visual cues, rendering all of them ineffective.

4. Gestalt Principles and Poor Grouping

The human mind likes to group things. When things can’t be grouped, the visitor has to work too hard to comprehend and prioritize a page. This is what we typically call “clutter”.

Grouping of things is another important visual cue. It is a combination of Gestalt Principles used in design, and can entail similarity, proximity, and enclosure.

Two places where grouping is an important visual cue are ecommerce category pages and SaaS pricing pages.

Visually, this category page is hard to group correctly. Green boxes denote some possible visual groupings.

Visually, this category page is hard to group correctly. Green boxes denote some possible visual groupings.

Adding some visual cues creates enclosures, communicating what objects are grouped.

Adding grid lines helps group items on a page. Green boxes indicate visual grouping.

Adding grid lines helps group items on a page. Green boxes indicate visual grouping.

In the following example, the enclosure leaves out the product pricing, description and star rating, but the white space creates enough separation.

The enclosure strategy here excludes the titles, pricing and star rating.

The enclosure strategy here excludes the titles, pricing and star rating.

The enclosure here doesn’t serve the reader.

Without visual cues, we group things in unexpected ways. Green boxes indicate visual groupings.

Without visual cues, we group things in unexpected ways. Green boxes indicate visual groupings.

With the addition of white space, we can influence the way visitors group things visually.

The introduction of space here causes items to be grouped into rows. This is easier for the brain to parse.

The introduction of space here causes items to be grouped into rows. This is easier for the brain to parse.

5. Product Pages & Limited Information

This page uses visual cues to prevent grouping.

This pricing page uses visual cues to help the visitor choose

This pricing page uses visual cues to help the visitor choose. Source

First, the arrow points to a call to action, “Try it free!” The hand-written script makes the offer stand out. That is, visitors don’t group it with the rest of the text.

Next, the “Plus” column is highlighted in a different color and labeled “Most Popular” in red. This is important, because we would otherwise group all four together. This visually anchors the decision to the top higher-tier options. The choice goes from “Choose the best” to “Choose between Plus and the others.”

When we don’t provide visual cues, our visitors may not feel they have enough information to make a choice.

This pricing page offers no visual cues to “Help me choose.”

This pricing page offers no visual cues to “Help me choose.”

Pricing pages often rely on lists of features to differentiate. Unfortunately, they don’t realize that they are creating arbitrary groupings simply with the text they choose.

Here’s a list with inadvertent groupings.

Blue and black boxes denote visual grouping by text length.

Blue and black boxes denote visual grouping by text length.

The visitor will read the first item in the group. If it doesn’t interest them, they move to the next group, not the next item. We can see this behavior in heat map reports and session recordings.

Mangers should always ask, “Have we used visual cues to help our visitors choose?”

Content is the Best Visual Cue

From the visitor’s point of view, the best visual is the content that she is looking for, right? So visual cues should not be used in place of content. BH may have transformed Foundr Magazine, but there is more missing on this page than an “e”. This page relies on an arrow to indicate where the visitor can find the menu for the site. What would be a better visual cue than an arrow?

A menu.

This implementation relies on a small visual cue to reveal key information.

This implementation relies on a small visual cue to reveal key information.

As conversion optimizers, we are not fans of content hidden simply for the sake of design. Progressive reveal is rarely beneficial and only works in specific use cases.

Managers should say, “No” to hiding important content from decision makers.

Shape as a Visual Cue

We all know that we should click on buttons. But what is a button. In the image below, there are three buttons. Which is clickable?

The three call to action buttons on this page perform differently as visual cues.

The three call to action buttons on this page perform differently as visual cues.

One is a white border around a menu item. One is a white rectangle with a call to action. The other is the classic arrow indicating video is available. Of the three, the video arrow is the most recognizable as a button, something you can click on.

With the advent of flat design, shape and shading are used less and less to indicate clickable elements. However, designers are returning to some of the shapes that made things look clickable.

Which element below is clickable, the “Enterprise” button or the “Sign Up” button?

Which of these blue elements is clearly a button?

Which of these blue elements is clearly a button?

The blue area containing “Enterprise” is a title. It is not clickable. The blue shape with the rounded ends is clickable, and is shaped like a button to indicate that.

Which is clickable here?

Six styles of buttons, from most to least visually clear.

Six styles of buttons, from most to least visually clear.

In general, the shape with rounded edges and shading indicating a physical button will give the visitor a clearer message that an they can take action.

Text as Visual Cue

The way you create text can be a visual cue. The myriad opportunities to maximize this ROI are often wasted. Some designers espouse a minimalist approach, minimizing the amount of information that is encapsulated on a page. Others evangelize a more comprehensive style. These two approaches are neither right nor wrong. Research by usability expert Jakob Nielsen found that fifty-two percent of screen space was completely wasted in 2013, more than in 2001.

We Are Now In Control Of Your Eyes

Jakob Nielsen says that in 2013, half of all screen space above the fold was wasted.

Based on what you’ve read, can you tell me specifically how much screen space is wasted according the study by Jakob Nielsen?

A. 50% of the screen space

B. 52% of the screen space

The most accurate answer is B, or 52%. If you chose A, don’t be sad. It was by design.

You should have answered A, because I hid the more accurate answer in the opening paragraph of this section. The first line is uninteresting, just repeating the heading. Then comes a 34-word sentence with many multisyllabic words (See what I did there?). The important stat was written out because numbers jump off the page.

This paragraph is a visual pitfall.

To support the more general, less accurate answer, I used an unexpected heading, “We are now in control of your eyes.” I highlighted that “Half” of the screen space is wasted using a pull quote and linked text. These are visual cues.

The scanning eye will tend to land on textual cues.

  • Headings and subheadings.
  • Highlighted text, Bold, Italicized, or Colored.
  • Bullets or numbered text. Like this.
  • Short paragraphs.
  • Shorter lines.

It’s not that people don’t read, it’s that they favor text that is easier to read.

It’s Easy When You Know What You Want

None of this is a result of my training in UX, psychology or persuasive writing. I knew that there was one thing that I wanted you to see, and another that I did not.

You might start by looking first at what doesn’t work for you.

Rethink filler images or remove them. Consider if branding images need to be so large. Rewrite headings to tell scanners what’s on the page. Eliminate long paragraphs, long sentences and business speak.

Then see where you are. Odds are that your page will have improved immensely, as measured by your accountant.

Understanding what’s important on any page and then applying some tricks to focus your visitors’ attention is a great way to get what you want and to help them find what they are looking for.


21 Quick and Easy CRO Copywriting Hacks to Skyrocket Conversions

FREE: Click to Download

21 Quick and Easy CRO Copywriting Hacks

Keep these proven copywriting hacks in mind to make your copy convert.

  • 43 Pages with Examples
  • Assumptive Phrasing
  • "We" vs. "You"
  • Pattern Interrupts
  • The power of Three

When my daughter was choosing colleges to apply to, two of the key drivers in her decision were here scores on the SAT and ACT. These aptitude tests, in part, determined two things:

  1. Her ability to answer multiple-choice questions.
  2. Her ability to get into certain colleges.

I was interested in the psychology of this staple of standardized testing: the multiple-choice test. As it turns out, my curiosity was rewarded, because the psychology of the multiple-choice question can be applied to your website home page.
Stay curious, marketers!
The goal of a multiple-choice question should be the opposite of the goal for a home page. The best home pages are designed to steer you towards one correct answer. The test question is designed to catch the person who is guessing and steer them toward multiple wrong answers.
 

The components of a multiple-choice question

The components of a multiple-choice question


Unfortunately, when we evaluate our clients’ home pages, we often find that they are testing their visitors, too. These pages seem designed to punish visitors for guessing wrong.
Is your home page secretly trying to test your visitors?

Lesson #1: The Job Of The Home Page

The job of the home page is thus: “Help me choose.” Its primary goal is to get the visitor into the site and on the right path — not to distract or confuse.
Too often, the home page is just a place for billboards. It is treated like a truck stop on the side of a highway, yet neon lights are rarely required.
If your website is not well-designed, a visitor will find your home page despite your greatest efforts — for if you had done well, they would have landed somewhere more specific to their needs. The homepage is the default, the easy find, the quick hit. It’s best to get visitors off of it and into your site as quickly as possible.
Most home pages are fraught with political intrigue. Every department wants a piece of it. This is why home pages come to resemble the walls of a subway station, plastered with ads and handbills.
If your website can’t decide which answers to present, does it make sense to present them this way?

Now rotating banners don’t seem so smart.

Now rotating banners don’t seem so smart.


If your home page is designed to help visitors find the right answer out of multiple potentially correct ones, then it should follow the form, but not the function of a multiple choice question.

Lesson #2: Why Did You Visit Our Website Today?

Ultimately, your home page answers the question, “Why did you visit our website today?” What you have to decide is which answers you want to provide links for.
Any answer that makes sense is considered the “right” answer. Any answer that doesn’t is considered a distractor.

Home page: Why did you visit our website today?
Visitor: To share it on Facebook.

Few visitors would claim that they came to your site so they could add it to their Facebook news feed. We consider social media links distractors. However, many home pages place them in a prominent position.

Home page: Why did you visit our website today?
Visitor: To check prices on a product I want.

Clearly, this is a desired action for an e-commerce site. This is a “right” answer.
Identify the stem, the answers, and the distractors on your home page and you will find opportunities to optimize.

What Else Can We Learn From Multiple Choice Tests?

I found a checklist on the Scholastic website for designing multiple-choice tests. Let’s select some of the principles from the list to see if your home page is — for better or worse — designed like a multiple-choice test.

3. Use Answer Choices That Are Believable Or Could Make Sense

It is important that the links, images and navigation are believable and make sense. This is self-evident. There is a caveat to the phrase “make sense,” and that is this: The choices must make sense to your visitors, not just to you. Navigation choices and calls-to-action should be written in the voice of the visitor for best results.
Use proof to enhance believability. Bold claims and hyperbole may sound impressive, but left by themselves, they don’t make for believable choices.

4. Always Write The Correct Answer First

The home page corollary is to “put answers to immediate questions above the fold.” Someone who is coming to repurchase a product shouldn’t have to scroll down before they can login. Those visitors coming for a sale should see a link to the sale page at the top.
Visitors ready to take action should see options immediately. Visitors who are browsing or looking for education on your product or service (top of the funnel) are more likely to scroll down.

5. Always Have A Minimum Of Three Answer Choices, But No More Than Five

On a home page, it’s hard to know how many options to offer. However, if you could narrow your choices to less than five, you’d be doing very well.
If a multiple choice question was a home page, it might look something like this:

What if your home page was laid out like a multiple choice question?

What if your home page was laid out like a multiple choice question?


Oli Gardner of Unbounce uses the metric “Attention Ratio,” which is the ratio of total possible actions (links) to desired actions. It shouldn’t be hard to calculate this for your home page.
If a home page looked like a typical multiple-choice question, it might look like JShoes.com.
J Shoes has a relatively low Attention Ratio. A typical homepage has an Attention Ratio of 40:1 or greater. © 2015 JSHOES.COM

J Shoes has a relatively low Attention Ratio. A typical homepage has an Attention Ratio of 40:1 or greater. © 2015 JSHOES.COM


The J Shoes home page gets pretty close to “five or less” choices. Unfortunately, the big graphic in the center isn’t clickable. The little arrows in the upper right of the hero shot don’t work in Chrome.

6. Vary The Position Of The Correct Answer

On your home page, don’t vary the position of the correct answer. For returning visitors, predictability is important. For new visitors, familiarity is helpful. Your site should function similar to other sites like it.
Familiarity will help your visitors choose.
FinishLine.com completely changed the look and feel of their website. They lost $3 million in sales in just weeks and restored the old site to their perplexed visitors.
 

FinishLine.com completely changed their website in 2013 with disastrous results. © 2014 The Finish Line, Inc.

FinishLine.com completely changed their website in 2013 with disastrous results. © 2014 The Finish Line, Inc.


If you visit FinishLine.com today, though, you’ll see that they have significantly reduced their attention ratio (as compared to the “Before” picture above).

7. Avoid Using Distractors With Minute Differences

Your site needs a “visual hierarchy” in which the “right” answers are more prominent than distractors. The top questions your site will answer should be the most visually conspicuous items on the page.
Anything else is a distractor.
If your web design firm recommends something like a parallax design, recommend them to your competitors. Any design the doesn’t contribute to the visual hierarchy is counter-productive. How do moving stars support the home page message for Alquimia WRG?

The stars move with the cursor. Can you tell what this site sells?

The stars move with the cursor. Can you tell what this site sells?


Over-developed websites are slow to load. This directly impacts conversion rates. No matter how cute the treatment, if your home page requires a “Loading” message, you’re probably in trouble.
Making your “Loading” message cute won’t make it less irritating to impatient visitors. © 2013 PSCU.

Making your “Loading” message cute won’t make it less irritating to impatient visitors. © 2013 PSCU.

8. Avoid Using Answers That State All Of The Above, None Of The Above, Or A And B

One of the important jobs of interactive design is to come up with a logical grouping of pages. If you try to do everything on your home page, you are probably going to confuse your visitors.

GreenMan.net has an effective top navigation, but the body of the home page tries to do everything. © 2014 Potplant Limited.

GreenMan.net has an effective top navigation, but the body of the home page tries to do everything. © 2014 Potplant Limited.

Don’t ask your home page to do more than it should, or visitors will never find what they are looking for.

9. Organize The Answers In A Logical Order, I.E., Alphabetical, Numerical, Shortest To Longest

Logic is a good idea, but only for a portion of your visitors. In broad terms, there are deliberate decision-makers and quick decision-makers coming to your home page. You need to have answers for both.
A logical navigation and categorization structure is key for deliberate visitors. Linked pictures, search boxes and other tools that allow the visitor to jump into the site are key for spontaneous visitors.
In general, we want the answers for quick decision makers to be near the top, but can put information for the deliberate decision makers lower on the page and deeper in the site.
Don’t ask your quick decision makers to hunt for what they are looking for. They can only stand so many distractors before they bolt.

The Helpful Multiple Choice Home Page

To design a home page that gets visitors into your site, start by identifying your key questions (stems), identify the answers your visitors are looking for, and eliminate distractors.
[signature]

Listen. We both know that “best practices” don’t mean much.

… right?

If you aren’t A/B testing, you are leaving a ton of money on the table.

True.

BUT here’s the deal.

A/B testing is a time-consuming method of optimization. It’s effective, but if you can simply click “edit” and make an obvious improvement, start there.

This is why “best practices” can be so powerful. They let you apply what others have learned and get quick wins when nothing is working. Plus, when you begin implementing a solid A/B testing framework, best practices can give you some great hypotheses for your first round of tests.

In today’s post, we’ll cover 21 proven best practices, backed up by case studies, statistics, and data.

Let’s begin.

#1: Start with a great headline to boost conversions 41%

The headline is perhaps the most crucial element of your entire landing page. Why? Let’s ask David Ogilvy, famous advertising revolutionary, his thoughts on headlines:

“On the average, five times as many people read the headline as read the body copy. When you have written your headline, you have spent eighty cents out of your dollar.

If this has changed in the digital age, it has only gotten worse. Now, let me hammer it home with a case study…

BettingExpert is an online betting forum where tipsters can share their experience and tips. They ran an a/b test on their headlines with three variations: One with a question, one with a benefit, and one utilizing loss aversion.

Example of headline AB test

Three similar headlines on this page deliverd very different results.

As you can see, the benefit headline (which spoke directly to it’s target reader’s dreams and aspirations) boosted conversions by 41.14%.

The takeaway here? Focus on the benefit and writing amazing headlines.

#2: Add strong testimonials and social proof to be 12X more trusted

Have you ever seen a testimonial like this:

“Awesome service! Definitely recommend!” – Jane Dough

You may even have used something like that in the past.

The thing is, social proof works. Studies show nearly 70 percent of online consumers look at a review prior to making a purchase and reviews are 12-times more trusted than product descriptions and sales copy from manufacturers.

But, weak social proof can harm your conversion rates.

Frankly, most customers will write a poor review or testimonial, though they mean well. Derek Halpern from Social Triggers actually increased conversion rates by 102% by removing social proof.

So, use social proof. But, you’re probably better off writing a strong testimonial yourself. Then getting permission from your customer to say it matches their experience. This ensures it will work more in your favor.

Pro Tip: Use exact numbers in your testimonials if you can. This works due to a principle in psychology known as Ambiguity Aversion, which states that humans prefer known risks over unknown risks (i.e. we like to know what we’re getting into). Robbie Richards does this well on his blog.

Landing page testimonial example

Your testimonials should be written by you with the agreement of your customer.

#3: Write action-oriented copy to increase clicks by 93%

If you’ve ever written a paper in high school, your English teacher probably told you to write in “active” voice, not “passive” voice. Why?

Because passive voice has a weak quality, is bland, and can be boring. Active language excites, energizes, and drives action. See what I did with the previous two sentences?

It turns out that your English teacher was right. Here’s why.

The company L’Axelle sells underarm sweat pads, and ran an A/B test on the product landing page. Their original page used passive headline attempting to integrate the benefit, “Feel fresh.” The second used direct language and strong verb “Put an end to sweat marks!” With language like this, the exclamation point is probably redundant.

Version A

Version A of landing page with passive call to action.

Version A of landing page with passive call to action.

Version B

Version B of landing page with active call to action.

Version B of landing page with active call to action.

That simple change in copy lead to a 93% increase in clicks, for a total conversion rate of 38.3%.

It goes to show – landing page copy matters. Make your copy action-oriented.

#4: Use contrasting CTA colors to grow sales 35.81%

This seems so mundane and simple (and sometimes, it is). However, a simple change in the CTA button color can have surprisingly large effects on landing page conversion rates.

Wanna know how? Here’s a case study:

A major eCommerce site that sells hand-painted porcelain wanted to grow their business (who doesn’t?). They decided to get Unbounce to help them out.

Unbounce came in and made one super simple change: They made the “ADD TO CART” button green instead of blue. The result?

A 35.81% increase in sales (yes, sales, not just clicks).

AB Test in which button color was changed

Increasing the visibility of the call to action increased conversions.

Now, why did this work? I don’t think it’s because green is a particularly compelling color.

Changing the CTA color worked because the green gave the button some contrast.

The blue didn’t stand out at all, whereas the green pops. Our focus, then, is not on particular colors being better for CTAs than others, but on ensuring a color contrast to draw the eye.

Wondering what color to use? Try picking the opposite color (from your brand’s or landing page’s main color) on this color wheel:

Designers use the color wheel to select complimentary--and conflicting--colors.

Designers use the color wheel to select complimentary–and conflicting–colors.

In other words, if your main color is yellow, try a blue or purple CTA. If your main color is green, try a purple or red CTA.

#5: Command 31.03% more people to click with actionable CTA copy

You had to have seen this coming – if action-oriented copy in your headlines and body increase click-thru rates, of course they’d work in your call to action (CTA) copy as well. The CTA is usually located on the button or link on which the visitor must click.

But, don’t take my word for it. Let’s take a look at a case study:

WriteWork offers essays and writing guides for students. Their original checkout page CTA (shown below) simply said “Create My Account”. Who wants to create another account?

However, when they changed the text to say “Create Account & Get Started”, they saw a nice 31.03% increase in conversions. Not too shabby, eh?

AB Test in which the call to action button was changed

New call to action copy deliverd a significant conversion increase in this test.

The verdict? Make your CTA copy actionable, and tell your customer exactly what will happen when they click it.

#6: Use faces, but not near a CTA (unless they’re a top industry influencer)

The human brain is very drawn to faces and eyes. We have a tendency to look at faces before anything else on a web page. This can be a good thing… or it can hurt conversions.

When it comes to using faces on a landing page, they can add credibility and trust. However, they can also distract the reader from a message or CTA.

To get around this, only use faces of people the user is bound to recognize and trust (such as an authority in your industry) near CTAs. For maximum effect, have them looking at, and potentially even pointing to, your CTA.

Of course, you still want to put pictures of you and your team to help build trust – just don’t place them near the call-to-action.

In a case study, Medalia Art was able to boost clicks 95.4% by replacing the images of art on their home page to images of the artists.

The images of the artists increased conversions in this art case study.

The images of the artists increased conversions in this art case study.

#7: Format like a boss

Just as formatting makes your blog posts more engaging, so too does formatting make your landing pages easier to navigate and understand.

What do I mean by formatting?

  • Use bulleted lists to state your key benefits.
  • Use images to give the eyes a rest from reading text.
  • Utilize white space to avoid extra noise and distraction.
  • Include headings and subheadings to break up your page.
  • Use directional cues (like arrows) to point the viewer’s eyes to your CTA.

Great formatting makes your landing page easier to skim–and you know most of your visitors are only going to skim–making the most important points immediately apparent.

Just as people prefer better-looking people, people prefer better-looking websites because they associate beauty with perceived trust and credibility.

Want an example? Basecamp redesigned their landing page and found a 14% increase in conversions.

Basecamp landing page redesign AB test

Basecamp tested formatting in this landing page AB test.

Here’s one more example, for good measure: Swedish company Unionen saw a 15.8% click-through boost when they bullet-pointed their benefits:

Version A:

AB test version with block of text

Version A: A big block of text at the key call to action.

Version B (15.9% Increase):

AB test version with bulleted text

Version B: You don’t have to read Swedish to know that bulleted text and white space wins.

#8: This is 2017… use spellchecker already

Having grammatical or spelling errors in your copy can seriously hurt conversion rates. It makes you appear unprofessional at best, and like a scam at worst.

Want a real-life example of how badly a small mistake can harm your business? Take a look at this case study from Practical Ecommerce on a website selling tights – correcting their spelling from “tihgts” to “tights” on their product category page shot conversions up 80%.

Example of bad spelling on a landing page

Bad spelling can destroy visitor trust.

In a world where tools like Grammarly and built-in spell checkers exist, there’s just no excuse not to have immaculate grammar and spelling. Take an extra ten minutes to read through your page to ensure no errors get though.

Pro Tip: I actually like to read my writing out loud at least once. This helps me catch any errors and get a better idea of the flow and overall sound of things.

#9: Consider adding multiple CTAs

Multiple CTAs?! Are you crazy?

Before you scroll down and leave me a nasty comment, hear me out. I’m not talking about having a variety of buttons and forms leading to different places.

Rather, on longer pages, you should have multiple buttons and/or opt in forms that lead to the same outcome.

Having more than one chance for the customer to opt in allows them to scroll through and click at their own pace. If they don’t click your above-the-fold CTA, for example, they’ll have another chance in the middle or at the end of the article.

That said, too many buttons can cause your visitors to get decision fatigue, becoming tired of too many choices and leaving the page.

So, short rule of thumb? Place multiple CTAs on long pages, and a single one on short pages.

#10: Ditch the sharing buttons (unless you only have one other option)

One of the 21 persuasion techniques for conversion optimization was something called the “Hobson’s +1 choice effect”. This effect essentially states that having over two choices can cause anxiety and negative feelings, but we also want to have the choice to choose.

As such, if you only have one option on your landing page (the CTA), adding a “Tweet this” button can help, according the the choice effect. However, if you already have multiple offers, CTAs, or links in your offer, social buttons can add to the noise and reduce conversions.

In one case from Taloon.com, removing social sharing buttons from their product pages increased conversions by 11.9%.

AB test in which removing social sharing buttons increase conversion rate

Removing social sharing buttons increased conversion rate.

However, I’d like to point out two key elements here:

  1. They had four social sharing buttons instead of one (like “Share this product” or “Tweet this”), creating too many distractions.
  2. They also have many other choices on these pages, like clicking to a separate category or page on the website, putting them well above that ideal two-choice limit.

I’ve already said it, but I’ll say it again: you have to test these things to find out exactly what works for your product, audience, and business.

#11: Highlight your guarantees to build trust

Purchasing is an emotional decision, which is then backed by logic. Therefore, once you’ve sold someone emotionally on your product or service, you must then provide them with logical reasons to actually get through the checkout page.

One way you can do that is to highlight your guarantees.

A money-back guarantee is an amazing way to get people to commit. It’s truly risk-free. If they don’t like it, they can get their money back.

Neil Patel increased sales of his Traffic System course by 21% when he highlighted a 30-day money back guarantee.

It doesn’t have to be money back, either. Other guarantees you can try include:

  • A risk-free trial period.
  • A low-price guarantee (where you’ll refund them if they find a higher price).
  • A forever guarantee (where you’ll replace the product for life).

Don’t be afraid to test different guarantees, just as you we talked about testing different offers. You may find a free trial–a $1 trial to avoid credit card complications–converts better than the money back guarantee.

Pro Tip: Another way to build trust is by adding an SSL certificate to your site. That’s the green lock that says “secure” next to it. This shows your visitors their information is safe.

#12: Use the inverted pyramid method (keep the most important stuff at the top of the page)

The inverted pyramid is a writing style coined by journalists. It means keeping all of the key benefits and most important takeaways at the top of the page, then getting into the details as you get further down the page.

It looks like this:

The structure of the inverted funnel.

The structure of the inverted funnel.

(Source)

So, your attention-grabbing claims and statistics should be used at the top of the page to get visitors engaged, then your body copy, as you go down the page, should build anticipation for your product, at which point you give your CTA.

Of course, not all landing pages will be long enough to use the inverted pyramid method, but for longer pages it works wonders. Afterall, only about half of all your visitors will ever even reach the bottom of your account – you need to entice them.

Percent of article content viewed.

Percent of article content viewed.

Use the other best practices mentioned in this post, like formatting and imagery, to ensure you have the most important stuff first.

#13: Add related imagery and videos for 80% more conversions

Images aren’t just for formatting. They can be used to convey your main benefits and to help users understand what your product or service is about.

One study by eyeviewdigital.com even found that using video on landing pages can increase conversions by 80%. Check out their case studies if you’re interested in learning more.

When it comes to images and video, however, there are two things to keep in mind:

  1. Don’t overuse them. White space is your friend.
  2. Make the images relevant. Stock photos usually work against you.

If you’re in need of some images to add to your site, check out Unsplash. They have free high-res photos anyone can use. You can also use a tool like Canva to edit the images. For free.

Check out KISSmetric’s guide to creating unique landing page videos for more help on the video side of things.

#14: Remove any extra links

You’ve probably heard this tip before. “Remove navigation links so your visitors have to make a decision.”

However, with only 16% of all landing pages following this practice, does it really work?

HubSpot tested it to find out. They created two landing pages: One with a navbar, social sharing links, and footer, and one without any of the three.

Example of hubspot landing page with navigation

Navigation should not be necessary on a complete landing page.

The results? Up to a 28% increase in conversions. They even tracked every change and put the results in a nice little chart:

Results of landing page AB test in which navigation hurt conversion rate

In this case study, navigation hurt conversions on most pages or didn’t help at all.

In other words, it’s worth a shot to remove extra links. It may not always work, and it may not be worth losing the clicks to other parts of your website, but it had potential to increase sign-ups.

#15: Keep your landing page consistent with your brand and ads

The first job of the landing page is to keep the promise made in an ad, email, social post or link. Any variation can cost you conversions.

Consistency is key to a great many things, from blogging to getting fit. It’s necessary to succeed, and people love seeing it.

Especially on landing pages.

I can think of no better example than Optimizely’s case study on their PPC ads. They ran two tests:

In the first one, the Headline was kept the same, regardless of the ad copy they used. In the second test, they matched the landing page headline to the ad copy.

Test A:

Example of landing page that serves different offers

Test A: One landing page attempts to keep three different promises. Unsuccessfully.

Test B:

Example of using differnt landing pages for each offer

Test B: These landing pages keep the specific promises made in each add.

The results? A 39.1% increase in conversions.

Of course, the headline isn’t the only thing you should keep consistent. Also try to:

  • Match the colors of your ad/brand with your landing page.
  • Use similar images and design.
  • Use similar (and even an exact match) of your ad copy on your landing page.

Keeping things consistent ensures people aren’t confused when navigating your site, and they know get what they expected to get when they click your ads.

#16: Achieve a 214% increase in conversion rate by asking for more information

One of the landing page best practices you often hear is to reduce the number of form fields as much as possible. It’s true, this reduces friction for the customer and has been shown to increase conversion rates.

BUT (there’s always a catch, isn’t there?), asking for more information better qualifies your leads and, in many cases, shows them you’re actually capturing the information needed.

Let me give you an example.

Advanced Grass is an artificial grass solution. They were able to achieve a 214% increase in conversions by splitting up their lengthy opt-in form into two parts: contact information and qualifying information.

Part 1:

Part 1 of the multi-step lead generation form.

Part 1 of the multi-step lead generation form.

Part 2:

Example of step 2 of a multi-step funnel

Part 2 of the multi-step lead generation form.

By simply splitting their form into two parts, they are taking advantage of the psychological principle of commitment and consistency, well known in the marketing world thanks to Dr. Robert Cialdini’s book Influence: The Psychology of Persuasion.

Basically, Cialdini found that people are more likely to take additional steps towards something if they’ve already committed to the first step. In the case of advanced grass, they already committed to entering their contact info, so they’re more likely to enter the few extra details.

Additionally, asking for the right information builds trust. How could you give an accurate quote for your artificial grass if the company didn’t know how many square feet you need or what kind of project it is?

The bottom line? Ask for more info, but split your form into two steps.

#17: 10X clicks by testing different offers.

Sometimes in our landing pages, we’re focusing on entirely the wrong offer. Maybe people don’t want a ‘free trial’ or ‘free consultation’. What about a free eBook or a free tool, instead?

I didn’t pull those examples out of my you-know-where. WordStream actually increased conversions 10 times over by changing their offer from a “Free Trial” of their software to giving away a free tool they created: The Google AdWords Performance Grader.

WordStream found success by changing their offers.

WordStream found success by changing their offers.

Of course, creating your own tool requires time, capital, and finding a good developer, unless you happen to be one. Here are some other offers you can try:

  • A free ebook or video explaining how your software works (alongside a free trial, of course)
  • A free case study detailing how others have used your software to maximize their business.
  • A template or worksheet helping your visitors accomplish something specific.

The key is to offer something highly relevant to what your software does and that’s very valuable, meaning you didn’t slop it together in five minutes. Put some thought into it.

#18: Boost engagement by 102% using scarcity

If you’ve been building landing pages for any amount of time, you’ve surely heard of using scarcity as a tactic to increase sign ups.

Using scarcity means limiting resources in order to get your visitors to take action right away.

For example, putting an expiration date on a coupon, limiting an offer to a certain number of customers, and announcing that you only have a few items left in stock are all versions of scarcity.

Going back to Cialdini, scarcity is one of his psychological principles of persuasion. People place more value on that which is limited.

Let’s look at a case study by KISSmetrics:

Hiten Shah decided to reduce the free trial period from 30 days to 14 days – and he found a 102% boost in engagement. In other words, twice as many people took action and used the free trial during the 14 days than the 30 days.

Kissmetrics changed the length of their free trial

More people signed up during the 14-day free trial than the 30-day trial.

So, use scarcity on your own pages by including a countdown timer on your page or offering a limited number of products.

19#: Pay attention to “the fold” to lift conversions 220%

You think I’m going to tell you to put your CTA above the fold,  don’t you?

Well, you shouldn’t necessarily do that. This is one of the most common of landing page best practices.

Instead, pay attention to the fold. While there is research that supports above-the-fold CTA, there is research against it as well.

Most engagement happens right at or just below the fold. Let me explain…

Most engagement happens right at the fold or just below it.

Most engagement happens right at the fold or just below it.

As you can see in the chart above, people view the topmost area of the page the least, and view the area “just above the fold” the most (i.e. right where you begin to need to scroll).

Joanna Wiebe of Copy Hackers and Airstory had this to say:

“Don’t cram everything above the fold. Countless tests and scroll- / click-tracking studies have shown that visitors are willing to scroll… as long as they know there’s something to scroll down for. (So don’t create a false-bottom.) Don’t prevent people from exploring your content by making assumptions about their use behaviors.” (via Copy Hackers)

So, where should you really place your opt-in form or CTA?

It depends on the complexity of your offer (and thus, the amount of information needed to explain it). This chart by KISSmetrics explains it perfectly:

Offer complexity affects the placement of your call to action on the page.

Offer complexity affects the placement of your call to action on the page.

Let me give you a more direct example. Marketing Experiments tested one of their client’s CTA placements above- and below-the-fold. Below-the-fold actually resulted in 220% more conversions, likely due to the complexity of their product.

Example of placing a call to action near the bottom increases conversions

In this case, placing the call to action near the bottom of the page increased conversions.

(Source)

What did we learn? Above-the-fold isn’t always best – test your CTA placement.

#20: Don’t rely on these landing page best practices. Test.

All of the best practices on this list can (and probably have) been broken with exceptions at one point or another. Like I said in the very beginning of this post – best practices make a lot of assumptions. Use them, but don’t be afraid to go against them.

In the words of Mark Twain:

“When you find yourself on the side of the majority, it’s time to pause and reflect.”

I’ll leave you with one final case study to prove just how important it is to a/b test your landing pages. Convert Verve, who’s examples you saw in some of the practices above, ran a simple test on the checkout page of one of their clients – removing the green arrow pointing to their CTA button.

As it turns out, removing that green arrow actually reduced conversion rates by 12.29%. Who would have thought? Of course, if you followed along above, it makes sense – removing the arrow reduces the chance for the button to draw the eye.

Example of AB test in which removing arrow lowered conversions

Removing the arrow reduced conversion.

So, in parting: Always test your landing pages, and don’t be afraid to go against best practices once in awhile.

Conclusion

Landing page best practices are just that – best practices. We can take what’s worked for others and copy it for our own use, but ultimately, it comes down to trying different things.

As Mark Zuckerberg says, “Move fast and break things.” Follow expert advice to make your first page the best it can be, then start experimenting.

Now, what did I miss? There are surely more landing page tips & tricks out there I didn’t cover here. Drop me a comment and let me know.

And, if you found even one thing useful about this article, please take a moment to share it.

bill

In this post, we share nine creative approaches to AB Testing your landing page. Tests that go beyond the basics to expand on what you’re already doing. They might even inspire you to come up with your own imaginative AB tests.

There are a surprising number of AB tests smart marketers can run on their landing pages to ensure they’re getting the highest conversion rates possible. You already know you can experiment with different headlines, subheads, call to action text and colors, and you know to introduce design elements that draw the eye where you want visitors to look.

1. Create Targeted Landing Pages for A B Testing

This is an AB test you would apply at specific times, such as when you launch an advertising campaign. Your advertising campaign would be targeted to a specific audience, and your ad variations would use your generic landing page and your targeted landing page.

For example, if Shopify did an AB test between their generic vs. targeted landing pages in an advertising campaign, the control would apply to anyone looking for an eCommerce solution.

Shopify's homepage with a non-specific target would be the control in this AB Test

Shopify’s homepage with a non-specific target would be the control in this AB test

For a variation, they could use their landing page targeted to booksellers.

This landing page has a specific group of users in mind

This landing page has a specific group of users in mind

To maximize your conversions with this test, analyze your customer database to determine who your best customers are and create targeted landing pages focused on those specific groups of customers. If you do a quick search of Shopify’s targeted landing pages on Google, you can see they have done this and created targeted landing pages for their top customer groups.

There are different landing pages to accommodate different demographics and groups of users

There are different landing pages to accommodate different demographics and groups of users

You can use these as examples of how to create targeted landing pages for your top customer groups and demographics.

2. Experiment with Animated Headlines

Headlines can make or break your landing page, as they are the first words that capture your visitor’s attention. It’s a simple AB test that can make a dramatic impact on conversions, and it can be done using most AB testing tools including Marketizator.

The key to the headline AB test is to change nothing but the headline. For example, you can see how ActiveCampaign changed from a simple headline about their features…

ActiveCampaign's headline about features

ActiveCampaign’s headline about features

…to a better headline about the benefits their customers can expect when using their service.

ActiveCampaign's headline about benefits

ActiveCampaign’s headline about benefits

This change proved to be a winner, as they have kept it since 2015 with a constantly changing message about their benefits.

This animated headline with benefits proved to be a winner

This animated headline with benefits proved to be a winner

3. Vary Featured Homepage Products

In most cases, your homepage will be the most popular landing page on your website. Hence, it will be a page where you should do extensive AB testing. One test you can do to see if you can increase conversions is simply changing your featured product. Nest does this by swapping out its popular monitoring camera (formerly Dropcam)…

Nest featuring its Nest Cam on the homepage

Nest featuring its Nest Cam on the homepage

…with its popular thermostat controller.

Nest featuring its thermostat on its homepage

Nest featuring its thermostat on its homepage

At the time of writing this article, this test was currently running (as noted by the ?alt=1 that appears at the end of their homepage URL on occasion), so we’ll have to see which one wins in the end. In some cases, you may want to change your featured product based on the one that is currently getting featured coverage in the media and whether that coverage is positive or negative.

4. Creative AB Testing Landing Page Idea: Explore Different Stories

Do stories resonate with your customers and if so, which stories translate into the most sales? Find out through AB testing. Apple did this in this past by running multiple campaigns on their website, social media, and television ads featuring stories about musicians…

Apple's story appealing to musicians

Apple’s story appealing to musicians

…explorers…

Apple's story appealing to explorers

Apple’s story appealing to explorers

…environmentalists…

Apple's story appealing to environmentalists

Apple’s story appealing to environmentalists

…parents…

Apple's story appealing to parents

Apple’s story appealing to parents

…and many other customer groups. The goal was to show how their products could aid in the telling of everyone’s story, no matter what you did or how much of an impact you made in the world. Apple ultimately went back to a homepage focused on its latest products, but without AB testing, Apple couldn’t just assume that approach would convert the highest.


21 Quick and Easy CRO Copywriting Hacks to Skyrocket Conversions

FREE: Click to Download

21 Quick and Easy CRO Copywriting Hacks

Keep these proven copywriting hacks in mind to make your copy convert.

  • 43 Pages with Examples
  • Assumptive Phrasing
  • "We" vs. "You"
  • Pattern Interrupts
  • The power of Three

5. AB Testing your Landing Page: Shift the Focus to One Product at a Time

Landing pages have better conversion rates when there is one, clear call-to-action; sometimes that CTA is buying a product. But when your top landing page is your homepage, you can’t focus on just one product, right?
Maybe you can. In the past, Logitech had a pretty standard homepage that offered up all of its products all at once to homepage visitors.

Logitech's original, more traditional homepage

Logitech’s original, more traditional homepage

But now, Logitech gives visitors a tour through their top products, one at a time.

Logitech's new homepage focusing on a single product

Logitech’s new homepage focusing on a single product

In a few moments, you are completely immersed in a particular product and its main benefit, thanks to this new landing page. It’s definitely a way of AB testing your landing page you will want to try if you have a few products you can highlight in this fashion.

6. Transform Your Hero Image to Video

You know that great image of your product that you use to compel people to sign up or buy? Why not convert it into a video that dives even deeper into exactly what happens with that feature of your product. MailChimp made that change with their landing page, going from a screenshot of their newsletter designer…

Mailchimp's landing page with an image of newsletter editor

Mailchimp’s landing page with an image of newsletter editor

…to a video of how their newsletter designer worked.

Mailchimp's landing page with a video of newsletter editor

Mailchimp’s landing page with a video of newsletter editor

Instead of hoping that an image would convince visitors that their newsletter designer was easy to use, as the landing page claimed, the video was right there to prove it.
While their current landing page features a different, shorter animation, it still features one that demonstrates the ease of use of their newsletter designer, thus proving that since 2012, video and animation on the landing page beats a screenshot for conversions.

7. Try a Change of Scenery when AB Testing your Landing Page

Sometimes it’s not text or functionality that will make your site convert better, it’s simply imagery that matches the story of your value proposition. Zillow experimented with this idea by changing the background of its search. One variation was a neighborhood overview with home sale prices, which actually contradicts the line below the image about looking for rentals.

Zillows background showing homes with their prices.

Zillow’s background showing homes with their prices isn’t relevant to people looking for rental property, especially with a message at the bottom of the page specifically written for renters.

Another variation used an image of a specific home, which could appeal to both for sale and for rent searchers.

Zillow's new image says home whether you're buying or renting

Zillow’s new image says “home” whether you’re buying or renting

It seems that they have stuck with the individual home view as it works with what most searchers are looking for.

8. Rearrange the Elements

It may not be your product, your service, your copy, your colors, or other elements on your page that are lowering your conversions. It may simply be the arrangement. Just like when you rearrange all the furniture in your house because it just doesn’t quite feel right, you might want to do the same with your landing page. Take AgoraPulse, for example. They went from this…

Agora Pulse homepage before

AgoraPulse homepage before

…to this.

Agora Pulse homepage after

AgoraPulse homepage after

It’s easy to see why the latter layout works. It flows right into starting your free trial after a simple and convincing headline and subhead. And for visitors still not convinced they should convert, there’s simple video and bullet points to convince them to click that call to action button.

9. Copy Your Competitors

The most creative AB tests might be ones you don’t run on your own website. In addition to AB testing tools, there are tools that will alert you to when your competitors make changes to their websites, potentially based off of their own AB Testing landing page experiments.

Rival IQ monitors your competitor’s website to see if changes have been made to it recently. The entry level plan allows you to track up to 15 companies. You’re able to track each company’s website design history along with their social media accounts, organic search rankings, and paid search traffic.

In the website history dashboard, you can view a variety of web pages from your competitor's websites.

In the website history dashboard, you can view a variety of web pages from your competitor’s websites.

Depending on how long the company has been in Rival IQ’s database, you can get a couple of year’s worth of design history from each company.

ActiveCampaign's design history over a few years

ActiveCampaign’s design history over a few years

When you click on a particular month, you see the breakdown of when particular changes occurred as well as the ability to click upon a particular design to see the full landing page.

ActiveCampaign's homepage design history over Novemer and December 2014

ActiveCampaign’s homepage design history over Novemer and December 2014

This will give you an idea of what AB tests a competitor has run in the past and, based on the length of time a competitor has stuck with a particular design, will let you know which test was the presumed winner in terms of increasing their conversions for their homepage, pricing page, features page, or other significant pages.

ActiveCampaign's pricing page history over November and December 2014

ActiveCampaign’s pricing page history over November and December 2014

In addition, you can sign up for email alerts when your competitors make major changes to their website. This will let you know when your competitors have run new tests on their website and made changes based on their results. Or you may even see the tests themselves in action as the pages change from their original to alternative versions.

If you have a lot of competitors, and you’re not sure which to monitor, you can use the BuiltWith Google Chrome extension to find out if a particular competitor’s website is using AB testing software. Chances are, the ones that are will be the ones that will be making frequent changes.

BuiltWith browser extention for analytics and tracking

BuiltWith browser extention for analytics and tracking

What are your imaginative approaches to AB testing your landing page?

If you’ve already done the standard AB tests on your landing pages and found the best headlines, subheads, and call to action buttons, then we hope that these additional creative AB tests will further help you increase conversions on your website as it may have for the brands mentioned here. Have you been running or reading about some interesting AB tests? We’d love to hear about them in the comments.

About the Author

Kristi Hines is a freelance writer, blogger, and social media enthusiast. You can follow her latest tweets about business and marketing @kikolani or posts on Facebook @kristihinespage to stay informed.
Feature image by Serge Saint via Compfight cc and adapted for this post.

At the outset, your form may seem quick and easy. Everyone should know the answers to easy questions like name, email address, and birthdate. Furthermore, these are questions that everyone asks online. People should expect to answer these questions.

Yes, we know the answers. Yes, we’ve given this information up before. But, don’t call it quick and easy. It takes effort to decide if you’re trustworthy. It takes effort to decide if you’re safe. And it takes more effort than watching TV.

You may think that we want “quick and easy”, “simple” or “short and sweet”, but we don’t. We’re completely happy with “hard but worth it”, “expensive but exciting”, and “painful in all the right ways”. These make us happy when you are able to present “worth it” clearly. They work when you make us feel the excitement. We buy when we know the right ways. Yet, it takes effort and skill to communicate “worth it” and “exciting” and “right” online.

So, we just say, “It’s easy.” Sometimes it works. In my Marketing Land column To Buy Or Not To Buy: When “Quick And Simple” Is Just A Lie, I propose that you will enjoy more success if you take the time to build value in your offering, rather than assuming your visitors are lazy and can’t be bothered to work for or spend on something valuable.

Quick And Simple Is Not A Metric. It Is A Perception.

Too often “Quick and Simple” is a lie.

Quick And Simple Is Not A Metric. It Is A Perception. I offer the following flowchart in the article:

The Quick and Easy Test flow chart.

Quick and easy is probably different for your visitors.

Mobile experiences are getting more and more sophisticated, which means we are doing less and less work. You’re definition of “easy” is getting eroded. I recommend you build value.

What does a landing page have to do to generate more software trials from visitors?
One of the sites I reviewed during my webinar The Science of the Landing Page with Avangate was Mac Mail to Outloook Converter. The primary call to action on this page is to download and try the converter.

Watch the Critique (4:24)

http://conversionsciences.wistia.com/medias/r3fxndpadd?embedType=seo&videoFoam=true&videoWidth=501
You can get a critique of your landing page. Find out how.

The Headline Should Match the Ad

I didn’t have information about what brought the traffic to this page during my critique. If the promise was “Mac Mail to Outlook Converter”, then the headline is perfect. For best results your headline should match the language used in the ad or link that brought the visitor to the page.

The headline should match the promise made in the ad or link that brought the user to this landing page.

The headline should match the promise made in the ad or link that brought the user to this landing page.


Bullets help people scan the copy before they decide to read. However, one of the bullets here contains a bit of jargon. Terms like “native encoding” can leave non-technical buyers scratching their heads.
Bullets are easy to scan. Be careful about using jargon.

Bullets are easy to scan. Be careful about using jargon.

Handling Objections in Copy

[pullquote]The purpose of copy is to anticipate and handle objections to taking action.[/pullquote] This page uses quite a bit of space describing the features and benefits of the product.

Be sure to tell the visitor what they will get if they take action.

Be sure to tell the visitor what they will get if they take action.


Don’t forget to answer the question, “What do I get?” This is the key question and applies to products, content offers, free consultations, etc.

How to Use Screenshots Intelligently

If you put screen shots on your landing pages without explanation, it just looks like… work.

Screenshots can be a powerful way to communicate through images, but rarely can stand on their own.

Screenshots can be a powerful way to communicate through images but can rarely stand on their own.


If you use screenshots, explain the point of the image. Why did you choose to show this image to the visitor?
There are three ways to accomplish this.

        

  1. Add text to the images
  2.     

  3. Add a caption under the images
  4.     

  5. Do both

Testimonials Add Proof and Trust

Testimonials are a great way to prove to the reader that your product works.

Testimonials can provide proof and build trust.

Testimonials can provide proof and build trust.


Testimonials span the gap between proof and trust. Success stories provide proof. I trust this page more because others have had success with the product.

Always Repeat the Offer at the Bottom

Someone who has read to the bottom of the page is probably well-qualified. Repeat the offer there so they can take action.

We call the offer at the bottom of a page the "dripping pan." It requests software trials as well as purchases.

We call the offer at the bottom of a page the “dripping pan.”

Focus on Software Trials or Purchases. Not both.

The split button approach taken on this page may work against them. When there is more than one offer, it is important to help the visitor choose.

Be careful about using non-standard elements on your landing pages. They can confuse visitors. There are two offers: software trials as well and purchases.

Be careful about using non-standard elements on your landing pages. They can add friction.


The page features the trial, so Download is the primary call to action. A treatment de-emphasizing the purchase offer may be better:
A mockup of the how this page could "help the visitor choose."

A mockup of the how this page could “help the visitor choose.”

Choose the Right Button Color

The key when choosing the right button color is to pick a color that is not found elsewhere on the page.

Call to action buttons should stand out on the page. Use color to create contrast with the rest of the page.

Call to action buttons should stand out on the page. Use color to create contrast with the rest of the page.


Notice how green and blue buttons appear more significant on the page than the orange ones.
Here is how a blue "dripping pan" would appear on this page.

Here is how a blue “dripping pan” would appear on this page.

See all of the Critiques

With a few changes, this landing page could be generating a higher number of software trials for the Mac Mail to Outlook Converter.
If you’d like to see all of my critiques please watch the webinar on demand.
[signature]

When you’re building a blog to bring traffic to your site, it’s the organic search traffic that makes or breaks your efforts. A blog post is an SEO landing page. It draws visitors through the graces of the search engines.

SEO landing pages are challenging, primarily because it takes time to see which of them are going to work. By publishing frequently on a blog, we get a chance to try out a wide variety of SEO landing pages. Over time, we can see which drive growing SEO traffic and which don’t.

We name our SEO landing pages based on the traffic patterns they produce. Last week, I told you about Icebergs, Eagles, Burps and Fizzes. Now I’m going to show you how to quantify these.

You can get the background in my Marketing Land column Evaluating Website Performance: I’m All About That Slope.

A Flock of Eagles

Eagles don’t travel in flocks. However, when you have a bevy of eagles roosting on your website, the results are astounding.
Eagles are those blog posts which draw more and more traffic over time. Not all Eagles are created equal. Using the tools outlined in my column we can understand which of our posts is flapping along and which is using afterburners.

Following are the aggregated traffic of nine SEO landing pages that have begun to soar, or show signs of becoming an Eagle.

A bunch of landing pages with relatively slow individual growth can add up to some serious overall traffic.

A bunch of landing pages with relatively slow individual growth can add up to some serious overall traffic.

Of our top 25 posts, 14 are Eagles and two are Dodos, or Eagles that are slow to take off. Only eight are Burps or Burp Fizzes. Not bad.

Comparing SEO Landing Pages

We analyze blog posts based on the amount of organic traffic they bring, how quickly the organic traffic is growing, and how many subscribers they generate as measured by the conversion rate. Google Analytics offers a convenient Landing Pages report that provides the raw data for our analysis.

Here are two “Eagles.” Post A took off at a strong pace, while post B has been going for longer.

Which of these is the higher performer? The data tells us something that our eyes don’t see.

Which of these is the higher performer? The data tells us something that our eyes don’t see.

Which of these is the higher performer? The data tells us something that our eyes don’t see.

Using the SLOPE, INTERCEPT, and RSQ functions of Excel, we calculate a growth rate of 3.92% for post B and 6.30% for post A. Our confidence in the fit of the trendline for Post B is 0.81 and for Post A is 0.68. We have less confidence in Post A.

Post A seems to be flattening out, but many Eagles get new life and continue climbing. Maybe Post A will one day be an iceberg. So far, Post A has generated new subscribers at a rate more than double that of Post B.

Using Data to Guide SEO Landing Page Development

Here is a selection of SEO landing pages from The Conversion Scientist Blog and Course. I pulled this data from Google Analytics using the Behavior > Site Content > Landing Page report. We can get specific data for up to six landing pages by checking the box next to the item and clicking the Plot Rows button.

Checking the stories and clicking "Plot Rows" tells Google Analytics to export your data.

Checking the stories and clicking “Plot Rows” tells Google Analytics to export your data.

These are ranked by the conversion rate for subscribers to our conversion mini course.

Trendlines: Slope, y-intercept, and R-squared value.

Trendlines: Slope, y-intercept, and R-squared value.

For each, I’ve calculated the key values of their trendline: Slope, y-intercept, and R-squared value. From this I can define the growth rate and organic traffic pattern.

We love the post “Can Live Chat Increase Conversions?” because it has a conversion rate of 0.61% and is growing at a nice clip at 3.52%. It’s a high-converting Eagle.

What do we do about the Low-R-Squared posts?

The R-squared values tell us that the slope and intercept data is suspect. Do we just ignore these?

For these, and the others that don’t make sense (71.38% initial growth rate?), I recommend zooming in on the most recent trends.
Our “5 Elements of Persuasive Writing” post is young and had a pretty big coming out via email. So, we’ll focus on the most recent trend in the data.

Taking a snapshot of the data can improve our confidence.

Taking a snapshot of the data can improve our confidence.

Here’s what it looks like in Excel.

Graph of blog post traffic with trendline

Graph of blog post traffic with trendline

You can see that we can increase our R-squared value to .54, and the rate for the more recent data is the slope (4.4956) divided by the intercept (17.975), which is 25%. So we have a .53 confidence that the orgranic traffic is growing at 25% for this post.

The infographic “What Makes Shoppers Click?” has an R-squared value of just 0.16.

Google analytics graph of traffic for blog post

Google analytics graph of traffic for blog post

However if we look at weeks 27 through 39, we get an amazing growth rate with a high R-squared value.

Graph of traffic from "shoppers" blog post with trendline

Graph of traffic from “shoppers” blog post with trendline

For this more recent period, we see a growth rate of 34% (2.967/8.76920) and an R-squared value of 0.80.

Be Careful

If you’re not careful, you can choose your data points to tell whatever story you want it to tell. Furthermore, if you’re making decisions on too few data points, you may be making the wrong decisions.

When in doubt, choose the time frame that gives you the most data points and the most conservative results.

To understand the effectiveness of your SEO landing pages, count up  the number of Eagles you have as compared to those that aren’t growing. Use the landing page report in Google Analytics to find out which are resulting in the most conversions. Then calculate the slope and y-intercept to understand the future potential of these pages.

For additional reading, check out this piece on landing page best practices for optimal conversion.

Talking about landing pages that convert is one of a Conversion Scientist’s favorite conversation topics. It’s even something that plays a huge part in their dating lives, and one of Conversion Scientist Brian Massey’s most popular presentations is still the Chemistry of the Landing Page (replay).

Your Conversion Rate Will Make or Break Your Campaigns

Conversion Sciences doesn’t just talk a big game when it comes to giving advice about landing pages: we have the data to back up what we’re saying. Having high-converting landing pages has made our webinar series Lab Coat Lessons a big success.

28.62 percent conversion rate on our landing page for our CRO & SEM webinar

28.62% conversion rate on our landing page for our CRO & SEM webinar

42.41 percent rate on our landing page for our UX vs. CRO webinar

42.41% conversion rate on our landing page for our UX vs. CRO webinar

50.92 percent conversion rate on our landing page for our Mobile 2.0 webinar

50.92% conversion rate on our landing page for our Mobile 2.0 webinar

Just think of what would happen to your revenue if your landing pages had a 50% conversion rate.

Helping people build high converting landing pages just never stops being interesting, so next week, on Thursday, October 15th, Brian will be joining Avangate for a free webinar that will teach you how to do just that. watch the replay now, and you’ll learn:

  • Why landing pages are so powerful in online marketing.
  • Why you should build landing pages backwards.
  • The primary components that make landing pages work.
  • How to keep your landing pages from getting off track.

What’s on the Conversion Scientist’s reading list these days?

Business Insider: 20 Cognitive Biases that Screw Up Your Decisions

If I was to rename this article, it would be, “20 Kinds of Best Practices and Why They Won’t Work”.
It is bad news to rely on best practices that are unsupported by data or testing. This article gives you 20 reasons why.
This article is so interesting that it’s no surprise I decided to cover this topic on my most recent column for MarketingLand.
Read more.

LiftPoint Consulting: Data Scientists’ Critical Role in Marketing Today

The conclusion of this article says it best by stating “The days of Marketing as a ‘Creatives Only’ fraternity are over”.
Data Scientists are the left-brained necessity to every marketing department, but since that realization is so new, you might not be able to recognize a good one. They’re a rare breed, after all. There are four skill-sets they have that you need.
Read more.
[sitepromo]

Econsultancy: Is Booking.com the Most Persuasive Website in the World?

This case study examining Booking.com reminded me a lot of my presentation on the Chemistry of the Landing Page where I talk about the different elements that make a landing page a success and also our post on impulse buying where we talk about how to reduce risk so that customers will feel comfortable spending money on your website.
Booking.com’s website is a great inspiration for formulating hypotheses that you can test.
Read more.
What are your suggestions for articles we should read For Further Study?

This is a common question, and requires an understanding of the definitions of bounce rate.”
The bounce rate is a bit slippery and requires some examination. The intention of measuring the bounce rate is to figure out how many of your visitors are leaving almost immediately after arriving at your site. This metric provides for a lot of error in interpretation.

“A high bounce rate means you’re site is crappy.”

This is rarely the case. A more accurate explanation is that your site doesn’t look the way your visitors expect it to look. Understanding what your visitors expect is the way to reduce your bounce rate.
Instead, there are usually some more valid reasons for your high bounce rate. Here are the things we examine when confronted with uncomfortably high bounce rates.

You’re measuring it wrong.

How you measure your bounce rate can give you very different insights. For example, blogs often have high bounce rates. Does this mean that visitors don’t like the blog?
Many analytics packages measure a bounce as a visit, or session, that includes only one page. Visitors who take the time to read an entire article would be considered a “bounce” if they then left, even though they are clearly engaged.
We set a timer for our blog traffic, so that any visitor who sticks around for 15 seconds or more is not considered a bounce.

Technical Difficulties

We are fond of saying that you don’t have one website, you have ten or twenty or thirty. Each device, each browser, each screen-size delivers a different experience to the visitor. If your website is broken on one of the more devices popular with your visitors, you will see a bump in overall bounce rate.
If your pages load slowly, especially on mobile devices, you can expect a higher bounce rate.
If your page breaks out in a chorus of Also Sprach Zarathustra when the page loads, you may enjoy a higher bounce rate.

How to diagnose

Your analytics package will track the kind of device your visitors are coming on.

Is there a problem with this site when viewed with the Safari (in app) browser?

Is there a problem with this site when viewed with the Safari (in app) browser?


The Google Analytics report Audience > Technology > Browser & OS shows that there may be a technical issue with Safari visitors coming from within an app. This may also reflect visitors coming from mobile ads, and they may simply be lower quality. See below.
With Google Analytics Audience > Mobile > Devices report, we see mobile devices specifically. The Apple iPhone has an above-average bounce rate, and we should probably do some testing there, especially since it’s the bulk of our mobile traffic.
With an above average bounce rate, visitors on an Apple iPhone may be seeing a technical problem.

With an above average bounce rate, visitors on an Apple iPhone may be seeing a technical problem.

Traffic Quality

If you’re getting the wrong visitors, you will have a high bounce rate.
Remember StumbleUpon? Getting your site featured on the internet discovery site often meant a flood of new visitors to your site… and a crash in your conversion rate. Stumble traffic was not qualified, they were just curious.
Your bounce rate is a great measure of the quality of your traffic. Low quality traffic bounces because:

        

  • The search engine showed them the wrong link. Do you know how many visitors used to come to our site looking for a “conversion rate” for Russian Rubles to Malaysian Ringletts?!
  •     

  • The visitors aren’t ready to buy. They were in a different part of the purchase process. Visitors coming from Social Media ads have notoriously low conversion rates. They weren’t looking, they were just surfing.

We take a closer look at the source of traffic to diagnose a traffic quality problem using Google Analytics Acquisition > All Traffic > Channels report.

Display and direct traffic are our biggest traffic sources and bring the most bouncers.

Display and direct traffic are our biggest traffic sources and bring the most bouncers.


Here we can see that traffic coming from Display ads and those visitors coming “Direct-ly” have a high bounce rate. These two sources also make up 50% of our traffic. Ouch.
In the case of Direct traffic, we expect most of it to come to the home page. With a click, we can see that indeed 50% of Direct visits are to home.
Filtering for Direct traffic, we see that 50% of it is entering on the home page.

Filtering for Direct traffic, we see that 50% of it is entering on the home page.


Clearly we need to do more to get visitors on their way into the site. As Tim Ash says, “The job of the home page is to get people off of the home page.” He didn’t mean by bouncing.
With regard to Display ads, we my have a problem with broken promises.

Broken Promises

Do your entry pages consider the source of visits?
If your traffic is clicking on an ad that promises 20% off on a specific propane grill, and they’re directed to your home page, you’ve broken a promise. You might think that they will search your site for the deal. You might even think they’ll search your home page for the deal. You’re wrong. Many will jump.
Every ad, every email invitation, every referral link is a promise you make to your visitor. If they don’t come to a page that lives up to the promise, they are likely to bounce.

        

  • Does the headline on the page match the offer in the ad?
  •     

  • Does the product in the email appear after the click?
  •     

  • Are the colors and design consistent across media?

This Dispaly ad takes the visitors to a page that is almost designed to disappoint.

This Dispaly ad takes the visitors to a page that is almost designed to disappoint.


Looking at your ads on a page-by-page basis is necessary to diagnose and correct this kind of bound-rate problem.

Vague Value Propositions

Ultimately, if you’re not communicating your value proposition to your visitors clearly, you are going to enjoy a monstrous bounce rate.
[sitepromo]
Your value proposition typically does not address your company or your products. It should be targeted at your visitor, why they are there, and why they should stick around.
Each page has it’s own value proposition. Your business may have a powerful value proposition, but each page should stand on its own.
A contact page should talk about what will happen after you complete the form. Who will contact you? How long will it take? Will they try to sell you something?
A landing page should clearly state that you are in the right place and provide reasons for you to stay and read on.

This landing page delivered a strong value proposition in above the fold.

This landing page delivered a strong value proposition in above the fold. See the full case study and video.


A home page should help you find your way into the site. Most home pages are treated like highway billboards. No wonder people just drive on by.
Ultimately, we don’t want to reduce our bounce rate. We want to improve our conversion rate by bringing the right traffic, to the right page, with the right message, and avoid technical issues that get in the way.
[signature]
Richard Strauss: Also Sprach Zarathustra by Kevin MacLeod is licensed under a Creative Commons Attribution License.