7 More Useful Tips To Help Your Site Convert

Advertisement

Last week we presented 8 Useful Tips To Help Your Website Convert – we discussed various rules and guidelines from marketing, such as subliminal suggestion, prevention of choice paralysis, AIDA-principle, attention guide and the Gutenberg rule. The main idea was to help designers and developers create a design that would help the site to grow and become a success the financial point of view.

As we see more and more businesses move their services online, and even more that begin their life on the Web, a greater need arises for websites that are designed and built to sell. A great-looking website may achieve the goal of shaping and delivering a strong brand, but its good looks alone aren’t enough to sell the products or services on offer. For that, you need to introduce the element of marketing.

This article presents further principles and rules that will help your site convert. Among other things, we cover A/B testing, footnotes, testimonials, feature lists, the sign-up process and typography. You may be interesting in the following related posts:

1. A/B Testing

There is no reason to stop developing your website once you’ve come up with a design that you’re happy with and that you think best sells your product. Practice often differs from theory, and every market is different. Things you believe should work may not actually perform well in your context. This doesn’t mean your implementation was completely wrong; perhaps it just needs a little tweaking to achieve its full potential.

You can tweak your website using what’s called A/B testing (also known as split testing). Basically, this test pits design A against design B and determines which performs better. This simple test helps you figure out things like, Which headline works better, or Where should you place the “Buy now” button?

Google Website Optimizer
Google Website Optimizer

Google Website Optimizer is a free tool you can use to perform A/B testing, as well as multivariate testing (testing many combinations of variables), on your website. It’s relatively simple to use: all you need to do is provide Google Website Optimizer with the different assets you want to test, and it will randomly load them for your visitors and track which ones lead to better conversions.

2. Footnotes: The Good and the Bad Ones

Sometimes, when writing a description of your service or a product feature, you may need to disclose additional information about things like availability and price. This extra information can usually be placed in a footnote at the bottom of the page.

This is logical because you want to keep the copy on your main page as slim as possible to ensure people actually read it. If the copy has any extra information that is not relevant to the pitch, then it may break the flow and add needless weight. To add a footnote, just insert a reference number in the main text (using the sup-tag), and then place the accompanying explanation at the bottom of the page (the larger the font size, the better).

Apple
A typical feature description on Apple’s website. The little asterisk in the first line under the heading “Built for Time Machine” indicates that a technical description is in the footnote.

However, some companies use footnotes for another purpose: instead of hiding superflous technical details, they trick customers into buying something, offering services “for free” and referring with footnotes or asterisks to details of the deal. These details are almost always unreadable – because of the font size and the font color – and almost always result in misunderstandings and problems. If you or your company use footnotes for this purpose, you are definitely doing something wrong. Once your users lost trust for your company (for instance, because they purchased something that they didn’t want to buy), it will be damn hard for you to win it back.

Apple
The German company T-Mobile offers the iPhone for a sensational price: 1 Euro. Of course, the customer needs to pay attention to little footnotes that explain further costs. This is hidden marketing and disrespectful behavior towards customers.

Apple
Price details in the footnotes: unreadable blocks of unscannable chunks of text with numerous numbers and traps for customers. That’s not how footnotes should be used.

Conclusion: if you care about your customers and aim to build a solid, long-term relationship with them, you better make sure you communicate with them honestly and directly – and use footnotes properly.

3. Testimonials

Testimonials are great because they tell your visitors that other people use your product and would go as far as recommend it. Testimonials help relieve some of the risk associated with purchasing a new product or service. You have little way of telling whether something is good or not until you try it, and knowing that others have tried it and liked it helps a lot in breaking down this risk barrier.

There are some formatting tricks you can use to make your testimonials more effective. For example, read the following three testimonials:

  1. I found Product X to be incredibly useful in my daily workflow.
  2. “I found Product X to be incredibly useful in my daily workflow.”
  3. “I found Product X to be incredibly useful in my daily workflow.” John Smith, ACME Corp, New York

The first testimonial doesn’t have anything attached to it — it’s just a sentence and so doesn’t look very believable. The third one on the other hand has speech marks around it and attribution to the source. Just adding speech marks already makes a testimonial look better. For best testimonials though make sure to add a source.

