MockVisual
Published in

MockVisual

Form design best practices

Learn how to improve the design of digital forms

Use a label

Avoid placeholders as a label

Keep labels short

Match field length and structure to the intended input

Form fields should look like form fields

Differentiate form fields from other elements

Use the appropriate input type and tag

Forms should be one column

Fields that logically go together should be inline

Omit unneeded fields

Make action buttons task-specific

Group labels with their inputs

Avoid all caps

Present checkboxes and radios vertically

Show all selection options if < 6

Show errors inline

Group related fields

Differentiate primary from secondary actions

Incorporate an indication of progress for multiple-step forms

Resist modals on modals

Always think about accessibility

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

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.

--

--

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
Andrew Coyle

Formerly @Flexport @Google @Intuit @HeyHealthcare (YC S19) • Interested in platforms