Best Practices for Designing Forms

From the users' perspective, the shorter the better, especially when it comes to mobile forms. One input for a name and surname reduces interaction costs and helps finish a form a bit faster. Plus, the internet is incredibly multicultural, so creating a single field for a full name can be more inclusive.

However, keep in mind that most people care about their names, so using them wrong can ruin the impression and break trust. If you decide to leave only one name input, make sure you know how to identify the first and last name and use it under the given context.

If your form asks users for private information like their phone number, they may question why it's needed. Users may also need more details when performing tasks like creating a new password. Here, using a helper text — a quick note below the input field — clarifies your intentions or requirements. Make sure the helper text is informative and briefly explains what information users are expected to enter or why the system needs this information in the first place.

Providing the right keypad for the active input reduces the number of actions and engages users to complete tasks faster. For example, showing a numeric pad right away when the form asks for a phone number or card number prevents users from switching between keypads and wasting their time, especially if they're on the go.

Nielsen's heuristic on the visibility of the system's status states that a good system should inform users about what's happening and provide immediate feedback on their interaction with the interface (like clicking or tapping).^[1]

When users fill in a form, it's crucial to add a visual indication for all input states (active, focused, disabled, error) or even use a microinteraction to do so.

This provides feedback on users' actions, indicating that the input is active and users can enter information. Moreover, some forms contain lots of inputs, so this helps make active ones stand out.

Primary buttons should lure users in and encourage them to interact. For that purpose, buttons with large touch areas are easier to catch user attention, look more engaging, and seem less error-prone.

The minimum touch target area is 1x1 cm (approximately 38px).^[2] It leaves some room for error even when users are moving or holding the phone and typing with one hand.

Having the same button width as the form inputs is a matter of taste, but it makes the design more balanced and consistent.

According to the Nielsen-Norman Group, marking both required and optional inputs makes form completion a bit easier.^[3]

The most common way of indicating a required field is by using an asterisk — the universal symbol to mark a mandatory input. Another way is to put the word "required" near the label. Avoid using muted grays or low-contrast colors as they may create an unnecessary challenge for people with visual impairments and older adults.

To indicate that a field is optional, simply include a note in the input label within brackets with the word “optional.”

Using smaller-sized inputs might sound like a brilliant idea to save space, especially on mobile. However, small inputs require more effort as it's harder to hit the type area. Plus, forms with multiple tiny inputs are far more difficult to scan. Setting a height between 32px and 40px makes an input visible and clickable, but not very big at the same time.

If you're afraid the form may become too lengthy and require users to scroll, break it into logical steps. The only caution is to keep the number of steps up to 5-6. Otherwise, the form may look too overwhelming.

Placeholders often hurt usability, especially when designers try to reduce clutter on the page by replacing labels with placeholders. This is because usually after users hit the input, the placeholder disappears. Users easily get distracted, leave the window, and when returning to it later, they will have to remember what information they were asked for initially. To see the placeholder text again, they will need to remove the focus from the input and click outside of it. It's extra work, and users don't like to think or do more than necessary.

There are two possible solutions to this problem. You can use floating labels — they save space and, in contrast to traditional placeholders, don't disappear, moving above the input.

Another option is using visible labels and hints placed outside empty form inputs along with input masks allowing users to enter information in a format they prefer. They're familiar and straightforward, so users don't need to waste time figuring out how the inputs work.^[4]

When it comes to placing error messages in a form, there are various options to choose from, such as left, right, above, or below the input, as well as on the top or bottom of the form. However, which placement is the most intuitive, results in the least cognitive load, and helps users identify errors faster?

According to an online study involving 303 participants, the most preferred and expected placement for error messages is on the right side of the erroneous input. Although this placement takes up more horizontal space on the form, it is still the favored choice among users. The second most popular option is to place the error message below the input because it follows the natural reading order, helps users identify errors quickly, and takes up less space. This is especially important for mobile forms.

Surprisingly, placing error messages on the top or bottom of the form can result in a higher rate of consecutive errors because users may overlook them. Additionally, these placements disrupt the natural reading flow and increase cognitive load, causing users to spend more time figuring out what went wrong.^[5]

Icons can be more intuitive than text for quick visual guidance, especially in forms where users might not know certain information, like the CVV/CVC code on a credit card. Tooltips can be helpful but require an extra mouse action and may not work smoothly on mobile devices. Using an icon—a graphic of a credit card showing the code location, for example—can immediately clarify what's needed. If there's still potential for confusion among your audience, consider pairing the icon with a tooltip for extra clarification.^[6]

Inputs don't usually leave much room for creativity. Keeping them simple and stylistically restrained reduces the visual clutter on the page and helps users focus on essential things.

Also, don't forget accessibility when choosing colors for labels and borders. The contrast between foreground and background colors can dramatically affect legibility and the product's usability in general. If users can't read input labels or helper text, they get easily annoyed and may give up on tasks entirely.

The selection of date pickers for a form depends on your purpose. For example, separate dropdowns to select the day, month, and year can require an unreasonable number of interactions for something like a birth date. This is to say that a plain text input is enough for data that people can type with their eyes closed. Just be sure to use an input mask, so users don't need to worry about typing in the wrong format.

For actions like booking a flight or making a reservation in a hotel, text inputs can be tedious. Commonly, a calendar date picker is a better option for letting users select a date that is close to the current date by no more than a year.

According to Dr. Susan Weinschenk, a behavioral scientist, users hate when systems ask them to do more than they have to. Many forms unnecessarily prompt users for information that the system can easily obtain by itself. Implementing features like smart defaults or auto-detection, which can automatically identify geolocation and pre-select options like country or city, can significantly enhance user experience. This streamlines the process for users, minimizing their efforts and ultimately leading to a more seamless interaction.