Layout: How you organize and structure the form.
View this email in your browser

User Friendly Forms

Lesson 3: Layout



Welcome back to User Friendly Forms! If you missed the other emails, you can catch up with Lesson 1 and Lesson 2.

Today, we'll discuss layout and structure. How you organize your form can significantly impact your conversion rate. In general, you should:
  • Include white space
  • Get rid of clutter
  • Avoid columns*
  • Group related fields together
  • Split a long form into multiple pages
Online forms are very different from paper forms. You're not constricted by the size of the paper sheet, so there's no need to squeeze in all the fields in order to save space. You have a lot of room for flexibility. Maximizing white space and minimizing clutter makes for a simpler, cleaner form. That's why it's best to avoid multiple columns (with a couple exceptions, such as First Name / Last Name).

You want the clearest path to completion. With one column, the fields follow a straight line down, from top to bottom. With multiple columns, your respondents have to zig-zag from left to right (or right to left) and top to bottom, which takes extra mental effort.

If your form has a lot of fields, breaking them up into sections makes it less overwhelming and easier to understand. Think of it like a book with paragraphs and chapters, organized in a linear direction and with a natural flow. 


Field Types

Fields, or questions, are what make up your form. For the most effective form:
  • Choose the best field type
  • Be consistent with your fields
The field type depends on what kind of data you need. For example, if you want to limit the answers to a handful of options, you should use a multiple-choice field such as checkboxes. If you need an open-ended answer, you can use a text input.

Some field types may seem interchangeable, but keep in mind that there's at least one significant difference between all field types.

  • Example: Radio buttons and checkboxes are both multiple-choice fields, but respondents can choose only one option with radio buttons, while checkboxes let them choose multiple options.
  • Example: You pick only one answer with both radio buttons and drop-down menus. But radio buttons immediately show all options, while a drop-down menu shows only one option until it's clicked. Radio buttons are better for 5 options or fewer, and drop-down menus are useful if you have more than 4 or 5 options.

Some field types use special formatting, like a date field with a pop-up calendar. Calendars can be helpful for picking a date, but not always. For instance, it's easier for people to type in their birthdate rather than click through a calendar or even a long drop-down menu.

Consistency is essential for your form fields. If you show multiple choice options in a vertical list for one field, then switch to a horizontal list for another field, it's disorienting for your respondents.


To optimize accessibility and usability, you can:
  • Align your fields in a single vertical column
  • Place labels above fields
  • Place hints below fields
  • Keep hints visible
Vertical alignment is best because it clearly shows the path respondents should follow. It minimizes guesswork and meandering, gives fields the most room, allows for the quickest movement of the eyes, and speeds up form completion time.

It's also ideal for mobile access, because respondents can see the labels and hints at all times, without the frustrations of extensive zooming and tapping.


Input Length

Text input fields need to:
  • Approximate the length of an answer
Are all the input fields in your form identical in length? They shouldn't be, even if that makes them look pretty. Instead, you should match your input fields to the length of the expected answers. That way, it's easy for people to guess how long an answer should be, and fill in the blank accordingly.

For example, a Year field should be 4 characters long.


Required Fields

Required fields can be frustrating, but here's what you can do to make it easier:
  • Keep required fields to a minimum
  • Mark clearly which fields are required (or optional)
  • Be consistent
Don't require every field, unless all the information is absolutely necessary. The more you ask from a respondent, the more likely it is that people will drop out.

It's common to mark required fields with an asterisk * or (Required) text. If there are fewer optional fields than required fields, you can also mark (Optional).

It's not a good idea to use non-standard symbols to mark the fields, because people can misinterpret them or spend too long trying to figure out what they are.


Further Reading

Want more on organization and best practices? Check out these resources:

âžœ  The Definitive Guide to Form Label Positioning details the advantages and disadvantages of different form label positions.

Alignment examines field alignment, text alignment, plus much more.

âžœ  7 Best Practices for Web Form Design offers tips to improve conversion, including visual cues you can use to catch people's attention.

âžœ  Bad Forms looks at specific components of bad forms, breaks down why they're bad, and explains best practices.

Up Next

Join us this Thursday, November 20, at 2 PM EST, where we'll show you how to use FormAssembly to build better forms and make 'em user friendly. Check your email for the webinar link.

Thanks for reading!  

Copyright © 2014 FormAssembly, All rights reserved.

unsubscribe from this list    update subscription preferences