Forms: 5 considerations and useful resources
In this blog post, I would like to focus on forms best practice. I will provide five important considerations when designing forms and include useful references to explore each topic further.
Forms
Forms are an integral part of most websites. It is important to ensure that design, accessibility, and development patterns are all considered to provide users with an intuitive user experience. Please note, these are only general guidelines however there are different exceptions, constraints, and considerations for every project.
Useful resources:
1. Form Layout
Form layout is important to ensure forms are balanced and easy to scan. In general, medium sized forms should be vertically stacked with top aligned labels. This layout approach assists users to scan through forms, fill out sequentially and complete quickly.
- Labels should be top aligned
- Align labels and form controls left
- One column layout - Avoid multi column layouts
2. Form clarity
Keep forms simple and clear by minimising the number of fields required. This reduces the effort for users to complete, improves clarity and prevents users from becoming frustrated from imparting sensitive or unnecessary information.
- Minimise number of fields – Only include what is necessary
- Group related fields
- Clearly label required fields
- Ensure users are clear what fields are optional
- Make sure call to actions are highly contrasted
3. Labels, Help text and placeholder text
Labels and help text can reassure users or offer support for more complex form controls. Language is important, by being open and communicating in a clear language you show the users that you care.
Labels
- Always display a field label
- Ensure labels are concise, clear, and descriptive
- Top left aligned labels are best for readability
Help text
- Ensure Password guidelines are clear
- If input is required in a specific format, communicate this in advance
- Include help text when sensitive data is required to be open and transparent on usage
Placeholder text
- Placeholder text should only be used only if it is necessary and helpful
- Repeating the label text is unhelpful
4. Form validation
When users make mistakes in forms, communicate this clearly and allow them to easily find and correct the error.
- Ensure validation is inline
- Ensure warning / error messages clear and concise
- Don’t make validation too strict
Useful resources:
5. Form accessibility
Form accessibility ensures forms are usable for all users. It is important to consider users who with cognitive disabilities and use assistive screen technology.
- Forms should be logical and easy to use
- Forms can be navigated via keyboard with clear focus states
- Ensure all form controls have associated labels
- Ensure design and contrast is clear
- Do not rely on colour alone – provide text or icons to communicate to message to users whenever colour is used to convey a message
Useful resources:
Bonus – Form controls resources
Each type of form control has its own unique considerations and best practice. The following articles provide detailed guidelines and best practice in terms of usage. Thanks to vponamariov for putting together an excellent tweet; “How to design almost any UI element”.
Text fields
Checkboxes
Radio buttons
Dropdowns
Are you planning a website redevelopment? Get in touch to discuss your options.