How to Solve Your Biggest Problems with Website Conversionceblog.s3.amazonaws.com/wp-content/uploads/2014/05/... · Biggest Problems with Website Conversion BY KATHRYN ARAGON & KEVIN

Problems in Conversion 1

How to Solve Your

Biggest Problems with

Website Conversion

BY KATHRYN ARAGON & KEVIN GAO



Table of Contents

Performance Tuning: 4 Things that Make or Break Usability ................................................. 11

PAGE LOADING SPEED ........................................................................................................ 12

BROWSER COMPATIBILITY .................................................................................................. 16

RESPONSIVE DESIGN ........................................................................................................... 18

LINK INTEGRITY .................................................................................................................... 20

SUMMARY ............................................................................................................................. 23

Logic and Direction: How to Turn Visitors into Customers .................................................... 24

LET’S SEE HOW THIS WORKS IN A BRICK-AND-MORTAR STORE ..................................... 26

LOGIC .................................................................................................................................... 28

DIRECTION ........................................................................................................................... 40

SUMMARY ............................................................................................................................. 45

The User Interface: Creating a Buying Environment on Your Website ................................. 47

COLOR .................................................................................................................................. 48


CONFORMING TO VISITOR BEHAVIOR .............................................................................. 52

FLOW..................................................................................................................................... 54

PAYMENT OPTIONS ............................................................................................................. 56

SUMMARY ............................................................................................................................. 57

The Emotional Journey: Moving Customers Toward the Sale ................................................ 58

BRANDING ............................................................................................................................ 60

HONESTY .............................................................................................................................. 61

RESPECT ................................................................................................................................ 64

COMMUNITY ........................................................................................................................ 65

SECURITY .............................................................................................................................. 67

SUMMARY ............................................................................................................................. 69

An Analytic Approach: How to Find and Fix Conversion Problems ....................................... 71

THE OPTIMIZATION PROCESS ............................................................................................ 73

SPLIT TESTING ...................................................................................................................... 75

MULTIVARIATE TESTING ...................................................................................................... 77

SUMMARY ............................................................................................................................. 82


The Bottom Line in Website Conversion .................................................................................. 83

About the Author .................................................................................................................... 85

Crazy Egg: When Analytics Aren’t Enough ............................................................................ 86



As a communication tool, the World Wide Web is as revolutionary as the invention of the

Gutenberg press back in the 15th century. The Web makes a seemingly infinite amount of

information instantly available to a majority of inhabitants of this planet. Indeed, just

about every conceivable topic has a website dedicated to it.

With such a large variation of websites available—over 861 million worldwide, according

to Netcraft—it’s easy to lose your way when creating your own website for your own

purposes.

It would seem that there are just about as many purposes to building a website as there

are websites in the world. But this is not the case. There really are only three major

purposes that websites serve:

1. provide an outlet for creative expression

2. disseminate information

3. motivate behavior

The personal website typically serves as an outlet for creative expression and doesn’t

normally seek to motivate behavior of its visitors. Business-related websites, on the other

hand, seek to disseminate information in order to motivate behavior.

http://news.netcraft.com/archives/2014/01/03/january-2014-web-server-survey.html


While both personal and business websites contain creative expression and are

informative, only business websites are designed to convert visitors into paying

customers. The rate at which visitors are converted into customers is known as the

“conversion rate.”

Mathematically, the conversion rate equation looks like this:

Conversion Rate = Number of visitors taking action / Number of visitors

In this context, a visitor “takes action” when he responds in some way that benefits the

business. For example, a B2B business might consider the downloading of a white paper

to be the desired action of a particular Web page. A B2C business may consider the

creation of a shopping cart to be the desired action. In all cases, one rule applies:

Every business Web page must drive some sort of action.

There are many factors that can have an adverse effect on the conversion rate. This e-

book focuses on these factors as well as some techniques for monitoring and testing

conversion rates.

Chapter 1 focuses on the mechanics of your website server and how its performance—or

lack thereof—affects your conversion rate.


Chapter 2 looks closer at the visitor experience upon arriving at your site. It helps you

analyze whether all your products are easy to find, whether they’re grouped in a way that

makes logical sense, whether you’re taking advantage of upsell and cross-sell

opportunities and whether your visitors can find help when they need it.

Chapter 3 dives deeper into your user interface and considers whether your site’s colors

make sense, whether your site is well behaved and whether your visitors can find their

way around.

Chapter 4 considers the emotional side of business websites. Whether buying for yourself

or making a purchase on behalf of your company, the act of paying for a product or

service raises emotional awareness of risk, trust and security. Business websites ignore

these human emotions at their own risk. This article focuses on reassuring potential

customers that their concerns are being addressed.

Chapter 5 introduces the analytical side of website conversion. It looks at split and

multivariate testing, and touches upon the concepts of sample size and the art of

continuous website optimization.


We hope you not only enjoy reading these articles, but that they provide some real

tangible benefit to your company by helping you optimize your website for increased

revenue.


Performance Tuning

4 Things that Make or Break Usability


Your business uses its website to generate revenue. Period. So any problems with website

performance will directly affect your website conversion.

Think for a moment about a traditional brick-and-mortar store. Visitors are willing to

tolerate minor inconveniences, like a freshly mopped floor that may be a bit slippery.

Why? Because they've taken the time to get to the store’s location and invested in the

journey to purchase.

But online visitors have not invested anything. They lose nothing by leaving, so one minor

inconvenience due to poor website performance is enough to drive them away.

Your website’s performance can have a huge impact on your conversion rate. Let’s look at

four performance issues that are critical to your success.

PAGE LOADING SPEED

Visitors are impatient. They will leave your site if the initial landing page doesn't load in a

reasonable amount of time—and the definition of “reasonable” grows shorter every day.

According to a KISSmetrics survey, you'll lose nearly 7% of your visitors for each second of

load time. Which means a four-second load time will result in a loss of nearly 25% of your

visitors!

http://blog.kissmetrics.com/loading-time/


This news should shock you. You'll lose an opportunity to convert visitors before they've

even had a chance to get your initial sales pitch!

How do you speed up your website?

