In the book "Web Form Design", the author believes that "forms determine the success or failure of interactions in the most critical interface". As one of Number List the most extensive design forms in B-end products, forms have various design methods and techniques, and are also full of various uncertainties.
Today, I will summarize the design details in the form from the two dimensions of "cognition" and "interaction", hoping to help everyone.
1. Cognitive Strategies
1. Form arrangement
The main function of the form is to clearly convey information to the user. The single-column form is more convenient for users to browse the flow and help users identify and fill in the content. On the other hand, users in the form of multi-column lists have a wider range of visual lateral movement, and the efficiency of browsing and filling is lower.
For example, in the QQ mailbox settings page, the options are all in a vertical layout. Of course, this layout is ideal and matches the scene.
First of all, as a setting interface, it is not a high-frequency operation business, and users will only adjust part of the content, not the operation of the whole business. Therefore, more emphasis is placed on the viewing of information, and the vertical layout is more conducive to browsing.
Secondly, the content of the form items should not be complicated, and even if the vertical layout is adopted, the impact on the overall form length is relatively limited. In addition, with the resident button at the bottom, it has little effect on the user's operating efficiency.
In the B-side input form, the task of filling in the content itself is relatively heavy, so the overall length of the form needs to be properly controlled, so it is not advisable to blindly pursue the browsing line .
2. Input box length
1) Typesetting of input boxes
As shown in the picture below, the right picture uses a well-proportioned layout, and the left picture is more uniform. But in comparison, it seems that the verse on the right is more comfortable.
Because visually, it is easier for us to see the space and content of the right image as a harmonious whole, but the excessive alignment of the left image leads to implicit truncation, and we will feel that there is a large lack of space on the right side of the form column.
So pay attention to the overall coordination in the form, don't align for the sake of alignment.
2) Indication of the length of the input box
The length of the input box has some hints, because the user will think it corresponds to the content of the input. Especially fixed-length fields such as zip codes, phone numbers, and bank card numbers.
When designing this type of input box, a length that matches the content can be used to avoid the user's doubts about the correctness of the input content due to the length.