Form Design

6 min readSep 23, 2022

Determine the way the user will understand and interact with the product.

Video Tutorial: Design Form Elements to solve UX Problems

Every interactive product uses form elements. A simple, user-friendly, and aesthetically-pleasing form is very important for attracting customers. Also, a well-designed form will enhance customer experience and boost conversions, whereas a poorly designed form can cause customer drop-offs.

A well-designed form helps in collecting and processing information economically and efficiently. What follows is how to design an effective form that can improve customer experience and increase conversions.

Free & Discounted Udemy Courses — Explore Now

Here are the six steps to creating an efficient form:

Step 1: Start by identifying where forms are needed.

Throughout the product, identify the places where you need to take inputs from the users. The number of forms required can vary based on the nature of the application.

Example: A shopping application can have more forms (like Registration, Card details, Address, etc.) than a multimedia application like YouTube.

Step 2: Define the number of fields.

List the information that you need from the user, then try to optimize and give fewer inputs to the user based on the interconnections.

Example: In a personal data form, you can use information from the Aadhar card number to pre-fill the address fields.

Step 3: Decide the type of form to use.

Based on the complexity of the information, you can decide whether to have a single-step or multi-step form. Single-step forms work better if there are less than 5–6 fields or where only basic information is required to register or make a subscription. On the other hand, multi-step forms work better when there are several fields to fill, and also when requesting sensitive information such as card details, OTP, etc.

QUICK TIP: When using a multi-step form, add a progress bar at the top to keep the user updated on which step they are on.

Example: The image above is an example of single-step and multi-step forms.

Step 4: Arrange/Group the information in a logical order.

Once you define the type of the form, arrange the information in a logical order that can be predicted by the user. You can also group similar information together so that the user will have a better understanding of what they are filling.

Example: The information in the form above is grouped into “Personal Info” and “Website Info” making it easy for the user to understand what information should be given at a glance.

Step 5: Define the components in the form.

The main components of the form are as follows:

Input fields — You can use Radio Buttons, Checkboxes, Text Input Fields, Dropdowns, Action buttons to upload images/videos, etc.
Field Labels — The labels are used to name the input fields in the form. Refer to Alignments & Spacing to understand how to place the input fields & labels.
Actions — The action buttons help the user to continue with the next steps. Actions should be visually differentiated and aid quick decision-making. In a single-step form, the action can be “Submit”, “Complete”, “Done”, etc., whereas, in the multi-step form, the actions up until the last step should be “Continue/Next”.
Feedback — Feedback helps the user to understand which step they are on and also the result of the input entered after validation. The feedback can be positive or negative, e.g.“The email you entered is incorrect.”
Help — You can also include help notes to guide the user on how to fill the form.

Example: The single-step form above shows the different components in the form.

Step 6: End with a confirmation message

Always end your form with a good “Thank You” message or a “Confirmation” message. Users feel good and assured if confirmation is given at the end. When dealing with sensitive information such as bank details, card details, etc., this is particularly important.

Example: The image above shows a confirmation message after the billing was done.

Tips / Best Practices

Always put the potential users and their physiological state into consideration while designing a form.
Request for only what is important. Try to avoid optional fields.

In the image above, the left side form is packed with information that is not required. On the other hand, the right side form is simple with only required information making it easy for the user to fill.

A single-column layout with left-aligned labels is preferable to improve scalability and readability.

The image above is a good example of which layout should be used. Single-column layouts work better than double-column layouts because they are easier to fill as users naturally read from top to bottom.

Use a double-column layout when there is a continuation or dependency between the input fields.

The form above used a double-column layout because the inputs “First name” and “Last name” as well as “City”, “State” and “Zipcode” are similar types of information that require continuity.

Use smart inputs and autofill the information wherever it is appropriate. Research indicates that autofill makes form completion 30% faster.

The example above shows that by taking the company name, the address is auto-filled based on the Google location address.

Provide contextual help and feedback (for each input) wherever necessary.

The example above shows the best practice of providing help where necessary. In the “Makeup & cosmetics” field, no help is given because the potential user of the form will be aware of what the field means/represents. Hence, provide help only if it is necessary and not for every field.

If there’s a chance the users might be confused about any of the information requested, provide contextual help that gives clarity.
Use simple, plain, and personalized language such as kindly, apologies, please, etc.
Induce users with calls to action. Be descriptive.
Design customized fields for different input fields (e.g. for Date, Month, Year, Contact number, etc.).

The field width should be nearly equal to the length of the answer required.

The image above is an example of how the input field length should be equal to the length of information that is needed.

Too many forms in the product can frustrate users. Try to exact maximum information by adding fewer forms.
Test with a group of users to see whether the form works or not.

Checklist

Define a goal for designing a form (speed, efficiency).
Know who your users are.
Optimize the number of fields in the form.
Use smart inputs and autofill features.
The form is not visually overloaded.
Provide contextual feedback and help wherever necessary (No surprises should be given to the user).
Proper differentiation given for primary and secondary actions.
Test the design with multiple users to make sure it is giving the desired outcome.
Take self/peer reviews.

Quick Question

A user entered the wrong email address in the login form. Select the best sentence to notify the user about the error.

You made a mistake.
There is an error.
Please enter a valid Email Id.
The email is incorrect, enter a valid one.

Leave your answer in the comments section below!