Business Catalyst
Business Catalyst formats their testimonials perfectly, with a picture of each client next to their quote.

The Resumator
Quotes from publications on The Resumator site follow the same rules.

It’s also a good idea to provide readers with case-studies that describe the process of your work and explain how customers liked it, what were the problems and how the service can be useful to solve tasks from the daily routine.

4. Scannable Feature Lists

Your visitors don’t have a lot of patience. Why? They’re spending their time browsing your website, time that could be spent doing a myriad of other things. Time is money, and people are investing it when they navigate around your website. This means you’ve got to offer something valuable in return. You must grab their attention and not let go. If they get bored or don’t like what you offer, then they will click away and likely be gone forever.

Screenshot
Rapidweaver makes its feature list scannable by using white space, headings and images.

To address this, present your information in a way that is easiest and quickest to digest. You’ve got to slice up your marketing pitch into bite-sized chunks that are fast to read and simple to understand. You may want to give each chunk a heading or highlight areas of the text to stand out. You can also add images, such as an icon next to each chunk of text. All of this makes the text scannable. People are then able to look over the text, pick out headings and read more detailed blurbs about the elements they like.

Screenshot
…and so does MyFonts.

5. Streamline The Sign-Up Process

Selling has a lot to do with breaking down barriers. These barriers are mainly the objections people imagine to buying your product, but these barriers can also be physical; for example, the sign-up form on your website. Users have to fill in forms, and that means a little work on their part. To ensure you don’t lose conversions at this stage, you can do a few things.

First of all, ensure the sign-up form is as short as possible. If a field is optional, it doesn’t have to be there. Users can always fill in optional fields later on their settings page. Don’t make potential customers do more work than they have to; keep the form nice and short and easy to fill in.

Posterous
Posterous, a blog host, doesn’t even ask you to sign up to start using it: just email your first post to its address.

Secondly, to ensure users don’t make any mistakes and have to re-fill information, you can validate fields live using AJAX. You could, for example, display a green tick next to each filled-in field when it validates, or display a red cross along with a short error message if some error occurs (such as if a required field is left empty or a user name that is already taken is chosen). This allows people to see any errors as they’re filling in the form and fix them before clicking the “Submit” button.

Veritocracy
The Veritocracy sign-up form isn’t even a separate page; it’s a form that pops up as a modal window and requires only four fields to be filled in.

Lastly, you can simplify the page layout of the sign-up form by removing any irrelevant navigation elements. Your objective here is to get the visitor to sign up rather than navigate to other sections of the website, so you can remove any extra navigation to help the user focus on the task at hand.

6. White Space Is Not Lost Space

Have you ever seen those cheap ad booklets one gets in the post, all full of bright colors, big text and pictures, every millimeter used to display a latest offer or new deal. The designers try to fit everything they’ve got into the booklet and make sure no space is wasted. Cramming everything you’ve got into a limited amount of space isn’t always the best approach, though, and in most cases it’s the wrong approach online.

Screenshot
Perfect use of spacing and white space in a magazine-layout on Good.is. The space makes the content look clean, attractive and readable.

White space, the empty space around and between various pieces of content, is important. It gives your design air to breathe by separating elements. This separation is valuable because it allows people to focus their attention on individual areas of the page, be it the navigation, a feature description or the website’s description.

When everything is stuck together, it becomes more difficult to distinguish between its components and thus more difficult to focus on and thus less scannable. You can read more about the proper use of spacing in Liam McKay’s excellent article How to Spot Quality within Web Design: Examples & Tips.

7. Set your type properly

The way you set your type has an effect on how well your copy performs. Good typography can give your copy the punch it needs. Use large font sizes to make headings stand out. If you’re selling to an older demographic, ensure all font sizes are large enough to read easily. Small fonts may look great, but if they’re difficult to read, they will turn people off.

Also, ensure the text and its background color have enough contrast. Black on white is a good start. Inverted color schemes (light text on dark background) do not work so well in most cases, especially if your audience is used to more traditional media (e.g. newspapers), where black on white is the standard.

37signals
The redesigned 37signals website features eye-catching typography that takes advantage of big font sizes, varying colors and high contrast.

