On form Design in Web page making

Design | Web page

The input box should be logically divided into groups so that the brain can handle the relationship between the large heaps of regions well. "– The HTML authoritative guide"

Web applications always use forms to process data entry and configuration, but not all forms remain consistent. The alignment of the input area, the respective label (label), mode of operation, and the surrounding visual elements will affect the user's behavior more or less.

Form layout

Considering that the user should be able to complete the form as short as possible, and the collected data are familiar to the user (such as name, address, billing information, etc.), vertical alignment of the label and the input box can be said to be the best. The vertical alignment of each pair of labels and input boxes gives a sense of closeness, and consistent left alignment reduces eye movement and processing time. The user only needs to move in one Direction:

In this layout, the use of bold labels is recommended, which can increase their visual weight and increase their visibility. If not bold, from the user's point of view, the label and the text of the input box is almost the same.

If the data on a form is not familiar or logically grouped (such as multiple parts of an address), a left-aligned label can easily browse through the information in the form. Users only need to look up and down to the left side of the label on it, and will not be interrupted by the input box ideas. As a result, the distance between the label and its corresponding input box is usually elongated by longer labels, which may affect the time it is to fill out the form. Users must jump around and back to find two corresponding labels and input boxes.

An alternative scenario is created, with the label aligned to the right, making the link between the label and the input box tighter. The result, however, is that the ragged margins and labels on the left make it difficult for users to quickly retrieve what the form wants to fill out. In Western countries, people are accustomed to writing from left to right, so this right-aligned layout creates dyslexia for users.

With the help of visual elements

Because of the benefits of the label left align layout (easy to retrieve and reduce the vertical height), it is tempting to try to correct its main disadvantage (separation of labels and input boxes).

One solution is to add a background color and a split line, and a different background color produces a column of vertical labels and a column of vertical input boxes, with each set of labels and input boxes separated by clear horizontal lines. Although this sounds good, there are still problems.

Comparing the previous form (the user's subjective visual distinction), this adds 15 visual elements: The middle line, a cell with a background color, and horizontal lines. These elements shift the user's gaze, making it difficult for users to focus on important elements such as tags and input boxes. As Edward Tufte points out: "There is a difference in the information itself, which inevitably produces sensory differences." "In other words, any visual element that is useless to the layout will constantly disrupt the layout." When you try to browse to the left side of the tag you can see that your eyes are always interrupted, stopping to think about the horizontal line, cell, and background color.

Of course this does not mean giving up background colors and lines. They are useful for dividing the relevant area information. such as a thin horizontal line or a shallow background color, can be visually combined with the relevant data. Background colors and lines are especially effective for distinguishing the primary action buttons of a form.

Primary and secondary operation

The primary operation of a form (usually "submit" or "save") requires a stronger visual weight (in the example above, a lighter tone, coarse font, background color, and so on). This is equivalent to giving the user a hint: You have/are about to finish filling out the form.

When a form has multiple operations, such as "continue" and "return", it is necessary to mitigate the visual weight of secondary operations. This minimizes the risk of user potential operational errors.

While the above content allows you to design your form, the combination layout, visual elements, and content still require user testing and data analysis (completion evaluation, error reporting, etc.).

Junchen translation from Lukew ' s functioning Form