Questions? (877) 643-7244
FutureNow Article
Thursday, Feb. 15, 2007

Large Red Buttons? Oh My!

By Josh Hay
February 15th, 2007

Over on Jonathan Mendez’s blog, he provides his 7 Rules for Landing Page Optimization. I would certainly agree with six of them. However, Rule #5 states, “Red buttons can by themselves raise your conversion rate.” The fact is, you want your site’s Calls to Action to stand out so the visitor easily can identify what to do next. Red can certainly stand out, but often in a negative way.

In just about every culture, red means stop. In many, it implies danger.

If your button is red–and otherwise in a bad location–the fact it’s red can certainly help make it visible. In other words, if it was invisible and now you made it visible, that’s good. But in just about every test we have done in almost ten years of improving conversion at Future Now, we’ve found that, as a rule, red doesn’t make for a good button color, or that buttons should be put on any top list for landing page optmization.

Secondly, button color, by itself, rarely has a significant impact on increasing conversion rates. That isn’t to say you shouldn’t do it right.

Clients always ask me to show them good examples of Calls to Action and how they can make their own Calls to Action more effective. And, although there aren’t hard and fast rules, there are certain attributes that make Calls To Action more effective.

So, I decided to check out a couple of sites for web browsers to illustrate key differences between Calls to Action.

Example 1

download firefox 2First off is the Firefox landing page. Their Call to Action does so many things right. The non-standard shape stands out from the background of the page, and has been given a persuasive color that draws the eyes to it. They’ve even used it to reinforce their brand. Within the Call to Action, Firefox lists the benefit and tells the visitor exactly what he is getting. Directly below the Call to Action, Firefox provides links that answer visitors’ questions if they aren’t quite ready to take the action Firefox wants them to take.

Example 2

opera web browser downloadNext up, Opera. There is a lot going on with this page, and the Call to Action isn’t necessarily the main focal point on the page. The arrow doesn’t necessarily speak to me, but the button is a bright green and stands out some. There are no links to answer visitors questions and the shape is pretty standard and ordinary. The shadowing certainly helps it stand out as something that should be clicked. Opera does a good job, but can certainly find ways to improve.

Example 3

microsoft internet explorer downloadLast (and least) is Internet Explorer. The Call to Action doesn’t stand out anywhere on the page. In fact, the only thing that stands out here is their branding. This seems to be all about them. The only thing they could have done to make it stand out less is placing blue text on a blue background.

The key is having your Call to Action stand out. Microsoft needs to distinguish its Call to Action so people can tell that this is where they need to click to download their browser.

Highlighting text in blue isn’t enough.

Features of a strong Call to Action:

  • It’s distinctive. They should look different from other actions people can take on your page.
  • It’s obvious. Don’t crowd your Calls to Action or confuse people by making the click anything less than intuitive.
  • It communicates benefits. Tell people the value behind taking the action.
  • It answers questions. If there’s a reason someone might hesitate to click, address it.
Add Your Comments