You can uncover issues with page loading time using an online profiler like Pingdom. You

don’t have to check all pages, but you should, at the very least, check the likeliest landing

pages.

Recognize that pages consist of a lot of files, such as pictures, scripts and style sheets. You

should profile the load times of each file to get hints as to where the problems may be.

http://blog.crazyegg.com/2013/12/11/speed-up-your-website/

http://tools.pingdom.com/fpt/


A “Waterfall” report from Pingdom, itemizing file-load timing on a web page


Action – Before you start making any changes, establish a base line on your critical pages.

Analyze the results to see how long it takes to load different components. Focus on each

of the components to see how they can be optimized. For example:

Optimize Pictures – Render pictures to the minimum physical size needed. Just

because it's possible to have the browser render a picture at half size doesn't mean

you should. If the picture is rendered to 100 x 200 pixels, make sure the

corresponding jpeg is rendered to that size. Also, compress jpegs as much as

possible while maintaining an acceptable visual quality.

JavaScript – It's easy to be lazy and include a whole library of JavaScript functions,

even though you only use one or two functions. Reduce your JavaScript load time

by including only sub-sections of libraries wherever possible. Also make sure to use

the "min" version of scripts, if available.

CSS – Eliminate unused styles and style sheets. Your website designer may have

included some CSS libraries that are not being used. Inspect each library to see if it

really needs to be included.

After optimizing your pages, compare the results using your baseline. This will give you

direct feedback on your success.


Tip – Every second you shave off a page’s load time represents 7% more customers!

So even if you need to pay for optimization tools, compare the 7% against the cost.

BROWSER COMPATIBILITY

Have you ever come across a website that says, "Best when viewed on Internet Explorer?"

Does a piece of you die inside when you see this? It should!

You should refuse to tolerate this in your own website design because it will cause you to

lose visitors. Even if you believe that 80–85 percent of web browsers are using IE (which is

a very dated view), you will alienate 15–20 percent of your visitors right away. Can you

afford to lose this much business?

You can use Google Analytics (or similar) to see what types of browsers are accessing your

site. Then use an online tool like Browsershots to test the level of browser compatibility.

Browsershots also lets you test across all browser revisions, so you can test compatibility

back to earlier versions of browsers.

http://browsershots.org/


Snapshots of web pages under various browsers, as reported by Browsershots

Action – Identify the most popular browsers—including revisions—that are hitting your

site, and work down the list to ensure compatibility.


Understand the financial tradeoffs involved. For example, is it worth the expense of

testing and fixing your site to run a particular version of a particular browser even though

only one percent of your customers are using that browser?

Tip – Don't implement the latest HTML technology on your site—for example, automatic

shadows in CSS3—unless you provide a graceful fallback for older browsers.

RESPONSIVE DESIGN

Does your site render on mobile and tablet devices? Does it respond to the different

screen widths so people can use it without pinch-zooming and squinting?

Responsive Design is becoming a bigger topic every day. While looking for browser

incompatibility, as described in the previous section, you may find that a significant

percent of your visitors are using mobile devices.

An excellent article in Forbes describes the urgency of implementing a responsive design.

It also highlights some good techniques for determining the number of mobile devices

accessing your site as well as a great way to spot trends in this area.

But research has already shown that consumers are using multiple devices each day to

browse the Internet. For example, a study by Monetate reveals that one-fourth of visits to

http://www.forbes.com/sites/joshsteimle/2013/11/08/why-your-business-needs-a-responsive-website-before-2014/

http://pages.monetate.com/truth-about-responsive-design-whitepaper/


ecommerce websites now come from a mobile device, while year-over-year PC sales are

on the decline.

The bottom line is that you ignore mobile browsers at the cost of losing visitors.

While it may cost some money to retain a website designer to implement a responsive

design, you need only look at the increasing percentage of your mobile viewers to

perform a quick cost analysis and determine the cost of not implementing a responsive

design.

As mentioned in the previous section, you can use Google Analytics (or similar) profiling

tools to determine the number of customers accessing your site on mobile devices. Then

look deeper and determine the bounce rate among visitors using mobile devices. If it's

higher than your average bounce rate, you have a problem.

Action – Make your website responsive, even if it requires a site redesign. Your server

needs to be able to detect browser screen width and serve the appropriate pages.

Is it expensive? It may be. But compare the cost of the redesign with the number of

potential visitors you will gain.

http://blog.crazyegg.com/2014/01/15/website-redesign-strategy/


Also, establish a baseline of mobile visitor bounce rate so that you can compare the

results after you've implemented the changes. This will help you justify the cost.

Tip – Mobile screens provide limited real estate, so focus on providing only the minimal

information to your mobile users, thereby streamlining their experience.

LINK INTEGRITY

Do you have any "404" errors on your site resulting from broken links? This type of

problem signals that you are not maintaining your site and may telegraph incompetence

to your visitors.

The bottom line is that broken links puts your credibility at risk.

There are dozens of link-checking sites online that can review your entire site and look for

links going nowhere. The W3C organization maintains a link checker that checks your site

for link problems.

http://validator.w3.org/checklink


Validating links with the W3C link checker. Note the 404 error.


Action – Navigate to a link checking site and enter your website's URL. You may have to

wait a while, but the results are worth the wait. You'll receive a comprehensive list of

broken links that you can address one at a time.

Run this test after each website update or at some periodic rate. Then make time to fix

the links.

Tip – Customize your "401" page in

case visitors see it before you can fix it.

Apologize for the inconvenience and

offer some helpful suggestions, such as

linking to a help page or a contact

form.


SUMMARY

Your goals for your website likely include one or more of the following:

Search engine optimization

Move prospects into and through the sales funnel

Build and nurture relationship

Drive action

All of them can be affected by the issues we discussed above. Problems with website

loading speed, browser compatibility, responsive design and link integrity can drive off

visitors and lose sales.

While it's true that other issues, such as logic and flow, user interface, emotion and

feedback are important, they mean little unless the performance of the website allows a

path for visitors to convert to customers.

Stay tuned! In the next article in this series, we’ll focus on the importance of providing

logic and direction for your visitors as they work their way through your site on their path

