Key elements in making a good donation form

I never knew how big a difference tiny details in a donation form make. I thought a clean, nice form was enough. Turns out, I’m wrong. Over the past few years as I’ve had the pleasure of working with prodigy interaction designer Ida Aalen, I’ve learned a lot about basic form design. It all has in common that it makes a lot of sense once you know it. And that it makes a world of difference to the number of people who actually fill out your forms. 

Here are some of the tricks I’ve learned, taken from a presentation by the aforementioned Ida. Making the forms easy to understand, is key. Now, this might be very basic for those of you who are all ready well versed in interaction design. If so, move along to something more interesting. But if you, like many charities I know, don’t have the form design expertise, and your form provider does not either – I hope this can be as educational to you as it was to me 🙂

This is what I would have thought was actually a quite good form.

A good looking contact form, but we can improve it

I fairly good-looking form!

But there is a lot we can to do improve on it. For instance, I used to think that people actually read the helpful little instructions we wrote for them. But it turns out we’re all lazy bastards and we can’t be bothered. Instead, we use visual clues to tell us what should be where in a form. And so adjusting the length of each individual input field to fit with the information that should go in it, really helps our eyes and brain easily figure out what to do. So:

1. Use input field lengths to hint about what should be filled in

Field lengths should be adjusted to their intended content.

Field lengths should be adjusted to their intended content.

Here, the shorter length of “zip code” tells your brain that this is where the short (usually) number-based zip code goes.

2. Fields that go together should be grouped together

The second trick to letting your brain more easily “see” what information goes where without actually reading it, is to group fields that go together. First name and last name are information that goes together. All aspects of your adress likewise. Electronic contacts like mobile numbers and e-mail go together. So:

Spanish Fundraising conference - from good intentions to more donations UTEN BYGG.022-001

Already, this form is putting much less cognitive strain on your brain while you’re filling it out. But let’s take out the big guns.

3. Buttons must clearly state what they do

This may seem obvious, but your buttons need to clearly state what they do! This should be such a no-brainer, but still we see forms using buttons that say “ok”, “send”, etc. The actions probably seem so self-explanatory to you the owner, that you don’t think that anyone else could misunderstand them. Usually, they can.

Buttons that clearly state what they do

Buttons that clearly state what they do

It could be a good idea to bring an outsider in and ask them what they think the buttons do. The answer might surprise you. Particularly if you bring in an outsider that is less than used to sitting in front of a computer.

4. Remove buttons that hurt more than they help

So, who amongst you has a “reset”, “cancel” or “clear form”-button on your donation form? If you do, don’t put your hand up, because SHAME ON YOU! Why would you want to HELP someone stop the donation they’re about to give you? And really, chances are most people who click that button anyway didn’t mean to, and then has to go through the action of filling out your form all over again. If for some reason you DO insist on having a cancel button anyway, at least make it much less prominent, and place it to the left – people are used to the right button being the “move along”-button.

Remove buttons that hurt more than help

Remove buttons that hurt more than help

The grim example below is from a hotel I stayed at. Their log-on screen for the wifi had several steps. All of them  had “cancel”-buttons – even steps that had no chance of incurring any fee on me. Both buttons were the same color. To make matters worse, they had reversed the positions of the “connect” and “cancel”-buttons from the normal. Usually “cancel” is placed left, and “go” right. I clicked the cancel-button SO many times erroneously, everytime I tried to log on. My brain never learned. To make matters EVEN worse, the page was not mobile friendly, so when I logged on from my phone, the only button I could see in the screen frame was the “cancel”-button. Which, of course, I clicked erroneously even more times. Gaah!

Picture of hotel log-in page with badly placed "cancel"-button

Picture to the left is how the screen looked after the page zoomes in when you tap a typing box. you had to manually zoom back out in order to get the “connect” button in the frame at all, as in the picture to the right.

5. Error messages that actually help

