Things to Consider when Building Forms

Posted on November 21, 2011 by Alfredo Scaini

To most people forms are a barrier which stand in the way of an end goal (to be a member of a web site, to purchase an item, to gain entry into a system). For this reason, developers should ensure that a form is kept simple and only asks what is needed to help someone achieve that end goal.

Below are just some ideas developer’s can consider when building online forms (there’s way more … to be discussed in future blog posts).

Keep Forms Minimal

Only ask for that information that is essential for a person to achieve their goal.

For example. If a person is being asked to register with your web site, just ask for what’s needed for them to do so. The person isn’t here to fill out your form – they’re here because they want to register with your web site.

As a developer, you should take the time to think from an end user’s perspective. The more questions you ask on your form, the more likely it is that people will not complete it – especially if you don’t explain why the information is needed or how it will be used.

Everyone has a different tolerance level in terms of how much they’re willing to divulge to your web site. To attract the most registrants, keep your requests down to just what’s needed to complete the task. Save asking about the extra information for a later time …

But I’d Really Like to Capture that Extra Information

Place other details which are nice to have for you, but not really needed for the person to complete their task onto another form that they can fill out at their leisure when they feel the need to provide this information.

This can either be after the initial form (i.e., immediately after they’ve successfully registered), or an option within a “Settings” or “My Profile” menu (just make sure you alert them to it).

Does it hurt your ability to data mine when you don’t ask up front? Yes, initially. However, if you provide easy access to, and great reasons why someone should fill out the extra information, people will fill it out (and fill it out honestly, not just “123 Some St.” or “555-555-5555″). Of course, you will get those individuals who will never choose to fill out this information after they’ve registered; but, these are likely the same people who would not have registered with your site to begin with.

Make it a Conversation

Structure your form as a conversation with the person whose filling it out. When a form is being read by a person they will be more receptive to filling it out if there is a connection between them and the form.

Try and use text that is more verbose to people than the plain methodology of, “use the same field name as what’s in the database table” that a lot of developers end up doing. Take some time out to think about good text if none was provided to you. If text was provided, examine the text and suggest improvements if you feel the need to.

Try it out – what appeals to you more: “Shipping Address”; or, “Enter the address where we will ship your purchase.”

The second option is way more informative and approachable. Note however that it doesn’t have to be the label text either, you can create the conversation within the legend element, or as a short paragraph above a set of labels.

Keep your text within a form clear and approachable, yet short and to the point (no one wants to read three paragraphs of explanations).

Side Note: Information Architects, the people that come up with how information is organized on the site (including forms), can’t think of everything – their human beings too. Be someone they can rely on and ask for clarification and/or offer suggestions if you see something that you’re not sure about. They’ll either agree with you, or explain it to you.

This is a win/win – it shows the architect that you’re thinking and working with them; and, if the IA doesn’t need changing, you’ve learned something you didn’t consider which builds on your knowledge base.

Break Up Big Forms into Sections or Across Multiple Pages

For really big forms, the best thing that I’ve learned is to break it up across multiple pages where on each page you give the user the option to “save and continue”, “save and quit” or just cancel. Remember, people want to achieve a task, and if you provide one long form on one page that will take them a while to fill out, then they’ll have to fill it out in one sitting which may not be possible.

Think about your action items too (your submit, reset, cancel buttons). There are typically two types of actions: primary and secondary actions.

Primary Actions are those that you want the user to perform (“Save and Continue”) while secondary actions are those that are not used as much (i.e., “Cancel” … well, at least you hope they aren’t). Keep them grouped together for easy findability, but distinguish them visually in a way that make it clear which button is the one you want users to click on.

For me, I tend to have my submit buttons look like form buttons, and my cancel buttons look like hyperlinks (beside the submit button). This provides a clear identification of what I’d like the person to click on. There are a lot of ways to do this – how you choose to do it is up to you, but try to make the distinction.

By breaking a form up into sections, you create a sense of order within the form. People are unconsciously drawn to an ordered system – it’s in our nature to find beauty and calm in patterns. By breaking your form up into logical sections you help create that pattern and give people that sense of order they need to better understand your form and how to fill it out.

Make Forms Accessible

Think about accessibility when building your forms. Use tabindex to allow for the proper navigation within a form. The tab key is used a lot when going through a form as opposed to a mouse, so make sure that tabbing through a form makes sense.

Also, make sure you use the label tag and connect it to the appropriate input tag. By doing so you create not only an association programmatically wise (for use by screen readers), but you are also creating a larger clickable area that any one with a mouse can use to put focus on the input box.

Fieldsets and legends are important as well. These help you to break up your form into logical sections. Remember, by breaking up your form into sections you help create a sense of order within your form and people like order.

Is there More?

Sure, there’s a lot more! I haven’t even touched on error handling, validation, form placement and user help within a form. I’ll try to write about these in the future.