Designing Form Layout: Alignment

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.

You and a friend are each driving to a restaurant for dinner. Both of your routes go down a highway with two lanes. The highways are the same length. On your route, all the slow cars are doing the right thing and sticking to one lane, so you can whizz past in the other. On your friend’s route, the slow cars are scattered across both lanes of the highway, so she has to weave in and out. Which one of you will get to the restaurant first?

Vertical Path to Completion

A straight, unobstructed route is fastest for driving, and also for form filling. So your next step is to vertically line up all your form fields, as well as the main button on the page (called the primary action button):

Now you’ve created a straight, unobstructed, vertical path to completion. Not only have you made it faster for your form to be filled out, it looks neater and simpler too. (We’ll talk about the distance between some fields and their labels shortly.)

Don’t Put Questions Beside Each Other

Because a vertical path to completion makes a form longer, you may be tempted to squeeze some questions next to each other:

In this form, the Security Code and Postal Code questions have been put beside other questions

This is a bad idea, for the following reasons:

• It interrupts the smooth flow through the form (like a broken down car in your fast lane).
• Users will often not see the question on the right-hand side, because it’s outside the focus of their vision (this is only about nine characters wide).
• It prevents the form from working seamlessly on both large and small screens. (More on this shortly.)

Also, as you may recall from Chapter 3, for users it’s the perceived length of the form, not the actual length, that matters. The vertical path to completion makes form filling not only objectively faster, but it makes it feel fast.

Aligning Answer Fields

One way you can sometimes save space, however, is with answer fields. Look at the answer fields for the marketing consent question:

Whenever the answer fields are small, we can put them horizontally. (For this purpose we define “small” as three or fewer options, all with short labels.) The form will still work for touch, and on small screens. Marketing consent is just such a question:

In fact, date of birth is also a question with small answer fields. You may not have realized we’ve already put them on one line:

But remember: you can only put answer fields beside each other if they’re small. Otherwise, the design won’t work in some cases. Social networking, for instance, has quite a large number of answer options. If we try to put them horizontally, they’ll go off the edge—especially on mobile—and invoke the dreaded horizontal scrollbar:

If we position a long set of answer fields horizontally, we’re likely to conjure the horizontal scrollbar, even on larger screens

If our answer fields aren’t small, it’s even more likely we’ll cause the horizontal scrollbar to appear on mobile.

Assuming we can’t build a custom widget, it’s better to leave these as a single vertical list:

Larger sets of radio buttons or checkboxes should be vertically aligned.

Vertical alignment of sets of radio buttons or checkboxes works on mobile too.

Label Placement

There’s a problem with the mobile view of our form, which you may have noticed from some of the illustrations above. On a small screen, when the focus is in a text box, the corresponding label isn’t visible, just like this example:

Continue reading %Designing Form Layout: Alignment%

by Jessica Enders via SitePoint