Discover how to create top converting registration forms for your website or landing pages. Don’t let the design of your form hurt your conversion rate.

Are your forms stopping your visitors from converting on your site? Follow these guide and create the highest converting registration forms ever. Of course, this will not preclude you from testing what works and what doesn’t work on your site and with your audience. Read on!

Steps for Creating Top Converting Registration Forms

I recently went to a website to buy a new keyboard for a laptop. I found the site with the right price and delivery and put the keyboard in my cart.

When I went to checkout, the first question on the billing form was Gender.

Gender?

Why does an electronics part manufacturer need to know if I’m a man or woman?

It introduced enough doubt in my process that I left — I abandoned my order.

The unfortunate statistic is that 86% of visitors abandon forms of all kinds.

It’s doubly heartbreaking when they do so in their cart, because that costs you ready buyers.

How to Create the Highest Converting Registration Forms: 13 Key Tips

The thirteen recommendations made here will set you on a path to reduce your abandonment rates. My favorites are:

  • What am I signing up for? Use a title that explains why the user needs to sign up. Keep this intro short, sweet and simple. Make sure your call to action matches the title. Be more creative than a “Submit” button.
  • Show them their password (who said invisible passwords was a good idea?) Let them pick if they want to see it or not.
  • Put errors in an obvious place and make them visible. Make sure to read the last section on how to use error messages as a conversion opportunity.
How to create top converting registration forms: informational messages make for a smoother conversion path when they are located close to the corresponding field. Easy to notice and to understand.

How to create top converting registration forms: informational messages make for a smoother conversion path when they are located close to the corresponding field. Easy to notice and to understand.

Here’s the rest of the recommendations for creating top converting registration forms.

  • A social signup option can speed up the form filling process and help you create the best conversion registrations forms.
  • Leverage Autofill whenever possible or offer preset options. This is especially true on mobile devices. Nothing more annoying than fumbling around with a form.
  • Make the most of mobile devices. Enable only relevant keypads as required on the field. Make it easy for your visitors. Don’t make them switch to a numeric keypad or keyboard to enter the zip code or phone. Use specific HTML input types. They’ll appreciate it and you’ll avoid friction in this crucial conversion moment.
  • Explain why you need the information and what you expect them to enter. Just because it’s evident to you, does not mean it’s clear to everybody. The same applies to mandatory fields.
  • Limit the number of fields in your form. Don’t drive your prospects away at the mere sight of the longest form ever.
  • Billing address same as shipping address? One checkmark will take care of filling up the fields – internally, of course.
  • Multi-step forms. Split. Split. Split. Research shows that multi-step forms outperform their single-step registration forms. Especially when asking for sensitive information (such as phone) or when the form is too long. Adding a progress bar will entice your prospects to keep going as they are almost done.
  • Google’s UX researchers found that aligning labels top-left of the fields increased form completion time. This is because it requires fewer ‘visual fixations’. Basically, your eyes scan downwards faster. You are forced to scan in a zig-zag motion when the labels are placed to the left of the fields. The exception is when you are using always visible inline form field labels.
  • Did I mention speed? You can make your website as fast as possible, but slowing down like molasses at the time of filling out a form is unacceptable. Make sure your forms load fast and don’t slow down your page speed to increase conversions.
  • Make sure you are GDPR compliant. You have to ask permission for each and every opt-in.

Ready to AB Test? Read on!

UX Design Guide for Form Validation to Lift your Conversion Rates

Forms are a key component of Landing Pages (in addition to Offer, Image, Trust and Proof). When a visitor considers completing a form — for lead gen, to subscribe or to purchase — it is the moment of truth.

So, it is sad that so many forms work to chase these ready customers and prospects away. Forms are meant to have a conversation with the user. One that guides them all the way to the conversion with the best UX possible.

Form validation used to be a “developer” thing and we need to make it a marketing thing. Forms are placed at your sales funnel’s most crucial moment, the conversion. Therefore, it is only logical that improving the UX would help lift conversion rates.

Here are four elements to consider as you guide development of your website forms in these areas to avoid confusion:

1. When to Show Validation Errors: The right time to inform  the user about problems or success

Consider the two main types of form validation: Inline validation and Post-Submit validation.

Inline validation checks field entries as the information is entered.

Post-submit validation validates entries after submitting the entire form. The visitor doesn’t know if the username they chose was already taken or if their email address was entered incorrectly until after they click the button.

If mistakes were made and the form re-loads, the visitor must manually search for the incomplete fields, and correct them. This adds friction to a shopping cart checkout process or a newsletter signup. This hurts completion rates.

Post-submit validation also suffers from scroll confusion. When the page reloads, the error messages often appear off-screen. The visitor may not know that there’s even a problem with their entry until they scroll around. This is a bigger problem on mobile devices where screens are smaller.

Our recommendation is to use inline validation so users can adjust, learn, and correct as they move from field to field. Inline validation is especially effective for the username and password fields, or any field with strict input requirements.

Instagram makes good use of "always visible inline field labels." Discover how to create top converting registration forms for your website or landing pages. Don’t let the design of your form hurt your conversion rate.

Instagram makes good use of “always visible inline field labels.”

