If you read my blog, you know I’ve been on a kick thinking a lot about the effect of color and placement of “Donate” buttons on nonprofit sites. I’ve written about why I like them to not be too aggressive over on Nonprofit WP (and other ways to improve giving on nonprofit websites) as well as one particular case I’ve been working on recently.

Entirely for my own curiosity, I recently ran a click test on two otherwise-identical versions of a new design.

The Test: Blue vs. Orange

I showed people one of two versions of the “Mission & Values” page—a very “basic” page—of a new design I’m working on where the only difference between the pages was the color of the “Donate” button. In both cases, the “Donate” button was brighter than the surrounding colors and in the top-right corner of the page, a place where most people would expect to find it.

I’ve blurred the design since the project isn’t completed yet, but here are the two images:

Testers read the following scenario and were then shown one of the images:

You would like to make a donation to this nonprofit. Please click once to begin making your donation.

I avoided the words “donate,” “button,” and “menu” in hopes of avoiding any “leadingness”—there’s another word to avoid!—to the prompt.

Users were then asked a followup question (which I couldn’t control) of “Why did you click there?”

The Results: It’s a wash.

The followup answers were mostly not useful (e.g., “it says donate”), but a few seemed worth mentioning:

• Orange Button Responses
  • “Bright orange donate button. hard to miss”
  • “emotional pic was really touched by it”
  • “orange button that says donate”
• Blue Button Responses
  • “obvious clear DONATE button”
  • “Because it says ‘donate.’ However, I would recommend making the button a little bigger, so it’s more noticeable”
  • “button caught my attention…”

My Interpretation: There’s nothing special about orange for finding the button

The orange button might be a little more obvious based on the feedback, but there was no difference in accuracy of clicks and the timing even slightly favored the blue button. As the second comment reminds us, there’s more to an online donation than the button!

In my last post, I explained my thinking behind using a blue button instead of an orange or red one.

To make sure the button is available “when users are ready to make a donation”, I did the following:

• Make the button the brightest color in the navigation bar
• Use the clearest possible label “Donate”
• Place the button in the top-right corner, one of, if not the, most common locations for it

I believe that’s sufficient to capture nearly every person who would consider making a gift based on the other content and features of the website.

While not the most scientific of tests, the results seem pretty clear to me that the blue button was equally “sufficient” to orange for people to start the process of making a donation.

Moving Forward: I’m Still Not Sure!

While the test results seem clear cut, it only answers one issue: can users find a button.

What I’m still left pondering would need much more testing and research, both quantitative and qualitative:

• My concern: Do “Donate” buttons using bright warm colors (orange, yellow, red) have negative connotations—desperate, aggressive, intrusive—to a meaningful percentage of visitors? I have anecdotal evidence suggesting this is the case but nothing conclusive.
• Potential Upside: Do brighter “Donate” buttons result in some people making a donation who otherwise wouldn’t?
• What if both of those things are true?

So I still lack a definitive conclusion, but this gives me a bit more information to work with. I plan to stick with my gut and avoid extremely bright “Donate” buttons until proven otherwise.