UI Design Best Practices For Form Design (Part 1)

Following up on our recent tips on designing for inclusion and accessibility, in this 2-part series we’re taking a detailed look at best practices for form design. Today we’re starting with process, layout, engineering, text, and validation. Next time, we’ll be diving into visual design, conversion rate optimization (CRO), how to design inclusive forms, and more!

But before getting started, 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 like the piece of paper you fill out when joining a gym.

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 even 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.

Structure, Layout and Hierarchy

8. Place the form carefully in the wider layout

When a user is engaging with a form, it is the center of attention. The form’s position within the webpage or app design should reflect this. Even if it’s a simple signup form, don’t squish it into a corner or footer: give it enough visual prominence and centrality.

9. Use a one-column layout

Although a one-column layout may be less visually elegant, it has been shown to result in significantly better user understanding, fewer user errors, and higher overall rates of conversion. The reason for this is probably that, in a one-column layout, there are fewer opportunities for the user to “miss” input fields, because the eye only needs to travel on a simple vertical journey, rather than in a Z-shaped journey.

When a user misses a field, this has a significantly negative impact both on the time it takes the user to complete the form, and on the level of frustration they experience. It also disrupts any sense that they’re making progress through the form, because the user is forced to go backwards and fill out an earlier field. When this happens, users are much more likely to abandon the form entirely.

10. Place labels above form elements, not to the left of them

Even in one-column layouts, it’s common to see form labels placed to the left of the input area. This means that the user’s eye is still having to go on a Z-shaped journey rather than a simple vertical one, which may increase the perception of complexity, fatigue, and slowness.

11. Arrange lists, checkboxes, and radio buttons vertically

This reinforces a vertical journey for the user’s eye, and supports a sense of consistent progress. And again, it makes it less likely that a user will miss options within a list.

12. Group fields logically

When choosing the sequence of your form fields, aim to group them logically and thematically as far as possible. For example, if you are gathering multiple bits of contact information (email, telephone, address), put these together rather than having them appear at different points in the form. So an account creation form might have three sections: “Personal information”, “Payment details”, “Marketing preferences”.

13. Group fields logically at the micro-level

We are used to seeing certain kind of information in a particular order: for example, username then password, or street address then city. Observing conventions here reduces cognitive load for the user. 

14. Group fields visually

Once you have defined those logical groups of information, make sure to also reflect that grouping visually. This can be done simply by adding space between the groups, but you can also consider adding section headings or labels.

15. Group label and field visually

As well as using visual grouping at the level of sections, make sure that the form field, the label that relates to it, and any helper text, are also grouped visually and adequately separated from surrounding elements.

16. Address users’ concerns in the place they will arise

Asking for certain information may cause the user to wonder why it is being collected. For example, if you are asking for someone’s phone number, consider including helper text that explains why you need it. And if you don’t actually need it, don’t ask for it.

17. Use a stepped or multi-screen format for long forms

Having a large number of inputs on a single screen or page is intimidating, and increases the risk that a user’s work will be lost. Instead, split long forms into multiple screens or pages, and give the user insight into how many pages they can expect in the process.

18. Don’t split numbers into multiple fields

As well as creating other issues, this can cause frustration for users who are looking at the keyboard while typing. Phone numbers and credit card numbers should only ever need to be a single field.

Text and Copywriting

19. Label fields clearly and concisely

The role of good copywriting is underestimated in form design. Striking the right tone, and communicating labels and instructions clearly and concisely, can significantly increase the user’s trust not only in the form, but in your overall brand.

When writing labels for each form field, aim for the minimum number of words and the maximum amount of clarity. If you anticipate any ambiguity or uncertainty on the part of the user, include some short helper text that gives unequivocal instructions on how to fill out the field.

When designing your form, it can also be helpful to produce multiple options for how each field could be labeled. This enables you to test different labeling options, or at least make an informed choice between the available alternatives. 

20. Use descriptive, action-based words on buttons

Buttons should describe the action that will be launched by clicking on that button. Sometimes, particularly in more technical applications, “Submit” and “Cancel” are okay, but usually they are too dry and feel too generic. Instead, consider using words or short phrases like “Sign up”, “Send information”, “Create account”. 

21. Consider using the first-person on buttons

This depends on your brand’s style guide, and the overall tone you want to strike. However, it’s been shown that buttons that include the first person voice (“I”, “me”, “my”) tend to have higher conversion rates. So instead of “Create account”, you could consider “Create my account”. A rule of thumb is that any button text could be preceded by the words “I want to” and make grammatical sense, as well as making emotional sense in context.

