Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

7 More Useful Tips To Help Your Site Convert

Last week we presented 8 Useful Tips To Help Your Website Convert1 – 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 Link

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 Link

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).

Apple6
A typical feature description on Apple’s7 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.

Apple8
The German company T-Mobile offers the iPhone9 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.

Apple10
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 Link

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 Catalyst11 formats their testimonials perfectly, with a picture of each client next to their quote.

The Resumator
Quotes from publications on The Resumator12 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 Link

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.

Screenshot13
Rapidweaver14 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.

Screenshot15
…and so does MyFonts16.

5. Streamline The Sign-Up Process Link

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.

Posterous17
Posterous18, 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.

Veritocracy19
The Veritocracy20 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 Link

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.

Screenshot21
Perfect use of spacing and white space in a magazine-layout on Good.is22. 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 Link

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.

37signals23
The redesigned 37signals24 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 Link

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)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2009/04/06/design-to-sell-12-tips-to-help-your-website-convert/
  2. 2 https://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  3. 3 https://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/
  4. 4 https://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/
  5. 5 https://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
  6. 6 http://www.apple.com/timecapsule/backup.html
  7. 7 http://www.apple.com/timecapsule/backup.html
  8. 8 http://www.t-mobile.de/iphone
  9. 9 http://www.t-mobile.de/iphone
  10. 10 http://www.t-mobile.de/iphone
  11. 11 http://www.businesscatalyst.com
  12. 12 http://www.theresumator.com
  13. 13 http://www.realmacsoftware.com/rapidweaver/
  14. 14 http://www.realmacsoftware.com/rapidweaver/
  15. 15 http://new.myfonts.com/fonts/3ip/american-scribe
  16. 16 http://new.myfonts.com/fonts/3ip/american-scribe
  17. 17 http://www.posterous.com
  18. 18 http://www.posterous.com
  19. 19 http://www.veri.com
  20. 20 http://www.veri.com
  21. 21 http://www.good.is/
  22. 22 http://www.good.is/
  23. 23 http://www.37signals.com
  24. 24 http://www.37signals.com
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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

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

    hukyhome.com

    0
  2. 2

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

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

    0
  3. 3

    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
  4. 4

    could be better???

    0
  5. 5

    Brian Temecula

    April 13, 2009 4:01 pm

    Interesting article.

    0
  6. 6

    AnggaRifandi

    April 13, 2009 4:42 pm

    nice info enrich my knowledge

    0
  7. 7

    Simple yet highly effective. Thanks!

    0
  8. 8

    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
  9. 9

    Nice,very usable,practical points.

    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

    Tom Bradshaw

    April 14, 2009 4:49 am

    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

↑ Back to top