Design Better Forms

Common mistakes designers make and how to fix them

Andrew Coyle
Jul 5, 2016 · 3 min read
Image for post
Image for post

Forms should be one column

Image for post
Image for post
Multiple columns disrupt a user's vertical momentum.

Top align labels

Image for post
Image for post
Users complete top aligned labeled forms at a much higher rate than left-aligned labels. Top aligned labels also translate well on mobile. However, consider using left-aligned labels for large data-set entry with variable optionality because they are easier to scan together, they reduce height, and prompt more consideration than top-aligned labels.

Group labels with their inputs

Image for post
Image for post
Present the label and input close together, and make sure there is enough height between the fields so users don’t get confused.

Avoid all caps

Image for post
Image for post
All caps are more difficult to read and scan.

Show all selection options if under 6

Image for post
Image for post
Placing options in a selector drop-down requires two clicks, and hides the options. Use an input selector if there are over 5 options. Incorporate contextual search within the drop-down if there are over 25 options.

Resist using placeholder text as labels

Image for post
Image for post
It is tempting to optimize space by using placeholder text as labels. This causes many usability issues that have been summarized by Katie Sherwin of Nielsen Norman Group.

Place checkboxes (and radios) underneath each other for scannability

Image for post
Image for post
Placing checkboxes underneath each other allows easy scanning.

Make CTAs descriptive

Image for post
Image for post
A call to action should state the intent.

Specify errors inline

Image for post
Image for post
Show the user where the error occurred and provide a reason.

Use inline validation after the user fills out the field (unless it helps them while in the process)

Image for post
Image for post
Don’t use inline validation while the user is typing — unless it helps them — like in the case of creating a password, username, or message with a character count.

Don’t hide basic helper text

Image for post
Image for post
Expose basic helper text wherever possible. For complex helper text, consider placing it next to the input during its focused state.

Differentiate primary from secondary actions

Image for post
Image for post
There is a bigger philosophical debate regarding whether a secondary option should even be included.

Use field length as an affordance

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

Ditch the * and denote optional fields

Image for post
Image for post
Users don’t always know what is implied by the required field marker (*). Instead, it is better to denote optional fields.

Group related information

Image for post
Image for post
Users think in batches, and long forms can feel overwhelming. By creating logical groups the user will make sense of the form much faster.

Why ask?

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


Make it fun

Life is short. No one wants to fill out a form. Be conversational. Be funny. Gradually engage. Do the unexpected. It is the role of the designer to express their company’s brand to elicit an emotional reaction. If done correctly, it will increase completion rates. Just make sure you don’t violate the rules listed above.


It takes hours of research and attention to create content like this article. Please give it a few claps to motivate me to keep writing. It’s free for you but means a lot to me.

For more:

Follow NextUX | Find me on Twitter

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