How to Design Forms in UIs

Label placement plays a key role in the usability of a form. Labels should be placed near the inputs to signify their relation visually. Above-the-input label placement makes forms feel more natural to scan and read. Plus, this sort of vertical alignment of labels and inputs better accommodates labels of varying lengths.

A simple, one-column alignment also makes it easier to transition forms to fit various screen sizes.^[1] Extremely long desktop forms can have labels placed on the left side of each field to save space. 

One-column form layouts have been shown to be considerably faster for users to complete when compared to multi-column forms. A study conducted by the Baymard Institute reveals that users are prone to skip inputs in multi-column forms, type data in the wrong fields, get confused about how to process such forms, or simply abandon them.^[2]

Multi-column forms slow users down because they have to jump back and forth between inputs, which can even cause them to lose track of their progress within the form. A single column flows naturally from top to bottom, easing the effort users must exert.

According to the principle of proximity, items that are placed near each other appear as one group and share similar attributes or functionalities.^[3] Breaking down your form into logical groups, such as personal or billing information, eases the cognitive load and helps users complete forms faster and more effectively.

Use typography tools (headings, font weight, size) and spacing to separate groups, establish a solid visual hierarchy, and make forms more scannable.

Margins refer to the space that exists between elements. They create breathing room on the page, thereby helping eliminate visual clutter. If there's not enough spacing, forms feel cramped and are hard to scan.

To determine whether a form's layout has enough spacing, ensure that related elements are close enough together while unrelated elements sit relatively far apart.

On forms, buttons are the most important interactive elements. The form completion depends on how good the button spacing is. Buttons need white space around them to make clicking (or tapping) easier and to prevent users from accidentally interacting with the wrong button. This helps avoid irreversible or dangerous actions such as accidentally clicking on “Cancel” instead of “Submit.”

If your form includes at least 3 steps, such as a checkout form or an online survey, adding a progress tracker will give users an idea of how much more of the form they have left to fill out. Breaking down forms into multiple steps or pages makes them more digestible and reduces the cognitive load required to fill them out. Besides, progress trackers assure users that the end is in sight and encourage them to move forward.

All forms require some kind of action. Primary action buttons should clearly state what will happen once users click or tap them through the primary action label. Only use generic action words like “submit” or “send” when other words could potentially confuse users.

At the same time, put yourself in the user’s shoes and finish the following sentence to come up with more descriptive labels — “I want to…” Your answer to this, which could include terms like “sign up” or “download,” will help you come up with the right label terminology.

The primary action button should be designed to actively encourage user engagement. By giving it distinctive visual weight, such as a contrasting color, size, or placement, it distinguishes itself from other form elements, including secondary actions. This not only draws attention but also entices users to click, optimizing the form's effectiveness.

Secondary buttons, such as “Cancel” or “Go Back,” play supportive roles on forms. Therefore, the secondary action style should reflect their supporting nature and not steal the show from the primary action. Using lighter or less saturated colors is a good way to make them stand out less than the primary button.