Don’t limit messages to errors. Success validation messages are always helpful and encouraging. For example, a simple check mark by the field can let the user know their username was accepted and it’s unique.

2. Where to Display Validation Errors: Right place for validation messages

When messages are located close to the corresponding “failing” field, they lead to a smoother path for conversion. They become easier to notice and to understand.

You may be tempted to add the error messages by the Submit button. But there are only two occasions where you can display the error or validation message next to the Submit button.

The first is  when you perform an post-submit validation and there was no page reload.

The second is when the error affects the whole form, as may happen with a dropped mobile connection, and the page was not reloaded.

In any case, if there was a reload of the page, display the validation errors at the top of the page.

Wave accounting software registration form. Great location for the informational password field. Their social proof is very persuasive.

Wave accounting software registration form. Great location for the informational password field. Their social proof is very persuasive.

3. Right color or Right Graphic Representation

Did you know that 1 in 12 men have some degree of color blindness? Source: Color Blindness

Color blindness is more prevalent among males than females, because the most common form of color vision deficiency is encoded on the X sex chromosome. Source.

In spite of this, if you follow the rules (blue is informational, green is success, red is an error and yellow as a warning) even color-blind visitors will understand the meaning.

If red-green color blindness is the most prevalent - one in twelve men are color blind - should you rely solely on color to get your message across in your registration forms? Image source: Pinterest.

If red-green color blindness is the most prevalent – one in twelve men are color blind – should you rely solely on color to get your message across in your registration forms? Image source: Pinterest.

I recall asking a friend of mine – yes, he was color-blind – how could he tell the traffic signals apart. His answer was, “I know where they are placed.”

We don’t have specific placements on forms, but we can take advantage of icons. And these have rules as well: X for error, checkmark for success, exclamation point for warning and “i” for informational messages.

4. Clear and persuasive language for error messages

A red symbol notifying you that there is an error and no explanation of what it is or how to fix it can lead to form abandonment. It becomes extremely frustrating for users that may be trying to register for your demo or buy from your online store when they don’t know what they did wrong.

Instagram's sign up form error messages are not helpful to the user. There is no clear explanation on how to fix them.

Instagram’s sign up form error messages are not helpful to the user. There is no clear explanation on how to fix them.

If all problems are opportunities, then error messages and error pages are generally missed opportunities. Marketing should be policing the errors reported on their website, messages that have traditionally been written by a techie in IT.

Clear and persuasive language for error messages can actually work in your favor, improving the user experience and increasing conversions.

I’ll give you an example. A few months ago I had to make a doctor’s appointment. The receptionist scheduled me for the following day with the nurse practitioner. I asked if I could see the doctor – best dermatologist in this neck of the woods – and her answer was “No, you will have to wait until she comes back from vacation.” Which happened to be 3 days later.

What do you think would have happened if she would have said, “Of course. She will be back from vacation on this date. But we can get you in tomorrow if you’d like to see her nurse practitioner”. She could have probably have persuaded me to see the NP.

Wayfair's newsletter sign up form has a confusing call to action button text. What will happen after I press continue?

Wayfair’s newsletter sign up form has a confusing call to action button text. What will happen after I press continue?

Related Reading: Why is my Conversion Rate Dropping? 8 Common Reasons

How to Write Great Error Messages

Follow these guidelines to write error message that won’t have your visitor feel like an idiot.

  1. Get rid of IT jargon. Say goodbye to “Submit”, “Send” or “Error”, not only do they have different meanings in English language, they have a negative connotation putting the blame on the user.
  2. Clearly and simply identify the error and give the user a solution.
  3. Never blame the user. Rephrase your error messages or better yet, provide your website visitors with informational messages so they know what to enter in the first place.
  4. Provide a way to contact you, be it chat, email or a customer service number, in case the user needs your help to solve the issue.

Nothing is more worrisome than your website conversion rate dropping. You’ll want to know why, so you can fix it. Breathe. Here’s where to check.

Watching your conversion rate drop is not fun. It will make you lose sleep until you know what’s causing it. And maybe worse until you see it climbing back up again.

Fortunately, any drop in conversion rate has an explanation and one or more solutions.

Bringing it back may be just a matter of time, but just waiting is never a good answer. Sudden drops in conversions can be quite frustrating if you do not know where to dig. Do you agree?

It may be some of the obvious culprits that are to blame for your website conversion rate dropping – website redesigns, landing page changes, new offers, pricing, promos, or sales. But if it’s not obvious, keep calm. Go through this checklist and get it taken care of.

 

Keep calm and read this post if your conversion rates are dropping.

Keep calm and read this post if your conversion rates are dropping.

1. Those Devilish Tracking Codes

It happens. You may believe your analytics tracking codes, also called tags, are working and reporting on your conversions without a hitch. You may find that’s not the case anymore. Incorrectly installed tracking codes could be the cause of your conversion rate dropping.

Maybe they got corrupted when making small tweaks to your site or when implementing a new campaign or when versioning a landing page.

Retrace your steps. Try to remember what you have modified lately. Yes, this is when you’ll realize you should make it a habit to use Google Analytics’ Annotations. This is a great way to easily find the changes you’ve made, changes that may have broken your tracking.

