How to Design User-Friendly Forms: Best Practices and Validation Strategies

Preface

Forms are a common way to add or record information, and designing them well is a must‑have skill for B‑side designers. Although some colleagues think forms are just a few input fields and components, the simplicity of a form often hides many design considerations, making good form design challenging.

Most people dislike filling out forms. For example, when asked to complete a survey, many start but abandon it after a while. Designers should therefore design forms "from the inside out" to make them more acceptable to users.

1. What Is a Form?

A form is a page type used for information entry, acting as a bridge between the user and the database. It guides users to fill in information and submit data to the backend, while also validating and providing feedback to ensure completeness.

Because many users find forms tedious, the primary goal of form design is to enable quick and easy completion while meeting system and user requirements.

2. How to Design a Form

2.1 Form Splitting

A basic form consists of six elements:

Label: Explains the meaning of the input field, should be concise, and indicates required fields.

Placeholder: Weak hint text displayed inside the input field that disappears when the user types.

Validation: Checks the input and provides feedback (e.g., missing input, format error).

Basic Components: Interactive input areas such as text fields, single/multiple choice boxes, upload controls, date pickers, switches, etc.

Hint: Describes the required input type, such as allowed file types.

Button: Submits the form or proceeds to the next step; if the form exceeds one screen, the button should be fixed at the bottom.

When creating a form, designers should ask:

What type of element is this?

How should similar elements be handled?

What is the relationship between elements?

Can merging similar elements or extending relationships simplify the design?

2.2 Form Input Modes

Forms can be classified by input mode into single‑step, multi‑step, and advanced forms .

2.2.1 Single‑Step Form

A single‑step form is completed on one page, suitable for simple, low‑content scenarios such as login pages.

2.2.2 Multi‑Step Form

When content is extensive or the input process varies greatly, a multi‑step navigation is used, e.g., bank transfers or password changes.

2.2.3 Advanced (Grouped) Form

Advanced forms are used for bulk data entry. Like multi‑step forms, they split content into blocks to reduce user fatigue, but the flow is less explicit; each step depends on the previous one.

3. Form Page Frameworks

Form pages can be presented in three frameworks: full‑page, modal, and sidebar , each suited to different screen sizes.

Full‑Page (New Page)

The most common approach, suitable for most forms and capable of handling complex layouts.

Modal

Uses a small pop‑up for lightweight editing, ideal for quick add/edit/delete actions with few input fields.

Sidebar

Similar to modal but placed on the side, allowing more complex content and scrollbars.

When choosing a framework, consider content quantity, relationship to the original page, and form complexity.

4. Form Layout Options

4.1 Layout Types

Forms can be arranged in single‑column or multi‑column layouts.

Single‑column layout is recommended for few input fields, providing a straight top‑to‑bottom visual path and high efficiency.

Multi‑column layout saves vertical space but can cause a “Z‑shaped” visual path, increasing the risk of errors.

Sometimes business requirements force a multi‑column layout to fit more controls in limited space.

Single‑Column Layout

Advantages: clear visual path, high efficiency, good experience.

Disadvantages: high vertical space usage.

Use when the form has few fields.

Multi‑Column Layout

Advantages: saves space, accommodates more controls.

Disadvantages: ambiguous visual path, higher error rate.

Use when related fields can be placed horizontally, with the most important field on the left.

4.2 Label Alignment

Labels can be top‑aligned, right‑aligned, or left‑aligned . Research by Matteo Penzo (2006) showed:

Top‑aligned labels allow eye movement from label to input in 50 ms, ten times faster than left‑aligned (500 ms) and twice as fast as right‑aligned (240 ms).

Top‑aligned labels improve efficiency but consume more vertical space.

Top‑Aligned Labels

Advantages: fastest eye movement, supports longer label text, suitable for modals and sidebars.

Disadvantages: high vertical space usage, less friendly for small screens.

Right‑Aligned Labels

Advantages: reduces vertical space, faster than left‑aligned.

Disadvantages: inconsistent left edge, less flexible for long labels.

Left‑Aligned Labels

Advantages: easy to scan, low vertical space.

Disadvantages: slower eye movement, lower filling efficiency.

Bold Labels Above Input

Making labels bold increases visual weight but actually slows eye movement by about 60 % (from 50 ms to 80 ms) and can cause confusion.

Summary of Label Position

From an efficiency standpoint: top‑aligned > right‑aligned > left‑aligned . However, the choice also depends on context; generally, placing the label above the input field works best.

3. Form Validation Types

3.1 What Is Form Validation?

Validation provides feedback to ensure accurate data entry, using either front‑end or back‑end validation.

Front‑End Validation

Checks format correctness (e.g., phone number format, password rules) on the client side.

Back‑End Validation

Validates data against the database (e.g., whether a phone number already exists, password correctness).

Validation Trigger Conditions

Validate while the user types (real‑time feedback).

Validate on blur (when the input loses focus).

Validate on submit/click of a button.

Error Reporting Methods

Immediate error display.

Report after the user clicks submit/next/save.

3.2 Validation Forms

Instant Validation While Typing

Provides real‑time feedback as the user types, such as password strength indicators during registration.

Advantages: users know instantly if their input meets requirements.

Disadvantages: can distract users and cause annoyance.

Use case: password creation where strength needs to be shown.

Validation on Blur (After Input)

Validation occurs after the user leaves the field, providing feedback without interrupting typing.

Advantages: saves time by highlighting errors only after entry.

Disadvantages: requires an extra step to correct errors.

Use case: checking username availability after the field loses focus.

Validate on Submit (All Errors After Save)

All inputs are sent to the back‑end after the user clicks save/submit/next, and errors are reported together.

Advantages: reduces user interruptions and server load.

Disadvantages: users receive feedback only after clicking, which can be inefficient for long forms.

Use case: login where password correctness is checked after submission.

Conclusion

Forms are one of the most common backend scenarios, making form design a critical part of B‑side product development. Designers and product managers must collaborate to address the many challenges of form design, considering not only the elements discussed above but also the overall user flow to reduce cost and improve efficiency.