I recently blogged over on Nonprofit WP about why I don’t mind small “Donate” buttons on nonprofit websites. Then last week, I received a request from an organization’s development director to change a design so the “Donate” button was red or orange.
For reference, here’s the relevant portion of the design mockup which is located in the top-right corner of every page of the site:
Below is a lightly edited excerpt of my emailed response that seemed worth sharing.
I absolutely want to make sure people donate to your organization through the website and that’s my conscious primary goal for this part of the design. I work under the assumption that my job is to assist people ready to make a donation and that the design of the button itself can’t compel people into giving on its own.
I’ve been deeply influenced by the research-backed findings of the Nielsen-Norman Group, especially in their article “5 Tips to Get Donations on Nonprofit and Charity Websites”:
When users were ready to make a donation, they wanted to get to the donation process quickly and easily. Unfortunately, many users spent too much time looking for a way to donate when they were ready to do it. In fact, about 25% of the homepages included in our study failed to provide a Donate call to action.
The article focuses primarily on the the required content to tell users “the type of work that the organization does and how that work is done” which they believe is much more important than the button design itself. 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. Rather than making the request for money itself extremely prominent, compelling content and contextual requests for money elsewhere seem more effective. I wrote at length about this in a blog post “On Small Donate Buttons & Contextual Requests for Support.”
While there are studies showing red/orange buttons “converting” more people, I generally have not been convinced that these were well-crafted experiments or that they apply to the case of banner “Donate” buttons. As noted in “Which Color Converts The Best?” that reviewed and summarized a series of button color tests:
The color of the button has little to no effect on it’s own. What is more important is how it changes the visual hierarchy of the whole page, how it makes the call-to-action stand out.
I believe the new design’s donate button has sufficient hierarchy due to contrast and placement.
Additionally, most experiments about buttons are for “call to action buttons” where the primary purpose of the entire page is to get people to click on those buttons. That means these experiments don’t directly apply to the design of a site-wide donate button which appears outside of the page’s primary content and is not directly related to the content of every page.
Finally, I should address the concerns of going too bright:
- There’s always an aesthetic concern of wanting the button to feel “at home” in the design and color palette. I worry a brighter color (orange) would unbalance things.
- I have conducted countless nonprofit website design reviews with clients and have heard many times that brighter red or orange (and sometimes larger) buttons can look “desperate” or “aggressive.” I’ve heard it enough times that I now try to avoid going too far with button designs.
What do you think?