To make sure all of your analytics tracking codes work as they should, we recommend Google Tag Assistant. This is a plugin for your Chrome browser. It will tell you if your tracking is setup properly on any page of your site. Heed the recommendations in the tool. Nothing should be misconfigured.

Here are some places to look:

  • Did you launch any new landing pages? If so, are the tracking codes setup on them?
  • Did you release any new offers? Make sure you’re creating goals in Google Analytics for all of your reports, demos, trials and purchases.
  • Did you add any third-party tools to your site or ecommerce plugins? Make sure they are properly integrated with Google Analytics.

2. Conversion Rate Dropping due to Lack of Browser Compatibility?

Google Analytics has very handy reports to identify where the problem may lie. Check for a significant drop in conversions for a particular browser. Your major browsers include Chrome, Safari, IE, Firefox & Edge and on mobile, Android and iOS.

Found it?

Browser testing: Target Chrome 71.0.3578.98 / Windows 2008 R2.

Browser testing: Target Chrome 71.0.3578.98 / Windows 2008 R2.

Now we test the Target website on Chrome 51.0.2704.103 / Windows 2008 R2. Notice the differences.

Now we test the Target website on Chrome 51.0.2704.103 / Windows 2008 R2. Notice the differences.

Finally, Target website tested on Firefox 30.0 / Debian 6.0.

Finally, Target website tested on Firefox 30.0 / Debian 6.0.

Test your checkout flow, your forms, on-exit intent pop-ups, even your landing pages with that browser. Keep in mind that not all browsers behave in the same way on every operating system. Therefore, you have to check on Windows, Mac and Linux, at the very least. Has some of your website’s CSS or Javascript become obsolete?

Google Analytics has a very handy report for this: Audience > Technology > Browser

Google Analytics browser report.

Google Analytics browser report.

Then select the Ecommerce report. You’ll be able to look for browsers that underperform.

If it’s not a particular browser, check for mobile, tablet, desktop or amp technical bugs or issues. Is an element of your responsive landing page now hidden from view on a mobile device?

3. Don’t Underestimate Website Performance

If your server or your CDN are experiencing glitches, or your website is suffering from a sudden slow down in page load speed, you may not have dropped your organic rankings yet but your customer UX has degraded.

Moreover, your visitors are currently sending those unhappy experience signals to search engines. Ouch!

Check the Search Console coverage report to make sure you didn’t have any 500 internal server error. If so, talk to your hosting company or sys admins to have them resolve it.

Google Search console coverage report. Is your server or CDN misbehaving? Could this be the cause of your conversion rate dropping?

Google Search console coverage report. Is your server or CDN misbehaving? Could this be the cause of your conversion rate dropping?

Now take a look at the Google Analytics speed reports and compare it with the previous period. A slowdown of the average server response time will point to a need for additional server resources or to a software upgrade. If the average page load time is the one that has increased and you are running a CMS like Magento, Shopify or WordPress, start digging into extensions, plugins and image sizes.

Improve visitor experience by addressing page load speed issues.

Improve visitor experience by addressing page load speed issues.

I guess, pinpointing why your website conversion rate is dropping can get a bit technical, huh?

4. Have you Forgotten to Optimize for Mobile Devices?

Ok, you already checked that your site was displaying correctly when you checked for technical issues. But, it’s possible that your mobile customers require a different conversion experience than the one you crafted for your desktop users.

Access Google Analytics and compare traffic for devices under Mobile Audience overview year over year. Maybe it’s time to contact our Mobile CRO experts. We wrote the book on it.

 

5. Your Marketing Personas Changed Behaviors

Usually, customer behavior takes quite a long time to reflect negatively on your conversion rates. So, concentrate on other issues unless you’ve noticed your conversion rate dropping for a while.

If the latter is the case, maybe it’s time to take a fresh look at your marketing personas. Times do change.

6. Conversion Rate Dropping with a Traffic Increase?

A decline in traffic volume can obviously decrease the number of conversions and possibly your online shop conversion rate. But what if there’s an increase in traffic? Yes, even an increase in traffic can badly affect a website’s conversion rates.

First things first. Make sure you identify the traffic source that has experienced a decrease in conversion rate. Is it the same as the one whose traffic volume increased? Remember to check their landing page functionality. If that’s not the problem, review a few of these scenarios.

6.1 Paid Traffic Increase

A lower conversion rate with a paid traffic increase could be pointing to non-relevant campaign targeting or to a lack of understanding what will persuade your visitors to buy or try your products or services.

Maybe you need to put things in perspective and understand that in some occasions such as Black Friday, prospects perform a lot of comparison shopping. Therefore you may experience much higher traffic driven by your social or ppc campaigns but a decline in conversion rates. I bet you are spending more on these campaigns as well, aren’t you?

Optimize your ad copy and landing pages accordingly so your site won’t be left behind in this increased competition and avoid significantly lower conversion rates.

Answer this, have you been running the same campaign for a long time? People are clicking but not converting? Maybe it’s time to change the landing page.

Examine each step of your funnel and look for weak points. Arm yourself with Heat Maps. They can definitely help you identify what your visitors are seeing or missing. Engage in split testing and get those conversion rates back up.

6.2 Sudden Surge in Social or Organic Traffic Volume

