Form Design Best Practices

We use forms in everyday life, whether we are applying for a new passport or completing a payment through your favourite shopping website. That is why designing online forms matters so much. The user experience needs to be straightforward, aesthetically pleasing and understandable.

Forms within the grantmaking world are no different. Grantees need the same flawless interaction when completing their application, monitoring, impact, and service feedback forms.

A well-designed form that takes the users experience into consideration can reduce the number of ineligible applications you receive, and more importantly will improve the quality of data that you receive from your users.

First impressions are 94% design related, however, it is not all about making it look nice, design goes further that just aesthetics. The structure of pages, sections and questions all influence the user’s ability and desire to complete the form.

On the other hand, a poorly designed form can result in poor data being captured and users getting frustrated and exiting the form before completing.

We have collated some of our top tips to consider when building your forms to help meet the needs of yourselves, AND the end user.

Know why you’re asking each question

You should know why you are asking each question in your form and how you’re going to use that information to make an informed decision.

Do not ask questions that you do not NEED. For example, asking for their bank account details of a grant applicant at the first touchpoint is not best practice. An applicant may feel reluctant to give this personal information before they have had their application granted.  There are some exceptions to this; sometimes smaller, high-volume grants might require this information at an earlier stage as the internal time that would be spent gathering this info further down the line would be too costly.

Using conditional logic/questions is a great way to avoid asking a user unnecessary or unrelated questions. It gives you the opportunity to display questions that relate to the answers or data that you already know about them. In the example below you can see that we have displayed different questions based on the users answer to the first question, ensuring the user only sees what they need to.

Using conditional questions to display only the most relevant information to applicant
Using conditional questions to display only the most relevant information to applicant

Help people to fill in forms correctly the first time

“80% of government costs are spent on services. Up to 60% of these costs are spent on service failure.” – Lou Downe “How to design services that work

You can provide guidance for users by giving an overview before they start that outlines what they should expect from the form, and any additional files that they will be asked to attach. Not only does this give the user a better understanding of what is expected from them, it will reduce frustrations further down the line.

One way of ensuring that you don’t waste the time of users that you already know won’t be successful is by adding an eligibility check before your application form. This can be a series of questions relating to the final goal of the application and prevents those who are ineligible users from continuing to the main application form at the earliest stage possible.

Set expectations at the beginning and throughout

Explain the process from the beginning. Tell them what to expect next, including when they will hear back if they are successful, or unsuccessful.

Adding a navigation bar to a form is a great way to display to the user where they currently are, and how many more steps they need to complete before they are ready to submit. A well-designed navigation bar can also allow the user to go back to previous areas of the form, at any time, to make changes to questions or simply just to refer back.

One ‘thing’ per page

Going back to structuring your forms, it’s important to just have one ‘thing’ per page to not over complicate the layout. By one ‘thing’ we mean one question, one theme or one category. By using much smaller pages with just one question, theme, or category, it improves accessibility by reducing the cognitive load of the page so the user can focus on just one thing at a time.

In the example below, you can see that the first form is a long list of poorly formatted questions. We have taken out the donation section from the example and created a new page with JUST this information on displaying the question clearly without any confusion.

A bad example of group questioning in form design
A good example of group questioning in form design

Order your questions to make it easier for users

When it comes to ordering the questions in your forms, it is important to ask the questions that we need (required questions) before the supplementary (optional questions). Next, you want to order your forms from most easy to difficult. We find that when the more difficult questions are asked first, users tend to drop off or struggle to complete the form at the first hurdle.

Keep questions simple and avoid jargon

DID YOU KNOW? Users only read about 20-28% of a web page

Something that I have experienced over and over again is trying to complete an online form and the question is long and convoluted or filled with abbreviations that make no sense to me. Wording questions in a straightforward and plain English can ensure that it can be understood by everyone, quickly and easily.

Where not possible, and more complex terminology needs to be used, we suggest adding ‘help text’ to explain what we mean and give the user a definition.

Show the guidance users need when they need it

Guidance for questions should be displayed alongside any question that needs explaining in more detail. Giving this guidance can reiterate the question and ensure that the correct data is being given by the user.

Something that we commonly see is guidance notes being included to forms in PDF format. One funder that did some research into how often their guidance notes were downloaded found that only 25% of users were downloading their PDF. These also make it less accessible for users as you must refer to both the guidance and the forms across, at least two tabs.

Test forms with ‘real’ users

Undoubtedly MY FAVOURITE and the most effective way to find out if a form works is to test it with real-life users. Testing with as few as five users can identify up to 85% of issues on a form. This testing does not need to be expensive, or time-consuming and can be done from the early stages in the form design using prototype versions of the form.

User testing is a key tool to understand user behaviours and see how they interact with your form. It can also validate or challenge any assumptions that you’ve made about the form and having someone using the form for the first time may spot easy wins to make improvements. It is also a great tool to help minimise the need to make further changes to the form further down the line.

TEST EARLY AND TEST A LOT.

 

Form Design Best Practices

Want to hear more tips and how to get the most out of your forms? 
You can now watch our Form Design webinar hosted by our service designers.
Watch now
Webinar