How often have you clicked a “submit”-button and then having nothing happen, and not understandig why? After meticulous scrutiny you might find a tiny asterisk indicating that you filled something out wrong. But it migh still not tell you WHAT you did wrong, or how to fix it. Your error messages should be clearly visible, communicate what’s wrong and how to fix it, and be placed with the field that contains the error. Your screen should automatically move to put the error in the users view.

The field containing the error is clearly marked with a red box, and a text explaining what's wrong.

The error message is clear, placed on the offending field, and clearly indicates what’s wrong.

And that’s it – a much, much improved form through seemingly small changes.

There you have it – these are some of the key elements to improving your online donation forms – explained by me, masterly taught by Ida Aalen of Netlife Research,  the “coolest UI/UX consultants in Norway”. If you want to learn more about form design, Ida highly recommends you check out Luke Wroblewski’s book “Web Form Design” and presentations.

Any other thoughts? Please share in the comments 🙂

(P.S.: Don’t forget to register for the webinar Ida and me will be holding November 27th, talking through the redesign of the cancer society web site. You can read all about it and register at Gerry McGovern’s blog.)

Advertisements

Eliminating the paradox of choice in online fundraising

I believe the most important thing we did on our new website, was eliminating the paradox of choice. Giving the donor more choices, doesn’t make us more money. It makes us less.

There are many ways to support a charity. As for us, you can either:

  • make a one time donation,
  • become a regular donor (direct debit),
  • become a member,
  • make a gift in memory,
  • make a gift in celebration,
  • find out about legacies,
  • fundraise for us,
  • become a volunteer (which has its own set of variables even),
  • donate to one of our campaigns like the pink ribbon or others,
  • or the inevitable “follow us in social media”.

Should be something for everyone, right? I’m sure it is too. But for Ordinary Joe, this all just gets confusing.

The paradox of choice

The theory of the paradox of choice is that in some cases, having more choice actually makes it less likely that you will make any choice at all. Thus more likely that you will make no choice, and just leave. Now, while the theory had had some critique, it stands to reason that when we give no clear indication of what we want the user to do, the user gets confused.

On our old website, the user would be presented with all of the choices above more or less presented equally. So we left it to the user to decide how he could be of most help to us. 10 different choices to consider, it is just too complex.

Hard priorities

Screenshot from our website with donation form on top, menu underneath

Donation form, front and center. All other options still available below

The whole website is in responsive design, so we had to think of the mobile users first. This, as anyone who has done it knows, means making hard priorities. Our agency (the brilliant Netlife Research) made us decide which of all the things above we would put up if we could only put one choice up. It was hard. It was gruelling. There were tears, and fights broke out. Broken bones and broken hearts. But by golly, we did it.

We decided that the drop-in user, who could be persuaded to support or cause, would be most likely to make a donation. Hence, we put the donation form up front and center. We chose to put the form directly on the page, while all other ways of supporting are shown as links. All the other choices are still there, but we give you a clear indication of what we want you to do if you haven’t already settled on some other way of supporting us. I believe this to be one of the strongest contributing factors to the success of the new pages.

Dedicated landing pages

Another way we have eliminated the paradox of choice, is by making the donation form(s) “portable”. A common online fundraising problem, is that a user would watch / read a piece of communication that would make them inclined to support a cause. They then had to either locate the donate now-button (which they don’t see because of banner blindness), or the “support us”-section of the website, and then make their choice of how to support. All the while, the user does not know which way of supporting would be most effective to help with the problem they’ve just become engaged with. This means going into rational thought-mode. We have lost the emotional connection with the donor.

Example of content page telling a story about the research  being done, with the donation form underneath it.

Example of content page telling a story about the research being done, with the donation form underneath it.

With our portable form, I can paste the donation form onto any page I want. This means that if I want to present a story of a scientist who has done some remarkable work, I can put a donation form directly underneath it. This means that if someone is sufficiently moved, angered or otherwise convinced by something we post online, we can keep them in that state of mind while they make the decision to donate, and go through with it. I can decide which action I want them to take (donate, become a member, buy something), and show them that option on the same page. Having the ability to create dedicated landing pages in just a few minutes makes a digital fundraiser very happy 😀

