20 UI insights to design good forms for web and app

Forms are one of the most common and essential elements that we have to deal with when creating digital products. Through them, users create accounts, send information, give their consent to receive our emails, among many other functions.

Being such a fundamental element, it is still surprising how many mistakes are made when designing forms. Today we want to share 20 keys to design good forms that we apply in the Studio and that are inspired by the content of Dann Petty.

1. Create the right space

A form must invite the user to write on it, so it is essential that the text fields have adequate space. It is very common to find fields that are too narrow or too large. All we need is a proportionated field with the adequate padding for the font size we are using.

2. Add a title to your input fields

Although adding a title or label may be dispensable when we have only one or two text fields, when it comes to long forms it is very convenient to give context and hierarchy. Don't just rely on placeholder text, which is typically very low contrast, and add a title that names each field.

Additionally, this is also good practice for accessibility, as readers identify the titles associated with each field.

3. Stack them vertically

Vertical alignment is still the best way when we organize the fields of our form. Although certain fields such as "City" "Province / State" can be aligned horizontally, it is generally advisable to give the user a single direction to avoid having to constantly go back and forth.

4. If there is not enough space try this

In some cases it is not possible to place the title above the text field. In these cases we can try other combinations such as aligning it horizontally, incorporating it within the text field itself or converting the placeholder into an internal label as Material Design does.

5. Play with color / weight instead of text size

Many times font size is used to generate contrast and hierarchy between different elements, but all that we need is to modify the weight and color of the font to make that difference.

In this case, we see how we achieve a much more cohesive form by simply using a higher weight and a color with greater contrast in the title.

6. Place the title near the respective input field

To create association it is important that the title is located near its respective field. If we use the same space rule to separate the title of your field as to separate the fields from each other, we create confusion in the user about which title corresponds to each field.

7. Highlight the selected field to create focus

In long forms it is especially important to indicate to the user about the field that he is filling in at all times. Therefore, we must not forget to design a "focused" state of our fields.

8. Add border and shadow to create contrast

Controlling contrast is essential in product design, especially in forms where what we want is that the user knows where to click to fill the information.

It can be tempting to design fields where only their area is delimited with a light gray, but this can lead to contrast and accessibility problems. It is recommended to use a border accompanied by an external or internal shadow to highlight the field from the rest of the interface.

9. Adapt the length of the text field to its content

It's OK with having blank spaces in a form. Many times we think that this is a mistake and we end up designing forms where each field is the same length. Conceptually, this can make users think that each field requires the same information when it's not the case.

For example, fields like phone number or postal code need a much shorter length than address or email.

10. Place the zip code first to autocomplete the rest of the fields

A function that incredibly improves the user experience when we fill in forms where we request information related to the physical address, is to use the auto-complete function from the postal code.

By placing the postal code first, we can use Google's API to avoid the user having to continue filling information such as the province, state or city.

11. If the field is not mandatory, consider not including it

When a field is not mandatory, many times it is not necessary. Each field that we add to our form increases user fatigue when completing it, so consider very well which fields are essential and, if they are not, it may not be necessary to include them or the info can be requested later.

In any case, if you need to include them, mark only those fields that are optional but not both.

12. Group input fields by sections

For long forms it is also recommended to group the fields into sections. This will allow the user to quickly scan the form and understand what information we are requesting.

13. Show errors in context + add global message

When an error occurs with the form, we must show it in its context. That is, marking the field where it occurred so that the user understands what they need to modify. In addition, it is also recommended to include a global error message where we can take the opportunity to introduce a funny message that aligns with our branding and takes weight off the issue.

14. Add details that surprise and delight

The forms are usually boring, nobody likes to fill them out. If we introduce some unexpected and funny detail in the first moments of the user's interaction with our form, we will get their sympathy and hopefully a greater willingness to complete it.

15. If you request personal information, explain why

When we ask for some kind of sensitive information such as the telephone number or credit card, and perhaps it is not very obvious why we need it in our product, it is recommended to include a small link next to the field where we explain why we need it and gain the trust of the user.

16. Consider showing instant feedback while typing

The validation of the fields can be done while filling them or in the submission of the form. If we introduce validation while the user fills in the fields, we can prevent errors before the user completes the rest of the form.

For example, it is very common to introduce this validation in the email field to ensure that the format is correct. However, we have to be careful not to abuse this function, as displaying too many errors prematurely can annoy the user.

17. When possible use just one field for first and last name

As a rule, it is always better to use one field than two. In the case of the first and last name, it is very common to find a field for each of them, although most of the time we only need one.

Usually this is due to a technical reason, since many times it is necessary to save the first and last names as different fields in the database. If this is the reason, go ahead, but whenever possible it is better to optimize our forms by simplify them.

18. Capitalize carefully

The abuse of capital letters is risky as a general rule in the design of interfaces since in large quantities it makes scanning and reading speed difficult. The same thing happens in the forms and, although we can use them in the titles of the fields, we have to be careful.

19. Create descriptive CTAs

Microcopy is also important in forms, so we must avoid generic CTAs and use more descriptive ones for the action associated with the form in question. For example, if it is a registration form, using "Create my account" is much better than "Submit".

20. Disable the button until all fields are complete

Finally, by deactivating the form submit button -not make it disappear-, we will prevent the user from thinking that it can be pressed ahead of time. It is always recommended to accompany the button in its deactivated state with a small text that explains how we can activate it.

As you have seen, there are many small actions that we can incorporate into the design of our forms that will allow us to create a better experience for the user and turn a generally tedious process into something more bearable.