Design To Sell: 8 Useful Tips To Help Your Website Convert

Advertisement

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.

You may want to take a look at the following related articles:

1. Subliminal Suggestion Link

Research shows that objects and images you see around you can prime you for certain behaviors. For example, a study5 on children showed that after being shown a Santa Claus cap, they were more likely to share candy with others. The cap embodied the concept of sharing and giving in their minds, and exposure to it primed them for regarding sharing more positively. The same study also exposed kids to a “Toys ‘R’ Us” logo, which had the opposite effect of the Santa Claus cap, making them less likely to share their candy.

LegacyLocker6
LegacyLocker7 features a photo of a happy family on its landing page, presumably to evoke in visitors a warm feeling for its product and a desire to care for their loved ones.

When choosing images for your website, think carefully about the message you’re trying to send. Pick images that are meaningful and that embody that message or feeling. Don’t put graphics on your website for their own sake — if they’re not doing a job, they don’t have to be there. Clichéd and overused imagery and stock photos are also dangerous because it may not send the right message in the given context, so select images that get the effect you’re after.

2. Prevent Choice Paralysis Link

There is a phenomenon in marketing known as “choice paralysis.” Choice paralysis happens when the user is given too many options. Choice is great, but when your customers are presented with too many options, they may be confused about where to go. Nobody wants buyer’s remorse (where a person chooses an item and decides later it’s not right for them), so many people spend more time than they should on the selection process: they become paralyzed.

In fact, according to Barry Schwatz8, when customers have too many options to consider, they end up avoiding a specific service or the task in general (Paradox of Choice) – and this is exactly what we as designers need to carefully consider in our designs.

Highrise9
The Highrise10 pricing list shows a set of monthly payment plans. The most popular one stands out visually to help you make a choice.

To remedy choice paralysis, make it easier for people to find the right product or service for them. Tell them what each option is great for, and then suggest the one they should choose. You can even use visuals to highlight the most popular product and steer potential customers towards it. If the product is not right for them, they’ll pick another, but if they’re confused, a “default” choice helps prevent choice paralysis.

3. Show The Product Link

When you visit a physical store, perhaps a grocery, you can look at, examine and sometimes even taste the products on sale. You make your purchasing decision based on the information you gather there. Are the tomatoes ripe enough? Are those strawberries red enough? What about the look and smell of that freshly baked bread?

When you sell services or Web apps online, you should do exactly the same thing: show the product. It’s surprising how many websites that sell software don’t actually show screenshots of their applications. Sure, these are intangible goods, digital goods that you can’t touch or smell, but they’re still goods you can see.

Dashboard11
Dashboard12 puts large screenshots of its lead-tracking app right on the front page.

People make judgments based on what products look like. Why? Because appearance is an indicator, rightly or wrongly, of a product’s usability. This is known as the aesthetic-usability effect.

Xtorrent13
Xtorrent14, a torrent download client for OS X, has a product screenshot right at the top of its minimalist landing page.

If people see a complicated and cluttered interface or, in some cases, even just an unattractive interface, they may assume it is not very usable or is hard to learn. On the other hand, if people see an attractive and simple-looking interface, they may start figuring out how it works right then and will want to give it a try. Get people to imagine using your software, and you’ll get closer to closing the sale.

4. Let People Try It Link

Once you start using a product, you become involved in it. Once you start entering data into it, you begin to make it your own. Every second a user spends trying out features is a second of their time invested in learning and using your product.

When that user is then presented with the question of whether to purchase or subscribe to the product or service, they will more likely say “yes” because they are already involved and have invested time in it. Of course, if the product is bad, then it may turn people off, but then your priority should really be to improve the product until it reaches a level people are happy with.

MailChimp15
MailChimp16, an email marketing service, allows you to start using the service for free with your first 100 subscribers.

