On pages where a call-to-action is the focus, one of the most important features is the conversion button itself. We’ve seen single changes in buttons that can improve conversions by well over 30%. A button sounds like a simple decision, but there are a number of variables that quickly make the decision feel complicated. How big should the button be? What color? What should the text of the button say? Here are a few tips to make your buttons more successful.
1. Button size- Make it BIG!
A big button gets noticed. It doesn’t have to be huge, but if your button is too small, it can be ignored. We’ve found that a good button size is around 225px wide and 45px high
2. Button Location -- Put it above the fold!
When deciding where to put your button, think about the flow of your page. Does it follow the path of your eye? Does it fit average browser size? Browsersize from Google Labs is a great tool to find out what portion of your page most visitors can see without scrolling.
3. Button Color - Make it Contrast
Color matters. Strong, contrasting, colors generally perform better than colors that blend in with the theme of your landing page. Take this example from Carelogger, who increased their conversions by 34% with a red button instead of a green one.
4. Button Text -- Include a call-to-action
Your button text should tell people what to expect. Instead, we generally opt for a strong call-to-action. Firefox improved their conversions by 3.6% (over 500 more downloads per test) when they changed their button text from “Try Firefox 3″ to “Download Now – Free.” “Download Now,” “Get Started Today,” and “Free Trial” are all good examples of strong calls-to-action.
A Bonus: Test, Test, Test.
There’s no universal right answer for what webpage works best, but testing can ensure that your webpage is the best that it can be.
Inbound Marketing Blog Feed
pubfish, inc. 4:20 PM on July 25, 2011
OK - we'll give some of these a try!
Nick Taylor 4:22 PM on July 25, 2011
Another tip - make the button change on mouse hover. This helps the user know that it is clickable. You can use simple CSS to accomplish this.
Allan Kent 4:50 PM on July 25, 2011
Great to see this article. We ran a seminar last week mainly about content structure, but we spent some time talking about calls to action. Like you, we spoke about the size, colour, placement and wording as being important. We also added something else - offering a choice - for example 2 buttons, one saying "Sign up now" (or something similar), or, "See a demo" The either or approach seems to drive at least one action, often followed by the next one.
Namita Patel 5:00 PM on July 25, 2011
Great tips. I'm wondering if there's any research regarding the exact placement of the button -- of course it should be above the fold, but does the placement in any specific quadrant generate more click-thru's?
Meghan Keaney Anderson 5:08 PM on July 25, 2011
That's a great question Namita. It is commonly thought that (English or Romance language) websites are read left to right, like the pages of a book. So that can give you a sense of where you might want to place a button (before or after the page text is read). But it would be worth a/b testing. Anyone else have ideas on this?
Richard 5:12 PM on July 25, 2011
You can also use an animated .gif button that changes color / blinks to draw the eye of the user. Animated gif files work in any web browser and are easy to make. Google the free microsoft GIF Animator or use your own paint tools to make them.
Namita Patel 5:17 PM on July 25, 2011
Thanks Meghan. A/B testing makes sense. I guess the thought flow on the page would dictate appropriate placement, although that sometimes results in placement below the fold. In any event, it's worth some thought.
Karen 5:37 PM on July 25, 2011
Interesting to state that a contrasting coloured button converts more than one that blends in with surrounding branding colours. Its such a simple concept, but one that is obviously overlooked!
John Sweeney 5:51 PM on July 25, 2011
Does the shape of the button have any effect on it's use?
King Rosales 5:54 PM on July 25, 2011
Thanks for the post. Im going to test out the red coloured tone buttons.
Christopher Haddad 9:49 PM on July 25, 2011
One thing I'd throw in is illustrated in the pic for #2 - POINT or LOOK at the button with your images.
There's tons of examples out there of the hero image on the page looking or pointing straight at the CTA button.
Sam Halcrow 3:13 AM on July 26, 2011
Do you think there should be a Call to action button on each page?
We believe you should as your content on each page should cater to all buying stages that a visitor may be at, at that time. We believe if your selling a service, a "contact us" button should be on the page at the very minimum to increase the chances of a "buyer" who is ready to make contact actually doing so.
Slavik Volinsky 9:31 AM on July 26, 2011
I'd definitely recommend testing lots of versions. We had tested 7 different CTAs on ecommerce site and a winning 'recipe' had double-digit increase in revenue per visitor!
Tessa Duckett 12:05 AM on July 28, 2011
Thanks for the information, this will help with me getting started on this social media adventure @tessaduckett
Caitlin Roberson 12:11 PM on August 07, 2011
Re color contrast: I've seen reports that red buttons convert the most traffic.
Any legal implications for changing the color of a brand's icon (eg: Facebook is normally blue. Anything illegal about making it red?)