To focus people’s attention on certain elements, you can decrease the contrast of surrounding elements by using something like dark gray on white (instead of black on white) to fade them out a little. Use stronger contrast for the stuff you want people to notice. One good technique is to use the highest contrast for a feature heading or brief description, and then a lower contrast for the detailed blurb below. The aim here is to make the page scannable: let people glance over it and settle their gaze on the text that’s most important and quickest to digest.

To Conclude

Design definitely has a role to play in selling the product or service on your website, though it’s more of a support than a lead role. Design should reinforce the copy: help it stand out and be readable. Choose images that send the message you want. Ask yourself what purpose each image on your website has. If it has no purpose, why is it there? Use white space and typography to give your copy punch. At the end of the day, though, you have to make sure your content actually works, because a great design alone won’t be enough to close the sale.

(al)

↑ Back to top

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. Additionally, you can read his thoughts on design, art and practical philosophy over at his personal blog.

  1. 1

    I love these kinds of usability and conversion how-to articles. Keep it up !

    For those who missed another good one, check out: http://www.smashingmagazine.com/2009/04/06/design-to-sell-12-tips-to-help-your-website-convert/

    0
  2. 2

    Well done! I especially noted the nuanced differences in testimonials. Scannable features matched with appropriate icons seems to be a trend that is here to stay.

    0
  3. 3

    could be better???

    0
  4. 4

    Interesting article.

    0
  5. 5

    nice info enrich my knowledge

    0
  6. 6

    Simple yet highly effective. Thanks!

    0
  7. 7

    However, some companies use footnotes for another purpose: instead of hiding superflous technical details, they trick customers into buying something, offering services “for free” and referring with footnotes or asterisks to details of the deal. These details are almost always unreadable – because of the font size and the font color – and almost always result in misunderstandings and problems. If you or your company use footnotes for this purpose, you are definitely doing something wrong. Once your users lost trust for your company (for instance, because they purchased something that they didn’t want to buy), it will be damn hard for you to win it back.

    I don’t think repeat customers are really what they’re looking for, I think it’s just a matter of getting as many as you can get before the site needs to be shut down and re-opened with a new name. Sad, but true…

    0
  8. 8

    Nice,very usable,practical points.

    0
  9. 9

    waw…it looks interesting…
    I’m newbie in web design world…but this article so inspiring me..

    hukyhome.com

    0
  10. 10

    Interesting points!
    These are the thing you have to know when you want to design a website!!!

    1
  11. 11

    great ideas~

    0
  12. 12

    very nice and interesting article. especially considering I’m on a design-focused website!

    0
  13. 13

    Using 37signals.com as an example on perfect type is wrong in my opinion. They got the idea right, they just didn’t execute it well enough. Besides that a great article!

    0
  14. 14

    Extremely useful tips.
    Will take note of them when I do future revisions on my blog template :)

    0
  15. 15

    Great Post.
    I love how you put Deutsche Telekom -or their moblie carrier T-Mobile- as an example of “definitely doing something wrong”. Because that´s what they do. They´re definitely not able to listen to what customers want, they´re definitely not offering any decent plans for the iPhone. It all definitely shows in the webdesign with which they´re trying to communicate with possible customers.
    Thank you for this one, especially!

    0
  16. 16

    Very useful information, thanks a million. I would love to see a similar article about making usable web interfaces. I’m talking about login forms, account control panels, and app controls etc…

    0
  17. 17

    I wish half my clients agreed with you on the white space point. Good post.

    0
  18. 18

    Intersting article, the idea of footnotes is something that hadn’t occured to me, I also agree about the importance of white space, spacing and typography/fonts. I find my clients always like having testimonials and I try to link to a scan of the origianal letter. If they have a shop I also try to include a map on every page aswell.

    0
  19. 19

    I love to see AB & MVT testing as tip #1.
    There are 2 cons for the Google Website Optimizer:
    - they generate only charts (no real time optimization)
    - they don’t track conversion links to other websites.
    And they perform a full factorial (needs more visitors to have a clear winning combination).

    I found another tool that does both at a reasonable price. And uses Taguchi methods to have the same results with less visitors:
    8Seconds Optimizer

    PS: they even use the same methods to optimize email images.

    0
  20. 20

    In my ‘WOW list’ :-)

    0
  21. 21

    gracias.. una vez más..

    0
  22. 22

    I like how tweetizen uses numbers (step 1, step 2.. etc) to make it real simple to get started: LINK

    0
  23. 23

    How can Testimonials help? i mean you can write them yourself, right? i mean its not ethical however if you don’t know the company you wont know that the testimonial is fake, right?

    0
  24. 24

    Web Design Quote

    April 14, 2009 9:10 pm

    I would say its a nicely written article, web page of a company speaks for the company, and hence leaves a long lasting or permanent impression on the visitor. But I’ve been to some of the websites where the designers focused too much on the layout and design of the web page, leaving some critical things.

    Overall a nice article, I’m looking forward for more.
    Web Design Quote.

    0
  25. 25

    Rajehs Kumar Chekuri

    April 15, 2009 4:37 am

    great info……….

    0
  26. 26

    This is Hameed from India, I have been reading Smashing Magazine from past 6 months and I find all the articles are useful in-terms of all tasks related to website development. You guys are doing great!!!

    0
  27. 27

    Great post, thanks a million!

    However, regarding the T-Mobile thing: One should not underestimate the influence of legal requirements that will inevitably bear consequences for designing conversion pages. What you are referring to as “footnotes” is in fact the only legal way to keep the initial promo as neat and compact as we see it in the example. German law requires marketers to fully display all terms and conditions on the very same page. Have a look at how T-Mobile promotes the iPhone in The Netherlands to view an example in different legal conditions http://www.t-mobile.nl/persoonlijk/htdocs/page/shopping/product/iphone.aspx.
    I am not working for T-Mobile, but I fully understand their approach to rather spoil the looks and user-friednlyness of the conversion page with a meter-long list of footnotes rather than running the risk of legal hassle in a country in which a whole industry of law firms makes a fortune with warning letters and violations of competition rules…

    Final note: I wish someone of you usability experts did a research on how to design conversion pages in countries with special legal requirements, because none of the dozend books on usability I read ever included that obstacle of being obliged by law to include a ton of crap in a well thought about conversion architecture.

    0
  28. 28

    I think this is a great starting point, now all you have to do is to take action.. it will not be easy at all!

    Nice info…

    0
  29. 29

    جميل المعلومات

    0
  30. 30

    Nice info…

    0
  31. 31

    I think customers are getting pretty leery of testimonials in general. They seem so crafted and usually are. I would argue that comments carry much more weight.

    Good article though!

    0
  32. 32

    I liked it..I was talking to a friend about the same thing and we had few debates on the same….this would help me…:)

    Thanks

    Srv

    0
  33. 33

    Wow,Thanks
    Link

    0
  34. 34

    Hi.

    I find all of the articules quite useful, and most of the times I find my answers here, but I would really like to read something about e-commerce for services. I work for a jobsite where we don´t sell goods but services (the publication of an add, for instance). I would find it very useful to see some more examples of services shopping processes. There are lots of questions that we try to figure out and it would be great to read something from you. Have you already written something on that field, best practices, hints, usability, etc?.

    Thanks in advance
    Yss.

    0
  35. 35

    Something else that can really boost conversions is an alternative payment platform called TrialPay. It lets customers “pay” for products by trying or buying something else, which means they get two products when they pay for one. It’s a very useful way to sweeten the deal enough to convince shoppers to make a purchase. It can be implemented anywhere on a Web site: as a free upgrade for shoppers who try to download a free or trial version, as a pop-up when customers try to abandon their carts, as a direct payment method in a checkout flow, or as a special promotion on a homepage banner.

    0
  36. 36

    All the tips here are paramount for a good website, a website that is going to generate revenue right?

    Here is another one:
    Only 30% of people that buy from the internet use English as their native language. So if your website is only in English then you are potentially loosing out on 70% of new business…scary huh? well folks that is a fact.

    So get all the other areas right first, font, easy registration etc and then speak with us at web-translations.com we have 140 languages, 25,000 translators and we can and do make huge differences to online businesses.

    0
  37. 37

    Thanks for the usefull tips.

    0

↑ Back to top