A spike in social or organic traffic may be attributed to the creation of clickbait blog posts. The problem with these articles, is that while traffic may increase, these visitors tend not to convert – at least not immediately. You will experience a perceived “drop” on conversion rates as a similar number of conversions are being diluted in higher traffic. Social traffic tends to react faster than organic, so look for correlations there first.

6.3 The Attack of the Bots or Ghost Spam

Bots can also generate a sudden growth in direct or referral traffic. It’s quite easy to identify those bots on analytics – unless they were spectacularly well coded. This is rarely the case. Bots don’t have gender, age and they have 100% bounce rate.

They will produce the same effect as any spurt in irrelevant and non-converting traffic: declining conversion rates.

6.4 Are You Emailing Less?

Email is one of the highest converting traffic sources for most businesses. If you have reduced the frequency of email or have changed the kind of email you are sending, this may impact you overall conversion rates.

Nothing more worrisome than your website conversion rate dropping. Evidently, you’ll want to know why so you can fix it. Breathe. Here’s where to check.

Nothing more worrisome than your website conversion rate dropping. Evidently, you’ll want to know why so you can fix it. Breathe. Here’s where to check. This image has been designed using resources from Freepik.com.

7. Blame Seasonality for Your Conversion Rate Dropping

Does your conversion tend to drop at this time of the year? Seasonality usually causes a very rapid change in conversion rates and it may be accompanied of lower traffic or not.

If your traffic has not changed, compare with last year’s data and see if you are following trend. We tend to think of seasonal changes as holiday times but professional services like website design tends to drop during those times.

One of the most interesting seasonality drops I have ever seen happens in the wedding services industry every New Year’s eve. I guess one celebration offsets the planning of the other. So, tread carefully when making website changes without considering these seasonal effects or they could play against you.

The same seasonality may affect traffic, therefore always keep track of decreases or increases in seasonal trends.

8. When your Competitors Cause your Conversion Rate to Drop

If your conversion rate is dropping and you cannot find anything wrong with your site or with your actions, you may want to check what your competitors are up to.

Maybe they are running a special discount or a promotion that drives conversions away from you. Monitor their actions and respond accordingly. This may help you address some of the conversion loss.

Of course, lower conversion rates don’t mean as much as Return on Investment (ROI), so don’t leave that metric aside, You may be alarmed because you see your conversion rate dropping but in the end, that’s not what really matters What counts is your bottom line. Looking at a single conversion rate could be narrowing your view of the business, especially on this day and age of omnichannel marketing.

And, if all else fails, you can hire Conversion Sciences for a CRO Audit. Having a pair of expert eyes analyze your site, your 360 degree customer journey and review your conversion rates is always a plus.

How often do your landing pages break promises made in your ads or newsletters? Here’s an example that may hit home.

This is a tale of two companies who can’t afford to blacken their reputation any more than they already have.

It is the story of one letter, one landing page and a broken promise.

Experian doesn’t have many friends in the public domain. Their main job is to prevent people from getting homes, cars and frozen pizzas. Their second job is to make it hard for victims of identity theft to redeem themselves.

Adobe is a company who gave 2.9 million of their customers’ account information to thieves.

I love my Adobe software, so I was philosophical about the security breach. I got a nice letter saying that they’d hired Experian to make sure I didn’t fall victim to identity fraud.

The letter gave no hint of irony.

“You have until February 28, 2014 to activate this complimentary credit monitoring membership by using the following activation code: XXXXXXXX. This code is unique for your use and may not be shared. To enroll, please visit http://www.protectmyid.com/adobe, or call …”

I visited the link in the letter. The letter made a clear promise and this link contains a promise by including the word “adobe” in it.

The link sent me here:

This landing page broke a promise made in a letter.

This landing page broke a promise made in a letter.

No blank for an activation code.

No mention of Adobe on the page.

A broken promise.

I took the time to try to sign up. They wouldn’t take my activation code.

The best brand experience is giving visitors what they expect. These companies are pissing on the people they have already let down.

How many times are your ads making promises that your landing pages are breaking?

When Landing Pages Break Promises UPDATE

The landing page has changed. Now THIS is a promise kept:

This landing page from Experian keeps the promise.

This landing page from Experian keeps the promise.

This is a landing page that keeps Adobe’s promise. My only criticism of this page is the use of stock photography, which we call business porn.

Related reading: What Keeps Visitors from Converting on your Site?

Now, where did I put that letter?


21 Quick and Easy CRO Copywriting Hacks to Skyrocket Conversions

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
  • This field is for validation purposes and should be left unchanged.

Discover how to identify what keeps visitors from converting on your site. Five factors you MUST look into to improve online conversions right now.

There’s one thing, one thing that’s keeping your visitors from converting on your site.

It may not be the only thing, but it is the primary thing that your online business isn’t delivering the results you expect. It’s where you start when you optimize your website.

So, traffic but not conversions? It’s one of these five things:

  1. The Value Proposition and Messaging isn’t clear.
  2. They perceive risk when considering taking an action.
  3. You aren’t showing up as credible and authoritative.
  4. They want to know if others have benefited from you.
  5. Your design and layout aren’t helping them digest the buffet of content you’re presenting.

