Written by Hirsch Fishman on March 2nd, 2009
HTML forms are always a contentious subject in web design. As a designer, whether you like them or not, forms are important to understand - especially so since how they are designed has important implications for whether they achieve your intended results.
What I’d like to talk in particular today is the subject of forms and usability. Now, I’m sure many people know some of the basics of website usability, especially if you’ve been reading this blog for awhile. If you do, you know that it is often the smallest usability quirks which can create the biggest annoyances for your visitors. There is no better example of that than HTML forms.
So if you want to know how to build better forms on your website, keep reading. I’m going to discuss some of the HTML elements that you can use when building a form on your website, and then give some tips for how those elements can be used to create a more usable form.
HTML elements for forms
When it comes to creating forms, HTML gives us web designers a variety of elements to use. Some of these are used by designers more frequently than others, but they are all useful in creating a more usable form.
So what are these elements?
- fieldset – A group of related content, used to make the form easier for users to follow.
- legend – The caption to a fieldset.
- input – The actual field that you enter information into.
- label – The description found in front of an input element – “Name” or “Phone Number”, for example.
- textarea – Like an input field, except for longer answers – “Comments”, for example.
- select – A drop-down menu used to present multiple choices for you to choose from.
- option – One of the choices contained within a drop-down menu.
- optgroup – A label used to categorize a group of choices together within a drop-down menu.
Using these elements properly – labels in particular – gets you away from using tables to lay out your form. Using the HTML elements, in combination with CSS, is the more modern way of doing things, and because you’re using less code, it means that web browsers can process and load the page much quicker.
Style form elements to improve usability
All of these form elements can be styled using CSS just like any other HTML element – which is the key to making your forms more usable. When you apply styles to these elements, what are you really doing? You’re visually separating them from the surrounding content in order to make the form appear more organized and less confusing to the user.
Whenever I create a form for someone, I try to keep the following things in mind, all of which relate to how the form is laid out and how the form elements are styled.
- Use fieldsets to group similar content together – Fieldsets can be used to separate content in your form so that it seems less lengthy and more logical to the user. The bonus is that by going from one section to another, it also gives a sense of progression as they fill out the form. In terms of styling, most often you’ll see fieldsets styled with a border and/or background color combination. Again, the goal is to visually differentiate the form from other content on the page.
- Labels should always go above the input field – Eye-mapping studies have shown that people are best able to associate labels with particular input fields when the label is above the input field. This also gives you room if your label and/or input fields in question are long(er). In that instance, they won’t appear scrunched up, which might happen otherwise if the label is to the left of the input field.
- Labels should ask for the exact information needed – If you’re looking for information in a particular format, or a particular answer, then make sure that your label says exactly what it is that you want the user to type. For example, when it comes to phone numbers, there are various ways that people type those into a form. If you’re looking for the phone number (or any information) in a particular format, then make sure that your label specifies that.
- Give the user breathing room to type - I add a few pixels of padding to my input fields so that the text isn’t crushed up against the edges of the field. This helps give the form a much cleaner and modern look to it – intangible qualities that can help give an overall positive impression of your website.
- Don’t forget to style the input fonts – Another nice touch for your form fields is to specify the font that will be used when someone types into one of your input boxes. It’s not necessary to do it, but if done right further contributes to the clean and modern appearance mentioned above.
- Color your input fields to make them stand out – By default web browsers render input fields as a white box with a black border, making them hard to notice. Giving them some color can help them stand out from the surrounding content. There are two things to keep in mind though: use colors from within your color scheme, and use colors with enough contrast against your page background.
- Show the user what input field they’re on – If you’ve colored your input fields already, you can provide even greater visual distinction by styling the particular field that the user is currently filling in. Just use “input:focus” in your CSS, and style accordingly.
- Don’t forget the submit button – I’m sure you’ve seen the standard way that most web browsers render form buttons. The look is definitely a bit outdated, so if we can do better, why shouldn’t we? How you style these all depends on the overall style of the website, but if you use a gradient background image or a color, it will do wonders to making your forms look even nicer.
Want to see examples?
Now that I’ve gone through some tips for how to style your forms, you might want to see some examples of forms that were created using some of the techniques I just mentioned.
Smashing Magazine has put together photo galleries of well-styled and innovative forms. You might find some good ideas for your website by looking through these two posts:
If you’re interested in the common practices of other designers when it comes to creating forms, Smashing Magazine also ran a design survey where they asked some well-known websites for all sorts of information how they styled and designed their forms.
Now that you know how to create forms in ways that improve their usability, what do you think? Are there some tips that I gave that you agree or disagree with? Do you do anything differently with your forms, and if so, what is it that you do? Share your comments with everyone by filling out the comment form below!