Summary of Form Design Techniques in Web Design

“Inputs should be divided into logical groups so that the brain can process the relationships between the large number of areas.” – The Definitive Guide to HTML

Web applications have always utilized forms to handle data entry and configuration, but not all forms are created equal. The alignment of the input area, its label, the operation method, and the surrounding visual elements will more or less affect user behavior.

Form layout

Considering that the time it takes for users to complete a form should be as short as possible, and the data collected is familiar to users (such as name, address, payment information, etc.), vertically aligned labels and input fields are arguably the best. The vertical alignment of each label and input box pair gives a sense of proximity, and the consistent left alignment reduces eye movement and processing time. Users only need to move in one direction: down.

In this layout, it is recommended to use bold labels, which can increase their visual weight and improve their prominence. Without the bold text, the label and the text in the input box would be almost identical from the user's perspective.

If the data on a form is unfamiliar or difficult to group logically (such as the multiple components of an address), left-aligned labels can make it easy to scan the form's information. Users only need to look up and down at the labels in the left column without being interrupted by the input box. However, in this case, the distance between the label and its corresponding input box will usually be lengthened by the longer label, which may affect the time to fill in the form. Users must move their eyes back and forth to find the two corresponding labels and input boxes.

So an alternative solution was created, which is to right-align the label so that the connection between the label and the input box is closer. However, the result is that the jagged whitespace and labels on the left make it difficult for users to quickly retrieve the content of the form. In Western countries, people are accustomed to writing from left to right, so this right-aligned layout causes reading difficulties for users.

With visual elements

Because of the advantages of the "left-aligned label layout" (easy to search and reduced vertical height), it's tempting to try to correct its main disadvantage (the separation of the label and the input field).

One solution is to add background colors and dividing lines. Different background colors create a column of vertical labels and a column of vertical input boxes. Each group of labels and input boxes is separated by a clear horizontal line. While this sounds good, there are still problems.

Compared with the previous form (user’s subjective visual distinction), this adds 15 visual elements: the center line, cells with background color, and horizontal lines. These elements will divert the user's attention and make it difficult for the user to focus on important elements, such as labels and input boxes. As Edward Tufte points out, “Differentiation of information necessarily produces different perceptions.” In other words, any visual element that does not contribute to the layout will constantly disrupt it. As you try to scan the tabs on the left, your eye is constantly interrupted, stopping to think about the horizontal lines, cells, and background colors.

Of course this doesn't mean giving up background colors and lines. They are still very effective in partitioning related area information. For example, a thin horizontal line or a light background color can visually group related data. Background colors and lines are particularly effective in distinguishing the primary action buttons of a form.

Primary and secondary operations

A form’s primary action (usually “Submit” or “Save”) needs a strong visual weight (in the example above, bright colors, bold fonts, background colors, etc.). This is equivalent to giving users a hint that they have/are about to finish filling out the form.

When a form has multiple actions, such as “Continue” and “Back,” it makes sense to reduce the visual weight of the secondary actions. This minimizes the risk of potential operating errors by the user.

Although the above content can help you design forms better, the combination of layout, visual elements and content still needs to be tested by users and data analysis (completion evaluation, error reporting, etc.).