Related fields should be grouped and structured in a logical manner.
- group related information
- add a heading to each group
- order the groups from top to bottom in a manner which will make sense to the user — order as if you are telling a story.
Grouping the fields and ordering them as if you are telling a story will make it easier for the user to understand the information they are asked for — this will limit the times the users question their own answers.
Align the fields vertically in a single column layout — [exceptions]there are cases where side by side is preferred, such as related fields(Country dialing code + telephone number).
The preferred reading pattern for users when scanning the form is the Z-pattern. Because of this, the cognitive load increases in the form that has two columns and thus slows down the comprehension and completion of the form. When the user is confronted with a one column layout, none of these issues exist.
3. Necessities only
Do not ask for information which is not a necessity. If you would like more information, rather ask for this at another point in time, but not when it would hinder the user from completing the form at hand, where that information is not a necessity.
4. Label positioning
Place the field label closer to the associated field and align the label with the text field to the left. The fields should be placed below the labels for better scalability.
5. Field length/width
Use correct field length/width to match the expected answers.
- if your website is new, you can send out a survey in order to gather information on the data that is entered.
- if you already have data from a pre-existing form, then review the data in order to make the decision regarding the field length.
6. Checkbox and radio button positioning
Place checkboxes and radio buttons underneath each other for better readability.
The preferred reading pattern for users when scanning the form is the Z-pattern. Because of this, the cognitive load increases in the form when the information is displayed side by side, as this slows down the comprehension and completion of the form.
When the user is confronted with the information underneath each other, the scalability of the information is easier, and speeds up comprehension and completion of the form.
7. Dropdown select
Avoid multi-select dropdowns when a single select dropdown will do.
8. Pre-warn users
Make sure to warn the user if external content will be required in order to complete the form (e.g. driver’s license, passport, order no, customer id, card details, etc).
Use placeholders as hints to the information you are looking for in the field. Avoid using placeholders for complex helper text(see #10) that needs to be visible to the user at all times. This is because placeholder text will disappear once the user starts entering data into the field.
10. Helper text
Helper text should be used when complex data information is required in the field.
Consider changing the label of your field if the helper text becomes too long, in order to be understood by the user. Helper texts should be short.
Helper text should be used:
- when asking for unfamiliar data/information.
- if a user needs to know why they are being asked for the data.
- if data needs to be provided in a certain way.
- if information should always be visible to help the user — unlike placeholder(see #9) information
Helper text should be placed immediately after the label or question being asked.
11. Required & optional information
When selecting to mark fields as optional or required, you need to check which of these would be most valid to the form. If the vast majority of your input fields are “required”, then use “optional” to mark the optional fields. If the vast majority is “optional”, then use “required” to mark the required fields.
- display next to the label, not next to the input field.
- try to eliminate as many optional fields as possible
- display asterisk: *
- show a hint at the top or bottom of the form to explain what the asterisk means — test your form with users to find the optimal position.
12. Field validation
Validate the field as the user types in the information — inline validation.
13. Make it easy to correct errors
- when a form is incomplete, put focus on the input field which needs to be corrected — Scroll to the first incorrect input field automatically.
- add the message adjacent to the affected field.
14. Button label
Name the button according to its action or purpose.
15. Button design and positioning
Buttons are a vital part of any website and application, as are their positioning and design, here you can find my post regarding the button design and placement.