A form is one of the most common way a user interacts with a product. It helps with making a purchase or creating a profile. They exists of input fields that collect an array of information, which is why you need to design them in a manner that streamlines the form-filling process, making it clear to the user what information they need to enter and how. Understanding the anatomy of input fields is the first step to achieving efficiency in their inclusion, placement, and design.

States

Designing for every possible state on a form is a must as your users will encounter it sooner or later. You can set the field states by a border color, using an icon for errors or success states or different text weights. Providing feedback can help your customers get unstuck in a tricky situation, but avoid having al validation displayed under the entire form.

Icons

As an optional element, a leading icon can improve the user’s experience by providing a visual cue to type into the box. Properly selecting an icon can speed the form-filling process and eliminate the need for the user to read labels. However, depending on the visual design surrounding your fields, it may or may not be appropriate to include a leading icon. When choosing a leading icon, it’s essential to select a leading icon that’s “standard” for the input you’re expecting. For instance, a head and shoulders works for a username, while “@” can indicate an email field and a padlock can denote a password field. Leading icons are informational, so you want to stick to what users are most likely to associate with rather than opting for something unexpected in an attempt to be creative or unique.

Whereas leading icons serve an informational purpose, trailing icons can speed up interactions when used correctly and generally serve a functional purpose. For instance, a popular trailing icon is an “x” at the end of an input field, which allows the user to clear the field with a click. Another example of a trailing icon would be a microphone, which allows the user to add text with voice-to-text instead of typing.

Selecting the right type

Using the correct field for the job will help with validation. For instance, an email address field will automatically ensure the user includes the “@site.com” and it will give them an error if it doesn’t. Meanwhile, a phone number field wil use auto- formatting, turning “1234567890” into “123-456-7890,” making it easier for the user to check that they’ve entered the correct phone number. Auto-formatting can also help inform the user about the information you’re seeking by using context clues. For instance, using a numbers field can confuse a user when you’re looking for a dollar amount (i.e., inquiring about their budget). Auto- formatting wil append a “$” before their entry so they know you’re looking for a figure and not a worded explanation, range of numbers, or other input.

Provide logic

Conditional logic allows automatically show or hide fields and skip pages in a form, based on visitor answers. This approach will reduce the number of fields and make the fill-in process more personalized and conversation-like.

Group items

One of the easiest ways to simplify complex forms is to start grouping related fields. There are multiple principles of grouping in Gestalt psychology that help items feel related: Proximity, Similarity, Continuity, Closure, and Connectedness. Grouping dozens of unstructured fields into few manageable sets will significantly increase form usability.

Checkboxes and radiobuttons

Prevent a situations when it’s challenging to see which control is selected (make sure to space the buttons and labels). Consider using chips to visually separate options.

Try avoiding dropdowns

Making all options permanently visible to easily compare them reduces cognitive load and help forms be more transparent. If the number of options is more than 6-7 you should consider putting them in the dropdown as users will not be able to keep all of them in mind. The same will apply to predictable, similar, or incremental options like (zoom —10%, 20%, 30% .).