Why your ugly giving form is losing you donations

By on March 4, 2016

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 people fill in your online donation form? How can you minimize the chances of them putting it off for ‘later’?

This post looks at:

– ‘Ugly’ university donation forms versus simply designed ones
– The danger of 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

Firstly 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!

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. See here for more about getting customized forms.

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. 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 & uses countless examples of successful companies using these techniques.

He points to Google’s homepage. Google was not the first search engine provider. But what made Google different is 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. In a glance, it looks time consuming. It’s easy to look at that form & think ‘i’ll just fill that in later’.

If there are fewer steps on one page, a person is more likely to donate than 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, it’s not overwhelming. First you click the amount you want to donate, and only then do you get asked to fill in your name, and so on. Bit by bit.

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

Colour

Efficient use of colour can ensure that people’s eyes are drawn to a donate page. A/B tests in the articles listed in the resource section below come to the same 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 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 than square corners and are quite the norm in online design. Shay Howe, Groupon’s user interface engineer, says curved buttons are more clickable than square buttons.

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! See here if you would like to find out more about getting your own university donation  – we always love to help :)

Learn More

Christina Pashialis

Digital Marketing Manager at Hubbub
Christina is using content and inbound marketing techniques to build Hubbub's online presence. She is passionate about helping education and non-profit professionals to reach goals through digital marketing.

Latest posts by Christina Pashialis (see all)

Categories & Tags

Subscribe for a weekly dose of fundraising insights!