The design of your online donation form can be the key difference between someone feeling inspired enough to donate and someone exiting the page. How can you ensure that people fill in your online donation form? How can you minimise the chances of them putting it off for ‘later’?
This post looks at:
– ‘Ugly’ university donation forms versus simply designed ones
– Forms with lots of fields versus minimal fields
– The clickability of a ‘donate’ button: based on its colour, shape & positioning
– A list of resources on the web about donation page design
‘Ugly’ donation forms versus simply-designed forms
First off, let’s take a look at an ‘ugly’ university donation form. This is a UK university’s current donation form for their annual giving fund (naming no names 😉 ). If you’re an education fundraiser, you’ll know that a lot of universities’ donation forms look pretty similar!
It’s clear that one of these forms is more aesthetically pleasing than the other, but does this really make a difference? Will an ‘ugly’ form stop someone donating?
A/B tests prove again and again that design affects whether someone will perform an action online or not. So which design elements should you consider?
Reduce the number of steps needed to donate
In his innovative book Hooked, Nir Eyal looks at how the design of a website affects the action someone will take, and uses countless examples of successful companies which use good design techniques.
He points to Google’s homepage. Google was not the first search engine provider. But what made Google different was the simplicity of its design. Its homepage has a large search bar surrounded by white space. This encourages one action without other clickable distractions.
“Any technology or product that significantly reduces the steps to complete a task will enjoy high adoption rates by the people it assists” – Nial Eyer, author of Hooked
Looking at the above ‘ugly’ university donation form, there are lots of fields to fill in. At a glance, it looks time consuming. It’s easy to look at that form and think ‘I’ll just fill that in later’.
If there are fewer steps on one page, a person is more likely to donate than if they have to go through too many hoops.
Which fundraising organisations are doing this well?
Organising for Action have mastered the art of a giving form (below). It looks easy and simple. You still have to fill in lots of details, but not all at once, so it’s not overwhelming. First you click the amount you want to donate. Only then do you get asked to fill in your name, and so on -bit by bit.
The all-important ‘donate’ button is ultimately what you want potential donors to click. The likelihood of people clicking a button to take an action (i.e. a Call to Action / CTA button) is determined by various design elements. The colour, positioning and shape of your buttons make a difference.
The donate button on the ‘ugly’ donation form described above is only noticeable after scrolling all the way to the bottom of the page.
“Keeping the call to action toward of the top of a page, not requiring users to scroll down to find it, places more value on the call to action and allows it to receive more impressions.” – Shay Howe, Groupon’s User Interface Engineer
A great example of effective positioning, is Invisible Children’s ‘sticky’ donate button – wherever you scroll on their website, the donate button is always there.
Efficient use of colour can ensure that people’s eyes are drawn to a donate page. The results of multiple A/B tests (detailed in the articles listed in the resource section below) support the following conclusions:
The key is that the colour of the donate button- should contrast with other colours on the page to ensure that your eye is drawn to it. Hence why on most websites- the ‘signup’ button is often a bright colour whilst the ‘login’ button blends in with the background.
Lots of donation forms use this technique to encourage the donation of certain amounts:
Rounded corners are easier on the human eye, making them more clickable, and are considered the norm in online design.
“Use rounded or circular corners on the ends of your call to action to give it the shape of an ordinary button. Square corners do work as well, however some users may misinterpret your call to action for an ad or banner and steer clear from it.” –Shay Howe, Groupon’s User Interface Engineer
Resources about Donation Form Design
- Great Nonprofit Donation Pages: ten examples of nonprofit donation pages (lots of lovely screenshots for inspiration!)
- UI Movement: a beautiful site with daily online design examples
- The importance of design elements for fundraising pages: why progress bars, gamification etc increase donations
- Design elements behind a good Call to Action button (CTA)
- 19 obvious A/B tests you should run on your website
- 10 Call to Action Case Studies with Examples from Real Button Tests: a post from Izideo on how to boost conversion rate with CTAs
- Rounded corners versus square corners – why our eyes are more drawn to rounded corners versus square corners
- High converting CTA buttons –
I hope this was insightful! See here if you would like to find out more about getting your own university donation – we always love to help