Find out what keeps visitors from converting on your site and start testing to increase your conversions right now.

How to identify what keeps visitors from converting on your site.

How to identify what keeps visitors from converting on your site.

Value Proposition & Messaging

Do you think your value proposition is the one thing that keeps visitors from converting on your site? Let’s take a look at the anatomy of a value proposition. Your value proposition is composed of all of the things you do to solve a problem and is communicated by:

  1. Brand awareness
  2. Content and Copy
  3. Images
  4. Pricing
  5. Shipping policy
  6. Words used in your navigation
  7. Design elements

All of these website elements are used to let your visitors know how you solve a set of problems, and why your solution is the best choice. The one that will save the most time and money, or that will deliver the most satisfaction.

But your value proposition doesn’t have to be communicated through words and images alone. Video, audio and animations are proven ways to communicate your value to a prospect.

And herein lies the rub.

Digital media gives us the amazing ability to put anything onto a landing page that our hearts desire. And if you can do anything, how do you know which is the right element to use? Here lies the conundrum.

How to know if your value proposition is what keeps visitors from converting on your site

A high bounce rate is a sign of three things:

  1. You’re bringing the wrong traffic
  2. Your lead isn’t hitting the mark
  3. You’ve been attacked by bots

If your landing page suffers from a high bounce rate, look at the source of your traffic. Does the page keep the specific offer made in the paid ad, email, or organic search query that enticed the visitors to click on your site? If it’s your homepage, the answer is most certainly, “No.”

If you feel that your traffic is good, and is coming to a relevant page, then we should ask if the lead is hitting the mark. By “lead” I am referring to the headline + hero image.

Often, hero images are wasted on something non-concrete. The headline should act as the caption for the image it accompanies.

Don’t show a city skyline. Don’t show a person smiling at a computer. These things don’t scream for meaningful captions and don’t help conversions either.

You should also look at the words you use in your main navigation. These should communicate what your site is about in the words of the visitor, not just the structure of your website.

Still don’t know what’s keeping them from converting? Ask your visitors

If you still don’t know what is keeping visitors from converting on your site, consider using an exit-intent popup that asks one open-ended question: “What were you looking for when you came to our site?” or “Why didn’t you purchase?”

We are also big fans of putting an open-ended question on your thank-you page or receipt page: “What almost kept you from buying?” or “What almost kept you from signing up?”

Discover How Our Conversion Rate Optimization Analysis Services Work

You May Be Scaring Visitors Away: Use and Misuse of Risk Reversal

In general, more people make decisions based on fear than on opportunity. So, your amazing value proposition is destined to die in the minds of many of your prospects because of fear.

  • What if I don’t like the product?
  • What if my identity gets stolen?
  • Will a pushy salesman call?
  • Will I have to deal with tons of email?

At the heart of it all is, “Will I feel stupid if I take action right now?”

Risk reversal (and most of the following) is a set of tactics that puts the visitor’s fears at rest. It consists of things like:

  • Guarantees
  • Warranties
  • Privacy policies
  • Explicit permissions
  • Return policies

Placing these items in clear view near a call to action can do wonders for your conversion rates.

Don’t put fears into their mind

There is a potential danger. Your risk reversal tactics can actually put fear into their mind.

For example, stating, “We will never spam you.” can actually place the concept in the mind of someone who wasn’t concerned about it. You might say instead, “We respect your privacy.” with a link to your privacy policy.

Traffic but not Conversions? Help Visitors Convert on your Site with Social Proof

Social proof demonstrates that others have had a positive experience with your brand. These take the form of:

  • Testimonials
  • On-site ratings and reviews
  • Third party reviews
  • Case studies
  • Social media shares, likes and comments
  • Comments

If social proof is your one problem that keeps visitors from converting on your site, customers don’t feel that you’re right for someone like them. Make sure you show them that they are in the group of people that benefit from you.

Negative Reviews Help

Ironically, it also serves to answer the question, “Just how bad was a bad experience with this company?” This is why negative reviews have proven to increase conversion rates on eCommerce sites. Cleaning your reviews or only posting good reviews can shoot you in the foot.

Is it Lack of Credibility & Authority What Keeps Visitors from Converting on your Site?

If you are in an industry with lots of competition, or with “bad actors” who manipulate to get sales, your one problem may be credibility and authority.

The design of your website is one of the first things that communicate credibility. But be careful. A fancy, overly-designed site may communicate the wrong idea to visitors. It may convey that you’re expensive or too big for your prospects.

Credibility can be established by emphasizing things about your company, and by borrowing credibility from other sources such as, your clients. your payment methods, you media appearances and the like.

Brand Credibility

You gain credibility by building confidence with your brand and value proposition. How long have you been in business? How many customers have you served? How many products have you sold? How many dollars have you saved?

Brand credibility generally takes the form of implied proof.

Borrowed Credibility

Your website or landing page can borrow credibility and authority from third-party sources. Placing symbols and logos on your website borrows from these credible sources. Ask yourself:

  • Have you been interviewed or reviewed in well-know publications?
  • Have you been interviewed on broadcast media outlets?
  • What associations are you a member of?
  • What awards have you been nominated for or won?
  • Has your business been rated by consumer organizations like Consumer Reports or the Better Business Bureau?
  • Have your products been reported on by analysts such as Forrester?

