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:
Continue reading %Designing Form Layout: Spacing%