Assume you and your friend are driving to an eatery for a dinner meeting from different directions. The routes from which both of you are coming are equal in length and have two lanes each. The only difference is that all the slow vehicles from your way are following the rule by using one lane. Therefore, you can drive past each other. On the other hand, the route used by your friend has all the slow cars dispersed throughout the two lanes. So, your friend can wind in and out throughout the highway. The question is, who will arrive at the eatery first?

Vertical Path to Form Completion

Travelling in a straight and clear way makes the fastest driving option. This is the same case with form filling. All you have to do now is align your form fields with the primary action button vertically. This way, you will have created a clear, straight, and vertical path for form completion. The advantage of a vertical path for completion is that form-filling becomes tidier, faster, and straight-forward.

Read on for details on the interspaces between various fields and their labels.

Avoid Squeezing Questions Next to Each Other

Since forms structured with a vertical path to completion are lengthy, you may be convinced to have questions put together in sequence.

For instance, in the form above, questions for the Postal Code and Security Code are squeezed next to other questions in a sequence.

Here is why putting questions next to each other is not a good idea;

• It interferes with the steady flow of form filling. This can be compared to a car breakdown along the lane used by fast-moving vehicles.

• Users may miss all the questions squeezed on the right, as such questions are inconsistent with their vision’s focus. Ideally, the visual field of a human eye is limited to nine characters.

• It disrupts the seamlessness of a form on big and small screens.

Notably, what matters most to users is the perceived form length and not the actual length. Using the vertical path to completion for form filling is also perceived to be faster, even when it is actually faster.

Answer Field Alignment

Answer fields are a great way to save on space. Consider the following answer fields for the highlighted marketing question.

*Question and Answer Fields*

For small answer fields (not more than 3 options), horizontal alignment is recommended. The good thing with this is that the form will still be functional on mini-screens. Consider the same marketing question with horizontally-aligned answer fields.

*Question and Answer Fields*

Another example of queries with small answer fields is the Date of Birth question. You may not even notice that the answer fields are all in a row.

*DoB Question and Answer Fields*

However, keep in mind that horizontal alignment of answer fields only applies to small answers. This may never work for a varying application. Using horizontally-aligned answer fields for questions with plenty of answer questions, such as social networking, may not work. Such answers are likely to go off-edge, especially on mini-screens like mobile screens. In fact, long answer fields may invoke the horizontal scrollbar, impacting the flow of the form even on large screens.

It works better to have long answer fields slotted in a single vertical list.

For extensive checkboxes or radio buttons also, consider using the vertical alignment method. The advantage of such a design is that it also functions on mobile.

Label Placement

From some of our examples above, it is clear that the mobile outlook of our forms is not quite appealing. The label correlating with the text box is unclear on a mini screen, especially when focusing on the answer fields. Here is an example;

The labels on the left-hand side cease to be visible immediately the user starts filling form. This issue can be managed by stacking up the labels on top of the answer fields. However, this move initiates another problem: the length of the form increases visually.

Here is the view of such a form on a big screen.

Stacking up the labels on top of the answer fields lengthens the form. However, you can solve the problem by making a code that enhances the functionality of the form. The code should push the labels to the left for large screens and move the labels above the answer fields for small screens. This makes it easy for you to leverage the space on big screens while the form remains responsive on small screens.

Here is an example of how our sample form would like on a small screen after using a code:

On a small screen, the labels are stack up on the answer fields. Therefore, the labels are clear any time users are filling the form.

Here is how the same form would look on a big screen;

Take a look at the following label placement examples from the real world, both on small and big screens.

The labels are placed to the left of the answer fields for big screens. This makes the view brief and appealing.

 

The labels are stack on top of the fields for mini-screens.

What About the Eye-tracking Study?

Matteo Penzo’s eye-tracking study has become quite popular. According to the survey, labels should never be placed to the left of answer fields. However, you can never make conclusions from one study, especially when it comes to design decisions. The fact that the study is analysed using a concealed methodology and has minute variations in results makes it even more unreliable. On the contrary, you must consider the merits and demerits of a study on the theoretical and observational grounds of user research. With these considerations, it is valid that the advantages of aligning labels to the left of the fields exceed the costs.

Preventing the Gutter

You can employ two more techniques to enhance the usability of a form when the labels are aligned to the left of the fields. These methods help avoid the gutter formed between labels and answer fields on a screen.

 

As per the example above, there is a vast gap between the labels and their correlated answer fields.

• Short labels – Flush to the Right

For shorter labels, push them to the right so they are in close proximity with their fields. Here is an example:

 

• Long Labels – Add Zebra Striping

For more extended labels, enhance the form with a zebra striping.

 

A zebra striping is a shade faintly added at the background of every second label. This makes it easy for users to connect answer fields with their labels.

Primary Action Button Alignment

1. Single-step Forms

When there is only one main button on the page, enhance high-speed completion by aligning the button with all the answer fields.

 

2. Multistep Forms

You must provide users with multiple buttons for a steady flow where you have more than one phase of form filling. One way of doing this is by aligning the ‘Next’ button with the fields on each page.

 

Alternatively, you can add ‘Previous’ and ‘Next’ buttons on the left and right sides of each page, respectively.

Button Alignment on Mobile

You can code your buttons for responsiveness on smaller screens. This is to allow for;

• Stacking up of action buttons, with the main one on the top.

• Leverage the space on the screen, leaving a small white space on one side to clarify the buttons.