If you’re a designer, or an online marketer, or you just happen to own a website where you try to sell something, at some point you’re going to have to design a proper “buy button”. And then, you will quickly find out that just putting a “buy now” text on a blue rectangle is just not enough if you hope for any good results.
Fortunately, designing a proper “buy button” is not so difficult once you get to know some basic knowledge. Here goes.
First of all, the text on your button is the most important thing, but there are some other features that need to be addressed. Why do I say that the text is the most important? Imagine this – what’s the point of having a beautifully designed button if the text on it says “Go to Hell!”? Case closed. Good copy is where the monies are made.
In today’s article, we discuss 5 crucial traits of a proper “buy button”. Let’s take a look!
1. Overall Style
This is the #1 point on this list not without a reason, as it is the most important trait.
You want to turn your button into a purple cow. This is a concept popularized by Seth Godin. In short, you want it to be remarkable; by remarkable I mean something that can’t be overlooked. Something like a purple cow in the middle of a pasture.
Some designers are not particularly good at this. It’s 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’t.
The problem is that such a button is far from remarkable. You don’t 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.
Let me just give you a great example of a purple-cow like button.
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’s the only green thing. It’s the only place that presents the Firefox logo. It’s one of the biggest elements there. It’s located above the fold.
All of these traits make this button extremely visible. It is a purple cow. If you’re saying you don’t see it you’re just trying to impress somebody.
In a nutshell: Aim at having a remarkable button.
2. Appearance
Let’s start with the color.
If you want to be remarkable use a color that hasn’t been used anywhere else on the page. Just like Firefox guys are doing on their website. You can use a tool like Color Scheme Designer to find a color that looks good with the current color scheme of your website but is still very different.
And “different” is the keyword here. If your website is mostly blue, you don’t want a blue buy button. You don’t want a shade of blue. You don’t want anything that looks any bluish. You want pink, or orange, etc. I’m sure you get the point.
One more trick. Orange is known as the most visible color right after red. But, it doesn’t raise all the negative emotions red does (things like “stop”, “look out!”, and “danger”). The most popular orange button on the internet can be found on amazon.com.
Next thing to focus on is the button’s size. Well, what can I say, it needs to be BIG. The bigger it is the better. (Again, Firefox example.)
“Can I make it even bigger?” is a good question to ask during the designing phase. Do it a lot.
Should it be simple or flashy?
A button can’t 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’t cross. If your button doesn’t look like one no one will ever click it.
That’s why there’s no simple answer to which one’s better – 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. Google Website Optimizer will help you with that.
Just a quick example of a simple button.
As you can see the button is not using any orange foxes, but it’s 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.
For example, with just a single line of:
[button link="domain.com"]Click here to buy my awesome product![/button]
I get this result:
3. Font
Sans-serif font is the standard for all kinds of buttons. That’s because sans-serif fonts are very readable for every online usage. (On the flip side, serif fonts are better for print publications.)
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 “for”, “the”, “and”, etc.)
(Image source: Gomediazine)
Some safe fonts you can use are: Arial, Helvetica, Franklin Gothic, Myriad, or any other classic sans-serif font, really.
Now what about the color. The copy should, of course, be in high contrast to the color of the button. You don’t want gray-on-gray. You want black-on-white, or blue-on-orange.
Again, the text has to be highly readable.
4. Placement
The best placement depends on the design of your website, which is probably not surprising. But there are still some rules worth abiding.
Place it in the most obvious place possible. Don’t try to be creative here. The placement should be obvious to the customer/user.
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’s the most obvious place for a buy button and just put it there.
Of course, it needs to be the most visible place at the same time. This means two things:
- It absolutely has to be placed above the fold, and
- Don’t be afraid of whitespace. Whitespace is a friend of every good web designer. Remember, it doesn’t matter how much stuff you can place on a website, what matters is how much stuff you can remove from it.
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.
5. Extra Elements
This is the icing on the cake. Extra elements improve the visibility of your button even further. Examples of elements: arrows, shopping carts, magnifying glasses, plus signs, or various branding elements.
My favorite example – the Firefox example – uses one really cool extra element – the orange fox (aka their logo).
A rule of thumb is to use extra elements that emphasize the purpose of the button. 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.
You can also use some branding elements. For example things like: standard RSS icon with a subscribe-to-feed button, a bird icon with a follow-me-on-twitter button, an orange fox with a download-firefox button, your own logo with a buy-my-stuff button.
Here are some examples:
Power Of “Free”
One more trick is the usage of the most powerful word in English language – FREE. Whenever something is advertised as free, people start to act predictably irrational (check out a great book by Dan Ariely, “The Upside of Irrationality” to find out what I mean.)
More examples:
I am Mumbai based 