Designing Forms
Try to think of a form as a conversation between the app and the user. Conversations should have a logical flow to them with topics that the user understands.
Ask less
Don't use too many fields in any form.
Ask only what is required from the user. Longer forms with questions that are irrelevant or require answers unknown by the user will discourage them, so try to avoid them.
Mandatory vs. optional
As we are only asking what is required then every field is mandatory unless stated otherwise. If there is a scenario to enter an optional field, make this clear to the user in the help prompt.
Use steps
If it's not possible to have a shorter form then break it down into smaller steps. This will lighten the cognitive load and increase the likelihood of the user's success.
Use a clear heading for each step that stands out and communicates what is required from the user.
When possible, make steps optional. For example, if there were no witnesses to an incident then don't include a witness step. This conditional logic can help speed up the entry process.
Likewise, if a user's choice means a new step has been added then make this clear to them.
Steps don't have to be on one page but the current step and progression must always be clear.
Group fields
Related fields within a step should be grouped together. Don't mix fields into one giant list of inputs. Add space between groups of fields.
For example, have vehicle and driver details grouped separately.
Use a subheading for each group.
Use a large space of 120px between groups and place fields within the group in close proximity to one another.
Logical Order
Place fields in an order that makes sense from the user’s perspective. Don’t place them in an order that makes sense to our database, users don’t relate to that.
For example, you would most likely ask a person their name before you ask for their phone number.
Stack Fields Consistently
Place form fields one after another in a column.
It’s easier for the user to work through a list of questions if they can do them one by one. A single column of fields improves the user’s success rate by enabling them to see a question (label) followed by a place to answer (input).
Place labels, help prompts, input containers, limits and validation in the stack.
Don’t place fields into more than one column; the user may miss them as they progress through the form.
Example Above: Here the form fields 1 - 6 have been stacked one above another consistently.
Space Fields Consistently
Follow these rules for consistent spacing of fields within a related and logical group:
- Standard spacing
Use 40px margin below all fields when there is no character limit or validation present.
- Limit & validation spacing
Use 24px margin below a field that has a validation message or character limit present. This maintains the perceived visual gap between the input containers when validation messages are one line.
Longer validation messages will naturally lengthen the form.
