Let’s not make this awkward – creating slick donation forms users want to complete
Ever bought a car? As far as a purchase experience goes, it can be really frustrating. There’s usually an extended back and forth with the salesman and manager, negotiating a good price on exchanging your car or getting a good credit agreement etc, etc. After about an hour in, if you are anything like me, you probably want to give in and go home.
Why do we continue to go through these small forms of torture? Because those are high personal value goals, and however frustrating the process is, you endure.
For most businesses, particularly charities, this doesn’t work in their favour. Often, their users are there for an impulse purchase, or to find out more about the work a charity does. You simply can’t provide a bad payment service, or bad user experience because your users will just go elsewhere.
If you want someone to take an action online, you’ve got to make the interaction frictionless so that you;
1. Don’t waste the user’s time
2. Don’t make the user think
Let’s imagine a typical user donating to a charity; we’ll call her Gemma. She wants to help support the cause by donating £20. Amazing! But is it easy to complete the task? She will probably have to fill in a form, or even a series of forms at some stage in the process.
There may be multiple steps; donation amount, personal information, optional account creation, marketing opt-ins, method of payment, payment details, gift aid, and sometimes even more. It’s easy to get carried away collecting too much data because we think we need to capitalise on the opportunity.
How to optimise forms, reduce friction, and yield better results
Ask yourself the following questions as a guide when reviewing or creating forms on your website or application:
1. Why do you need the information about the user? Is it essential to help them achieve their task or is it simply ‘nice to have’?
Ask for too much and users will drop-off mid way through. The fewer fields that users have to type into, the better. It means they will make fewer mistakes and not be overwhelmed with a never-ending page of text boxes.
UNICEF’s donation page keeps things simple and effective with a very straight forward three-step payment process.
2. Are you asking for the right information at the right time and are you GDPR compliant?
Has the user asked to see the form? A pop-up asking them to sign-up for something can be incredibly annoying – they didn’t ask to see it, so why do it? What about surfacing the form at the bottom of a related article they’re reading, so it has relevance.
For larger forms, consider the flow. Can it be broken into logically grouped sections that make it easier for the user to digest? Can you create a more engaging experience by asking one question at a time that feels more conversational? This can help to create real focus by removing everything else apart from the one thing you want them to do in that moment.
If you intend to store and actively use any personal data you collect from the user to re-engage them further down the line, you will have to ask for their permission with a ‘positive opt-in’ to ensure GDPR compliance. Find out more in Wired’s comprehensive guide to GDPR.
Pop-up forms or overlays that use shaming tactics can be incredibly annoying and frankly offensive. Is that how you want your brand to be portrayed?
3. Do your forms use time-saving features?
Anything which can save users time and effort is a good thing. Suggest donation amounts to give users a benchmark. Help them fill in their address by using a postcode look-up. Offer multiple payment methods for their convenience if you can such as PayPal and Apple Pay alongside the standard credit/debit card functionality. Look for security alternatives to CAPTCHA – people find this hard to use and it provides poor levels of accessibility. You may want to consider having a hidden form field to get around spammers that a robot will fill in but a human won’t.
Blue Cross’s donation page speeds things up for users by providing suggested donation amounts and logically grouping it together with the Gift Aid opt-in for improved context.
4. Does the experience motivate the user to complete the task?
Look at the design of the form, it doesn’t have to be boring. Colour can help to inject some personality and showcase your brand. Colour theory on buttons also needs to be considered. A/B testing is worthwhile to make sure you’re maximising conversions. The use of visuals can help to emotionally engage a user and reinforce why they are there in the first place. Also consider motivational text like “almost there” or “just one more step to go” to give users that extra boost to get them over the finishing line.
If the experience feels robotic, then you’re not treating users like human beings and they’ll disengage. Think about words like ‘Submit’ on the button at the bottom of a form. Humans don’t talk to each other in that way. A better word might be ‘Continue’, ‘Send’ or ‘Sign me up’.
Don’t forget this is also about the experience of filling the form. How you validate details can have a big impact on how users perceive this experience. A terrible user experience is filling in a really long form and then pressing the button at the bottom only to discover there are lots of errors. It’s a hassle to go back and correct the mistakes, often resulting in abandonment. Validate as you go so users have focus on the part of the form they’re currently filling in.
Duchenne UK’s donation form allows users to get to the bottom of the form and validate everything in one go. This makes it hard for the user to go back and rectify their mistakes.
5. Do you reinforce the positives after completion?
Remind users what they have just done is a positive thing and will make a real difference. Make them feel good about completing the transaction – everybody likes to be told they’ve done really well. Many ‘thank you’ pages are simply dead-ends which assume the user doesn’t want to do anything else. In fact, they may be more engaged now, which gives you a great opportunity to signpost them to other relevant information so they can continue their experience and get even more value from you.
The RNLI’s donation thank you page gives users the confirmation that they’ve done something amazing that will make a real difference. They also provide a signpost to see how their money will be spent.
Why third-party forms might be the way forward
Many charities suffer from a lack of design and technical resource to build and optimise forms. Constraints are also often imposed by the systems they’ve been built in. But help is at hand. There are lots of third party form tools available to help you build and embed well structured forms on your website that deliver fantastic functionality and user experiences. One popular example is Typeform – it focuses on a more ‘conversational UI’ model which is gaining popularity. And if you’re considering integrating financial transactions, Stripe or PayPal payment platforms are easy to integrate and already optimised to give users a quick and easy way to give their money. My advice is to always look for ready-made solutions that are cost-effective, easy to integrate and optimised to work across all devices.
You should now be equipped to evaluate the effectiveness of your website forms and understand how you can make improvements to the user experience. Forms are often the cornerstone of website interactions for charities. So, with so much riding on them, can you honestly say that your forms are helping your users to achieve their goals quickly and easily?
Not all charities can afford to work with a digital agency to help them design and deliver their next website or digital product. Yoyo have created a free eBook called Think Experience to help debunk some of the fears around digital projects. You can read more about the importance of good forms design in chapter three of the series, download it here.
In the coming months, Yoyo will release more chapters, giving charities the digital skills they need to understand how to define and create digital products that deliver on their promises.
Image: Yoyo Design