Form design best practices

Learn how to improve the design of digital forms

Andrew Coyle
Aug 4 · 6 min read

These best practices serve to provide a shorthand when designing forms. Make sure to always keep in mind your context to determine the best presentation. Like most things in design, there are often exceptions to best practices.

Use a label

Image for post
Image for post

Labels are imperative for accessibility. Screen readers communicate each label to users. Without proper labeling, forms are inaccessible to many people. Make sure every form field has a <label>, use appropriate HTML semantics, and use ARIA when necessary.

Reference

Avoid placeholders as a label

Image for post
Image for post

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 input text to expose the placeholder label again.

Placeholders create additional issues when they are too light or dark. When too dark, the placeholder can be mistaken for a filled input. When too light, some users might not see the placeholder.

Reference

Keep labels short

Image for post
Image for post

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

Reference

Match field length and structure to the intended input

Image for post
Image for post

The length of the field affords the range of the answer. Employ this for fields that have a defined character count like phone numbers, zip codes, etc.

Reference

Form fields should look like form fields

Image for post
Image for post

Creativity often leads to adverse outcomes when designing forms. Seemingly innovative ideas can even captivate the world’s largest organizations and reduce usability for millions, if not billions of people. Google quietly changed its material design text fields in 2017 after discovering many users didn’t know they could interact with the input.

When it comes to input fields, stick to standard design conventions. If you decide to reinvent the wheel, make sure to do thorough usability testing.

Reference

Differentiate form fields from other elements

Image for post
Image for post

A form field should visually communicate its function. Make sure to add enough difference between other UI elements, so users don’t need to guess.

Reference

Use the appropriate input type and tag

Image for post
Image for post

Input types make a form more accessible and enhance user experience. For instance, using the correct input type invokes the appropriate keyboard on mobile devices (numbers vs. letters).

Designers and developers often overlook simple things like using a radio instead of a checkbox for questions with multiple choices but only a single answer.

Reference

Forms should be one column

Image for post
Image for post

One-column forms are more comfortable to scan and conform better to mobile displays. Multiple columns can strain a user and cause them to skip fields accidentally.

Like most best practices, there are exceptions to this rule (like the next one on this list). Make sure to always keep in mind the context you are designing to determine the best presentation.

Reference

Fields that logically go together should be inline

Image for post
Image for post

Stacking related fields like names, addresses, and payment info causes unnecessary friction and can break a user’s flow.

Reference

Omit unneeded fields

Image for post
Image for post

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

Reference

Make action buttons task-specific

Image for post
Image for post

The submit button’s text should describe the action it will invoke clearly and concisely. A user should never be confused about what will happen once pressed.

Reference

Group labels with their inputs

Image for post
Image for post

Present labels with their corresponding input so it’s clear to users which field they are filling out. Errors typically occur as a user scrolls up and down a page and makes an incorrect association.

Reference

Avoid all caps

Image for post
Image for post

It is a matter of style between sentence case and title case, but all caps are never a good idea. All caps are hard to read, scan, and it just looks obnoxious.

Reference

Present checkboxes and radios vertically

Image for post
Image for post

It’s easier to scan checkbox and radio options 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.

Reference

Show all selection options if < 6

Image for post
Image for post

Placing options in a drop-down selector hides choices and requires two clicks to choose and option. Use a drop-down selector when there are over 5 options and incorporate search within the drop-down when greater than 25 options.

However, it’s okay to use a drop-down selector for under 6 options if space is limited, like in certain inline editing situations.

Reference

Show errors inline

Image for post
Image for post

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

Reference

Group related fields

Image for post
Image for post

Create logical groups so the user can interpret what is being asked in the form faster and manage requests in batches.

Reference

Differentiate primary from secondary actions

Image for post
Image for post

Make the main action of the form like submission more prominent than secondary options to avoid mistakes. And always ask yourself if the secondary action is even needed.

Reference

Incorporate an indication of progress for multiple-step forms

Image for post
Image for post

Multiple-step forms, aka form wizards, should indicate progress so a user knows where they are and what’s coming.

Reference

Resist modals on modals

Image for post
Image for post

Interactions requiring multiple modals can cause user error. Consider inline editing within a modal instead.

Always think about accessibility

All too often, designers don’t check the implementation of their designs to make sure they meet accessibility benchmarks.

For more on how to semantically implement accessible forms, I highly recommend reading the W3C’s guidance on how to create websites that meet WCAG.

Together we can improve user experience

If you found this article valuable, give it a few claps so others can find it and follow me on Twitter for more.

NextUX

The future of iteration

Sign up for NextUX

By NextUX

Our latest articles on design and product development Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Andrew Coyle

Written by

Committed to helping others with design — Formerly @Google @Flexport @Intuit

NextUX

NextUX

https://nextuxdesign.com/

Andrew Coyle

Written by

Committed to helping others with design — Formerly @Google @Flexport @Intuit

NextUX

NextUX

https://nextuxdesign.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store