In recent years, we’ve seen the emergence of the “freemium” business model. A freemium service allows people to use a portion of it free of charge, but requires a purchase to use all of its features. It gives people a taste of the full product but doesn’t limit them to a trial period. This lets them use the product for free without monetary commitment and then upgrade if they like it.

It’s a great model for many online Software-as-a-Service businesses because once somebody begins using your product, they get sucked in. They start to rely on it, and when they rely on it to do business or manage their life, they will very likely need the premium features down the line and will be happy to upgrade because they already know your service well.

Stories are very important in sales because they get potential customers to imagine what it would be like to use your product. Letting people actually try your product for free goes even further. They don’t have to imagine because they can begin using it right away at no cost. Letting people try out your product, whether through a demo, a trial period or a freemium model, is an excellent way to win customers. Now, this isn’t really a “design” element but is important to mention here because of its potential to drive conversions.

5. AIDA Link

AIDA is a well-known strategy in sales and stands for: Attention, Interest, Desire and Action. It is relatively simple and describes the sequence of events you should aim for to get a sale. So, first of all, you must capture the attention of your potential customer. Once you have it, you should win their interest by explaining how your product or service can help them.

Then, once they’re interested, generate a desire in them for your product. For example, a story about how this product has helped someone like your visitor can help them imagine what this product would do for them, and especially what benefits it would bring. Indeed, the benefit part is key here because benefits, not features, sell products.

Finally, you need to get people to act. This means purchasing the product or signing up for the service. If people want your product, all they may need is a button to check out. If they are interested but not yet sure, you could use a few methods to motivate them further; for example, creating a sense of urgency with a limited-time offer or limited supply.

Yokaboo17
Yokaboo18 features large, eye-catching graphics. You’re likely to first read the short description on the left. The stats on the t-shirt then help build trust. Finally, you are presented with a call to action on the right.

Now, the AIDA approach applies more to copy — the actual marketing text on the website — than design, so what we need to do on the design side is reinforce that copy, make it stand out and ensure visitors read it. This means making sure the first thing a new visitor sees really grabs their attention. The flow of the page should then direct their focus to the items that achieve the other two goals: interest and desire. Finally, at the end of this flow, we need to convert. So, provide calls to action: “Order now,” “Sign up here.”

It’s important to understand that the design alone won’t sell: you need strong copy in place to do most of that work. The design is there to reinforce and support the copy, rather than the other way around.

Reinvigorate19
Reinvigorate20 captures your attention with three large words at the top: “measure. analyze. evolve.” You’re then led to a more descriptive bit of text below and a call to action link.

This means you shouldn’t design a nice website first and then fill up the space with words. Instead, think about the message you want to send out, write the copy and then construct a design that delivers that. If a delivery truck breaks down, then the package does not arrive, but if there was no package in the first place, then the delivery wouldn’t matter at all.

6. Guide attention Link

To benefit from something like AIDA, you have to lead your visitors through your content. You can do this by aligning items in a manner that will flow, and using images that guide the eyes. For example, if you want to focus attention somewhere, use a big arrow. Our eyes will notice the arrow and will naturally want to see where it points to.

GoodBarry Gutenberg21
Business Catalyst22 uses an arrow graphic to lead the visitor’s gaze onto the “Watch the video” button.

Silverback23
The content on the Silverback24 site flows down towards the download button. Additionally, the arrow on that button points towards the purchase link.

Structure your content in a way that will flow towards something. Having a bunch of scattered feature descriptions may confuse and make your visitors lost, unless of course if all of the points end in calls to action. If you want to ensure your visitors don’t miss anything, align everything in a linear structure so that the user scans along it. Make sure to end it with the ultimate call to action: that signup or download link.

7. Always Provide Next Actions Link

ABC: Always Be Closing. If you’re designing a website to sell something, whether a software application or Web service, you should always be thinking about how you’re closing the deal on each page. This doesn’t mean filling every page with big “Buy now” buttons; it means when the customer is ready to buy, they shouldn’t have to look around for the check-out link.