to conversion.


Logic and Direction

How to Turn Visitors into Customers


People are impatient. If they don’t quickly find what they’re looking for, they’ll leave your

website.

Successful businesses understand this. They respond by doing everything in their power

to

capture people’s attention

lead them down the simplest path possible

guide them each step of the way

answer all their concerns and questions

And they keep doing those things until visitors become customers.

This is an art form that has been around for thousands of years, and it continues to work

on ecommerce websites today. To convert website visitors into website customers, you

need an action plan designed around the impatient customer.

Impatient customers appreciate two fundamental principles:

1. A logical solution that makes sense

2. A direction to follow


In other words, guide your website visitors to a product that enhances their life, and you

will be rewarded with more customers.

CASE STUDY: A BRICK-AND-MORTAR STORE

Let’s say you and your 6-year-old son visit a bicycle shop looking for a new bike for him.

Upon entering the store, you see many racks filled with bicycles. Your first impulse is to

look for some sort of order, how the racks are organized so you can quickly find what

you’re looking for.


You notice that all the adult bikes are in one section, grouped by the types of riders. There

are groups for mountain bikes, racing bikes and touring bikes. You look at the children’s

bikes and see girls’ bikes and boys’ bikes.

Having spotted your target area, you walk over to the boys’ bikes, but you’re not sure

which bike would be the best for your son.

Suddenly, a store clerk approaches and asks if you need assistance. You ask him a

number of questions, which are quickly answered. The clerk then interviews your son to

determine the style of bike he prefers and recommends a bike.

After you agree to buy the bike, the clerk adjusts the seat and handlebars to fit your son’s

frame, and then you’re on your way to the cash register.

Just before you reach the register, however, you stop at the bike accessories area, which is

located conveniently near the register, and add a light, a horn and some additional

reflectors to your shopping cart.

What just happened?


The bicycle shop knew how to arrange their products so they could be easily located, they

provided assistance exactly when it was needed, and they upsold you on various

accessories.

In other words, by grouping their products in a logical way and making it easy for you

to navigate to the areas you needed, they converted you from visitor to customer.

Successful ecommerce websites do exactly the same thing, but in a virtual sense. The key

is logic and direction. Let’s talk about how you can implement these same concepts on

your website.

LOGIC

The impatient visitor demands simplicity.

Consider that there are countless different websites, each with its own way of doing

things. Yet because each website conforms to simple rules of logic, the visitor will have no

problem quickly finding her way around.

For example, an online bicycle store will look entirely different from an online skin lotion

store, but if both are organized in a way that makes sense, the visitor will have no

problem quickly finding products on either site.


When creating a website that makes logical sense to the impatient visitor, consider the

following guidelines:

Group Your Products

Are all your products grouped in a way that makes sense? Understand how visitors form

groups in their minds. For example, a candle shop may create different groups for

scented candles, decorative candles and birthday cake candles, because this makes most

sense to customers.

Action – Create a logical tree of all product groups. (Hang on to it. You’ll need that tree

later in this article when creating your website navigation.)

Tip – Analyze your visitors’ shopping carts to gain further understanding of how they

group products. Amazon does an excellent job of this with their “Frequently Bought

Together” suggestions.

After a purchase, for examples, they additional suggestions based on the buyer’s

purchase and browsing history.


Upsell and Cross-Sell

Many visitors approach your site because they’re looking for a solution to a problem. It’s

likely they do not know the exact solution, and they may not even know their exact

budget.

This provides you a good opportunity to solve their problem in a way that not only

increases their satisfaction but also optimizes your revenue.


Your goal is to make sure they get the complete solution to their problem, not just a

partial solution.

Dan Kennedy does a good job of this. Once an order is complete, the confirmation page

includes a second, related offer. Like this:

Upsells are related offers that add value to the original purchase.


Here’s another example: A hungry customer goes to McDonalds because he wants a

solution to hunger.

Maybe he’s thinking about a simple hamburger and a root beer. But when he gets into the

restaurant, he sees a delicious picture of a Big Mac, so he gets upsold to a bigger

sandwich. When he places his order, the kid behind the counter suggests purchasing an

order of french fries. The customer agrees to the cross-sell, and a purchase is made.

An upsell is a selling technique that attempts to get the customer to upgrade their

existing purchase.

A cross-sell is a selling technique that attempts to get the customer to purchase a

complimentary product in addition to the original product.

Your goal is to do one or both. Think creatively about your product line. Do you have

products that could be grouped together—one offered as an upsell after the other is

purchased?


Action – Make a list of your major products and their potential upgrades. Also, for each

product, look for opportunities to completely satisfy the customers’ problem. For

example, suggest an extra rechargeable battery with digital camera purchases.

Tip – Not every product has an upgrade, but you probably have other opportunities to

create quantity upgrades. A 3-for-2 pricing structure, for instance.

Analyze Items Above the Fold

Pages that feature multiple products should show at least one of the products above the

fold. Impatient visitors may not know to scroll down the page and, not seeing what they

need immediately, may leave.

This can happen quite easily, even with tech-savvy visitors. Though they know they can

scroll, if they’re too busy, they may not make the time.

Be aware, as you design your pages, a users’ screen resolution can affect how much of the

page shows above the fold.

According to W3Schools, as of January 2014, approximately 15% of desktop screens show

a resolution of 1280x800 or below. This yields a maximum of 800 pixels on the vertical

http://www.w3schools.com/browsers/browsers_display.asp


axis. If your product web pages take up 75% of that available vertical space, you’re looking

at a page fold that’s just 600 pixels into the page.

How much space does that leave for at least one product above the fold?

A lot depends on the configuration of the browser (tool ribbons and menus) as well as the

logo and header on your website. Precious little remains, so your customers could easily

lose sight of items unless he knows to scroll down.


Action – Analyze your major product pages in light of a page fold that’s just 600 pixels

down from the top of the browser. Does a product picture and description appear above

this line?

Tip – Reduce the size of your company logo and header on pages that list products.

Busy Busy!

Impatient visitors have impatient eyes, and impatient eyes get lost if the page is too busy.

