An online form is a doorway that connects your customers with you. It’s a digital way of welcoming your customers into speaking with you. So in my book, forms have to be thoughtful and considerate. From several years of working in this space, today I am sharing best form designing practices in 2023
1. Form Structure and Fields
Before even starting to work on the design of the form, ask yourself, why is this form needed? Find a logical communication that the form should represent and then identify the fields absolutely needed for the same. Understand that the form is a kind of conversation that the user does with your app/website.
Keep the Questions intuitive
Maintain the right order to ask the questions that people would naturally respond to.
Use simple and straightforward language.
2. Maintain Consistency and Linearity
One website should have all the forms consistent. The design, colors, font, line height, letter spacing etc everything must be consistent throughout the website. A user shouldn’t experience two separate forms on the website to be entirely different in design and aesthetics.
Do not split the forms into two columns. Maintain one straight line with fields from start to finish top to bottom.
3. Reduce the input effort to the minimum
Minimizing the number of input fields makes your form less loaded, especially when you request a lot of information from your users.
But minimizing the number of input fields isn’t enough — you should also pay attention to user effort for data input. Typing has high interaction cost; it is error-prone and time-consuming even with a full keyboard (and even more so on a touch screen). Try to minimize typing and prevent users from making errors — use checkboxes, radio buttons or drop-down menus to restrict the number of options and for entries that can easily be mistyped.
4. Mobile > Desktop
More than 80% of online users browse internet using their phones. The forms must be first designed for mobile and then for higher screen resolutions. Prioritise the form UI and thoroughly test form fields and error message notifications on smaller devices.
5. Error Messages and their Timing
Provide clear and hard-to-miss error messages. To err is human and to gracefully handle them is good UX. You don’t necessarily have to wait for the entire form to be filled and submitted to show the error messages. Instead, the best time to inform users about an invalid entry is immediately after they complete filling them.
Error messages should be visible and clear to understand. Red or any variant of Red is a widely used and accepted norm to highlight invalid entries. It’s best to not recreate the wheel by using some other color to do the job.
Make sure you don’t blame the user in your error messages.
6. Do not remove the field Label to save space
A lot of time marketing managers and even designers with noble intentions to save space remove the Form field labels. And use placeholder text as a replacement for field labels. Placeholder text, located inside a form field, usually has a role of an additional hint, description, or example of the information required for a particular area. These hints typically disappear when the user types in the field.
Why this solution is bad:
Once the user clicks on the text box, the label disappears and thus the user cannot double-check that what he/she has written is indeed what was meant to be written
When users see something written inside a text box, they may assume that it has already been prefilled in and may ignore it.
If you still have to absolutely remove field labels, I would suggest using dynamic placeholder labels which are still visible after they are filled as shown in the following example.
7. Reset Button in the forms is pure evil
Avoid Reset buttons in your forms, it’s nasty and it has only created frustration and nothing more. The risk of accidental deletion outweighs the unlikely need to ‘start over’ on a web form.
No matter what type of business you run or work for, chances are you have at least one type of web form on your site. By applying these form design tips that enhance UX, as well as UI design, you’ll provide your visitors with a reliable and positive experience that helps you boost conversions. So, think about the forms that you need to include on your site and begin implementing design tips and takeaways that apply best to your business needs and goals.
Feel free to reach out to me if you need help with your project, using this link.