{"id":482,"date":"2012-03-07T16:31:41","date_gmt":"2012-03-07T07:31:41","guid":{"rendered":"http:\/\/www.santoshkori.com\/blog\/?p=482"},"modified":"2012-08-23T17:28:56","modified_gmt":"2012-08-23T08:28:56","slug":"5-tips-to-designing-a-winning-buy-button-for-website","status":"publish","type":"post","link":"https:\/\/www.santoshkori.com\/blog\/5-tips-to-designing-a-winning-buy-button-for-website\/","title":{"rendered":"5 Tips To Designing A Winning Buy Button for website"},"content":{"rendered":"

If you\u2019re a\u00a0designer<\/a>, or an\u00a0online marketer<\/a>, or you just happen to own a website where you try to sell something, at some point you\u2019re going to have to design a proper “buy button”. And then, you will quickly find out that just putting a \u201cbuy now\u201d text on a blue rectangle is just not enough if you hope for any good results.<\/p>\n

\"logbook<\/p>\n

Fortunately, designing a proper “buy button” is not so difficult once you get to know some basic knowledge. Here goes.<\/p>\n

First of all, the\u00a0text on your button is the most important thing<\/strong>, but there are some other features that need to be addressed. Why do I say that the text is the most important? Imagine this \u2013 what\u2019s the point of having a beautifully designed button if the text on it says \u201cGo to Hell!\u201d? Case closed.\u00a0Good copy is where the monies are made.<\/strong><\/p>\n

In today\u2019s article, we discuss\u00a05 crucial traits<\/strong> of a proper “buy button”. Let\u2019s take a look!<\/p>\n

1. Overall Style<\/h3>\n

This is the #1 point on this list not without a reason, as it is the most important trait.<\/p>\n

You want to\u00a0turn your button into a purple cow<\/strong>. This is a concept popularized by Seth Godin. In short, you want it to be remarkable; by remarkable I mean something that can\u2019t be overlooked. Something like a purple cow in the middle of a pasture.<\/p>\n

Some designers are not particularly good at this. It\u2019s tempting to create a button that ties beautifully with the colors and style of the website it sits on. At first it seems like a very good idea, only it isn\u2019t.<\/p>\n

The problem is that such a button is far from remarkable. You don\u2019t want your button to blend in; you want it to stand out. Therefore, it should be created as a totally separate element that just happens to sit on some website, not as something that needs to be congruent with that website.<\/p>\n

Let me just give you a great example of a purple-cow like button.<\/p>\n

Mozilla Firefox<\/strong><\/a><\/p>\n

\"firefox<\/p>\n

This is what a Firefox download page looks like. I want you to notice one thing. The button on the left, the download button, looks nothing like anything else on that page. It\u2019s the only green thing. It\u2019s the only place that presents the Firefox logo. It\u2019s one of the biggest elements there. It\u2019s located above the fold.<\/p>\n

All of these traits make this button extremely visible. It is a purple cow. If you\u2019re saying you don\u2019t see it you\u2019re just trying to impress somebody.<\/p>\n

In a nutshell:\u00a0Aim at having a remarkable button<\/strong>.<\/p>\n

2. Appearance<\/h3>\n

Let\u2019s start with\u00a0the color<\/strong>.<\/p>\n

If you want to be remarkable use a color that hasn\u2019t been used anywhere else on the page. Just like Firefox guys are doing on their website. You can use a tool like\u00a0Color Scheme Designer<\/a> to find a color that looks good with the current color scheme of your website but is still very different.<\/p>\n

And \u201cdifferent\u201d is the keyword here. If your website is mostly blue, you don\u2019t want a blue buy button. You don\u2019t want a shade of blue. You don\u2019t want anything that looks any bluish. You want pink, or orange, etc. I\u2019m sure you get the point.<\/p>\n

One more trick. Orange is known as the most visible color right after red. But, it doesn\u2019t raise all the negative emotions red does (things like \u201cstop\u201d, \u201clook out!\u201d, and \u201cdanger\u201d). The most popular orange button on the internet can be found on\u00a0amazon.com<\/strong>.<\/p>\n

\"amazon<\/p>\n

Next thing to focus on is\u00a0the button\u2019s size<\/strong>. Well, what can I say, it needs to be BIG. The bigger it is the better. (Again, Firefox example.)<\/p>\n

\u201cCan I make it even bigger?\u201d is a good question to ask during the designing phase. Do it a lot.<\/p>\n

Should it be\u00a0simple or flashy<\/strong>?
\nA button can\u2019t be too flashy. Look at the Firefox button once again. It is flashy. It has an orange fox on it, yet it still looks like a button. And that is a boundary you can\u2019t cross. If your button doesn\u2019t look like one no one will ever click it.<\/p>\n

That\u2019s why there\u2019s no simple answer to which one\u2019s better \u2013 flashy or simple. You just have to find out for yourself. Always split test. Create two buttons, one flashy and one simple. Use both of them at the same time, and see which one performs better.\u00a0Google Website Optimizer<\/a> will help you with that.<\/p>\n

Just a quick example of a simple button.<\/p>\n

ThemeFuse<\/strong><\/a><\/p>\n

\"themefuse<\/p>\n

As you can see the button is not using any orange foxes, but it\u2019s still highly visible. As a matter of fact, ThemeFuse (a premium WordPress theme store, which I am a part of) provides a little something called shortcodes. Among other things, those shortcodes make it really easy to create nice looking buttons.<\/p>\n

For example, with just a single line of:<\/p>\n

[button link=\"domain.com\"]Click here to buy my awesome product![\/button]<\/code><\/p>\n

I get this result:<\/p>\n

\"themefuse<\/p>\n

3. Font<\/h3>\n

Sans-serif font<\/strong> is the standard for all kinds of buttons. That\u2019s because sans-serif fonts are very readable for every online usage. (On the flip side, serif fonts are better for print publications.)<\/p>\n

You want the copy on your button to be as readable as possible, as it is the most important piece of text on the page. All-caps are not a good idea. Mixed-case works much better. By mixed-case I mean the first letter of every word being an uppercase character. (Except for words like \u201cfor\u201d, \u201cthe\u201d, \u201cand\u201d, etc.)<\/p>\n

\"sans
\n(Image source:\u00a0Gomediazine<\/a>)<\/em><\/p>\n

Some\u00a0safe fonts<\/a> you can use are: Arial, Helvetica, Franklin Gothic, Myriad, or any other classic sans-serif font, really.<\/p>\n

Now what about the color. The copy should, of course, be in high contrast to the color of the button. You don\u2019t want gray-on-gray. You want black-on-white, or blue-on-orange.<\/p>\n

Again, the text has to be highly readable.<\/p>\n

4. Placement<\/h3>\n

The best placement depends on the design of your website, which is probably not surprising. But there are still some rules worth abiding.<\/p>\n

Place it in the\u00a0most obvious place possible<\/strong>. Don\u2019t try to be creative here. The placement should be obvious to the customer\/user.<\/p>\n

Every time someone visits the website they expect to see certain things in certain places. Things like: logo in the top left corner, shopping cart summary in the top right corner, copyright clause in the footer, etc. Your job is to try to figure out what\u2019s the most obvious place for a buy button and just put it there.<\/p>\n

Of course, it needs to be the most visible place at the same time. This means two things:<\/p>\n

    \n
  1. It\u00a0absolutely <\/strong>has to be placed\u00a0above the fold<\/strong>, and<\/li>\n
  2. Don\u2019t be afraid of\u00a0whitespace<\/a>. Whitespace is a friend of every good web designer. Remember, it doesn\u2019t matter how much stuff you can place on a website, what matters is how much stuff you can remove from it.<\/li>\n<\/ol>\n

    You can put your placement-strategy on steroids by duplicating the button and also placing it at the bottom of the page. That way, when someone reads through the whole page they can still take action at the bottom of it.<\/p>\n

    5. Extra Elements<\/h3>\n

    This is the icing on the cake. Extra elements improve the visibility of your button even further. Examples of elements:\u00a0arrows, shopping carts, magnifying glasses, plus signs, or various branding elements<\/strong>.<\/p>\n

    My favorite example \u2013 the Firefox example \u2013 uses one really cool extra element \u2013 the orange fox (aka their logo).<\/p>\n

    A rule of thumb is to use extra elements that\u00a0emphasize the purpose of the button<\/strong>. For example, two arrows pointing down work great for a download button. A shopping cart icon works great with an add-to-cart button (the amazon example above). Magnifying glass works great with a search button. And so on.<\/p>\n

    You can also use some branding elements. For example things like: standard\u00a0RSS icon<\/a> with a subscribe-to-feed button, a\u00a0bird icon<\/a> with a follow-me-on-twitter button, an orange fox with a download-firefox button, your own logo with a buy-my-stuff button.<\/p>\n

    Here are some examples:<\/p>\n

    Wakeinteractive<\/strong><\/a><\/p>\n

    \"button<\/p>\n

    Commercialiq<\/strong><\/a><\/p>\n

    \"button<\/p>\n

    Mediatemple<\/strong><\/a><\/p>\n

    \"media<\/p>\n

    Unlocking.com<\/strong><\/a><\/p>\n

    \"unlocking<\/p>\n

    Sofasurfer.eu<\/strong><\/a><\/p>\n

    \"sofasurfer<\/p>\n

    Uploadify<\/strong><\/a><\/p>\n

    \"uploadify<\/p>\n

    Power Of “Free”<\/h4>\n

    One more trick is the usage of the most powerful word in English language \u2013 FREE. Whenever something is advertised as free, people start to act predictably irrational (check out a great book by\u00a0Dan Ariely<\/strong>, “The Upside of Irrationality<\/a>” to find out what I mean.)<\/p>\n

    More examples:<\/p>\n

    Freshbooks<\/strong><\/a><\/p>\n

    \"button<\/p>\n

    Wufoo<\/strong><\/a><\/p>\n

    \"button<\/p>\n

    Freeagent.com<\/strong><\/a><\/p>\n

    \"freeagent<\/p>\n","protected":false},"excerpt":{"rendered":"

    If you\u2019re a\u00a0designer, or an\u00a0online marketer, or you just happen to own a website where you try to sell something, at some point you\u2019re going to have to design a proper “buy button”. And then, you will quickly find out that just putting a \u201cbuy now\u201d text on a blue rectangle is just not enough […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[213,212],"tags":[214,215,733,217,216,732,343],"class_list":["post-482","post","type-post","status-publish","format-standard","hentry","category-buy-button-design","category-website-desiging","tag-5-tips-to-designing-a-winning-buy-button-for-website","tag-5-tips-to-designing-buy-button","tag-buy-button-design","tag-buynow-button-designing-tips","tag-tips-to-designing-buynow-button","tag-website-desiging","tag-wordpresss"],"_links":{"self":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/comments?post=482"}],"version-history":[{"count":3,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/482\/revisions"}],"predecessor-version":[{"id":691,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/482\/revisions\/691"}],"wp:attachment":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/media?parent=482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/categories?post=482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/tags?post=482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}