22. Don’t use placeholder text as labels

Placeholder text is the text that displays inside a text entry field before you select it. There are a number of problems with using placeholder text as labels, including:

• placeholder text tends to be grayed out, and is therefore less inclusive and accessible

• screen readers generally won’t read out placeholder text, making your form unusable for visually impaired users

• placeholder text disappears once you select the field and start typing, meaning the user might forget what they are supposed to be doing

• placeholder text should help with data entry format, which it can’t if it’s being used as a label

Instead, use both labels and placeholder text to give users the best and most helpful guidance.

23. Don’t use all-uppercase in labels or placeholder text

Uppercase text is usually harder and slower to read, so don’t use it for the body of your form (including labels, placeholder text, and helper text). Generally uppercase text is okay if used sparingly—for example, in section headings, buttons, and icons.

24. Don’t hide helper text

Helper text is instructions or extra guidance beyond just the label—for example, “Password should be 8 or more characters.” If you are using it, display it rather than hiding it behind a question mark icon or tooltip.

25. Make the required input format clear

When entering data like validation codes, phone numbers, or credit card details, users may be unsure whether they can or should include text like brackets, spaces, and dashes. Make the required input clear in helper text—for example “Enter your card number without spaces.” Doing this reduces cognitive load, by taking a decision out of the user’s hands. (However, see also tip #45 below!)

26. Shorter is better than longer, as long as nothing essential is missed

Fewer form fields are preferable to more form fields—but it is counterproductive to make your form so short that it doesn’t actually gather the information you need. In the paradoxical adage occasionally attributed to Albert Einstein, “Everything should be made as simple as possible, but not simpler.”

27. Use confirmation messages where appropriate

Even when a user actively clicks on the “submit” button, you might nevertheless want to consider displaying a confirmation dialog. Again, this might be appropriate in a setting where the action is momentous, or where the user might need reminding to check through what they’ve entered (like sending a job application).

28. Use success states

Once the user has submitted a form, it’s important to display confirmation that the submission was successful. At best, failure to do this means the user is left without a sense of completion. At worst, it could mean the user submits the form again, perhaps placing duplicate orders. 

29. Use a sans-serif typeface with a high x-height

Although carefully chosen serif typefaces can work well on forms, generally sans-serifs are a safer option. Many modern sans-serifs—like Roboto, San Francisco, or Proxima Nova—are designed specifically for use on screens. An important feature of these fonts is that they have a large x-height—meaning that the lowercase letters are relatively large.

Engineering

30. Autofill form fields where possible

There are two main ways of automatically populating form fields: using information that your system already has, and using information that the user’s browser already has. Most modern browsers have “browser auto-fill”; unless you have a good reason to disable this for your form, leave it enabled, as it will usually reduce the amount of work for the user.

31. On mobile, bring up the correct keyboard for the form field

Displaying the standard QWERTY keyboard for all form fields on mobile is a very common mistake in form implementation. If the required input is numerical—like for a phone number—make sure to display the numeric keyboard. This is something you will need to specify when handing off your designs to a developer. Your users will thank you.

32. On mobile, don’t auto-hide password entry

The risk of other people visually snooping on a user’s password entry is very low on mobile—partly because the screen is very small, and partly because people tend to use their phones in such a way that others can’t easily see the screen.

It’s good to give users the option of hiding their password entry with a toggle, but consider not hiding it automatically. The advantage of not auto-hiding password entry is that users can actually see what they are typing, and visually validate it themselves before submitting the form.

33. Don’t auto-advance to the next field in a form

There are a number of arguments against auto-advancing to the next field in a form:

• People are generally not used to it.
• It removes control from the user.
• It makes it harder to visually check and correct the data you’ve entered.
• It may cause people using the tab key to accidentally skip fields.
• Having to manually jump back to previous fields is frustrating.

Instead, when a user reaches the end of the current form field, leave the cursor right where it is!

34. Use conditional logic to shorten forms where appropriate

There are some cases where, depending on the user’s responses, a number of fields in a form won’t need to be filled out. In this case, consider revealing only the fields that the user actually needs to complete. This practice is sometimes called “progressive disclosure”.

35. Make your form usable without a mouse

It should always be possible for the user to fill out and submit your form using only the tab and enter keys. If your form requires mouse clicks at any point, remember that this will make your site or app unusable for some people.

36. Instead of long dropdowns, use predictive search

In fields where there is a very large number of discrete options—for example, country of residence—it is better to implement predictive search rather than a dropdown menu. This pattern allows users to start typing their country; the system then suggests options for completion, which the user can then choose from.

37. Allow users to resize fields themselves where appropriate

Particularly for free text fields, where there might be wide variation in the amount of text entered by different users, it can be helpful to allow the user to expand the field themselves. Wherever possible, enable and accommodate this functionality.

38. Auto-save form data

As you’ll know from experience, there’s little more frustrating on the web than when you spend a long time filling out a form, only to hit submit, realize that your wifi has dropped, and lose all that work. Wherever possible, your system should cache the data entered—whether server-side or client-side—and help the user to pick up where they left off.

39. Be intentional about when Enter submits the form

On a simple form, like an email signup, there is probably no harm in Enter submitting the form even while the user still has an input field selected. However, in a more complex form, or a form where the “submit” action is more momentous (like applying for a loan), or where the action might be triggered accidentally, it makes sense to restrict this functionality.

You could do this by requiring that a keyboard user tab to the “submit” button before Enter will submit the form. Alternatively, you could create a confirmation dialog along the lines of “Are you sure you want to submit your loan application?”

Take particular care in long text-entry fields, where people are likely to use Enter to add line breaks—make sure that Enter doesn’t accidentally submit the form!

40. Allow copy and paste

People may want to paste in information that they use a lot, like their postal address. In particular, the user may also want to paste in a password from a password management tool. Ensure that your password field allows this.

41. Consider splitting a single-screen form on desktop into a multi-screen form on mobile

Different devices present different visual and usability constraints. A form that works well as a single screen on desktop may be too much for a single screen on mobile. In this case, it makes sense to switch to a multi-screen pattern on mobile, rather than sticking to a cramped or lengthy single-screen layout. 

42. Test and optimize your form for all major browsers and devices

Forms can rely heavily on how the browser is programmed to handle HTML form elements, meaning that different devices and platforms can give rise to unexpected issues. Start with the most common browsers, but don’t neglect the edge cases: according to StatCounter, as of October 2018, over 6% of people are still using Internet Explorer. Further, data entry on mobile is a very different experience than on desktop, so give adequate time and resources to testing and optimization for both device formats. 

43. On mobile, use native OS features for date pickers and other special inputs

Google’s Android and Apple’s iOS both have built-in interfaces for certain kinds of data entry, like date pickers. Aim to use these native elements wherever possible, rather than programming your own. Users will be more familiar with the native option, and it’s very likely to perform better.

Validation

44. Use inline validation in preference to submit validation

It’s better to validate the user’s data entry as it happens, rather than doing all the validation when they try to submit the form or move to the next screen. This is partly because it makes sense to address errors while the user is already thinking about the information, and partly because displaying errors when users submit the form disrupts user progress and makes it more likely they will give up rather than fix the error.

Where appropriate, the system should also offer information that helps the user identify the precise nature of the error—for example, “that doesn’t look like enough numbers,” or “did you mean…?”

45. Tolerate a range of input formats where possible

Wherever possible, the system should correct format errors itself, rather than making the user do it. For example, if the use has added dashes to a credit card number, the system should simply strip them out rather than returning an error.

46. Don’t use captchas unless absolutely necessary

Captchas are those little boxes where you have to type in the numbers displayed in a grainy image. They have been shown to severely impact flow completion, so wherever conversion is important, captchas shouldn’t be used.

47. Use inline validation to confirm user progress

Use inline validation to confirm that the user is making progress. This could mean a “tick” icon appearing next to fields once they’ve been correctly filled out.

48. Ensure that error messages help the user to fix the error

Don’t assume that error messages are self-explanatory: “invalid data” next to a credit card number probably won’t help the user identify what’s wrong. Instead, use something like “it looks like you missed a number”.

49. Disable the “Next” or “Submit” button until validation is passed

This provides a clear visual indicator to the user that their data entry is ready for submission.

Thanks for reading!

If you’ve found these form design tips helpful, come back next time for Part 2—when we’ll be looking at conversion rate optimization, more visual design tips, and how to design inclusive forms.

Sign up to our newsletter below and we’ll email you when the next installment is published. Until then!

Want to learn more about the finer details of user interface (UI) design? Check out our brand new, 4-week, mentor-led UI Design course.