Skype25
Notice how each of the three bits of text on the Skype26 website has a call to action after it, whether it’s a “Learn more” or a purchase link.

Always provide next-action links to keep the flow going and to ensure you don’t lose the attention of potential customers. Next-action links can direct the visitor to a page with more information about the product or to the actual page where they can make the purchase or sign up. These links could read something like: “Ready to order? Click here,” “Learn more,” “Take the tour” or “Shop now.”

Don’t leave a dead end on any page: always suggest to your visitors where they should go next.

8. The Gutenberg rule Link

The Gutenberg diagram (or the Gutenberg rule) is a concept that maps out something called reading gravity. Reading gravity describes a habit of reading in the western world: left to right, top to bottom. The Gutenberg diagram splits up a page into four quadrants: the “Primary Optical Area” in top left, the “Strong Fallow Area” in top right, the “Weak Fallow Area” in the bottom left and a “Terminal Area” in bottom right.

GoodBarry Gutenberg
The Gutenberg diagram

It suggests that the bottom left area of the page will get least attention as our eyes scan the page from top left to bottom right and that our glance would end up in the lower right portion of the page. How can we utilize this concept? Buttons and calls to action could be placed in bottom right instead of bottom left, as this is the place where the visitor’s glance is likely to alight.

GoodBarry Gutenberg27
Notice how GoodBarry28 has the trial signup button placed at the bottom right of the above the fold area of the landing page.

Note that the Gutenberg diagram is more likely to work on pages which have more a balanced distribution of content. If parts of your page have strong highlights through high contrast and bold typography, then those areas would likely attract more attention and so will direct the way a user scans the page.