Place proof of your associations on your site’s landing pages to borrow authority and credibility from them.

User Interface & User Experience: Factors that Keep Visitors from Converting on your Site

Nothing works if your visitors eyes aren’t guided through your pages.

No value proposition, no risk reversal, no social proof, no credibility stands a chance if the layout and user experience don’t help the reader understand where they’ve landed or where to go from there.

Long load time equals poor experience

The first thing to look at is site performance. If your pages load slowly, you visitors may be bouncing away. If any element requires a loading icon of any sort, you are probably providing a poor user experience.

Clutter means bad visual hierarchy

When a visitor looks at a page, it should be very obvious what is most important element and what can be looked at later. This is called a visual hierarchy.

For example, we like to make call to action buttons highly visible, so that it is clear to the reader that they are being asked to do something.

Designers use their knowledge of whitespace, negative space, font, font size, color, and placement to design an experience that is easy for the visitors’ eyes to digest.

Don’t add surprises

A good user experience has little place for novelty. Arbitrarily adding animations, fades, parallax images or scroll-triggered effects are generally unnecessary, can cause technical glitches and may actually hurt conversion rates.

How to Know “what” is Hurting your Conversion Rate

We recommend this process to determine the primary problem that keeps visitors from converting on your website.

1. Gather all of your conversion optimization ideas

Begin recording all of the ideas you have for improving the site in the spreadsheet. Sources for these ideas:

  1. Ask your team
  2. Read your customer reviews
  3. Read your customer surveys
  4. Pull from your marketing reports
  5. Read your live chat transcripts
  6. Generate heatmap reports for your key pages
  7. Watch recorded sessions

Don’t be surprised to have dozens of ideas for a website or landing page.

2. Categorize each of your ideas

The ROI Prioritized Hypothesis List spreadsheet has a column for classifying each idea.

  1. Messaging
  2. Layout/UX
  3. Social Proof
  4. Risk Reversal
  5. Credibility

There will also be some things that you just want to fix.

3. Count your conversion optimization ideas

Count out how many ideas you have for each category. The category with the most ideas is probably the one problem you should address first. We use a pie chart to illustrate the different issues.

What Keeps Visitors from Converting on your Site? This site's one problem is Value Proposition and Messaging followed by Layout and UX

This site’s one problem is Value Proposition and Messaging followed by Layout and UX

4. Start working

Begin working on the ideas in the category with the most ideas.

This is a great time to start AB testing to see which of your ideas really are important to your visitors.

Your search traffic will demonstrate their approval through more sales, more leads and higher conversion rates overall.

This sounds like a lot of work

It is a lot of work. But you could consider hiring us to identify what keeps visitors from converting on your site and we will test our way to your success.

You can request a free consultation with us.

This article is an updated and revised version of our original article published on Search Engine Land.

Brian Massey

Heatmaps are just the first step to obtaining useful insights on your website visitors. Today we’ll find out how heatmaps helped increase prospective student inquiries by 20% for a University and have a chat with Andrew Michael of Hotjar. Find out what he has to say.

Andrew Michael | Understanding Your Users: Leveraging Tools to Grow Your Website

Subscribe to the Podcast

iTunes | Spotify | Stitcher | Google Podcasts | RSS

Resources and links discussed

How Heatmaps Helped Increase Prospective Student Inquiries by 20%

We were looking at the heatmap report for the website of Northcentral University, a non-profit online university headquartered in Arizona.

Reading a heatmap report is like looking at a weather radar, but instead of blobs of green, red and yellow showing us where rain is falling around us, a heatmap report shows us where visitors are clicking on a web page.

And it was raining clicks in an unexpected spot on the NCU website.

Specifically, visitors were clicking on one of the fields in the middle of a form, and only on that field. Not the name field, not the email field. The majority of them weren’t completing the form.

So, why were visitors so interested in this one field?

It was an important question, as this form was the primary invitation to get more information on the University. It was on almost every page, ready to start a more in-depth conversation with any visitor.

The field visitors were clicking on was “program of interest”, a dropdown field that listed the degrees offered by NCU. It was meant as a way for prospective students to tell NCU which degree program they were interested in.

These prospective students were using it as an information source.

While the copy on the page was regaling visitors on the value of NCUs one-on-one learning, it’s 100% doctoral professors and it’s diversity, visitors were telling us that they had one question first.

Do you offer a degree program I’m interested in?

At least, this was the hypothesis. So we designed a test.

At the top of every page, we placed a dropdown menu that listed the university’s programs, just like that on the form. When a degree program was selected, we took them to the part of the site that described that degree program.

Half of NCUs visitors would see this dropdown. The other half would not. They’d have to use the dropdown in the form.

When we measured the results, the visitors who saw the dropdown in the page were 20% more likely to fill out the form completely, requesting information.

This indicated that the change would increase prospective student inquiries by 20%, a very significant improvement in the key metric for the site.

The current site offers a complete section designed to help visitors find a degree program they’re interested in.

This is something that we would not have been able to find any other way than through a heatmap report. It doesn’t show up in analytics. No one would have complained.

