HTML only allows us so many ways to provide features for our users, and thank goodness for that. Forms provide an excellent way to receive information from the user. Forms are also a great place to fail in terms of usability. Have you ever filled out a form to realize that it was either broken or just not working for some reason? Completely frustrating! It is almost like you were robbed of your time.
Form BasicsForm Submission
Form Submission
If all else fails, the form should submit their information and do something with it. They might have worked their tails off to fill out the information, but you better make it worth there time. When a user submits a form and receives a 404, I would bet some big money that you never see them again. If you have ever tried to submit your website to some web directories, you might have already punched a few holes in your computer because of their forms. Always, always, always, make the form work. Even if your user struggles and makes it through other obstacles of the form, they should be rewarded knowing that their information went somewhere.
Odd Elements
If you are using radio buttons, make sure they are connected. Do not allow your users to select yes and no or they will confuse themselves. Radio buttons are intended to be only one selected. Multi-select boxes are confusing for most users. “I can select more than one item in this box? How?” We might be some serious tech junkies, but our users probably are not. Also, it usually is not the best idea to create your own form elements using JavaScript. Again, users love consistency and feeling like they know how to do something. Always think about what elements you need to get the appropriate information from the user. Stick with the simplest elements that are the most common.
Visually Impaired
Have you ever heard of the label form input? If not, you have made your forms almost useless for anyone with visual impairments. Labels can be associated with a particular form element that tells the user what the form element wants. So, if you have a textfield that wants the user’s name, you can have a label that is set to the id of the textfield that says “Name”. The impaired user can march right through your form and provide you information. Try to craft your forms for all of your possible users.
Form Focus and Tabbing
Typically, browsers handle how to tab through forms and they do a great job most of the time. However, it is sometimes a good idea to focus the first form element when the page loads or at least be the first element tabbed into by the user. Browsers guess the tab order based on the order of the HTML. So, if you do some tricky HTML Forms with floating divs or something the browser might not create the appropriate tab index. Research the “tabindex” HTML attribute to reinforce the order you would like the user to move through the form.
Forms with great usability can make or break your website. Maybe not as important as navigation, forms are probably still in the top three important parts of your website. Requiring input from the user already requires them to do work, so you should try to make the work as easy as possible for them.