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

Tooltips

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

response

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.

Therefore, by adding a simple AJAX or Javascript snippet to bring back an instant response on whether the provided information is valid or not can keep your users happy, and will no doubt decrease on form submission time.

This is Required, Mmmk?

required

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.

Progress Bar

progress bar

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.

Status Bar

status bar

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.

Conclusion

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.


2 Responses »

  1. You have made a great point here. I visit hundreds of sites every month and the most irritating thing that I have to deal with is a form that returns an error and then erases all the data that I just keyed in. Most of the time I will leave the site and not return.
    And I download things as a matter of routine as well and the lack of a status bar telling me that the download is in progress is just as irritating to me.
    Great post thanks for the pointers.

  2. A great article I found very useful.

    Here are some more general form design tips readers may find useful…

    http://www.flysoftware.com/support/top_10_form_design_tips.asp

Leave a Comment

Category Selection

About Us

Boxie Designer is a blog on web design and development tips, tutorials, how-to's, and anything else under the web design and development genre. In order to keep our readers informed, we also have some Editor Picks in where the Editor selects some great outside articles on the topic.

Our Writers

The folks behind Boxie Designer are skilled designers and developers like yourself, with years of experience in the field. Their goal is to help share some tips and secrets they learned along the way.