It’s tempting to cram as much information into your web pages as possible, but be careful

not to overwhelm your visitors with messaging. Often, they just want a simple solution to

their problem.

There’s an old sales lesson that goes something like this: If someone comes to your

hardware store looking for a hammer, put a hammer in his hand, take his money and

send him on his way. If you try to sell him on the benefits of the hammer and what a great

deal he is getting, he may change his mind.

In other words, once a visitor has expressed interest in a specific product, the deal is

yours to lose.


That’s not to say you shouldn’t try to upsell and cross-sell your customers, because you

should. Just make sure that your attempts to increase revenue don’t trip him as he tries to

make his way to the cash register.

Here’s a great example of what NOT to do:

An ecommerce site that is too busy for impatient eyes!


Assuming you were interested in purchasing an Exuviance product, you have to figure out

that the list of products is below the fold, which isn’t immediately obvious.

In the meantime, you’re bombarded by messages, many of which practically beg you to

click elsewhere, including:

25% off on orders over $60 (mentioned 5 times)

Free shipping on orders over $49 (mentioned 2 times)

“Valentine’s deals” button

“Something new that just arrived” button

“Special offer while supplies last” button

“Top 10 Shopper’s Choice” button

Don’t distract your customer with competing messages, especially on a product page.

You’re more likely to lose the sale than increase it.


Action – Use Google Analytics (or similar) to see how often visitors land on a product page

but don’t actually put the product in their cart. Visitors may be getting distracted at this

critical stage of conversion.

Tip – Ensure every page has a shopping cart button that allows customers to complete the

sale as soon as they’re ready. Don’t get in their way!

Help

Provide help to your visitors if they appear to be stuck. Visitors who stay on the same

page for a time might be searching for an answer.

Consider incorporating a live chat or similar service on your site to help visitors get un-

stuck. It can be unobtrusive in the bottom corner of your

Web page:

Then when clicked, it opens to provide a dialog box.

http://blog.crazyegg.com/2013/08/05/7-live-chat-software-solutions/


Action – Track the top exit pages using Google Analytics (or similar). Visitors that exit your

site from a product page may not have found the information they were looking for.


Target these pages when incorporating a live chat service and see if some strategic

intervention from a proactive chat agent helps convert these visitors into customers.

Tip – Take advantage of free trials that many live chat services provide for a limited time.

DIRECTION

While people spend countless hours working on puzzles and playing strategy games, they

have no patience with websites that demand a similar level of effort. Visitors want to be

led through an ecommerce site in much the same way that they work their way through a

brick-and-mortar store.

Take a moment and think about your most recent trip to the grocery store. You arrive

with a list in-hand, and you walk through the aisles picking up items on the list.

The aisles are clearly marked according to groups of items within. There’s the bakery aisle,

for example, where you find bread, bagels and croissants. The pasta aisle contains

spaghetti, macaroni and all other forms of Italian noodles.

You get the picture. The products are grouped in a way that allows you to quickly navigate

through the store and select the items you want.


When charting a direction for your website visitors, you need to provide this same type of

direction. Consider the following:

Heat Map

The upper left corner of your website is known as the “Golden Triangle.” This is where

most visitors initially set their attention. Visitors expect to see the most relevant

information here.

Place your website navigation in this area.

Typical heat map, showing

the most active areas in red.

Notice the triangular shape

of the most active areas,

creating the “Golden

Triangle.”


Action – Use a service like Crazy Egg to generate a heat map based on visitor mouse

movements and clicks on your site. This can give you insight into where they might be

getting lost.

Tip – The location of the golden triangle will be in the upper right side of the browser

window for RTL (Right-to-Left) languages.

Navigation

Visitors with a clear idea of the product they’re looking for should be able to navigate your

site, clicking on a maximum of three navigational buttons before arriving at a page

featuring the product they seek.

Furthermore, each page should provide some indication of the navigational structure

above it.

Breadcrumbs are typically used for this purpose—they leave a backwards trail all the way

back to the home page and gives a “You Are Here” sense of location, just like a directory

sign in a large shopping mall.

But logically organized, intuitive navigation can also do the trick. This screenshot shows a

two-level navigation that works well:

http://www.crazyegg.com/


Action – Earlier in this article you were asked to create a logical tree of all your product

groups. Take a look at the tree and ensure that visitors can get to any page without taking

more than three steps. Use the tree to create the navigation structure.

Tip – Nested drop-down menus are losing popularity, probably because it’s difficult to use

them on a mobile device.

Solution Pages

Visitors may not be able to verbalize what they’re looking for. They may instead look for

pages that focus on solutions rather than products.

Though this mostly applies to B2B businesses, B2C websites can make use of solution

pages as well.

For example, Lowes features a section on their main menu entitled “Ideas & How-Tos”

that are split into two main groups: “Home Areas” and “Activity Types.”


These are wonderful pages to read when you’re just looking for ideas. Eventually you’ll

focus on a product, but you need to understand the solution first.

You can quickly navigate to the solution pages on the Lowes website and get great ideas, all of

which use products from Lowes


Action – Do some self-analysis on your business. Why do visitors come to your site? What

types of problems are they facing? Do you have products that could be positioned as

solutions?

Though this may sound trite and obvious, it’s sad that many websites don’t do this. They

focus instead on their products.

Of course, a lot depends on the product. If you’re selling tires, for example, visitors are

already very familiar with the solution to their problem. But if you’re selling lawn-care

products, you might consider the types of lawn-care problems your visitors are

experiencing before leading them to your products.

Tip – Use customer feedback forms to get insight into their problems and subsequent

solutions.

SUMMARY

If your website structure makes sense and your visitors have a clear path to the items

they seek, you can experience a high conversion rate. But if it’s confusing or makes people

think too hard, you’re leaving money on the table.


As you saw in this chapter, a logical, easy-to-navigate website is critical to conversion.

Next, we will focus on the user interface. We’ll study how color, flow and website behavior

can also affect visitor behavior.


The User Interface

Creating a Buying Environment

on Your Website


Website designers often overlook the importance of providing a pleasant environment for

their visitors. They tend to take a best guess at what visitors want, and then guess again if