Footnotes Link

  1. 1 http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  2. 2 http://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/
  3. 3 http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/
  4. 4 http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
  5. 5 http://www3.interscience.wiley.com/journal/117858904/abstract
  6. 6 http://www.legacylocker.com
  7. 7 http://www.legacylocker.com
  8. 8 http://www.ted.com/index.php/talks/barry_schwartz_on_the_paradox_of_choice.html
  9. 9 http://www.highrisehq.com/signup
  10. 10 http://www.highrisehq.com/signup
  11. 11 http://www.leadlogsys.com
  12. 12 http://www.leadlogsys.com
  13. 13 http://www.xtorrentp2p.com
  14. 14 http://www.xtorrentp2p.com
  15. 15 http://www.mailchimp.com
  16. 16 http://www.mailchimp.com
  17. 17 http://www.yokaboo.com
  18. 18 http://www.yokaboo.com
  19. 19 http://www.reinvigorate.net
  20. 20 http://www.reinvigorate.net
  21. 21 http://www.businesscatalyst.com
  22. 22 http://www.businesscatalyst.com
  23. 23 http://www.silverbackapp.com
  24. 24 http://www.silverbackapp.com
  25. 25 http://www.skype.com
  26. 26 http://www.skype.com
  27. 27 http://www.goodbarry.com
  28. 28 http://www.goodbarry.com

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  1. 1

    Very nice article, as usual!

    1
  2. 2

    Great ! thanks again for all your precious articles… SM rules!

    0
  3. 3

    How many posts have featured the Silverback website lately? it’s allright, but it’s not that good! Any special interests in this site that I don’t know about?

    0
  4. 4

    Really nice read. helpfull too!

    0
  5. 5

    Whoa Not MailChimp

    April 6, 2009 3:35 am

    Shame you choose to highlight MailChimp. People might think they’re a legitimate business. Been spammed out the wazoo from clients of theirs, no end in site. Unsubscribe? Might as well call it ‘subscribe me ten times over’. Their abuse pages are usually broken, and their complaint page requires you to pluck some obscure value from the url embedded in the email header. Good luck finding that, Grandma. Gotcha, and you’ll never leave!

    0
  6. 6

    Nice Tips.. Thank you…
    Looking forward for more…

    0
  7. 7

    Nice article! good job.
    I would like to see more articles like these there really helpfull.

    Greetings Pascal

    0
  8. 8

    You just made me recall my MBA course mentioning AIDA in promotional marketing ;). Nice write up.

    0
  9. 9

    Is seems like storytelling of a website. ;-)

    1
  10. 10

    Excellent. Simply excellent.

    0
  11. 11

    Thanks for really helpful post,.. I’m going to use some tips on my website ;)

    0
  12. 12

    Hollis Bartlett

    April 6, 2009 2:30 am

    That. Was. Awesome. Best post I’ve seen here in a while. Really useful.

    0
  13. 13

    Well done! Nice read.

    0
  14. 14

    A Pinch of Cheer Handmade Accents

    April 6, 2009 3:02 am

    Great article, thanks! yes…benefits, not features.

    0
  15. 15

    Great article, thank you

    0
  16. 16

    Great article – I’m not convinced about the application of the Gutenberg theory to the medium of the web though. It seems to contradict Neilsen’s suggestions that the eye naturally moves across a web page in an f-shape, meaning that the lowest-value content is placed in the lower-right of the page.

    2
  17. 17

    Pretty helpful!

    I’d like to read more Hints&Tips like “8. The Gutenberg rule”.

    I’m going to remember this post, for my coming-up projects!

    0
  18. 18

    webdesigner’s dream article

    0
  19. 19

    So helpful for someone like me who is still learning and thirsting for knowledge!
    Thanks so much.

    0
  20. 20

    wow .. much helpful .. last point is really true .. i will try to implement those points in my next designs ! thank you sm and author

    0
  21. 21

    This is a brilliant article, just what i’ve been looking for, Many Thanks

    0
  22. 22

    Interesting article… some good points to bear in mind when I design my next site. Many thanks!

    0
  23. 23

    fantastic, thanks for your effort.

    0
  24. 24

    Incredibly useful. Thank you. Aaaaaaand del.icio.used!

    0
  25. 25

    Great stuff.

    0
  26. 26

    Excellent article! SM pay attention…. POST more articles like this and you will get MORE subscribers, guaranteed. I am subscribing right now! :)

    0
  27. 27

    Dave: Nielsen’s research used text heavy sites as samples, and so there is no surprise the ‘f-shape’ emerged, considering we read left to right, top to bottom. The browsing pattern will be dictated by the structure of the site and especially how prominent the elements are. A lot of content heavy sites will yield the f-shape, but more minimalist marketing pages may not. If something on the page really screams for attention, it will be looked at.

    The Gutenberg rule is just another tool to know about when building your site but should definitely not be followed blindly. A/B testing and other forms of usability testing should be used to see if it works for you.

    0
  28. 28

    I’m a marketeer, and this list is superb stuff.

    0
  29. 29

    Great Post! I am defiantly going to work some of these elements into my future designs.

    0
  30. 30

    Good article. What’s the Gutenberg rule for other cultures (Chinese, Arabic) ?

    0
  31. 31

    Wonderful! Thank you!

    0
  32. 32

    This is relevant and useful material. Thank you.

    0
  33. 33

    Definitely interesting, but would be much more so if you picked a page out there in internetland (one of mine perhaps :) ) and did your magic on it – and see what difference it actually makes after a couple of weeks have elapsed with the revised content.

    0
  34. 34

    @Gorrilla – I agree about the over-use of certain sites/brands in SM articles lately. If the fanboys really must over-hype them, perhaps SM can run a series of very detailed case studies on these sites/apps and then BAN them from being used as an example of how perfect they are for design/IA/content/creative/code/ideas/monetisation/word peace…

    0
  35. 35

    Very well done.

    0
  36. 36

    Another company to look at and that paved the road for many is GoToMeetings.com It’s not the best looking Visual Design but they mastered the way to get people to 1. Try the product. 2. Buy It. it’s a formula they tweaked over the years that works. Features/Benefits and clear CTAs and many other elements. They’ve flooded the web with landing pages and micro sites and tested non-stop until they came up with a winning formula (for them).

    AIDA is key!!!!

    The most important thing is to TEST TEST TEST and TEST! It’s the web the shelf life is short and can be switched in minutes. Try different versions of everything that is listed above until you find the best formula that works for your product.

    Good article.

    -Tom

    0
  37. 37

    suitcaseofcourage

    April 6, 2009 6:14 am

    I strongly disagree with the Skype website being held up as any type of best practice. As good as the service is, the website is equally bad. Nearly impossible to find your way around, and actually sign up for the services you want. And whenever I click on shop, for some reason it takes me to the Japanese version. Has been that way for a few years. Am I the only one who sees that? That site is terrible, although it looks pretty if you aren’t actually trying to accomplish anything.

    0
  38. 38

    I agree with everyone here.. This is a phenomal How-To article. Thanks for sharing!

    0
  39. 39

    …usefull article!

    0
  40. 40

    Rick Whittington

    April 6, 2009 6:47 am

    Great article, thanks for writing it!

    I think that companies need to be careful to make sure they communicate the essence of their products, not just simply show them. Some things that may help is showing additional photos and angles for product photos, letting the customer zoom in on product photos to see detail, and for clothing or even shoes, show the product on a variety of different sized models to show customers how things will fit.

    0
  41. 41

    Tremendously useful.

    0
  42. 42

    After looking through the examples again a few that kinda bug me…
    Good/BadBarry–
    I would think that SEO will like to re name GoodBarry to BADBarry. Having text be a graphic is BAD. It’s fine to a point to have headlines if you want to control the look but you should stay away from making that much copy a graphic.

    Sykpe–
    that example shown would be nice if that was the complete site. It’s not. You click on one link in the header it changes to that example. You click on another it changes it’s visual design AGAIN. As for having CTAs used I would agree YES it’s on point. It’s just that it falls apart after the user clicks a link.

    Silverback–
    Seems like a lot of wasted space. Also no clear direction or action that will make me want to scroll to view content and some important content. It has no navigation and a bad example to show since yes it hits some of your points but breaks the others.

    Reinvigorate–
    As much as I do love the use of blue and imagery that captures my attention the one problem I have with this is maybe more of a UX problem. When I click Apply Now a drop down appears upper right. that seems odd to me. Apply Now or Beta Registration? Which is it? Then again I do like this example. :)

    As for Visual Design (off topic) all these sites are in the same family of Web 2.0 trendy jump on the bandwagon designs. Hey as long as it works for these products that’s all that matters. Right?

    Still a good article and it would make the web more enjoyable if people would follow these tips.

    0
  43. 43

    What happened to the other 4 tips!? It looks like this was “12-tips-to-help” in the title when you started writing but then it became 8? lol I feel … almost gypped! Great article though!

    0
  44. 44

    Thank you for this VERY helpful information. I can use it straight away.

    0
  45. 45

    Thanks for the positive comments everyone!

    Regarding examples: the choices are there to highlight individual points — the rest of the site may or may not follow all the best practices. Also: I’ll make sure to use less gorillas and chimps in the next article ;)

    0
  46. 46

    Great article; thanks for the tips!

    0
  47. 47

    I like it very much. Nice and scientific approach to describing what works and what doesn’t.

    0
    • 48

      SOAS007 on April 14, 2011 @00nerd4 I have never heard Polish polepe called ‘polarks’ ( original recording)before, or heard jokes against them. We have loads live in the UK, I heard a satirist say something like , how dare they come here , do the jobs we are too lazy to do , and pay our taxes, but thats not racist.

      0
  48. 49

    great post, dugg!

    0
  49. 50

    One of the best posts, well done!

    0
  50. 51

    Thank you for a very informative article.

    0

↑ Back to top