This is the power of a class of report called user intelligence reports.

Anyone who knows how to read rain chances from a weather radar can use this kind of report. More and more of us are doing this.

These reports are surprisingly easy to generate and the tools are inexpensive.

You can bring people to websites all day long but if it’s not optimized and it’s not user friendly and you’re going to lose all day and you just can end up throwing money down the drain.

Leading the way is a company called Hotjar. On today’s show we’re breaking down HotJar with Andrew Michael. A tool focused on helping you understand your users. Andrew got into marketing because he’s intrigued by psychology – understanding what drives people’s decisions.

An Insightful Chat with Andrew Michael from Hotjar

Intended Consequences podcast with Hotjar's Andrew Michael

Intended Consequences podcast with Hotjar’s Andrew Michael

Time is precious for overburdened marketers. On this show, we seek to understand which tools are truly valuable, and which are just giving us “interesting” insights.

We install something like Hotjar on every one of our client sites when optimizing.

Tools like Hotjar are a part of what I call ‘the golden age of marketing’. These tools are continually evolving, getting easier to use and less expensive.

These are the tools that buy you more time to be creative, ground breaking and successful.

We start off the podcast talking about all of the things Hotjar brings to the table under a single subscription. Then we talk about the outcome of leveraging tools like this – how do they actually empower marketers serve their online prospects better?

Listen to the Podcast. It’s well worth it.

When You Get Back To The Office

I’m not a shill for Andrew. I just know these tools are a great value and easy to learn.

When you get back to the office, i recommend that you do a trial of Hotjar. Add it to your homepage, or one of your “money” pages where you ask visitors to take action. Setup a heatmap report on it.

Let it run for a few days, and then look at the scroll report. This report tells you how far visitors are scrolling on your page. This is one of the first things we look at when we start analyzing our clients’ sites.

Where is the report turning blue? This is the place on the page that visitors stop reading. Look in the blue area. What key content are they missing?

If more than half of your page is blue, you have a scroll problem. Visitors aren’t being engaged enough to get through your content.

Reasons for this include: false bottoms, where visitors think the page ends when it doesn’t. It can mean that your content isn’t engaging them enough high on the page. It can mean that you’re not handling a key objection.

Your strategies include moving key content to the top of the page, putting arrows, chevrons and “v”s on the page to tell visitors to keep going, or re-thinking the story you tell on this page.

Don’t be discouraged. This is progress! Next, share this report with your design team and see what they think.

This is how pages get better and businesses grow.

You can get all these links discussed on this week’s episode in our shownotes. One thing to remind you all of is that Hotjar is a freemium model so it’s one you can definitely

Alright scientists, that’s it for this week.

Andrew Michael | Understanding Your Users: Leveraging Tools to Grow Your Website

Subscribe to the Podcast

iTunes | Spotify | Stitcher | Google Podcasts | RSS

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

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
  • This field is for validation purposes and should be left unchanged.

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

Fitt’s Law states that the time it takes to move a mouse to a CTA button is a function of the distance to the button and its size. Just like shooting pool.

According to Fitt’s Law, clicking a button on your site can be modeled like a pool shot. It’s a fun way of saying that you should make buttons big and put them where the visitor expects them to be. If you’re looking for good ideas for testing button design, consider the game of pool.

Most of us have at one time or another found ourselves at the end of a pool cue with “a lot of green” between us and the ball we want to sink. There is a lot of table between the cue ball and the ball we want to hit just right.

Thanks to an excellent article on Entrepreneur.com, I’ve discovered that visitors to our website may be experiencing the same thing. Author Nate Desmond introduced Fitt’s Law, which he states this way:

Fitt’s Law proposes that time required to move your mouse to a target area (like a sign-up button) is a function of (1) distance to the target and (2) size of the target.

In a game of pool, the distance to the target changes constantly. This is equivalent to the distance from where a visitor’s mouse is and where your call to action button is.

In general, the rules of a pool shot are pretty simple.

Fitt’s Law Corollary: The Closer the Cue Ball to the Target Ball, the Easier the Shot

Shooting pool is like webpage development. It’s easier to accurately hit a target ball that is close to the cue ball.

It’s easier to accurately hit a target ball that is close to the cue ball.

The further the ball is from the cue ball, the harder the shot.

It’s counter-intuituve that the distance to the hole doesn’t matter as much as the distance from the cue ball.

If you strike the cue ball hard enough, it doesn’t really matter how far the target ball is from the pocket. What does matter is how far the target ball is from the cue ball. The shot is easier to line up and there is less distance for the cue ball to bend if you add a little accidental spin. When you put spin on the ball, it’s called “English”. Accidental spin is generally called “cussing”.

The Cue Ball is Where the Mouse Is — or Wants — to Be

To continue stretching our metaphor beyond recognition, we can liken the white cue ball to where the mouse is on a web page.
Part of the problem with this approach is that we really don’t know where the visitor’s mouse is on the page when it loads. We might assume it’s in the upper-left corner, where the website address is entered. This is true for only a small percentage of your visitors who enter your site by typing your domain. Others will come from internal links, ads and search results.

You can't just cram your click target into the upper left corner of your pages.

You can’t just cram your click target into the upper left corner of your pages.