too many visitors click away.

It could be argued that if designers guess often enough, they’ll eventually get it right;

however, each wrong guess creates casualties on the road to profitable website

conversion.

It’s far better to start out with some good ideas in the beginning.

This article discusses four important topics to consider when optimizing the environment

your website provides for its visitors. Think of it as a facelift for your online store, which

can turn your website into a buying environment.

COLOR

Color may not be the first thing you think about when it comes to conversion

optimization. But there’s no denying its impact on the mood, or environment, of your

website.

There is an excellent article regarding color psychology on the Help Scout blog entitled,

“The Psychology of Color in Marketing and Branding.” The article points out that there are

https://www.helpscout.net/blog/psychology-of-color/


many factors that influence individual color preferences, including past experience,

cultural differences and home life.

Each person has a unique experience in life, and therefore no two individuals will select

the same palette of favorite colors; however, there is widespread agreement on the

appropriateness of certain colors.

For example, environmental concepts would be expressed in green—the color of healthy

plant life. Rugged concepts would use dark browns—the color of the earth.

Now take a close look at your own website. What colors are predominant on your site? Do

they flow together? Are important areas using the right colors?

Rather than attempting to use everyone’s favorite colors—which is impossible—your

website should use colors to convey a personality. If you were selling Harley Davidson

motorcycles, for example, you would use rugged dark brown colors. If a financial site,

green.

Also, consider that colors have relationships with each other. These relationships can

either be “analogous” or “triadic.” Analogous colors complement each other, while triadic

colors contrast with each other.


Source

When building your website’s messages, you’ll want to stick with complementary colors, or

colors that are opposite one another on the color wheel.

http://edtech2.boisestate.edu/eckela/506/Lesson3.html


When highlighting the call-to-action areas, you’ll want to use triadic colors (see the image

above) so that visitors can easily locate them.

This doesn’t limit your color scheme. It simply gives you guidance when selecting colors

for individual elements on your website. For example, if brown is your main color:

A palette of analogous colors A palette of triadic colors


Action – Take an inventory of your current web colors and how they’re used. Are

analogous colors being used to enhance your messages? Are triadic colors being used to

highlight your call-to-action links?

Tip – Use the color wizard at the Colors on the Web site to calculate triadic and analogous

colors.

CONFORMING TO VISITOR BEHAVIOR

When you break some subtle design rules, you may encourage your visitors to leave.

These rules include:

Never automatically play any sound. Never. People often surf the web at work

and won’t appreciate sudden loud music booming out their speakers.

Limit the use of pop-ups. Visitors don’t appreciate the interruption and often don’t

trust them. Note that there is a tendency lately to use windows that gently slide-in

from the side or bottom. These are perceived as being more acceptable, as they

provide service when needed. Visitors can slide them out of the way when they’re

not needed and slide them back into the window when needed.

http://www.colorsontheweb.com/colorwizard.asp


The browser’s cursor should change to a pointer when hovering over a link.

The cursor normally does this automatically, but if the link is implemented in

JavaScript, you’ll have to change the cursor manually. People won’t click on a link

unless they know it’s a link.

Get to the message. Each page should have a clear message—including the home

page—but too many banners and moving parts can overshadow it. Visitors will

conclude that they’ve stepped into a mess and will quickly leave.

Conform to the natural flow of reading. People who read text left-to-right (LTR)

will scan a page left-to-right as they work their way top-to-bottom. Make sure your

message flows in the same direction. If there is a call-to-action button, place it on

the right, toward the bottom of the section. The opposite polarity should be used

for right-to-left (RTL) web pages.

Action – Audit random pages on your site and ask yourself what a customer would do on

each page. Does it flow properly (LTR vs RTL)? Is the navigation menu clearly visible on

each page? Does each page convey an unambiguous message?

Tip – Use Google Analytics (or similar) to compile a list of “Top Exit Pages.” Then analyze

these pages to see what might be driving visitors away.


FLOW

Visitors should never question what is happening or lose their way through your site. If

they lose their way, they’ll simply leave. And they may leave just before converting to a

customer.

Sometimes this happens when visitors add an item to a shopping cart.

The shopping cart page suddenly appears, where visitors can select the quantity as well as

check on the price. But if you don’t provide a way back to the exact same page (and

position) where the item was initially selected, your visitors may get lost and abandon the

cart.

Issues with flow can also occur when you provide a link on a product page. A visitor clicks

on a link in your product page to get more information; however, by doing so, he loses his

place on your product page.

Alternatively, by moving visitors off your site, you break the flow, requiring your visitors to

navigate back to your product page. Many visitors will not bother returning.

You can address this problem in two ways:


Use target=”_blank” modification to your link

tags, so the information page opens in

another window.

Implement a “tooltip” menu in JavaScript.

At right is a tooltip example from the jquerytools

website

Action—Use Google Analytics (or similar) and make note of breaks in the visitors’ trek

through your website. The list of top exit pages may provide key insight to where the flow

is getting broken. Ideally, your top exit page would be an order confirmation page.

Tip—Joseph Kerschbaum wrote a good introduction to this on the Search Engine Watch

website entitled, “How to Use Google Analytics Visitors Flow Reports to Improve

Conversion Rates.”

http://jquerytools.org/demos/tooltip/

http://jquerytools.org/demos/tooltip/

http://searchenginewatch.com/article/2273391/How-to-Use-Google-Analytics-Visitors-Flow-Reports-to-Improve-Conversion-Rates

http://searchenginewatch.com/article/2273391/How-to-Use-Google-Analytics-Visitors-Flow-Reports-to-Improve-Conversion-Rates


PAYMENT OPTIONS

Not every customer carries a Visa or Master Card. If you only accept one type of card, you

may lose a large percentage of customers for the lack of a payment option.

You may see a high cart-abandonment rate if customers, after filling their carts with

products to purchase, learn that you don’t accept their preferred credit cards.

Action – At the very least, ensure you accept Visa, Master Card and Discover. If a large

percent of your visitors consist of business customers, ensure you accept American

Express.

Finally, make sure you accept PayPal.

PayPal is very popular, and it allows direct

