Imagine you had to fill out this form:
When looking at the form, you may hesistate for a second, because it's not immediately obvious what information to enter in each field.
From our research studies, we've learned that even the slightest moment of hesitation when completing a form can significantly hurt the form’s response rate (that is, the number of people who complete the form).
Forms are just a means to an end. Users should be able to complete forms quickly and without confusion. The following two tips show how using white space effectively will help reduce users' response time and the effort spent to determine what information is required where.
Tip #1: Place the label closer to the associated text field than to other text fields.
In the form above, the spacing between the label and the corresponding field makes it difficult to determine what to enter where. We often see this mistake in form design. Just remember this principle: items near each other appear related.
As you can see below, by placing the field labels close to the corresponding fields, we’ve increased your confidence in filling out each element.
This principle of placing related items closer to each other isn't new; it's actually the Law of Proximity from Gestalt psychology. Gestalt psychologists were concerned with how and why the brain perceives an object as a whole rather than as a sum of individual parts. They came up with a several laws explaining how people organize visual information; the Law of Proximity was one of these.
In the next image, how many groups do you see?
Instead of seeing 20 individual dots, we see two groups: one of 12 dots and one of 8. This is a shortcut our brain takes when processing visual information and is in fact another example of the Law of Proximity. Based on the same Gestalt principle, users might overlook other interface elements if they are placed too far from the object they act on.
Tip #2: Group together related fields.
Long forms, with many fields, can feel overwhelming. Grouping related fields together helps users make sense of the information that they must fill in. For example, the name and the date of birth could be Personal Information, while the address and the phone number could form the group Contact Information.
Here’s what Tip #2 looks like in practice: Compare the signup form from Walgreens on the left to our version on the right.
The recreated Walgreens.com registration form (right) is easier to complete than the original (left) because related fields are grouped together, making it seem like 3 short forms.
Increasing the white space between form elements makes this 15-field form less overwhelming and therefore more likely to be completed. Users now see a 3-part form with 4–6 fields. You don’t need group headings, but they can help provide context.
A Note on Label Alignment
In the Walgreens example above, the field labels are correctly placed close to the text fields; however, the right-aligned labels make it more difficult to scan the form, for the same reasons for which right-aligned menu items impede scannability.
We recommend placing field labels above the corresponding text fields. Although this increases the form's overall length, it makes the form easier to scan, because users can see the text field in the same fixation as the label. Top placement also allows for longer field labels, as horizontal space isn't an issue.
If form length is a concern, you can place field labels to the left of the text fields. However, make sure that labels are of similar length and are placed as close to the text fields as possible. If the labels are too far to the left, it can be difficult to associate the correct label with its corresponding field, as in the following donation form from the San Diego Zoo. (More about design for online donations.)
It is difficult to determine what information to enter in each field on the San Diego Zoo donation form, because field labels are placed too far from the corresponding text field.
You might be wondering, "if proximity is such a problem, then why not place the labels inside the text fields?". Don't be tempted. When you place the labels inside the text field as filler text, the label disappears when users input their text and they must remember it as they fill in the field. This especially causes an issue if users use the Tab key to move through a form. When they tab to the next field without looking, they will miss what information is required. Also, users are drawn to open text fields; they might mistake the filler text as a default answer and skip that form element.
Conclusion
Users can be hesitant to fill out forms online, so you want to make this process as easy as possible. Minor changes — such as using white space effectively to group related fields and indicating what information goes in each field — can significantly increase form usability.
