UI Design Best Practices For Form Design

Let’s make sure we understand what a form actually is. A form is a user interface (UI) element that allows the user to send information to a server. We might imagine a form looking like the piece of paper you fill out when joining a library.

But in user experience design, forms are everywhere: when you log in to a website, write an email, or reply to a WhatsApp message, you’re using a form. Same with every online checkout process, and every newsletter signup ever! Forms are crucial for the success of a design, both visually and in business terms.

Given that forms are one of the essential ingredients of the web, it’s critical to get them right. More than that, building brilliant forms can help you create a much more delightful, usable, and inclusive user interface design—ultimately benefiting both your UX and your project’s goals. With that in mind, let’s get started!

Process & Preparation

1. First, think through your content

Before you start considering what your form will look like, think through what information you need to gather, and how it needs to be organized (this is known as information architecture). For some forms, doing this will be very simple—perhaps all you need is a text label and an email address input.

Also, any individual form is part of the overall UX design of a product or website. There may be hidden requirements that you wouldn’t be able to anticipate without sitting down and properly planning out the relevant user flow. For complex or long forms, consider involving your developers at the planning stage so that you’re also clear about any technical needs or constraints.

Planning a form’s content upfront will reduce the risk that you have to squeeze extra form elements into an already-complete interface design later in the project.

2. Minimize the number of fields in your form

Generally, the more fields in a form, the less likely it is that the user will complete it. So, in any situation where completion is important (which is almost always), minimize the number of fields you use. Obvious fields to cut are those that are marked “optional”: if they’re optional, do you actually need the information at all?

3. If you do use optional fields, clearly mark them

If you do ignore the previous tips and use optional fields, make sure that they are clearly marked as being optional. It is generally less visually threatening to simply mark some fields with the text “(optional)” rather than to put asterisks against required fields. Also, the meaning of asterisks may not be well understood, and is sometimes also used to indicate a validation error.

4. Optimize the order of your form fields

The order in which fields appear in a form will need to be determined by three key constraints:

• Technical needs: the system may need to gather one piece of information before it can gather another piece of information, particularly if your form uses conditional logic to determine which fields are displayed to the user.
• User needs: people generally understand forms best when the information is logically grouped, and when the questions progress from “easiest” to “hardest”.
• Business needs: it may be important to the business to minimize flow abandonment, which might mean creating a “milestone submission” whereby key information is completed by a particular point in the form (a milestone).

We’ll return to some of these concepts in more detail in the tips below.

5. Test your form thoroughly before launch

There’s lots of testing you can do independently, or within a development team. Test a range of input data, including input errors, and make sure that your forms works as intended. If you have the time and resources, it’s also valuable to conduct pre-launch user testing with a new form. Doing this will allow you to set participants specific tasks, watch how they respond to the experience of filling out the form, and gather critical feedback from them after they’ve finished.

6. A/B test your form after launch

Testing doesn’t have to end just because you launched your design. You can continue to experiment—for example with different fields, layouts, and copy—even once your form is live. You can use the A/B testing method to compare the relative performance of different designs, whether in terms of conversion, flow abandonment, time to complete, or other important metrics.

7. Test your form for speed

Form speed is often a neglected consideration during testing. Consider the following metrics:

• Time it takes the system to load and display the form initially
• Time it takes the user to complete the form
• How actual completion time relates to user expectations
• Time it takes the system to process the form and display a completion state or message

Also, bear in mind that form processing can be too fast, or appear to be too fast. A form which moves immediately to the next screen in a multi-screen form can cause the user not to realize that the screen has changed. In this case, consider using a visual transition to help the user understand that the form has moved on to the next screen.