How to Make Forms More User Friendly

Hillary Sciscoe • November 29th, 2011

As a member of the Support Team I have seen a lot of forms. Some work better than others. This is not a question of luck as there are specific things you can do to give your respondents a better experience and increase the likelihood that the form will be completed.

Here are the take-homes in summary form (see below for more)

  • Keep pages short
  • Minimize mouse usage
  • Avoid multiple columns
  • Place labels close to fields
  • Hide what’s not necessary yet

And here’s the full explanation …

Keep Pages Short

If you have a long form, you can make it seem less overwhelming by dividing it up into page sections. This also removes the need for a lot of scrolling up and down if each page can fit in the respondent’s screen.

How do you add a page? In the Form Builder, click the “Add Section” button, and then select “Page” from the available section types. You can then drag and drop the questions to the correct page.

Minimize Mouse Usage

h_n, dob 560 sbs

When typing into a form, it is easiest to use the tab key to move from field to field, but many users do not know this. We can still help them feel less overwhelmed by eliminating the need to grab the mouse and click around.

A date field is a perfect example. We instinctively want to add separate fields for the month, day and year, perhaps in the hope of preventing typos and improving the quality of the collected data. The opposite is actually more likely. Since it’s slower to enter a date this way, respondents are more inclined to select the first values to save time: January 1st. It’s usually worth letting users type in the necessary information in a single text field instead. In the Form Builder, you can add a popup calendar to date fields to provide another way to enter a date.

Avoid Multiple Columns

It is natural to try to copy the layout of paper forms since this is what we are (still) most used to. When using paper, we have limited space and so to make full use of each sheet of paper, we use multiple columns.

With a web form however, we do not have these constraints. Multiple columns actually slow down the process of filling out a form since users are moving their eyes and mouse from one side of the screen to the other.

Place Labels Close to Fields

Another simple way to help your users is to place the labels directly above the fields rather than to the side.  Notice that in the left image below, the eyes follow a straight line down the left side of the page with labels on top but not with the image on the right.

h_fav 560 sbs

Hide Until Necessary

You may have some items that are needed for some respondents but are not for others. You can use what is called conditional questions to only show those items when needed. This option can be found in the Advanced Properties of the section in the Form Builder.

h_cond 315For example, when collecting contact information, you can ask the respondent if they have recently changed their address or phone number.  If the answer is “yes”, an additional question will collect the new contact details.

Answering “no” will take the respondent to the next relevant question. This can keep them from needing to fill out information you already have.

If you want more information about how to improve your forms and maximize your response rate, look at the “Additional Resources” section below.

The FormAssembly team is always working to improve your user experience. We love to hear about how you use FormAssembly and features that you would like to see added in the future. Visit our User Voice Forum, hit us up on Twitter or send us an email.

Some Additional Resources

For more about how to improve the content of your forms see Getting the most out of your forms: Writing compelling forms

For more about how to make your forms user-friendly see  Getting the most out of your forms: Usability Part 1 – in particular the section entitled “Only display necessary information and Use conditionals to your advantage”

For more about how to choose the best format and design for your form see  Getting the most out of your forms: Usability Part 2 – in particular the following sections “Choose the correct input format,” “Use default values when possible,” and “Create meaningful partitions.”

And for some additional things you can do to ensure good responses see:

Getting the most out of your forms: A few more thoughts