B-side products always need to input, manage and maintain all kinds of data… Among them, form, as a basic component carrying information, is one of the most frequent elements. Seemingly simple and basic pieces, there are a lot of details to be considered together.
When designing for data entry these days, there’s a lot of confusion about whether labels should be left aligned or right aligned, whether buttons should be left aligned or right aligned, whether pages should have the same layout for uniformity, and so on.
In order to find the best possible design solution, I read a lot of designers’ shares and did some research.
Although I am far from “proficient”, I still have some experience, so I summarize the composition of the form elements and the applicable scenarios, and write this short article, hoping to be helpful to the friends who are also doing TOB product design.
Form elements
A form consists of four important elements: the label, the input field, the action button, and the help information.
The label
The label is mainly to explain the meaning of the input item, and the user will input the corresponding content according to the label. Generally, it should not be too long, and it needs to be concise and clear, so that the user can understand it quickly.
There are four common forms of form labels, which are top aligned, left aligned, right aligned, and in-form aligned.
Top alignment
The label is placed above the input box and is left aligned with the input box.
Advantages: Labels close to the input field when there are few fields on the page. This keeps the eye horizontally focused on a small area.
The user’s eyes can move faster from the label to the input field, which can be done quickly and with less cognitive burden.
At the same time, the label occupies a single line, which is not affected by the length, and is more suitable for the internationalization of products.
Disadvantages: label and input box style, take up more vertical space. When there are too many forms, the page becomes too long, which can make users feel tired. Screen utilization is reduced for forms with fewer fields.
The left
Labels and input fields are displayed side by side, and all labels are left aligned.
Advantages: takes up less vertical space. Left alignment is easy to read when the label content is unfamiliar, making the connection between the label and the input box easier to feel.
Disadvantages: because of the different length of the labels, the left alignment will cause some of the labels to be far away from the input box, requiring more horizontal space. The blank edge between the label and the input box is inconsistent, which is not conducive to the user to fill in.
Align right
Labels and input fields are displayed side by side, and all labels are right-aligned.
advantages: Take up less vertical space, label and input box distance is consistent, convenient for users to fill in.
Cons: Because the length of the label is different, the left margin is inconsistent, which reduces the readability of the user.
In-form alignment
Labels are displayed inside the input box.
Advantages: save space, not affected by vertical space and label length, save both horizontal and vertical space. It is very suitable for use in fields familiar to users and is convenient for users to fill in.
Disadvantages: After the user enters the character, the internal label will be hidden, not suitable for longer or more complex forms, not conducive to the completion of the form.
Form fields
The form field is the core of the form and the core interactive part of input information. In order to facilitate the entry of different information, different interaction components are usually used.
For example: text box, radio button, check box, drop-down menu, list box. For specific components, you can check Ant Design, ElementUI official website, Material Design.
Action buttons
Typically, a form will have a submit action: click the form button, and the entry of the form information is complete. And the operation action, is usually divided into the main button and auxiliary button.
Common form buttons are Save, Submit, OK, Login… These buttons, which are necessary to complete a form, are called main buttons.
Other buttons, such as Preview, Reset, Undo, etc. that are not necessary to complete a form are called auxiliary buttons.
In order to focus the user’s vision and complete the task quickly, the main task operation is usually the main button, the secondary task operation is the secondary button, and there is usually only one main button in a scene.
Help information
Help information is used to assist users to input content information, help information is divided into:
Input prompt: in the input box, drop-down box, help users more concrete understanding of the need to input what information.
Help Tips: Information is usually not required for the user to fill out a form, so it only makes sense when the user asks for it. Otherwise, too much help can be distracting.
The icon and text link of the help information are generally placed before/after the label. Click the/mouse hover button to appear the pop-up window or Tips of the help information.
Error: The user entered data that did not meet the requirements. You need to help the user understand what went wrong and how to do it right.
conclusion
The frequency with which form components appear in TOB products makes their user experience critical to a TOB product.
A good user experience can make users easily and joyfully understand the form logic, quickly complete the input of form information, and also make the use process of the product more smooth.
Of course, this is the basics of form design. In a real form design, the number of items that users need to fill out can be many and complex. It is also more difficult to find a form design that is more consistent with the user’s perception and easier to understand.
According to different scenes, how to classify and combine to display richer information by disassembling, combining and subtracting; How to reduce unnecessary fields; How to find more relevant fields for information categorization… These are more advanced design techniques.
Follow us to learn more about advanced gameplay in form UI/UE design
Read more about “product design” experiences and best practices…
Follow my Sifl account
@LigaAIContinue to receive more dry goods to share ~
To learn more about our products, please visit
LIGAAI – A new generation of intelligent R&D management platform