How to design an online form — Part 4 — The structure of the form
*This is the 4th article from my collection ‘How to design an online form’. Click the link to read Part 1, Part 2 and Part 3
When I was in a primary school the teacher told us that every story needs to have an introduction, middle and ending and everything should go smoothly so the reader is led through it naturally.
Now I believe, the same strategy should be applied to the structure of the form.
Of course, it will look different if you have a simple form where you need just a few details and when you have a job application form which (for example in case of university roles) can have up to 15 *pages with few questions on each.
How to start
Depending on the type of the form, its worth to start describing few things
- what the form is for
- who is it for and who is it not for
- what you need to complete it
This way, in the beginning, you are able to manage people’s expectation and give them an impression of control. When they know what to expect the filling process (especially in case of long forms) is not so frustrating.
We all know that while filling in the form there’s nothing worse than a need to leave the desk and look for certain information which is needed. It may be your NIN, your car registration number, NHS or passport number, mortgage details, and many many more things you do not remember by heart and quite often don’t have at hand. The reality is, these details are in documents hidden deep down in the drawer you tend not to open too often.
This is why, in my opinion, the most important part of the introduction part is the list of ‘details you may need’. This way person filling the form will be able to collect everything and not worry that you’ll become a victim of a session time-out and what you typed will be deleted after x minutes…
A good practice is to write how long it may take to fill in a form, it is a matter of 10 or 30 minutes. If you are able you can add a progress bar so people will know how much they completed and how much is still to go.
A good practice — signposting to the right place
Sometimes people are filling not the right form. If you are aware of repetitive cases and you are able to identify what actually they were looking. Then you may add information on what they can do if they are looking for certain information/application which is not in the scope of this form.
Sometimes the variety of forms may depend on the type of service or (that is not a best practice, but still present in real life) the structure of the department taking care of certain issues. Then you need to break the mental model and lead people to the right source. (But also it’s an indication that something with the placement of the form, language or the whole section is wrong or something is missing). It’s always worth investigating why people are filling the wrong form.
One topic per ‘page’
First of all let me make one thing clear: by *page I understand the part of the form available/visible on the screen.
At the beginning of the form design process, it’s worth to identify the information you need by topics and group in categories. We don’t want to overwhelm people with our forms, so we can’t show all the questions on a never-ending page. This is where categories will help you to divide the form into digestible chunks. It’s important to ask questions in the intuitive order so people don’t feel you’re asking for a piece of information out of the blue.
Progressive disclosure
This strategy leads us the concept of progressive disclosure- not showing all the questions at once, just presenting one or few depending on previous answers. It’s a good way to avoid frustration and confusion what was a common problem with paper forms when you should answer question x when you answered ‘yes’ to the question p etc.
So we have questions gathered in categories. Now we can start ordering it.
Quite often the form starts with contact details, but if you offer certain service or you’re working for a public sector you may start with eligibility questions for example:
Do you live in the xx area?
If not, sorry the form is not for you, you can go to (and here a link to alternative options) for more information.
It is a good filtering technique which allows you to save people’s time so they won’t fill in the form which is not for them.
Categories or sections you’ll have will depend on the service you offer.
It will be different for the public sector and for example a private business. Each time try to order questions from most general and drill down to more specific. Depending on the purpose of the form you need to think what information is crucial for you and if you have more forms you should keep order similar to provide your clients consistency.
Last but not least
At the end of the form, you may have a summary page which additional information such as:
- will the person receive a copy of the form or they need to save it another way
- is there any specific detail they should double check
- how they will receive a confirmation of submission
The main concept of this part is to keep the person informed. But it doesn’t end here.
When they hit the magic submit button, they should have a confirmation page. Depending on the type of the information you’ve gathered and the form builder you may have
- confirmation page followed by the email
- only confirmation page
In the first case, the confirmation page may just congratulate the person that the form was submitted successfully and they will receive an email with further details.
If you have only the confirmation page you need to include all the information on the visible screen.
People should know what to expect after submitting the form, therefore, it is a good practice to write either in the confirmation message or in an email:
- how long they may wait for the answer
- what the answer might be and what they may need to do later
- what to do if they won’t receive any answer after a certain time
- give contact details
All this information will help you to manage their expectation and if you’re honest in your estimation you will be able to process the form and act accordingly to your workflow without interruption from a person frustrated by the delay.
A good online form is not only about good UX. It’s about a better quality of data you collect and more efficient workflow for the service team.
Thanks for reading.
*This is the 4th article from my collection ‘How to design an online form’. Click the link to read Part 1, Part 2 and Part 3
How to design an online form — Part 4— The structure of the form
*This is the 4th article from my collection ‘How to design an online form’. Click the link to read Part 1, Part 2 and Part 3
When I was in a primary school the teacher told us that every story needs to have an introduction, middle and ending and everything should go smoothly so the reader is led through it naturally.
Now I believe, the same strategy should be applied to the structure of the form.
Of course, it will look different if you have a simple form where you need just a few details and when you have a job application form which (for example in case of university roles) can have up to 15 *pages with few questions on each.
How to start
Depending on the type of the form, its worth to start describing few things
- what the form is for
- who is it for and who is it not for
- what you need to complete it
This way, in the beginning, you are able to manage people’s expectation and give them an impression of control. When they know what to expect the filling process (especially in case of long forms) is not so frustrating.
We all know that while filling in the form there’s nothing worse than a need to leave the desk and look for certain information which is needed. It may be your NIN, your car registration number, NHS or passport number, mortgage details, and many many more things you do not remember by heart and quite often don’t have at hand. The reality is, these details are in documents hidden deep down in the drawer you tend not to open too often.
This is why, in my opinion, the most important part of the introduction part is the list of ‘details you may need’. This way person filling the form will be able to collect everything and not worry that you’ll become a victim of a session time-out and what you typed will be deleted after x minutes…
A good practice is to write how long it may take to fill in a form, it is a matter of 10 or 30 minutes. If you are able you can add a progress bar so people will know how much they completed and how much is still to go.
A good practice — signposting to the right place
Sometimes people are filling not the right form. If you are aware of repetitive cases and you are able to identify what actually they were looking. Then you may add information on what they can do if they are looking for certain information/application which is not in the scope of this form.
Sometimes the variety of forms may depend on the type of service or (that is not a best practice, but still present in real life) the structure of the department taking care of certain issues. Then you need to break the mental model and lead people to the right source. (But also it’s an indication that something with the placement of the form, language or the whole section is wrong or something is missing). It’s always worth investigating why people are filling the wrong form.
One topic per ‘page’
First of all let me make one thing clear: by *page I understand the part of the form available/visible on the screen.
At the beginning of the form design process, it’s worth to identify the information you need by topics and group in categories. We don’t want to overwhelm people with our forms, so we can't show all the questions on a never-ending page. This is where categories will help you to divide the form into digestible chunks. It’s important to ask questions in the intuitive order so people don’t feel you’re asking for a piece of information out of the blue.
Progressive disclosure
This strategy leads us the concept of progressive disclosure- not showing all the questions at once, just presenting one or few depending on previous answers. It’s a good way to avoid frustration and confusion what was a common problem with paper forms when you should answer question x when you answered ‘yes’ to the question p etc.
So we have questions gathered in categories. Now we can start ordering it.
Quite often the form starts with contact details, but if you offer certain service or you’re working for a public sector you may start with eligibility questions for example:
Do you live in the xx area?
If not, sorry the form is not for you, you can go to (and here a link to alternative options) for more information.
It is a good filtering technique which allows you to save people’s time so they won’t fill in the form which is not for them.
Categories or sections you’ll have will depend on the service you offer.
It will be different for the public sector and for example a private business. Each time try to order questions from most general and drill down to more specific. Depending on the purpose of the form you need to think what information is crucial for you and if you have more forms you should keep order similar to provide your clients consistency.
Last but not least
At the end of the form, you may have a summary page which additional information such as:
- will the person receive a copy of the form or they need to save it another way
- is there any specific detail they should double check
- how they will receive a confirmation of submition
The main concept of this part is to keep the person informed. But it doesn’t end here.
When they hit the magic submit button, they should have a confirmation page. Depending on the type of the information you’ve gathered and the form builder you may have
- confirmation page followed by the email
- only confirmation page
In the first case, the confirmation page may just congratulate the person that the form was submitted successfully and they will receive an email with further details.
If you have only the confirmation page you need to include all the information on the visible screen.
People should know what to expect after submitting the form, therefore, it is a good practice to write either in the confirmation message or in an email:
- how long they may wait for the answer
- what the answer might be and what they may need to do later
- what to do if they won’t receive any answer after a certain time
- give contact details
All this information will help you to manage their expectation and if you’re honest in your estimation you will be able to process the form and act accordingly to your workflow without interruption from a person frustrated by the delay.
A good online form is not only about good UX. It’s about a better quality of data you collect and more efficient workflow for the service team.
