• Find Addicott Web on Facebook
  • Follow Addicott Web on Twitter
  • Connect with Addicott Web on LinkedIn

Styling Your Forms to Improve Usability

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.

Thoughts?

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!

About Hirsch Fishman

Hirsch Fishman is the owner of Addicott Web and is a professional web designer who specializes in building Wordpress websites for small businesses and organizations. Originally from upstate New York, he has lived in New York City and Chicago, and currently resides in Raleigh, NC.

9 thoughts on “Styling Your Forms to Improve Usability

  1. John

    Fieldsets and labels are things that I ALWAYS overlook to add. I suppose I just never found the usefulness for them. Maybe I should reconsider?

    Reply
    1. Addicott Web Post author

      Fieldsets are definitely worth reconsidering, but I think this is a better way of saying it: you should know about them so that you know when they might be useful to you.

      Like I wrote, I think they can be particularly handy when you have a longer form and you want to break it up into smaller units to make it more organized for the user. You don’t have to use a fieldset for every form you have, and even if you do use one, you don’t necessarily have to style it. For example, this comment form is wrapped in a fieldset, but you wouldn’t know it unless you looked in the code.

      Regarding labels, those are definitely something worth considering and using more often. I’ve only begun to use them recently myself, but if you’re into making your code as semantic as possible, they are definitely the way to go.

      Reply
  2. Caroline Jarrett

    Very nice – good advice, particularly “Give the user breathing room to type”, a courteous touch that is often forgotten. How many times have I seen sillinesses like a box intended for an email address that is way too small for many typical addresses.

    Caroline Jarrett,
    “Forms that work: Designing web forms for usability” – foreword by Steve Krug.

    Reply
    1. Addicott Web Post author

      Thanks for commenting, Caroline! I looked at your website and I’m glad that someone of your expertise not only commented, but liked what I wrote!

      Regarding the “breathing room” you mentioned – I think adding the small touches such as padding help us move away from forms as they used to look (boring, unstyled, etc.) towards the point where forms truly look like they belong on a website.

      As I looked through some of the design galleries that I linked to, I was glad to see that so many designers were giving forms serious consideration. I know they can often go overlooked, despite the knowledge that how they are designed and laid out does have some big usability implications.

      Reply
    1. Addicott Web Post author

      Thanks for bringing that up Rob – that’s a great point. I had mentioned it briefly in my post, but it’s kind of buried within one of the lists, so I can see how it’s difficult to find.

      In any case, after I wrote this post I restyled my comments form, and included an “input:focus” style in my stylesheet. You probably noticed it in action when you filled out the comments form earlier. It’s definitely something that I’m going to start incorporating as standard practice in all of my designs though.

      On a somewhat related note, what do you think of having the cursor automatically appear in the first form field when the page loads? I’ve seen varying viewpoints about the topic, but I’m curious what you think of it from the usability standpoint.

      Reply
  3. Craig Sullivan

    Hi,

    I’ve done quite a few hundred hours testing (a lot with forms) and I’ve rarely seen people notice the focus set to the first form. However, when I have had it set, it hasn’t interfered so it doesn’t do any *harm* and probably a *little* benefit for some advanced users.

    One comment on breathing room – even input fields with expected value lengths should be slightly larger – try to imagine either one or more keyboard slips, formatting additions (e.g. +()- in phone numbers) or spaces and increase accordingly. I’ve seen a lot of people mangle fields due to the size being spot on, but with no room for error whatsoever.

    Reply
    1. Addicott Web Post author

      That’s an excellent point about breathing room, Craig. I agree that the general rule of thumb should be to never set the length of an input field so short so that when someone is filling it out, they can’t see what they entered in its entirety without having to scroll over. When designers do that, they’re just setting whomever up for problems down the road.

      Reply
  4. Craig Sullivan

    I often see this when analysing search results – things like

    hhotels in antigua
    arartichokes in olive oil

    Where fields are ‘corrected’ because part of the form entry has scrolled off to the left. One of the inclinations is to retype the ‘missing’ piece with these consequences. The general rule of thumb is good but beware of user supplied formats that may exceed your expected length.

    Reply
Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Categories

Archives