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:
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!
In contrast, this is an example of a carefully designed university donation form (soon to be used by a Russell Group university).
Template example of a Hubbub donation form.
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?
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:
Livestrong’s donation form makes great use of colour contrast.
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
Invisible Children’s buttons have curvy corners.
I hope this was insightful!