This is the third blog post in my ongoing case study on the Norwegian Cancer Society’s new website that doubled our online fundraising.

How adjusting the default really impacts online fundraising

Playing with the default donation amount has been really important in our new website, and it turns out it’s really effective.

In a previous post, I shared the fundraising increases resulting from the new and improved website, some quite astonishing numbers. I want to tell you a bit more about the work that we’ve done, and I’m starting with the defaults.

So here’s an interesting graph:

graph showing development of donations given.

Development of donations given for two given amounts, as a percentage of total donations given (online)

The black line represents donations to the amount of 250 NOK ($42.2, €31.74, £26,7). and the green line represents donations to the amount of 500 NOK ($84.4, €63.4, £53.4). The graph shows how big a percentage of number of given donations each of them has compared to the other. (Note that Norway is a high-cost country, so these one-off donation amounts are not as high to us as they might seem to some of you from other countries)

When we first launched the new site back in september 2012, the default amount – our suggested donation – was 250 NOK. Not a bad donation at all, and definitely not anything that would scare anyone away. Other suggested amounts in the drop down-menu in the donation forms were 500 NOK, 1.000 NOK and optional, but 250 was the one visible without pressing the drop-down.

DOnation form wiht 250NOK default

Donation form

As you can see, for the first few months the two amounts 250 and 500 danced around each other in a fairly even share of the total. But in January, we saw the number of 500-donations go down. In hindsight, I believe this to be because the first couple of months were leading up to Christmas. I believe we had a lot of visitors who gave larger donations, because they felt generous at Christmas, and wanted to make a “real” contribution “this once a year”. But when Christmas was over, people reverted to giving our suggested amount – 250 NOK.

Ask for more?

It’s a really scary thing to ask people for twice the amount you’ve previously been asking for. But with, among other things, Adrian Sargeants research on donation amounts, his cases about radio fundraising, inspiring us – we wanted to se if we could indeed ask for more. And we could see from our data that some people were still giving much large donations, while those we hypothesized where “drop-in”-traffic were giving the default suggested amount. So we took a leap of faith and put the default at 500NOK in May of 2013.

I was petrified. I feared angry phonecalls from people wondering who we thought we were demanding outrageous sums from people. I feared conversion rates sinking through the floors. I feared putting people off and chasing them away. I listened for the sound of the approaching stomping feet of a hoard of donor care representatives, demanding my head on a stick.

But lo and behold.

graph picturing the percentage of 500NOK gifts shooting up when the default is changed.

Look what happened when we changed the default

Nobody noticed.

Yes! Ask for more.

Instead, they started giving the now suggested donation amount. The green line soared like a very pretty donation-eagle on it’s way to deliver more money into the hands of cancer researchers.

We’ve been monitoring the numbers closely since the change, seeing if maybe other amounts are dropping as a result. Maybe someone not willing to give 500 would now give 100 rather than 250. Maybe someone wanting to give more than 250 would now give 500 rather than 750. But that does not seem to be the case. The only thing this does indeed seem to be impacting, is the amount those who choose the default give.

If you haven’t tested your suggested donation amount in a while, I urge you to do so. Take a look at your data, see what people are giving. Find out what your optimal suggestion is. It’s probably more than you think. Remember that people online for some reason seem to give higher average amounts than offline.

Test it. Monitor the result. And raise more money for doing good in the world 🙂

P.S.: I want to say again that amazing web agency Netlife Research are the ones responsible for our new website They are truly the best at what they do, and I love working with them. Their design expertise combined with our fundraising knowledge is a great combination!

* This is part two of a series of posts chronicling this case study.
Read part one: How we doubled our website fundraising
Read part three: Eliminating the paradox of choice in online fundraising