payment through their system rather than

using credit cards.

Tip – Consider putting credit card logos on

your front page, telling your visitors what

card types you accept before they invest

time on your site.


SUMMARY

Environmental factors cannot be ignored when optimizing your website’s user interface

for conversion. Visitors demand simplicity and convenience. And if you don’t provide it,

they’ll happily buy from your competitors.

Key elements include your selection of color, the overall organization of your site, sensible

placement of elements, conforming to typical user behavior and convenience of payment.

What would you add?

Stay tuned for the fourth critical element of conversion rate optimization. Next up: how

visitors’ emotions must be taken into consideration during the conversion process.


The Emotional Journey

Moving Customers Toward the Sale


Emotion is messy, contradictory… and true. ~Nigella Lawson

Merchants long ago realized that the act of purchasing is an emotional experience. The

emotional level rises throughout the shopping process, hitting a peak as money changes

hands.

Why? It boils down to two things: desire and risk.

In their book, Rethinking the Sales Cycle, John Holland and Tim Young describe how the

awareness of risk continues to rise throughout a customer’s buying experience.

If you think about it, it’s a natural human reaction as the moment of commitment draws

near. It essentially asks whether the right decision is being made and whether the buyer

can live with the results.

Successful ecommerce websites address this emotional journey. And so should you.

As you lead visitors down the path of conversion, you need to provide emotional support

at each step. And to do it, you’ll need to incorporate the five concepts highlighted below.


BRANDING

What’s in a brand? Everything! A company’s brand is the symbol of its sacred promise to

its customers. It’s a promise of continued value and security.

Companies work hard to deliver on the promise symbolized by their brand. In fact, many

companies consider their brands as bankable assets.

For example, when Hostess filed for bankruptcy in 2012, it still had a lot of equity in its

brands. Apollo Global Management purchased Twinkies and other famous Hostess snack

cake brands for $410 million.

There was literally nothing tangible

in this purchase—it was all branding.

But Apollo now owns the hearts of

loyal Twinkie lovers.

The Hostess brand was so valuable,

people missed it when it disappeared.


Though your website may operate on a smaller scale, its brand is every bit as important as

it is to big companies, and you should, therefore, consider it a bankable asset whose value

can increase over time. As people begin to understand your company and trust it, your

brand will increase in value.

Your brand, as symbolized by its logo, will provide a recognizable sense of value and

security to your visitors. Over time, your customers will develop an emotional attachment

to it—and their loyalty will result in sales you can bank on.

Action – Ensure your logo appears on every page of your website. Consider reinforcing

that logo on your home page with a one-sentence testimonial from one of your

customers.

Tip – People generally will not look at a stand-alone testimonial page; however, you can

still feature testimonials by sprinkling them in the margins of your pages.

HONESTY

Honesty in business dealings is not only a part of your brand, it’s a concept you must

prove daily within the structure of your website.


For example, offer full disclosure before a purchase:

Provide shipping and handling costs up-front,

before asking for your visitor’s credit card.

Indicate out-of-stock information before the

visitor puts the item in his cart.

Provide shipping information as soon as the

item ships.

Amazon is a master at this.

Notice the alert that only 18 are left in stock,

highlighted in green so it stands out. Just below that

is the reassuring, “ships from and sold by

Amazon.com” message. Additionally, shipping

information is presented here, before you add the

product to the cart.

This type of full disclosure is one way to increase trust. Another is customer support.

http://blog.crazyegg.com/2011/12/20/trustworthy-ecommerce-web-desig/


Use your website to allow your customers to login and track their grievances online and

receive status updates. Believe it or not, many of these customers can be turned into

advocates for your company. As you close each support issue, ask customers to rate their

satisfaction, and if they’re very satisfied, ask them for a testimonial.

Many companies use a star rating system to allow their customers to express their level of

satisfaction with a product or service.

Do not alter this information as you tally up the score. Present an honest sense of

feedback to new prospective customers. Maybe you don’t always get a five-star rating, but

the sense of trust and honesty you convey through a transparent presentation of your

true rating will make up for the difference.

Action – Turn your website into a trust-machine. Tie your website database to the

shipping department to provide updates on shipped products. Also tie your website

database to the support department to publicly show how well you’re being perceived by

other customers.

Tip – When an embarrassing issue arises, don’t attempt to cover it up by denying its

existence. People are far more willing to forgive a mistake when followed by a genuine

confession. Not so much when it’s denied.

http://blog.crazyegg.com/2014/02/15/testimonials-increase-conversions/


RESPECT

Visitors to your website have already given you the gift of their precious time, so your site

should respect that gift by making the most of it.

For example, don’t ask for superfluous information before allowing visitors to join your

mailing list, download a white paper or purchase your products. You should collect only

the minimal information necessary. Some

sites actually demand that you sign up and

create an account before purchasing their

products! Is this really necessary?

If visitors sense that you do not respect their

precious time, they will find some other

ecommerce site that will.

Do you REALLY need all this information just so

your visitor can download a white paper?


Action – Use Google Analytics (or similar) to see how many visitors leave your site after

being asked to fill out a form. Experiment with forms that require less information and

compare the resulting abandonment rate. (You can use split-testing for this purpose.)

Tip – Visitors generally understand why you want their information, so don’t try to

window-dress it as anything other than a sales tool.

COMMUNITY

People have a strong tendency to follow the crowd. Each sale on your site increases the

size of the buying crowd. Make good use of this crowd by providing a way for them to

interact with your company and each other.

For example, provide a five-star rating mechanism on each of your products. Allow visitors

to sort your products on popularity.

http://blog.crazyegg.com/2011/12/15/designing-web-forms/


Note the 5-Star rating and in-stock information

within the order page from Yankee Candle

Additionally, you can provide a forum for users to interact and help each other or address

questions directly to your company. Often by interacting with each other, they will

encourage one other, making company input to every problem less necessary.

http://www.yankeecandle.com/


Action – Audit your site and make a list of ways in which your customers can interact and

provide feedback to your company as well as with each other.

Tip – A site forum provides a great way for your customers to interact with your company

as well as with each other; however, it can also require a lot of time and resources. Staff

