Christina Pashialis

March 4, 2016

Why your ugly giving form is losing you donations

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. Below is a UK university’s current donation form for their annual giving fund. If you’re an education fundraiser, you’ll know that a lot of universities’ donation forms look pretty similar!

surrey donation form

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?

Yes.

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.
google_homepage

 

“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

 

donation_form_2

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.

Organising for action

Organising for Action’s Donation Form

Donate Buttons

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.

Positioning

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.

invisible_children3

Invisible Children’s ‘sticky’ donate button

Colour

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:

“What stands out gets remembered, what blends in gets ignored”  Derek Halpern

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

Livestrong’s donation form makes great use of colour contrast.

Shape

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_donate_button_small

Invisible Children’s buttons have curvy corners.

Resources about Donation Form Design

I hope this was insightful! 

You might also enjoy reading these..

Don't miss our monthly newsletter

We curate the best fundraising content from around the globe and deliver it straight to your inbox.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.