Donate ButtonsRoundup

We work with a lot of nonprofit and education clients, and one of the biggest questions we always face is, “What should we do with the donate button?” It’s a tricky business asking the public for money. The organization generally wants and needs people to donate, but how can we appeal to the public without seeming entirely desperate? Well, let’s see how the big guys do it, and decide if what they’re doing is effective.

Technique 1: Make It Red

So why red? Well, let’s have a short lesson in biology and physics. Remember those “cones” and “rods” you heard so much about in high school biology? Those cells floating around in your retinas are photoreceptors, and they allow you to see black and white (rods) and color (cones). Specifically, we’re talking about the cones here. As you may have heard in high school physics, light is actually a wave, and colors have different wavelengths.

Here’s where the biology and the physics meet (in an extremely simplified version of color absorption): colors have certain wavelengths, and different cones can absorb different wavelengths of light. Guess which wavelengths have the most absorption? That’d be red, of course.

It’s no coincidence that stop lights, break lights, stop signs, warning labels, and of course donate buttons are red we need people to see them.

Technique 2: Match It Up

The Match It Up is a pretty good approach. It’s not as desperate as the Make It Red approach, and it can fit in with the overall look of the site a little better. That doesn’t mean the button shouldn’t stand out. Even if you’re not pleading, you’re still a nonprofit and you probably still need money. The trick here is to find the balance between matching and standing out. In these examples, there’s still a pretty good contrast for the donate buttons, which helps them stand out. They usually use a pop of the brightest or strongest color used on the site. GLAAD and Komen are a little trickier because they use the same colors as pretty much everything else on the site. GLAAD gets away with it by turning their Donate button into a little speech bubble, drawing more attention to it, and Komen makes theirs big. Heartland Alliance, perhaps most impressively, manages to pull off a black donate button never saw that one before!

[Not Really a] Technique 3: Double Vision

So, this is maybe the weirdest technique, and can really be either of the first two options or a combination of both. AmeriCares is actually both a Make It Red and a Match It Up because like the Red Cross or the American Heart Association, red IS one of their colors (and I think we all know why at this point). Feed the Children is definitely just a Make It Red because nothing in their actual branding seems to be red. Feeding America goes with both a Make It Red and a Match It Up, which is made possible by the third technique Double Vision. Double Vision is putting not one but two donate buttons in essentially the same viewing space. You might be asking yourself, “But why would they need to do this??”, and that would be a very, very good question. In this case, I’ll give two of them a pass.

AmeriCares only seems to have two donate buttons because the donate button in the navigation is going to be consistent across all pages, while the other donate button is part of a callout specific to the homepage. On Feed the Children, again the static donate button at the top would remain across all pages, while the second donate button is actually part of the rotating slideshow. I’m not going to give Feeding America a pass on this one though because while they also are featuring a donate callout in their slideshow, the permanent callout right next to the slideshow is to donate. That’s just redundancy.

Best In Show

Well, I looked at a lot of donate buttons, and I’ve decided one site has done a better job than most of the others. So the winner is: American Cancer Society. What’s so great about this one you might wonder? Well, it matches their site and brand, it stands out extremely well, it’s got a very succinct call to action “Join the fight against cancer” (who doesn’t want to fight against cancer??), and it’s a great graphic. It’s got a little snippet of their logo (which is already chock full of meaning), the rounded corners match the rest of their navigation and buttons exactly, and it’s in a persistent location across the site. So congrats to the ACS for having a great Donate button.

So, which technique is best?

Not sure which to use? Me either! Your best bet is to run a multivariate test or do some user testing. If you like red and your coworker likes blue and your mom likes orange, try all three! Split your traffic to each, and see who wins. You might be surprised.

We can do that for you, by the way.

Have any other examples of donate buttons to share? We’re always looking for new and interesting ways to fit them into a site’s design!