your forum with qualified support personnel to respond to questions and issues within 24

hours.

SECURITY

Ecommerce websites must provide their visitors with a strong sense of security.

In light of recent events regarding stolen credit cards at major retailers, people are

understandably concerned about their credit cards. Using a reputable online merchant

credit card system like PayPal or Authorize.net can calm these concerns.

Security is an area where you may not want to go with the lowest bidder. Screen potential

merchant credit card vendors to ensure they have a recognizable brand and can provide

protection when (not if) problems occur.


Once you find a trustworthy vendor, display their security logos prominently on your site,

particularly on the shopping cart pages. For added trust, create a privacy policy page and

ensure visitors have easy access to it. (Ask your lawyer to help draft your privacy policy.)

Secure and implement a certificate for SSL/TLS connections. Customers should never

send their credit card information “in the clear.” They may not be savvy enough to know

the difference between SSL/TLS and “clear text,” but you must!

Create security logs and review them often. Look for potential security

breaches. Expect attempted break-ins. (They happen several times an

hour, on average.)

Finally, ensure all your website software is patched to the latest build

and has incorporated all security updates. Retain the services of a

reputable security auditing company and have them evaluate your

network and policies.

Put security logos and badges on display to

reassure visitors that all purchases are secure.


Action – Audit your shopping cart page to ensure it has the merchant security logo

prominently displayed. Periodically review your privacy policy page with your lawyer to

ensure it remains valid in the face of a continually changing security environment. Retain

a professional security auditor to help keep constant watch for security vulnerabilities.

Tip – Security breaches are typically due to human complacency, not a failure of

equipment or security policies.

SUMMARY

Purchasing any product, online or in person, is an emotional experience. As the time of

purchase draws near, customers develop an increasing sense of risk. To improve your

conversion rate, you must understand this sense of risk. Remember, it’s a natural human

emotion that must be addressed.

Before customers can feel comfortable making a purchase from you online, they must

first trust you. You can reassure them by addressing five important areas: branding,

honesty, respect, community and security.


Only by incorporating these elements will you experience high satisfaction and optimal

conversion.

Next up, an analytical approach to conversion optimization that depends on split and

multivariate testing. Let’s take a look.


An Analytic Approach

How to Find and Fix Conversion Problems


Your business website’s main objective is to get visitors to take some sort of action, such

as signing up for a newsletter or purchasing a product. This is called a conversion.

Ultimately, conversions drive your business, which means you can optimize your business

by optimizing your conversions.

So what do you do when conversions are low?

Hopefully you’ve been implementing the tips in this guide. You’ve already learned tips for

improving usability, logic, emotional engagement, and more. It’s time now to focus on the

process of optimizing your website for conversion.

I’m coming from one perspective. If you’re reading this article, you:

already have an attractive website and are getting a decent amount of traffic

suspect your conversion rate can be improved

are willing to confirm your suspicion through experimentation

Keep reading, and I’ll tell you how it’s done.


THE OPTIMIZATION PROCESS

To optimize anything, you need to conduct a scientific experiment, carefully analyze the

results, select the optimal result, and repeat. If everything is done correctly, the results get

better and better over time.

This concept applies very nicely to website design.

A good website design is one that delivers consistently high conversion rates. But even the

best websites can increase conversions. You simply need to know how.

The key is to avoid arbitrary decisions. For example, let’s say you need to choose between

two different photos as part of a car advertisement.

One photo features an attractive woman leaning against the driver’s door with a beach in

the background. The other photo features a similarly attractive woman in a similar pose

within a country setting.


Which photo will generate the most conversions?

Either photo would probably work well, but which one works best? Without

experimentation, the decision seems arbitrary. But with experimentation, you can test

both photos and then select the one that provides the higher conversion rate.

Action – Meet with your web designer and create a short list of isolated decisions that can

be tested. For example, does the “Call to Action” button work best along the right margin

or the left margin? And should it be yellow or red?

Tip – There’s a good chance that your web team already has a list of hotly debated design

issues. This is a good starting point for running your “split” and “multivariate” tests, as

described in the next sections.


SPLIT TESTING

Also known as A/B testing, split testing seeks to optimize results when trying to decide

between two isolated parameters. The example above, with two photos, demonstrates

this concept—you must choose between one of two photos.

Here’s how the split test works:

1. Decide what constitutes a “conversion.” You may decide that a conversion is simply

a click on a button to get more information, the downloading of some content, or

placing an item in a shopping cart.

2. Determine the sample size. In other words, decide the number of visitors needed

for your experiment. The larger the sample size, the more accurate your results will

become.

3. Create a separate Web page for each of the two variations. Implement special code

on each page so that the corresponding conversions can be separately tracked.

Note that you must keep track of which page is your “primary” page, so after the

sample size has been exhausted (the experiment has run its course), the website

will fall back to the primary page.


4. Upload both pages to your site.

5. Implement special code so that each visitor sees only one of the two pages. Use a

cookie to ensure that each visitor sees the same page each time he visits your site.

6. Track the total number of visitors to the pages, along with the number of

conversions that occurred for each.

7. Ensure the server falls back to the “primary” page after the sample size has been

exhausted. At that point, stop taking data.

After running the above experiment, you analyze the results. If it appears that one choice

is clearly better than the other, you should change the “primary” page accordingly,

thereby optimizing your site for conversion.

For example, the photo ads above yield the following conversion rates:

Page Name Conversion Rate

Beach Background 2.34% +/- 0.23%

Country Background 1.92% +/- 0.14%


The beach photo is the winner, as it shows the higher conversion rate, even after

accounting for the +/- variation. The website should thus be changed to implement the

beach photo.

Action – Review the list of isolated decisions created in the previous section and look for

decisions where there can only be one of two outcomes. Prioritize this list based on the

highest possible conversion rate. Start working through the list, one at a time, using the

experimental process highlighted above.

Tip – Pay attention to the “confidence interval.” This number indicates the variation in

your results that must be taken into account. Generally, the variation gets smaller as your

sample size gets larger.

MULTIVARIATE TESTING

The concept of multivariate testing is similar to split testing, with the exception that it