Comments (72)

  1. Hi Josh,

    The firefox homepage has to be one of the best designed landing pages. It’s so easy to get firefox – from first search to download to install.

    I looked at all three of these sites a while ago on my blog. The internet explorer one is kinda shocking – it’s so bad. It gets even worse when you click on download and you have to select which exact version of windows and service pack you have. Talk about making it difficult!

  2. Josh,

    Thanks for comments on my post (though the link to it seems broken).

    I too have done many tests over the years and my findings counter yours. We actually have a case study coming out soon where button size, color and copy all contributed to increased RPV for an online retailer. We’ve done numerous Multivariate tests on buttons and color has often times been the contributing factor of influence on conversion lift. Most times Red is the color that is a factor. These findings of course are quantitative and backed with 99.9% confidence. In my years of qualitative research at Creative Good I consistently saw the same effects with red buttons on users and if you asked the folks at CG to pick one color your buttons should be they would likely say red.

    One size (or color) does not fit all. We’ve seen that effective button color, copy, size and location can vary from page to page. Buttons need not be consistent. In fact intelligent inconsistency can be better. Of course sites should test and find what works best for them. When doing so I would always recommend that color be a tested element.

    Thanks,

    Jonathan

  3. Jonathan,

    The link is fixed. Our apologies…

    Also, I’m curious to know whether you’ve found any correlations between certain products or brands and the success of their CTA color choices. As you say, “one size (or color) does not fit all”–I think we’d all agree with that, and that CTA color be a tested element. Still, you’re suggesting that red is generally a better choice, which contradicts what we’ve found time and again. Just wondering if there are other variables at play that might be causing red to convert better.

  4. Robert,

    I haven’t seen correlation between brands, verticals, stage, products nor as I mentioned, have I seen correlations within the same site! What I have seen is A/B and MVT test data and user response…and more time than not in my testing and optimization red has proven to provide measurable lift in CTR, CR and RPV.

    I guess we can agree to disagree on this one.

    By the way, a nice job with the new blog.

    Cheers,

    Jonathan

  5. Another important safety tip about the color red and a call to action; 10% of the male population won’t be able to see it because they’re color blind to red.

    Old school usability rules indicate that red is ONLY to be used “in case of emergency” and if THAT’s your definition of a “call to action” then… use red. Personally… I think if you use the color on your actions too often… you’ll pretty soon suffer from a case of ‘crying wolf’ and it won’t be effective any more.

    It’s just my opinion… worth exactly what you paid for it. ;-)
    Keep up the good blogging GrokGANG.
    .bb

  6. Thanks, everyone, for the great insights and kind words!

    As Josh wrote in the post, we tend to agree with Jonathan on most landing page issues; particularly when it comes to navigation: http://www.grokdotcom.com/2007/01/18/problems-with-landing-page-optimization/

    Jonathan isn’t being dogmatic at all, we’re just a bit wary of folks confusing rules or (yikes) “best practices” with what are really landing page “principles.”

    Sorry, we’re a bit touchy about semantics. But as many of you know, the rules, they are a-changin’: http://www.marketingpilgrim.com/2007/02/google-plans-adwords-algorithm-change-expects-complaints.html

  7. [...] * Check out 7 Rules for Landing Page Optimization and the response from Future Now about Big Red Buttons. Both make good points. And for the sake of testing: [...]

  8. [...] Websites designed to sell are conversion-oriented and task or process-conscious and don't hide behind unnecessary visual drama. Sure, deeper in the process, some sites throw in a glitzy feature (like a rotating view of a product), but you shouldn't rely on glitz to reach the goal. Color still matters. Color is an emotional tie to your branding and, of course, you want to avoid colors that have no contrast and be careful how you use red/green buttons because of color blindness issues.Oh, and you should consider changing your colors if your site looks like this. Technorati Tags: color, Persuasive Design, Usability, web design [...]

  9. [...] Call to Action 1) Is your call to action distinctive? Does it stand out on the page? 2) Button Language or hyperlink anchor text 3) B2B Concerns – Are you asking leads to submit? 4) Button Colors & Shapes [...]

  10. We just compiled the Add to Cart buttons of the top 111 online retailers – http://www.getelastic.com/add-to-cart-buttons/ – and found that over 15% use red as their button color. Interesting. Even more peculiar is that red is often not even a color associated with their brand, they have just chosen red to stand out.

    Have you guys actually run A/B splits on this across different sites? What kind of lift are we looking at here?

  11. Jason:

    Just because 15% of the retailers you polled use red Calls to Action does it make it right? Do these retailers have high Conversion Rates?

  12. Good question Josh.

    Red is a high contrast color that draws attention to the call to action. That is why it’s used. There are other colors and methods that achieve the same result. It depends on the design. All things being equal, and they rarely are, the button color isn’t a highly significant variable. Red is often associated with stop or caution so we suggest using other colors when possible.

  13. Hi Everyone

    Have any of you experience with web sites for european users? I have a feeling that the color of the call to action button, should be adjusted to national or ethic differences.

    Being european myself I would mayby think that americans are more used to intense commercial pressure, making the advertisers just “shout louder”, i.e making the call to action button red. That might not work with all european users. It might be very prejudice to say, but in many ways I feel most western europeans are slightly more “sophisticated”. Even if I do not really beleive that myself, I beleive that educational background, income etc are way more important factors, it is an interresting point to explore. Anyone done any work on this, have any opinions or tips to where I can read up on this?

    thanks J

  14. [...] in February we wrote about how large red buttons were all the rage, despite some pretty shaky evidence to support it (do yourself a favor and read the comments ). Of [...]

  15. [...] Large Red Buttons? Oh My! counterpoint (tags: onlinemarketing) [...]

  16. [...] Check out a couple lively discussions from people who have actually tested this at Grokdotcom here and [...]

  17. [...] Einfluss der Grafik (Darstellung, Größe) auf die Konversionsrate. Auch hier wird in US-Blogs viel diskutiert. Viele Webdesigner setzen bei der Hervorhebung wichtiger Links und Buttons auf die Farbe Rot. In [...]

  18. Hi Josh
    Great article
    My 2 pence :
    I think it all depends on the design of the overall page
    Red will obviously stand out more on a sparsely populated page
    On a site I run we changed green action buttons (“go” on traffic lights) to red to make them more visible. Absolutely no difference in conversion on the main pages but on pages where the button was able to dominate the page we noticed slight increases.
    I therefore agree with Jeffrey above : button colour doesnt make much of a difference. What is important is where you place them within the flux of the page and what wording you use on the button itself

  19. Prob worth pointing out that colour blindness isnt really important here. Those with red-green colour blindness (such as myself!) have trouble discriminating between red and green hues. It doesnt mean we cant actually see red or green colours! I’m always suprised by just how many people dont understand the condition!

    Of course, if you design your button to consist of small closely spaced red dots amongst green dots then, yep, I’d be struggling!! Thankfully ive yet to see a site designed in that way – or maybe I have but I just can’t tell ;) !

  20. I’ve read this post several times in the past months. It’s awesome.

  21. [...] am not including this one since it is rather debatable. Debatable by many, and varies per site. Perhaps high contrast on a flashy site is better, or [...]

  22. One thing seems common in this all: it needs to capture attention; whether it;s high or low contrast. Definitely more testing is needed, but my short term answer is incredibly bright flashing animated gifs (like you see in the banner ads that go through all colors of the rainbow in under a second).

    I actually found Firefox’s a bit difficult. I think partly because it was so big, and I did not recognize it as a button, and because only the link was clickable instead of the whole green area.

    Here is my response to Johnathan’s article
    The 6 most practically valuable ways to improve landing page optimization

  23. The reason red buttons are recommended is NOT the opinion of the person making the recommendation but rather the results of research that showed that people clicked more when the button was red. This was done in controlled useability studies.

  24. IMHO, the overall color scheme of your website should be the determining factor in selecting the color of your Call to Action button. If you have a website which is predominantly red, then your red Call to Action button won’t stand out at all.

  25. Awesome article!!!

  26. This was a really good read. It can certainly help me iomprove my own landing pages.
    Green is a good color. It signals “ok” and stands out in a not so obvious way.

  27. Great post, and I have been applying “call-to-actions” successfully to websites of all industries and I have many times look at larger companies like Firefox because they have a great conversion rate and loyal visitors.

  28. [...] usuarios de tu web necesitan que les invites a hacer lo que tu quieres que hagan. Utiliza botones que llamen a la acción, piensa continuamente en la acción que tienes como objetivo. (Rellenar un [...]

  29. [...] usuarios de tu web necesitan que les invites a hacer lo que tu quieres que hagan. Utiliza botones que llamen a la acción, piensa continuamente en la acción que tienes como objetivo. (Rellenar un [...]

  30. [...] Not everyone agrees that red is the answer. And clearly none of the examples above took this advice to heart. Yet three out of four (Songbird being the outlier) have buttons that adhere to the site’s current styleguide and color palette. So who’s to say red wouldn’t provide a boost in conversion rate. [...]

  31. pretty old article but very nice. I agree with the firefox one, it’s so easy to install and download it.
    it’s 100% effective.

  32. Although not directly related to the design of buttons, I have wrote a post about a technique, called dynamic text on call to action buttons which some of your blog readers will find it useful. Cheers.

  33. I love it, the IE7 landing page needs work just like the browser.

  34. Very interesting. I agree that the obvious call to action is the most important aspect. Your order button can be red if it contrasts your website, but other colors work well also.

  35. I think when customer really want to BUY something right now, never mind what size or color are “ADD TO CART” button. But, it is important when you want that the client has become a permanent client

  36. [...] Check out a couple lively discussions from people who have actually tested this at Grokdotcom here [...]

  37. [...] Check out a couple lively discussions from people who have actually tested this at Grokdotcom here and [...]

  38. [...] Firefox Shows How a Strong Call to Action Can Boost Landing Page PerformanceRead about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer. [...]

  39. [...] Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance Read about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer. [...]

  40. [...] Firefox Shows How a Strong Call to Action Can Boost Landing Page PerformanceRead about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer. [...]

  41. [...] came across this article on Grok dot com about comparing different search engine websites landing pages together and how [...]

  42. [...] Firefox展示一个强大的行动召唤按钮是如何提升入口页面的性能的 阅读一下一个好的行动召唤按钮如何提高转换。你将发现一个Firefox、Opera和IE使用的行动召唤按钮之间的对比。 [...]

  43. [...] Firefox展示一个强大的行动召唤按钮是如何提升入口页面的性能的 阅读一下一个好的行动召唤按钮如何提高转换。你将发现一个Firefox、Opera和IE使用的行动召唤按钮之间的对比。 [...]

  44. [...] Firefox展示一个强大的行动召唤按钮是如何提升入口页面的性能的 [...]

  45. [...] [...]

  46. [...] [...]

  47. [...] Check out a couple lively discussions from people who have actually tested this at Grokdotcom here and [...]

  48. I olso agree with the firefox one, it’s so easy to install and download it.

  49. Firefox rocks. Never mind the loading, it beats IE in every single way

  50. [...] [...]

  51. [...] Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance Read about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer. [...]

  52. [...] Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance Read about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer. [...]

  53. Actually the Firefox team has been kind enough to share its testing results with us, and tests actually back up your point. Firefox is indeed green – http://blog.mozilla.com/metrics/2009/06/19/firefox-is-green/

  54. [...] Large Red Buttons – Grokdotdom’s Josh Hay [...]

  55. I appreciate your insights and the good information you have shared here. All points are significantly important for me and your article have helped me a great deal.
    shoebuy couponscoupons

  56. [...] Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance Read about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer. [...]

  57. The firefox button is the best in the picture. It is green (stands out), have text in it (descriptive) and is big (cannot miss it).

  58. [...] however, that large, red buttons prompt alarm elsewhere, so make sure to test what works for your own [...]

  59. [...] however, that large, red buttons prompt alarm elsewhere, so make sure to test what works for your own [...]

  60. Interesting how these 3 pages did develop.

    Firefox does not have their logo in the download button anymore. But Opera uses their Logo in the download button now.

    So Opera does it like Firefox did :)

    So did Firefox learn and knows this didn’t work? Hmmm…and Opera is still collecting data?

    Explorer: And yes of course the old Explorer page was a disaster. But now they start doing things better. Still now hints and helping links. Still not very nice.

    For me the Opera page including their call-to-action is the best now > contrast. design and space.

    What do you think about the status quo?

  61. [...] Large Red Buttons – Grokdotdom’s Josh Hay [...]

  62. If your CTA stands out and tells the visitor what to do next, you have done your job.

    I will sometimes stand back from my monitor to look at the website.

    Then turn my head to the side just a bit, to see how my eyes view the CTA.

    It’s very interesting how the eye knows what is there and what draws attention to it.

  63. In some rare cases due to the website’s overall aesthetic, red can work as a button color.

    However, green is associated with positive actions and tends to work rather well.

  64. [...] has been a huge debate revolving around usage of the color red for call-to-action design. Some marketers argue that red [...]

  65. [...] has been a huge debate revolving around usage of the color red [...]

  66. [...] has been a huge debate revolving around usage of the color red for call-to-action design. Some marketers argue that red [...]

  67. [...] has been a huge debate revolving around usage of the color red for call-to-action design. Some marketers argue that red [...]

  68. [...] Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance Read about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer. [...]

  69. [...] more guides to help you understand CTAs better.Call to Action Buttons: Examples and Best PracticesLarge Red Buttons? Oh My!Related posts:3 must read web design blogs in 2012.[How-To] make a Floating Sharebar for Blogger!How [...]

  70. [...] Firefox展示一个强大的行动召唤按钮是如何提升入口页面的性能的 [...]

  71. [...] Firefox展示一个强大的行动召唤按钮是如何提升入口页面的性能的 [...]

Add Your Comments

 

Print this Article
Share

More articles from Josh Hay

Marketing Optimization Blog
FREE Newsletter Sign-Up
send it once every: