Designing Form Layout: Spacing
The following is a short extract from our book, Designing UX: Forms, written by Jessica Enders. It’s the ultimate guide to form design, a key part of effective UX design. SitePoint Premium members get access with their membership, or you can buy a copy in stores worldwide.
We can subtly communicate with the user through a few tweaks of spacing.
Human beings see things that are close to each other as being related. Conversely, things that are not related usually have some space between them.
These principles tell us to put the parts of a question—label, question-level help and answer fields—close together. Our form is pretty good for this so far, but let’s just move the labels a bit to the right, so they’re closer to their fields:
On the other hand, there needs to be some distance between each question:
Remember how the focus of a user’s vision is about nine characters wide? Well, this means question-level help that’s on the right side of a field often won’t be seen:
We could move the question-level help underneath the field, but that means users might not see it until after they’ve answered. It’s also less accessible.
The best place for question-level help is between the label and the field (as shown in the image below). Formatting instructions—like the DD MM YYYY on date of birth—should go above the field:
Other question-level help should go below the label. See the ABN, employee and marketing questions for examples of this:
Finally, when we use checkboxes and radio buttons, we need to make sure the labels are close to the right button or box. If they’re too far away, things get confusing, particularly if you aren’t shading the touch area:
Here’s an even more extreme illustration of poorly spaced labels on radio buttons:
Text Box Widths
While we’re adjusting spacing, let’s fix up our text box widths.
At the moment, aside from the text boxes for date of birth, all our text boxes are the same width:
However, the width of a text box tells the user what sort of information is needed. The user experience will be better if we make the sizes proportional to the expected information (as we have, in fact, already done with date of birth):
Note we’re talking about visual width here, not acceptable number of characters. The email address field may have a visual width as shown, but should still accept up to 256 characters.
Empty Text Boxes
Another important aspect of text box spacing is the space they have inside. This empty space is how users know they need to type something in there.
Way too many forms have text boxes that aren’t empty. The two main culprits are:
- background color
- placeholder text.
No Background Color
Do not give your fields a background color. Background color in fields makes them look like buttons (just as buttons without background color look like fields):
A simple border on four sides is enough to show users where to type:
Just make sure your border can be seen:
No Placeholder Text
Even worse than a background color is putting text inside the field. The only text that should appear inside a field is the user’s answer!
Such text, also known as placeholder text, is unfortunately far too common. Sometimes it’s the field label:
This form’s labels appear inside fields.
Sometimes it’s question-level help:
Sometimes it’s just downright useless:
It’s so important not to do this, I’m going to say it again. Never include text inside your fields. It dramatically worsens the form filling experience, as many users will:
- think the question has already been answered, triggering errors
- leave the placeholder text there, messing up your data
- not see the placeholder text before it disappears (especially if they watch the keyboard when typing)
- not be able to see all of the placeholder text, because it’s limited by the visible width of the field
- forget what the label said
- forget what the question-level help said
- find the text too small to read
- be unable to review their answers
- have greater trouble correcting errors.
Furthermore, text inside fields is often not accessible, and the placeholder attribute is not accurately supported in all browsers. (It was once the case that placeholder text was needed for accessibility, because screen readers didn’t always announce the form field. Now screen readers consistently use the
label element to indicate the purpose of a field.)
“But it saves space!” some designers will protest. That’s true. But that space is saved at the expense of being able to actually fill out the form. Don’t do it. Just put your text outside your fields.