compares multiple pages against each other. Multivariate testing thus allows you to

address issues in scope, rather than simple binary decisions.


For example, as winter approaches, you may want to incorporate a winter theme on your

site. Should you implement something minimal like hanging an icicle from your logo? Or

should you go further and simulate snowflakes dropping across your entire page along

with the icicle?

Your marketing team may come up with dozens of creative ideas. You collect the ideas

into groups and create pages based on the groups. Essentially, you’re testing groups of

multiple changes on a page.

The step-by-step experimentation process is similar to split testing, except you’re loading

multiple pages into the test, rather than just two.

Be aware, the code for multivariate testing is a bit more complicated because you are now

splitting each of your visitors into one of many pages and keeping track of conversion

rates on each page.

Also, keep in mind that the original page must be part of the test. It is the baseline that is

used to compare the conversion rates.

When the experiment has concluded, you may end up with something that looks like this:


Page

Name

Conversion Rate Improved Conversions

/Visitors

Original 6.20% +/- 3.5% – 22/355

Group 1 7.20% +/- 3.6% 16.13% 25/347

Group 2 6.40% +/- 3.3% 3.22% 22/344

Group 3 8.01% +/- 3.2% 29.19% 29/360

Group 4 5.23% +/- 3.6% -15.64% 18/344

Group 5 6.55% +/- 3.5% 5.65% 23/351

At first glance, it looks like the Group 3 page, with 29.19% improvement, produced the

best conversion rate. But it’s important to exercise caution. The variance (the +/- after the

conversion rate) is still quite wide.


The original page expressed a conversion of 6.20% plus or minus 3.5%. Despite the fact

that Group 3 looks vastly superior, the conversion rate variance from both the original

page and Group 3 overlap.

Let’s put that into a chart, and you can see what I mean:

Original Page: 6.20 – 3.5 = 2.7 or 6.20 + 3.5 = 9.70

Group 3 Page: 8.01 – 3.2 = 4.81 or 8.01 + 3.2 = 11.21

The two bars overlap, which means you don’t have enough statistical confidence that

Group 3 is indeed better than the original.

The advice here would be to increase the sample size to decrease the variance, and

therefore determine whether the changes in Group 3 really are superior.


After testing all the groups and establishing conversion rates that differ by more than

their tolerance levels, you would simply implement the page design with the highest

conversion rate. You could then create more groups and repeat the experiment.

Action – Review the list of isolated decisions created in the first section of this article and

look for decisions where there are many possible changes. These types of changes

generally pertain to the scope of the page (e.g., the template) rather than simple isolated

“this-or-that” decisions.

Start working through the list and create a set of changed pages for each. Then load these

pages into the system, using the experimental process similar to the description for split

testing.

Tip – You want good confidence intervals, so you’ll have to take a lot of samples; however,

you will want to limit the number of experiments to keep from confusing your visitors.

Therefore, consider selecting only a small percent of your visitors, say 10%, and

experiment on them.


SUMMARY

There are a lot of factors that affect website conversion, and it can be difficult to decide

which are superior. You can use split testing to choose between two isolated parameters.

And you can use multivariate testing to decide between groups of parameters.

In either case, you conduct a scientific experiment on your website visitors to determine

which changes yield superior conversion rates.

As a result, your decisions are never based on personal preference or the opinions of

people inside your organization. By testing your options, you let visitors tell you which

page elements are most persuasive.

In this case, the customer is always right.

Photo Credits: Ivan Mikhaylov, Vladimir Voronin

http://www.123rf.com/photo_8917289_woman-near-car-sea-on-background.html

http://www.123rf.com/photo_14047960_beautiful-girl-stands-near-to-white-car.html


The Bottom Line in Website Conversion


The articles in this e-book serve as an introduction to website conversion. We began with

a quick definition of conversion, and then, through a series of topics, each critical to a

well-optimized website:

1. Tuning your web server for optimal visitor experience

2. Paying attention to the concepts of logic and design

3. Factoring your user interface into your website design

4. Carefully considering emotional factors

5. Continuously analyzing and optimizing each page

Unlike personal websites, business websites seek to continuously optimize for revenue,

and revenue can only occur when visitors convert into paying customers.

We hope you enjoyed reading this e-book and that you can use the information to

immediately take action to optimize your website and, ultimately, your revenue.


About the Authors

Kevin Gao is the founder and CEO of Comm100, a leading

provider of live chat software for business. As a software

developer as well as a small business expert, he’s always

ambitious to revolutionize the way of online customer

service and communication.

Find Kevin on Twitter.

Kathryn Aragon is an award-winning copywriter and

marketer, and editor of The Daily Egg. Her chief goal is to

help businesses communicate, connect, convert… and

capture their market.

Connect with Kathryn on Twitter and Google+.

http://www.comm100.com/livechat/

https://twitter.com/comm100corp

http://www.kathrynaragon.com/

http://www.kathrynaragon.com/

https://plus.google.com/+KathrynAragon/posts

https://twitter.com/KathrynAragon


Crazy Egg: When Analytics Aren’t Enough

You don’t have to be a numbers whiz to know how to optimize your site for conversions. With

Crazy Egg, you can see where users are clicking and how far down the page they scroll, and you

can easily validate your images and other page elements for the best possible results.

A Crazy Egg heatmap lets you collect more than 88% of the data you would using a traditional eye-

tracking process. At a fraction of the price. With no hardware. Almost no IT involvement. And no

strings attached. Try it today!

Try it free for 30 days!

Get full functionality with

NO cost and NO obligation.

http://www.crazyegg.com/?utm_campaign=ultimate-guide-images&utm_source=blog&utm_medium=ebook&utm_content=text-cta&utm_term=try-it-today

http://www.crazyegg.com/?utm_campaign=ultimate-guide-images&utm_source=blog&utm_medium=ebook&utm_content=button-cta&utm_term=show-me-my-heatmap


Documents

How to Solve Your Biggest Problems with Website Conversionceblog.s3.amazonaws.com/wp-content/uploads/2014/05/... · Biggest Problems with Website Conversion BY KATHRYN ARAGON & KEVIN