It’s probably not helpful to put your call to action buttons in the upper left corner of  your pages.

For some, it will be where the visitor is looking on the page. For some percentage of our visitors, the location of their mouse predicts where they look on the screen. This would tell you that the most visually interesting items on your page will be magnets for visitor eyes and for the visitor’s mouse.

What are the most visually interesting points on your page? You can determine this by using several eye-tracking predictors like AttentionWizard and Feng-GUI. In the following example, the red circles indicate the most visually attractive aspects of the page, and predict how the visitors’ eyes will explore the page.

National Business Furniture eye Tracking: The visitors' eyes don't come close the the click target "Add to Cart" button.

The visitors’ eyes don’t come close the the click target “Add to Cart” button.

The Add to Cart button – our target ball – really isn’t close to most of the high-contrast items on the page. The distance from the “mouse” to the button is long. Plus, the button is relatively small and doesn’t stand out from other elements on the page.

Compare that to the following competitor.

World Market Eye Tracking: The click target is "closer" to where the eyes -- and mouse -- are likely to be on this page.

The click target is “closer” to where the eyes — and mouse — are likely to be on this page.

In this case, the Add to Cart button is one of the most visually interesting things on the page. Furthermore, it is near other highly-visible elements. The effective “distance” is much smaller and the visual “size” is larger.

This gives us two very helpful rules of thumb:

  1. Make your click targets visually interesting.
  2. Place your click targets close to things that are visually interesting.

We recommend that the click-targets on landing pages and product pages bet the most visually prominent items on the page.

Place Buttons Where They are Expected to Be

Probably a more effective way to reduce the distance between the mouse and a click target is to put your buttons where they are expected to be. We have been trained that the “end” of a page is the lower-right corner. This is where it has made sense to put buttons since the days of Web 1.0. As a result, we expect the lower-right to take us to the next step.

This concept is lost on the following page.

The "Cancel" button is in a disastrous place. Visitors expect the lower-right button to be the next step.

The “Cancel” button is in a disastrous place. Visitors expect the lower-right button to be the next step.

Here, the right-most button – the one most likely to be targeted — is “Cancel”. This button clears out all of the form information. Is there really ever a good reason to clear out a form? No. So don’t make it the lower-right click target.

This is close:

The Add to Cart button is not in the expected place on this ecommerce product page.

The Add to Cart button is not in the expected place on this ecommerce product page.

This is closer:

The add to cart button here is closer to the desired place. The box around it will deflect visitors' gazes.

The add to cart button here is closer to the desired place. The box around it will deflect visitors’ gazes.

This is closest:

The add to cart button here is the last thing in the lower right part of the page. Perfect next step.

The add to cart button here is the last thing in the lower right part of the page. Perfect next step.

If Something’s In the Way, the Shot is Harder (and so is the click)

One of the major challenges in pool is, of course, other balls. This is also the problem on webpages (not the balls).

The hardest shot is when things are in the way, for pool and webpages.

The hardest shot is when things are in the way, for pool and webpages.

Designers (should) know how to remove things that make click targets disappear. White space is one technique that removes blocks.

Lot's of white space around this click target make it easier to see and click. Leverage white space to make the button appear bigger.

Lot’s of white space around this click target make it easier to see and click.

Solid lines form barriers to the eye’s movement.

Elements crowd out this Add to Cart button, making it almost invisible.

Elements crowd out this Add to Cart button, making it almost invisible.

Major and Minor Choices for Button Design

One technique that we use that takes advantage of Fitt’s Law is major and minor choices. We make the choice that we desire less smaller and harder to click. We make the choice we want the visitor to choose big and bright.

Here we see that the designer made the “Learn More” button more visually prominent – making it closer – while making the “Watch video” link more distant – less visually prominent.

Which of these two click targets is "closer" due to the visual attractiveness? The order should probably have been reversed.

Which of these two click targets is “closer” due to the visual attractiveness? The order should probably have been reversed.

Language Makes the Hole Bigger

While there really is no way to get bigger pocket holes on a pool table, there is a way to do so with click targets. The language you use on buttons and in links will make it easier for visitors to take action.

Make your visitors excellent pool players by giving them easy shots.

Make your visitors excellent pool players by giving them easy shots.

“Submit” does not generate a large pocket to aim at. The language should tell the visitor what will happen if they click, and what they will get.

  • Download the eBook
  • Get Your Free Report
  • Get Instant Access
  • Add to Cart
  • Checkout
  • Request a Call

These make the visitor a better shot by offering them something of value as a part of the click target.

Some popovers have begun using the inverse of this technique to discourage visitors from abandoning.

Some popovers have begun using the inverse of this technique - Fitt's Law - to discourage visitors from abandoning.

Popover.

Give Your Visitors a Better Shot with Better Button Design

If a webpage is indeed like a pool table, it makes sense to give your visitors the best shot at clicking on the right button or link.

  1. Anticipate where your visitors eyes and mouse cursor will be on the page.
  2. Place click targets physically close to these places.
  3. Make click targets visually significant and place them near other visually significant items.
  4. Remove blocks that make click targets disappear. Use white space and eliminate competing elements on the page.

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

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
  • This field is for validation purposes and should be left unchanged.

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.