E very website owner wants their website to perform well, whether that
means getting more sales, signups or RSS subscribers. The question
is, how do you convert a new visitor into a loyal customer? This chapter
16 gigabytes of space tells me a lot about its technical specifications and
little about its benefits; but saying that it holds 4,000 songs clearly high
lights the benefit that storage capacity gives me. This in turn solves my
looks at the theory of how to sell effectively and lists practical techniques need to carry my entire music library in my pocket.
to help you boost conversion rates.
Once you know what you’re selling (that is, your product’s solutions and
Most websites are not works of art or things made to be appreciated solely benefits) you need to break down the barriers that customers will put up
for their beauty or expression. Websites are functional interfaces that serve when evaluating how valuable your product is to them. These barriers are
a specific purpose. If you run an online store, the purpose of your website their reasons why they shouldn’t
You need to break down the bar
is to sell goods. If you run a Web application, your website is there to get buy your product. These barriers
riers that customers will put up
people to sign up. Whatever industry you operate in and whatever type of will range from the really strong
when evaluating how valuable
business, organization or community you run, you want your website to (they may simply hate your prod
your product is to them.
perform by getting those sales, signups, subscribers or clicks. uct or don’t have nearly the bud
get to buy it) to the weak (maybe they don’t see the feature they need or
“Conversion” is an online marketing term that describes an instance of a
think it’s expensive or don’t like the color).
visitor to your website performing an action that you deem to be desir
able. For example, if you run These barriers can be tackled directly and hopefully broken down. For ex
Most website owners want a high con
an online store, one likely con ample, if the product seems expensive to potential customers, highlight
version rate. The question is, how do
version would be the sale of a the value it will give them by pointing out the amount of money, time or
you turn a new visitor of your website
product; in the case of a blog, stress they’ll save by using it.
into a loyal customer?
a conversion might a subscrip
Lack of features can often be tackled by talking about simple workarounds;
tion to your RSS feed. Conversions are tracked using a conversion rate: the
after all, your customers are looking not for features but for solutions to
ratio of all visitors to your website to the number of visitors who perform
their problems, and so if you can tell them how they can solve their prob
the desired action.
lem using your product (perhaps by using different features than the ones
Most website owners want a high conversion rate. The question is, how they had in mind), you can break down those barriers.
do you turn a new visitor of your website into a loyal customer? To answer
this, let’s look at what it takes to sell effectively.
One very popular approach to sales is called AIDA, which stands for
“Attention, Interest, Desire, Action”. AIDA is a guide to structuring your
To sell effectively, you have to sell solutions, not products. You also have sales pitch. In any sales pitch, the goal is to close the sale, and your ap
to sell benefits, not features. Your customers aren’t looking for products, proach should maximize the effectiveness of the pitch so that when you
services or features: they’re looking for solutions to their specific problems. get to the end, the prospective buyer wants the product enough to say
Features are just the things that make up your product or service, but “Yes”. Just like with a standard sales pitch, AIDA can be used in a conver
benefits are what people get from using your product; they are the rea sion funnel on the Web, where the website, instead of the salesperson,
son for choosing your product. For example, saying that the iPod Nano has plays the key role in selling.
212 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 213
The first stage in the AIDA pitch is “Attention”. This is especially im solution will clearly improve the lives of your visitors. Make it concise and
portant for websites because of the speed with which potential cus punchy, and make it clear why your visitors should care.
tomers could navigate away from your website. You have just a
The next two stages, “Interest” and “Desire”, are the part that sells the
brief moment to grab their attention, and you have to keep it long
product. If you’ve made a claim in the “Attention” stage, now is the time to
enough to close the sale. That first moment is absolutely critical
back it up. Clearly and concisely explain what your product does and how
because the rest of the pitch will be useless if your potential cus
it will give your visitors real value. Create desire by talking about the ben
tomer leaves now. Grab attention by making a strong claim that your
efits your product will bring to customers. If you can paint a vivid picture
so that visitors can imagine using your product and enjoying its benefits,
their desire for your product will grow.
The final step is a call to “Action”. If you’re selling a tangible product, in
vite the customer to buy it and tell them how they can pay for it. If the
product is a Web app or service, invite the visitor to sign up. At this stage,
you have to close the sale, so the call to action is absolutely vital. People
who are willing to buy just need that last bit of direction on how to pay or
sign up, and people who are sitting on the fence need that last little push.
Recently, the letter “S”, which stands
for “Satisfaction”, was added to AIDA,
forming AIDAS. Getting customers is
great, but getting those customers
to return or tell their friends about
your product is even better. You do
The AIDA sales funnel. this by making sure they are satis
fied with the service. It doesn’t mean your service or product needs to be
perfect; it does mean you should provide great customer service. Solv
ing customer service problems is a great way to build loyal customers be
cause it shows that your company can be relied on even when things don’t
go as planned.
Show The Product
If you were shopping at a real bricksandmortar store, you would be able
The Highrise website from 37signals uses the AIDA approach to maximize conversions. First,
they grab your attention with a very concise product summary and benefit claim: “The not only to see the products but to touch and try them. Seeing an actual
smarter way to keep track of the people you do business with”. Interest is built with a list product before buying it gives you a lot more information about it. You
of benefits. Videos of clients talking about how Highrise helps them run their business help
generate desire. Finally, a large calltoaction button invites you to see the pricing plans. get a good feel for what you’re purchasing.
214 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 215
When shopping online, however, we’re limited by the amount and kind of A great way to use video to show off your product is by embedding it in a
information we can get, and so it’s surprising that some websites don’t prominent position on your landing page. It may be helpful to prepare a
even show what their products look like. script beforehand and then narrate over top of your previously recorded
session to ensure that the audio is clear and without mistakes. Keep the
Even if you sell digital goods, such as desktop or Web applications, show
script brief and to the point.
ing screenshots – or, even better, videos – is essential. When people see
what a product looks like, they can begin to imagine using that product. The AIDA structure may come in handy here, because you would first talk
This is important. If you can get your potential customer to imagine using about what problem your product solves, how your product solves it and
your product, you will begin to create in them a desire to own it. What’s what benefits one gets from using your product, and then you would in
more, goodlooking interfaces aren’t simply attractive, they are perceived vite the viewer to sign up or continue browsing the website to learn more.
as being more usable 1 .
Scannable Feature Lists
If you’re selling a product or service, you probably have a list of features
to advertise. You want to get people to read and digest this list. The prob
lem is, lists are boring, and they’re especially boring when they have a lot
of text. People browsing your website certainly won’t put much effort into
reading your ads – they’re there to browse, not work – so it’s up to you to
make the list as easy to process as possible. Thankfully, there are a few easy
things you can do to make that happen.
Apple displays large screenshots of Numbers, its spreadsheet application, right at the top of
Use Video To Showcase The Product
Video is becoming a very popular medium to showcase products online,
especially digital goods like desktop and Web applications. This is because
you can usually show a lot more in a video in a shorter period of time than
you can with screenshots and text. Video also takes less effort to digest
because all you have to do is watch and listen.
1 “Apparent Usability vs. Inherent Usability: Experimental Analysis on the Determinants of the
Apparent Usability”, by Masaaki Kurosu and Kaori Kashimura, CHI ’95 Conference Companion, 1995, GoodBarry opens its landing page with a large embedded screencast video. The large play
p. 292 – 293 button and call to action (“watch the video”) invite visitors to click on it.
216 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 217
First of all, use icons or images. Icons beside feature descriptions in lists
work like bullet points: they’re little anchors on the page on which our eyes
can easily focus. Icons and images also look more interesting than text and
so will more likely attract the eye than words.
Secondly, use short headings for each feature. These should be only a few
words so that they’re as quick to process as the icons. Their contrast with
the background should be stronger and their font larger than those of the
description – again, to grab attention. Provide a more detailed descrip
tion underneath each heading, set in a smaller font and with lighter con
SEOmoz provides commercial tools for SEO professionals, but it also gives out a lot of
smaller tools for free. This is a great way to attract traffic and capitalize on the recipro cation
Highrise makes the feature list on its website scannable by using icons, contrast and white stranger made people twice as likely to buy raffle tickets from them. People
space. Also, note the benefits stated in each heading
were more inclined to fill out a survey if they were given a $5 gift check right
away than if they were promised a $50 reward upon completion. Giving
trast. This element must blend in; if the reader likes the heading, they’ll sweets with bills at restaurants increased the value of tips.
read the blurb, but the description shouldn’t get in the way of scanning
So, what can you give away for free on your site that will make people want
the whole list. Lastly, make the list easy to scan by putting plenty of white
to reciprocate? If you sell software, how about giving away a 30day trial?
space between each item.
Maybe release a portion of your product completely free of charge through
what’s called a “freemium” model, in which customers can use a basic version
Gifts Make You Want To Reciprocate of your product for free but have to pay for additional features? Some web
site owners build small tools and release them free of charge to all visitors; for
Another great sales technique to bring you closer to a sale or conversion is
example, 37signals offers a couple of small applications called Tadalist and
to give something for nothing. When you receive a gift, you feel a need to
Writeboard, which complement its commercial offerings, free of charge.
reciprocate, to give something back. Robert Cialdini, author of one of the
Giving those applications away for free makes people more likely to try out
greatest books about influence, “Influence: Science and Practice 2”,shares a
and buy its other offerings.
few examples of how gifts can help you sell. Receiving a small gift from a
2 Cialdini, R., Influence: Science and Practice, 5th ed., (Allyn & Bacon 2008).
218 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 219
Social Proof You can use this idea when designing your website. Don’t simply choose
images for their decorative value; instead, think about what emotions you
Social proof is a psychological phenomenon that occurs when people aren’t
want your visitors to experience. What message do you want your images
sure about the course of action they should take and so do what every
to communicate? Select images that have meaning and will help put your
one else does. For example, an experiment was conducted in which sev
visitors in the right frame of mind about your product.
eral people would look up at the sky. Many bystanders noticed this and
would also look up to see what the others were looking at. Indeed, it was
so effective that the experiment had to be aborted at one point when it Always Provide Next Actions
began to impede traffic.
When should you close a sale? Simple: ABC. “Always be closing”. You will
People feel safer and more reassured following others. If they see others convert visitors into customers at different stages in the process and at
buying a product, they feel safer purchasing it because they know it’s pop different speeds, so by delaying closing the sale, you risk dragging those
ular. It must be pretty good, right? We can use social proof to help boost people who have already made up their mind through more marketing,
conversions for popular products and services by advertising that they’re when all they really want to do is sign up. Provide easy access to that pur
popular or that others have approved of them. For example, user reviews chase, signup or subscription link on every page of your website, and per
are a great way to recommend products. Amazon does something similar haps in multiple places. Of course, don’t flood the page with calls to ac
with its “Customers who bought this item also bought these” section, tion; just provide enough closure opportunities to make it easy for people
which recommends items based on other people’s purchasing behavior. who have made up their mind and want to sign up to do so.
Amazon recommends products that buyers of the same product also bought. Amazon also
lets customers review products, making good use of the social proof phenomenon.
Images and objects also play a part in influencing behavior. A study found
that showing children a Santa Claus hat increased the likelihood that they
would share candy with other children. Exposing kids to the Toys ’R’ Us
logo yielded the opposite effect, making sharing less likely. This is because
people make associations with certain images and objects, and by expos
ing people to carefully selected visuals, you can condition them to per
form the behavior you want. Legacy Locker display a photo of a happy family next to its introduction to elicit a desire in
visitors to care for and protect their loved ones.
220 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 221
You should also aim to keep the process flowing. This means leaving no the item is sold out, purchasing it becomes much more difficult, and so
dead ends. For example, when the visitor gets to the bottom of a mar its value grows. Google generated a lot of buzz through scarcity when it
keting blurb or description, where do they go next? Provide links to next first launched Gmail, its Webbased email application. It did this by limit
actions right at the bottom of each section and subsection. Make it easy ing access to the beta: you could only get it if you were invited by some
for visitors to browse by directing them through the sales funnel rather one who already had an account. Getting a Gmail account was a privilege,
than leaving them to figure out where they should go. This can be done then, and people in turn wanted it more than they would have if it was
by putting links with labels such as “Learn more” at the bottom of brief completely open to new signups.
descriptions and adding calltoaction buttons like “Buy now” or “Take
Scarcity also makes people think that if they delay, they might miss their
the tour” right under your main copy. Make sure the visitor always knows
chance to get the product, and so they will act quickly. Advertising limited
where to go next, so that when they finish reading a section, a link is wait
time offers and limited stocks are great ways to push people who are sit
ing to direct them to the next stage in the process.
ting on the fence into making the purchase or signing up.
Use Scarcity To Drive Demand
Money-Back Guarantee To Eliminate Risk
When a limited amount of goods is available and those goods have value,
Risk is one of the biggest barriers to conversions. Can people trust your
getting ahold of one give its owner a certain privilege. This is because once
company? What if your product doesn’t do what they want? What if
they discover something better? Risk sows seeds of doubt in the minds
of visitors. They’re not sure whether to buy your product or sign up for
your service because there are too many unknowns. Thankfully, we have
a good deal of control over risk, and the best way to tackle risk is to offer
a moneyback guarantee.
Instead of displaying the standard “In stock” label, Overclockers shows the exact number
Skype leaves no dead ends. Notice how under each little feature description is one or more of goods in stock when the level is low. This pushes people who want the item to make the
nextaction links, like “Learn more” or “See it in action”. purchase quickly, because if they don’t do it now, they might be too late.
222 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 223
Moneyback guarantees mean just that: if the customer isn’t happy, they put their own data into it if it’s a software application. Essentially, they
send the product back and get their money refunded, usually in a limited become much more involved with the product, and so the chance that
timeframe, such as 30 days. Moneyback guarantees shouldn’t scare you, they buy it grows dramatically.
because if your product is good, you will likely see few returns. Money
If you sell a digital product, such as a desktop or Web application, why not
back guarantees may even be cheaper for your business, because if you
let people try it? Many applications offer online demos in which people
don’t offer one and a customer really wants their money back, they can get
can log in and play around without any commitment. Many also use the
their bank to refund their money, and then you’ll get a chargeback, which
freemium model, in which people can use a basic version of the pro duct
means you’ll pay an additional fee on top of the money you refund. Offer
free of charge but have to pay for extra features. This is great because
ing a moneyback guarantee means no chargeback fees, more customers
users start to do two things: they learn how the product works, and they
(because of the lower risk) and higher trust in your business.
save their data in it. Premium users invest their time in your product, so
they’re inclined to stick with it when they need more features, making
Let People Try It a premium upgrade likely. Another way to let people try your product is
through a limitedtime trial.
One of the best ways to sell your product is to get people to try it out.
When people try a product, they are doing more than just looking at it
or considering it: they are actually using it, which means they are getting
involved. They start to experience it, learn how it works and maybe even
Pixlr, a Webbased image editing application, gives you a demo link right on the landing
page. Clicking on it lets you instantly try out the product without having to sign up or
divulge any personal information.
Don’t Push Customers Away With Shipping Costs
A study by ForeSee Results3 , analyzing 10,500 transactions in 30 online
stores, discovered that the deciding factor that closed the deal for 34% of
users was that the stores didn’t charge shipping costs. People like to know
Sitepoint offers a 30day moneyback guarantee for its books, which means customers face
very little risk: if they’re not happy with the product, they can get their money back. 3 http://www.foreseeresults.com/Thank_Top100_May08.html
224 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 225
that the price they see in their shopping cart is the same amount they’ll get be charged: it should be clear. A good way to do this is to update the total
charged on their credit cards. The last thing they want to see is additional cost on the checkout page when the user selects a shipping method, so
costs at the end of the checkout process. that the total reflects the full price. You should also make the options clear
and easy to select, because you don’t want to slow down customers in the
Offering free delivery would surely boost sales, but it may not be a viable
option for every store. If you do charge a shipping cost, be transparent
about it and offer clear and simple shipping options. At this stage, you
don’t want to confuse potential customers about how much money they’ll Eliminate Choice Paralysis
There is a concept in marketing called choice paralysis. It describes the state
of consumers when presented with too many choices of the same type and
few differentiating factors. For example, when you go to the supermar
ket and look at the shelves of pasta, you will probably see a lot of brands,
each offering different pasta shapes in different packages. Which do you
pick? Which is better? Which one do you like best? When the choices are
too many, you become paralyzed: you don’t know which product to pick.
Choice paralysis doesn’t just delay purchases; it can also cause buyer’s
remorse. More choice means more stuff to look through and more reasons
to regret not buying something else if they end up disliking your product.
To help combat choice paralysis, keep your product selection small and well
differentiated. If you still offer too many choices and can’t reduce them
any further, recommend one of them to your visitors, such as your most
popular product or service plan.
Shipping option hell at Badgepoint. Don’t force your users to analyze large cryptic spread
sheets. Offer simple and clear shipping solutions instead. Highrise effectively uses visuals to make the service plan it recommends stand out.
226 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 227
Use visuals to highlight that choice and make it stand out from the rest. We can use this
People who are unsure about what they want will have an easier time and idea in Web design
feel safer going with what’s recommended, and those who are sure can by placing key in
easily pick any other product that suits their needs. formation in the
topleft area and
positioning a call
The Gutenberg Rule
toaction button or
The Gutenberg diagram (or Gutenberg rule) is a map of something called link in the bottom
“reading gravity”. Reading gravity is the path our eyes tend to follow when right terminal area,
we read a page of text, which in the Western world is left to right and top where a casual vis
to bottom. The Gutenberg diagram. itor will likely end
up looking after a
The Gutenberg diagram is split into four areas:
quick glance at the
• the Primary Optical area in the topleft page. Note that the Gutenberg principle works best on pages with a bal
• the Strong Fallow area in the topright anced distribution of content. So, if certain elements on your page have
• the Weak Fallow area in the bottomleft strong contrast and eyecatching colors, they will likely attract the visitor’s
• the Terminal area in the bottomright. gaze, even if they lie in weaker areas.
The Gutenberg rule tells us that the reader will most likely start looking
at the topleft corner of the page and end up in the bottomright. It also Footnotes
tells us that the bottomleft area gets the least attention.
Sometimes you need to mention detailed technical specifications or per
haps special requirements (for example, the minimum requirements to
run a piece of software). You could mention these things in the market
ing copy, but that would probably break the flow. These details usually do
not help sell your product, because they are simply extra information and
not content that highlights benefits. You can improve your copy by mov
ing this information to footnotes.
Your copy will be slimmer and more focused on conversions, while the
footnotes with extra information will be available if and when the reader
needs them. Make sure to use footnotes for good and not evil, though.
Don’t state something in the main copy and then contradict it in a foot
note: for example, saying that a product or deal is free when it really isn’t.
Not everyone reads footnotes, so being honest about what you offer is
best. Make sure you don’t deceive visitors or give them inaccurate expec
BusinessCatalyst uses the Gutenberg principle to lay out the introductory text and call to
action, “Watch the video”, on its landing page. An arrow helps guide visitors to the button. tations; that ultimately leads to dissatisfied customers.
228 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 229
and face a list of things to change or fill in. Save users that trip by validating
each field with AJAX as they fill it out. Place error messages right beside
their respective fields. That way, if the users make a mistake, they can fix
it before submitting the form.
This footnote on Apple’s website explains storage capacities. Conclusion
We’ve looked at the theory of selling effectively: selling solutions instead
Make It Easy To Sign Up of products, and selling benefits instead of features. We’ve looked at how
the popular AIDA sales pitch structure can be adapted to the Web. We’ve
Signup forms are barriers. Nobody likes filling them out because they take
also looked at practical techniques for boosting the conversion rate of
time and effort. The signup form is probably the last stage in your conver
sion funnel, so make sure you lose as few people as possible by making the
form short and simple. Don’t ask for optional information; it can always Most websites are not art. They’re not built to be appreciated simply for
be filled in later. Keep the form slim to make it quick and painless to fill their design. Instead, they are meant to perform a specific task, such as sell
in. It’s also helpful to remove additional navigation and content elements a product or present blog articles to readers. The design of your website
from the signup page and leave just the form and a link back to the home should work towards achieving its goal. The look and feel of the website
page. This way, there is little to distract the user from filling out the form. is, of course, important – they determine first impressions and build your
brand – but it’s also important not to get sidetracked by implementing
With many online forms, the user realizes they have made a mistake only
design elements for their own sake.
after they have submitted the form. They wind up back on the same page
Think about the purpose that a particular photo serves on your website.
Consider whether certain embellishments could help your website perform
its function better. Web design isn’t all about function – an attractive and
stylish website is great – but great aesthetics alone doesn’t make a web
site perform; for that, you need to ensure that your design decisions and
strategy are driven by the goals and purpose of the website.
The Importance Of Testing
Every website is different and serves a unique audience, so it’s always
best to finetune your strategy and tactics. Techniques that work well for
one website may not work for another. How do you figure out what works
best for you? You test. There are a couple of popular testing methodologies
that will help you finetune your website: A/B testing (also known as split
Posterous has a unique process: you don’t even have to sign up. All you do to start a new testing), and its more advanced sibling, multivariate testing.
blog is send an email with your first post.
230 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 231
A/B testing is the process of testing two variations of a page or items on a what works and doesn’t work and making adjustments. The Web isn’t a
page against each other. For example, you might want to try two different fixed medium like paper, where changes are impossible. Your website is
calls to action to see which one works best. Each visitor gets a randomly not in a finished state; it can evolve and adapt. So, to boost your conver
chosen call to action, and your conversion goal for that visitor (e.g. whether sion rates, you should test and optimize. n
they sign up) is tracked. After enough data is collected, the results show
which call to action performed best.
Multivariate testing uses the same principle but allows for more variables
to be tested at the same time. For example, you might want to test dif
ferent versions of your website header, slogan, call to action or marketing
blurb. Multivariate testing serves visitors random selections of each test
item and tracks how well each combination of items performs.
While multivariate testing may sound fairly complex, there are tools avail
able that make it really easy to do. One of the more popular tools is Google’s
Website Optimizer, which lets you perform A/B and multivariate testing
on your websites. Best of all, the Website Optimizer is free, which means
anyone can take advantage of these two optimization methods.
Knowing the theory and best practices is only one aspect of developing
great websites that perform well. The second part is testing: discovering
Google’s Website Optimizer.
232 Design to Sell: Increasing Conversion Rates Design to Sell: Increasing Conversion Rates 233