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.

Proximity

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:

Flush right labels should be close to their fields.

On the other hand, there needs to be some distance between each question:

Questions should be far enough apart that it’s clear where one ends and the next one starts.

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:

Their focus on fields means many users won’t even see the question-level help in this form.

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.

Question-level help below the field is not especially usable or 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:

Formatting instructions positioned above the field

Other question-level help should go below the label. See the ABN, employee and marketing questions for examples of this:

Other question-level help positioned below the label.

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:

The distance between the labels “Yes” and “No” and their respective radio buttons means the user has to stop and think.

Here’s an even more extreme illustration of poorly spaced labels on radio buttons:

It’s likely that many users will give an unintended rating, given the poor spacing here.

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:

1. background color
2. 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):

On this form, background color makes fields look like buttons, and vice versa.

A simple border on four sides is enough to show users where to type:

You don’t need much to show users where their answers go.

Just make sure your border can be seen:

The field borders on this form are so light they’re nearly impossible to see.

Continue reading %Designing Form Layout: Spacing%

by Jessica Enders via SitePoint