3 Tips to Improve Form Usability
We are constantly filling out forms in any interface that we encounter. As users, we don’t give them much thought, except when they are confusing or unnecessarily long. As designers, it’s our duty to make forms so seamless that users don’t give a second thought to filling them out.
Let’s take a look at 3 ways that we can create excellent form Ui designs.
1. Stack forms into a single column.
Designers often place form fields in 2 or more columns to save space. However, a one-column layout significantly reduces the probability of user errors (fewer opportunities for the user to skip or miss input fields), and overall delivers higher rates of conversion. A one-column layout is more efficient for multiple reasons:
- Decreases interaction cost because the eye follows a vertical flow rather than a Z-shaped journey.
- Decreases cognitive load since users don’t need to think about what field they must complete next, they simply fill out the form in a straight downward line.
- For people using screen magnifiers or smaller mobile devices, they are prone to miss fields in a second column.
TIP: stack checkboxes and radio buttons too
This reduces error as it helps to clearly differentiate inputs, so the wrong one isn’t selected by accident.
TIP: short, related fields can be placed side by side.
In certain cases when the fields are relatively small, they can still be contained within a single column layout. Placing small fields next to each other avoids most of the issues of a multi-column layout and helps to reduce form height.
2. Group fields logically and visually
When designing the order of your form fields, work towards grouping them logically and thematically as much as possible. Keep in mind existing conventions to reduce cognitive load for the user (i.e., username then password, or street address then city). To group fields, simply add space between each section. You may also add headings or labels to make each section easily recognizable.
TIP: Make sure to visually group the form field, label, and any helper text.
Leave enough space between fields; remember, negative space is a designer’s best friend!
3. Acknowledge users’ concerns
Since a form asks users to submit personal information, it may cause them to wonder what you intend to use it for. For example, if you ask for their phone number, consider adding helper text that explains why you need this (we all fear spam phone calls). If you can’t explain why the field is necessary, then you probably don’t need to ask for it!
We hope you learned a couple of new tips or refreshed some design best practices.
Keep it Coming
We are excited to share news and trends in digital marketing and the technology industry each week. Our readers and clients inform our topics of discussion that appear here. We genuinely hope that each article is of interest and creates a positive impact. We base our articles on your questions and inquiries and always look forward to hearing from you! Keep in touch and let us know if you have any special requests, or suggestions— you can reach us at [email protected] or Pixel506 website. Our community and clients are important to us and we’re here to help with positive contributions to this thriving industry!