Article introduction of Wulin.com (www.vevb.com): A brief discussion on form design in daily web design.
The input box (Input) should be logically divided into groups so that the brain can handle the relationship between large areas well. – "Authoritative HTML Guide"
Web applications always use forms to handle data entry and configuration, but not all forms are consistent. The alignment of the input area, the respective labels, operation methods, and the surrounding visual elements will more or less affect the user's behavior.
Form layout
Considering that the user should complete the form as short as possible, and the collected data are familiar to the user (such as name, address, paid information, etc.), vertically aligned labels and input boxes can be said to be the best. Each pair of tags and input boxes is aligned vertically to give a feeling of being close to both, and a consistent left alignment reduces eye movement and processing time. The user only needs to move in one direction: down.
In this layout, bolded labels are recommended, which can increase their visual weight and increase their salience. If not bold, from the user's perspective, the text of the tag and input box will be almost the same.
If the data on a form is not familiar or logically grouped (such as multiple components of an address), left-aligned tags can easily read the information of the form. Users only need to look up and down at the label on the left column without interrupting their thinking by the input box. But in this way, the distance between the label and its corresponding input box is usually lengthened by a longer label, which may affect the time to fill out the form. The user must jump back and forth to find the two corresponding tags and input boxes.
This creates an alternative solution, right-aligned layout of the tags, making the connection between the tags and the input boxes closer. However, the result is that the uneven blanks and labels on the left make it difficult for users to quickly retrieve what the form needs to be filled in. In Western countries, people are accustomed to writing from left to right, so this right-aligned layout causes dyslexia for users.
With the help of visual elements
Due to the advantages of the left-aligned layout of the label (easy to retrieve and reduce vertical height), it is tempting to correct its main disadvantages (the separation of the label and the input box).
One solution is to add background colors and split lines. Different background colors produce a column of vertical labels and a column of vertical input boxes. Each set of labels and input boxes are separated by clear horizontal lines. Although this sounds good, there are still problems.
Comparing the previous form (user's subjective visual distinction), this adds 15 visual elements: middle lines, background-colored cells, and horizontal lines. These elements divert the user's attention and make it difficult for the user to focus on important elements, such as tags and input boxes. As Edward Tufte pointed out: there are differences in information itself, which inevitably leads to sensory differences. In other words, any visual element that is useless to the layout will constantly disrupt the layout. When you try to browse the tags on the left you will find that your sight is always interrupted, stop to think about those horizontal lines, cells and background colors.
Of course this does not mean giving up background colors and lines. They are still very effective in dividing relevant area information. For example, a thin horizontal line or a light background color can be visually combined with relevant data. Background colors and lines are especially effective for the main operation buttons that distinguish the form.
Primary and secondary operations
The main operation of a form (usually submitting or saving) requires a relatively strong visual weight (in the above example, bright tones, bold fonts, background colors, etc.). This is equivalent to giving the user a prompt: you have/are about to complete the form.
When a form has multiple operations, such as continuing and returning, it is necessary to reduce the visual weight of the secondary operations. This minimizes the risk of potential operational errors for users.
Although the above content can better allow you to design forms, combining layout, visual elements and content still requires user testing and data analysis (completion evaluation, error reporting, etc.).