The uses and importance of forms in web design are endless. Whether it be a checkout form or registration form they are extremely important because they are often the last stage of interaction between you and your business completing its goal. Every website has a goal whether it be selling a product or getting users to join a community and if designed well enough a form can be the difference between success and failure.
It is easy to design a form in HTML but what you need to consider is the best way to make your form usable and accessible to all your users. Because of the importance forms play in website conversion rates it’s important to follow a few golden rules when building your form.
Its important you highlight required fields so its noticeable to the user what they need to fill in because how many times have you filled in a form only to get annoyed because you missed a required field. The best way to highlight fields is with a simple asterisk beside each label and to be even clearer somewhere on the page stating what is associated with the asterisk.
Try to make your description error messages user friendly by pointing out specifically to the user which field they still need to fill in such as their email address or gender. Don’t make the mistake of providing an ambiguous error message that requires your user to search the whole form for a field they may have missed.
Another good idea is to utilize JavaScript client-side error validation as it saves your users time and lets them know straight away if they have made a mistake instead of after the form has been submitted.
Another good tip is to visually style input fields so it becomes apparent to the user what field they are on. This can easily be done using the CSS: focus pseudo-class selector.
If you have a form that consists of multiple pages then it is paramount that you indicate to the user how far along the web form submission process they currently are. This feedback communicates to the user how long the form will take to complete and is extremely important because without it your users have no idea how far through the process they are and as a result they could stop filling out your form altogether if it’s too long. A good alternative would be to create a shorter form however for an online survey which has many questions or an e-commerce website checkout process this sometimes cannot be possible.
Instead of having the default “submit” button you should definitely consider changing it to a phrase that reminds the user of what they are actually doing, for example the phrase “sign up now” or “create my account” is much more informative than just “submit”.
On your form it’s extremely important that you know your users. To stop any confusion it’s good to make a clear distinction between new users needing to register with your site and current users needing to just log in with existing details.
To make sure your form is clear and isn’t ambiguous it’s a good idea to indicate to users the proper input format they should be using. For example if users are being asked for their date of birth let them know that you want their date, month and full year in that order. Or if they are required to input a password tell the user that it requires a combination of numbers and letters.
Several studies have proven that users prefer to scan down rather than from left to right therefore you should consider basing your forms on single vertical columns rather than multi-columns. Having a single vertical column helps reduce the number of eye movements your users make whilst filling out your form.
Don’t underestimate the importance of your forms and by following these simple guidelines you can easily create a form that is clear, concise and usable.
