Tips to Designing Usable and Friendly Web Forms
Creating and designing awesome friendly and usable forms should not be as hard as it seems to be today. Designing forms is all about simplicity and usability. The easier it is to understand what the form asks for, the easier it is to fill out. With that said, we discuss some great tips that will help you design some awesome usable and friendly web forms.
Side Notes and Tips
There is nothing like filling out a registration form that just uses a word or two to ask for what it wants without defining any requirements or restrictions. Well, no not really. There are numerous sites that have such registration and other forms where you fill out all the necessary information thinking you got it all down, only to hit the submit button and get a set of errors returned complaining about the invalid characters you may have entered and whatnot. As a user, I definitely get irritated at such and might give the form another try depending on how much I really wanted to get that form filled out. If I was already being bothered to fill it out the first time, as many other users or viewers might be, they may not have the patience to correct the errors, and form conversion rates will drop.
With that discussed, a good way to increase conversion rates and host some friendly forms would be adding a simple side note or tooltip for each field, which can go a long way, especially if it casually addresses the matter. With such, anyone wanting more details on each field individually can obtain it easily and for those who know exactly what to enter can easily ignore it; all part of creating usable and friendly forms.
Instant Results and Responses
Some information needs an instant response or feedback such as email address fields, password fields, or username fields in order to hasten and ease the process of filling out a form. For example, imagine registering a new email address using Gmail, you know there are countless of email address already taken, and that submitting the form just to find out whether it is or not may be a pain, especially if you have to submit the form say twenty times before finally finding one that is available.
This is Required, Mmmk?
As the statement above implies, labeling fields is all part of usability; as we all know, we hate to enter information unless it is required. With that said, a simple word or asterisk can clearly mark what is required and what is not. Additionally, a great way to have your forms appear less intrusive is to ask only for information you need straight away while saving the optional fields for later, or hide them in a collapsible div.
If you still do not quite understand the reason why optional fields can sometimes be intrusive, think back at the registration forms you may have had to fill out once before such as forum registration forms. Most forum software ask for too much unnecessary information upon registration and without looking further at what is optional and what is not, you can be completely turned away from just how it appears.
Online shopping carts, checkout systems, online auction listings, they all have quite a long process to get to the end of the form, and let us face it, having it broken down for us in steps is a lot better than seeing all the fields at once. Moreover, breaking down a form in steps is just one-half of the way as users are often steered away from a form if they really have no idea when the form will end. With that said, a simple progress bar atop the form displaying what step you are on within the form can definitely give a general idea of how long it might take for the user to fill out the form completely, which will not only improve on usability and user friendliness, it also increases the conversion rate, which is something you should always aim for.
If you often work with forms that allow file uploads then you should definitely know that a status bar on the upload is definitely a necessary addition. Think about the last time you were uploading a fairly large file, you probably remember the need of having that status bar to know the exact completion time instead of wondering whether your browser just hung on you for an hour or whether it is still actually being transferred.
To conclude, form usability is all about having your users seamlessly fill them out without any additional complications and hassles. It is sort of like a navigation system, you provide it the necessary information to get to your destination, and it handles the rest for you in a user-friendly fashion.