Form design best practices

Use a label

Labels are essential for accessibility. Screen readers communicate each label to users. Without proper labeling, forms are inaccessible to many people. Ensure that each form field has a label. Use appropriate HTML semantics and use ARIA when necessary.

Avoid placeholders like a label.

Using a placeholder as a label puts a burden on short-term memory. The label disappears as soon as the user starts typing, and the user must clear the input text to expose the placeholder label again.

Placeholders create additional problems when they are too light or too dark. When too dark, the placeholder can be mistaken for a filled-in entry. When too light, some users may not see the placeholder at all.

Automatically focus on the first entry.

Automatically focusing on the first field of a form improves accessibility by reducing the need to navigate and click, and enhances the overall user experience. The user should also always be able to tabulate for each entry in the form.

Keep the labels short.

Avoid long labels whenever possible, so that forms are easy to read and scan.

Match the field length and structure to the intended input.

The field length determines the response range. Use this for fields with a defined character count, such as phone numbers, zip codes, etc.

The form fields should look like form fields.

Creativity often leads to adverse results when designing forms. Seemingly innovative ideas can captivate even the world's largest organizations, while reducing usability for millions, if not billions, of people. Google quietly changed its Material Design text fields in 2017., after discovering that many users were unaware that they could interact with the entry.

When it comes to input fields, follow standard design conventions. If you decide reinvent the wheel, make a test complete usability .

Distinguish form fields from other elements.

A form field should visually communicate its function. Add enough distinction from other user interface elements so that users don't have to guess.

Use the appropriate input type and tag.

Input types They make a form more accessible and improve the user experience. For example, using the correct input type calls up the appropriate keyboard on mobile devices (numbers vs. letters).

Designers and developers often overlook simple things, such as using a radio in instead of one box of selection For questions with multiple options but only one answer.

The forms should be one column.

Single-column forms are more comfortable to scan and adapt better to mobile monitors. Multiple columns can overwhelm a user and cause them to accidentally skip fields.

Like most recommended practices , There are exceptions to this rule (like the next one on this list). Always keep the context you are designing for in mind to determine the best presentation.

The fields that logically go together must be aligned.

Stacking related fields, such as names, addresses, and payment information, causes unnecessary friction and can disrupt the user flow.

Omit unnecessary fields

Omit optional fields and think of other ways to collect data. Always ask yourself if the question can be inferred, postponed, or eliminated altogether.

Make action buttons task-specific.

The text on the submit button should clearly and concisely describe the action it will trigger. A user should never be confused about what will happen after it is pressed.

Group labels with your entries.

Present labels with the corresponding entry so users know which field they are filling out. Errors often occur when a user scrolls up and down a page and makes an incorrect association.

Avoid all limits.

It's a matter of style between uppercase and lowercase letters, but all uppercase is never a good idea. All uppercase letters are difficult to read, scan, and look unpleasant.

Display checkboxes and radio buttons vertically.

It's easier to check the options in the checkbox and radio buttons when presented vertically. However, presenting options with associated graphics can add an extra dimension to the design that negates the need for a vertical presentation.

Show all selection options if <6

Placing options in a dropdown selector hides the options and requires two clicks to choose. Use a dropdown selector when there are more than 5 options and incorporate the search into the dropdown menu when there are more than 25 options.

However, there is no problem in using a dropdown selector for fewer than 6 options if space is limited, such as in certain inline editing situations.

Show embedded errors

Try to avoid errors as much as possible by being clear and concise. When a user makes a mistake, show the user where the error occurred, provide a reason, and communicate how to correct it.

Fields related to the group

Create logical groups so that the user can interpret what is being requested in the form more quickly and manage batch requests.

Distinguishing between primary and secondary actions

Make the form's primary action, such as submission, more prominent than secondary options to avoid errors. And always ask yourself if the secondary action is necessary.

Incorporate a progress indicator for multi-step forms.

Multi-step forms, also known as form assistants , They should indicate progress so that the user knows where they are and what is to come.

Resisting modal shifts within modal shifts

Interactions that require multiple modals can lead to user errors. Consider inline editing within a modal.

Always think about accessibility.

Too often, designers fail to check the implementation of their projects to ensure they meet accessibility standards.

To learn more about how to implement semantically accessible forms, I recommend reading the... W3C guidelines on how to create websites that meet WCAG standards. .