What colour should your website’s donate button be?

publication date: May 3, 2013
author/source: Patricia Tynan

That’s a good question and the answer is – it depends.

It depends on your website design, colour palette, content and context. In general, a bright, higher contrast button can boost donations. A donate button that stands out from your organization’s overall colour palette is obvious and easier to notice.Donate button

There is a lot of debate around colour – do red buttons perform better than green? And, again it depends on the call to action you are trying to inspire. If you want to instill a sense of urgency, red makes the heart race faster, while green has a calming effect more pronounced than blue.

Consider colour and text together

There is loads of research on the emotional response to colour, and it is a design consideration for your entire website – there is no right colour for a donate button. It depends on the context and the action you are trying to inspire. So you must think of colour alongside text.

What should your donate button say? Keep it short, keep it clear and make it a call to action that’s relevant. The call to action is your message to the visitor telling them the primary thing you want them to do. While “Donate” is short and clear, “Donate Now” may be even better.

As with many things in life, size does matter. Help your donate button get noticed by adding 20 pixels or so. Bigger donate buttons help convert more donors. The logic is pretty simple. Your button needs to be noticeable and you want to make the button as easy to find as possible. Don’t make your donors have to fumble around for it. That leads to my next point – placement.

Location, location, location

People in the western world tend to read in a reverse “S” pattern or a “Z” beginning top left and quickly scanning to the right and down – it’s the Guttenberg principle. Here’s a great blog post that explains it and other design layouts. Eye tracking studies from Yahoo confirm that visitors’ eyes “sweep horizontally from left to right, often focusing on a roughly triangular area in the upper left corner of a webpage, or the upper left corner of the webpage’s main block of content.” They do note that this pattern varies based on the design, layout and context.

Ideally, place your donate button somewhere in the top navigation so it’s visible on every page. Here’s a wire-frame of the ideal placement for your donate button I also show a typical pattern of eye movement in yellow.

donate button placement

If your design doesn’t accommodate this placement, my next tip is to place the donate button “above the fold” or the upper half of the home page. You don’t want your potential donors to have to scroll to find it.

Don’t be afraid of colour and be sure to test different concepts. A simple test is to ask someone unfamiliar with your site to find the donate button. If they can find it in two seconds or less – you have done well.

This article is republished with permission from SageWords.

Patricia Tynan is Social Media and Community Manager for Sage Nonprofit Solutions. She is responsible for Sage Nonprofit Solutions social media strategy and cultivating the company’s online presence through internal and external communities. Patricia is a volunteer and serves on the board of directors for Front Steps, a nonprofit working to end homelessness in Austin, Texas, and on the board of the Central Texas World Future Society.

Contact her by email.

Like this article?  Join our mailing list for more great information!

Copyright © 2011-Current, The Hilborn Group Ltd. All rights reserved.

Free Fundraising Newsletter
Join Our Mailing List