B-end products always need to input, manage and maintain all kinds of data… As the basic component of carrying information, form is one of the elements with the highest frequency. Seemingly simple, basic pieces have a lot of details to work with when put together.

These days when you’re doing data-entry design, you’re often confused about whether tags should be aligned left or right, whether buttons should be aligned left or right, whether pages should have the same layout for uniformity, and so on.

In order to find the best possible design solution, I read the share of many designers and did some research.

Although far from being “proficient”, I have gained some experience. Therefore, I summarize the composition of form elements and applicable scenarios and write this essay, hoping to be helpful to my friends who are also doing toB product design.

Form elements

A form consists of four important elements: labels, input fields, action buttons, and help information.

The label

The label is used to explain the meaning of the input item. Users will enter the corresponding content according to the label. The content should not be too long and should be concise for users to understand quickly.

There are four common presentation forms for form labels: top alignment, left alignment, right alignment, and in-form alignment.

Top alignment

The label is positioned above the input box and aligned to the left.

Advantages: When there are few fields on the page, the label is close to the input field, which keeps the eye horizontally focused on a small area.

Users can move their eyes from labels to input fields more quickly, which can be done faster and reduce cognitive load.

At the same time, the label occupies a single line, not affected by the length, more suitable for product internationalization.

Disadvantages: Label plus input box style, large vertical space. When there are too many forms, the page becomes too long and the user becomes tired. Screen utilization is reduced, suitable for forms with fewer fields.

The left

Labels and input boxes are displayed side by side and all labels are aligned left.

Advantages: Occupies less vertical space and is easy to read when the label content is unfamiliar, so that users can easily perceive the connection between the label and the input field.

Disadvantages: Due to different label lengths, left-aligned labels may be far away from the input field, requiring more horizontal space. The blank edges between labels and input fields are inconsistent, making it difficult for users to fill in.

Align right

Labels and input boxes are displayed side by side and all labels are right-aligned.

Advantages: Occupies less vertical space, and the distance between labels and input fields is consistent, which is convenient for users to fill in.

Disadvantages: Because the length of the tag is different, the left margin is inconsistent, which reduces the user’s readability.

In-form alignment

The label is displayed inside the input box.

Advantages: Space saving, not affected by vertical space, label length, both horizontal and vertical space saving. Perfect for familiar fields and easy to fill in.

Disadvantages: Internal labels are hidden after the user enters characters, which is not suitable for long or complex forms and is not conducive to form completion.

Form fields

Form field is the core of form and the core interactive part of inputting information. In order to facilitate the entry of different information, different interactive components are usually used.

For example: text boxes, radio buttons, check boxes, drop-down menus, list boxes. For specific components, check out Ant Design, ElementUI, Material Design.

Action buttons

Usually, forms have a submit action: click the form button and the form information is entered. And the operation action, usually divided into main button and auxiliary button.

Common form buttons are Save, Submit, OK, login… These buttons that are essential to completing the form are called primary buttons.

Other buttons, such as preview, reset, undo, etc. that are not required to complete the form, are called auxiliary buttons.

In order to make the user focus and complete the task quickly, the main task action is usually the main button, the secondary task action 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. Help information is divided into:

Input prompt: in the input box, drop – down box, to help users more concretely understand what information to input.

Help tip: It is not usually necessary for the user to fill out the form, so it makes sense to appear only when the user needs it. Otherwise, too much help can be distracting.

The icon and text link of help information are generally placed before/after the label, and the pop-up window or tips of help information will appear by clicking the/mouse hover button.

Error message: The data entered by the user does not meet the requirements. You need to help the user understand what is wrong and what is correct.

conclusion

The frequency with which forms components appear in toB products makes their user experience critical to a toB product.

Good user experience can make users easily and joyfully understand the form logic, quickly complete the input of form information, and make the process of using the product more smooth.

Of course, these are the basics of form design. In the actual form design, the items that need to be filled in by the user can be many and complex. It is also more difficult to find forms that are more recognizable and understandable to users.

According to different scenes, how to classify and combine to display richer information by means of disassembly, combination and subtraction; How to shrink non-essential fields; How to find more relevant fields and classify information…… These are more advanced design techniques.

Check us out for more advanced gameplay in form UI/UE design

Read more “toB Product Design” experience sharing and best practices… Follow the Nuggets at @ligaai

To learn more about our products, please visit [LigaAI – A new generation of intelligent R&D management platform](www.ligai.cn/?