<p>Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, <strong>forms are one of the most important components of digital product design.</strong></p>

Design better forms

<ul><li>Forms should be one column Multiple columns disrupt a user's vertical momentum</li><li>Top align labels</li><li>Group labels with their inputs</li><li>Place checkboxes (and radios) underneath each other for scannability</li><li>Make CTAs descriptive</li><li>Specify errors inline</li><li>Differentiate primary from secondary actions</li><li>Ditch the * and denote optional fields</li><li>Group related information</li></ul>

Design better forms: best practices

<p data-selectable-paragraph="" dir="ltr"><em dir="ltr">Here are the </em><a href="https://app.nextuxdesign.com/design/69f181f8-53fa-4c05-8e2b-7fc0150bd3a9" rel="noopener" dir="ltr"><em dir="ltr">form elements</em></a><em dir="ltr"> I created to illustrate concepts in this article. Feel free to use it in your work.</em></p><p data-selectable-paragraph="">Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design.</p><p data-selectable-paragraph="">This article focuses on the common dos and don’ts of form design. Keep in mind these are general guidelines and there are exceptions to every rule.</p><h1 data-selectable-paragraph="">Forms should be one column</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*XhzxeTnAuWoaeJmlPBP0bw" width="785" height="316"><figcaption dir="auto">Multiple columns disrupt a user's vertical momentum.</figcaption></figure><h1 data-selectable-paragraph="">Top align labels</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*tnR_OXAKMJW8S9cqRy416A" width="785" height="337"><figcaption dir="auto">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.</figcaption></figure><h1 data-selectable-paragraph="">Group labels with their inputs</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*obwyjb54NCWy3sOPfm2WEg" width="785" height="337"><figcaption dir="auto">Present the label and input close together, and make sure there is enough height between the fields so users don’t get confused.</figcaption></figure><h1 data-selectable-paragraph="">Avoid all caps</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*w6nZOf5pZSha6FoWu3YtRw" width="785" height="337"><figcaption dir="auto">All caps are more difficult to read and scan.</figcaption></figure><h1 data-selectable-paragraph="">Show all selection options if under 6</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*VvQeOFsY57NJxtZmKyRnHA" width="785" height="302"><figcaption dir="auto">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.</figcaption></figure><h1 data-selectable-paragraph="">Resist using placeholder text as labels</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*XvUnJwHtQhJ3Wl8Apj9lhQ" width="785" height="337"><figcaption class="kq kr bw bu bv ks kt dp b ey ez eg" data-selectable-paragraph="" dir="ltr">It is tempting to optimize space by using placeholder text as labels. This causes many usability issues that have been <a href="https://www.nngroup.com/articles/form-design-placeholders/" class="fi hw" rel="noopener" dir="ltr">summarized by Katie Sherwin</a> of Nielsen Norman Group.</figcaption></figure><h1 data-selectable-paragraph="">Place checkboxes (and radios) underneath each other for scannability</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*VLqTEZP8OrH24FooksePbQ" width="785" height="224"><figcaption dir="auto">Placing checkboxes underneath each other allows easy scanning.</figcaption></figure><h1 data-selectable-paragraph="">Make CTAs descriptive</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*VzlN4tj2hQRUel2iNzM9dw" width="785" height="285"><figcaption dir="auto">A call to action should state the intent.</figcaption></figure><h1 data-selectable-paragraph="">Specify errors inline</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*-NXH_4cKK_ngIgrcqShTbg" width="785" height="285"><figcaption dir="auto">Show the user where the error occurred and provide a reason.</figcaption></figure><h1 data-selectable-paragraph="">Use inline validation after the user fills out the field (unless it helps them while in the process)</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*aGO8yGo2jqu9XgntfFvlsQ" width="785" height="240"><figcaption dir="auto">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.</figcaption></figure><h1 data-selectable-paragraph="">Don’t hide basic helper text</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*D2A7FGZdYdtt9YC1q7IAUw" width="785" height="285"><figcaption dir="auto">Expose basic helper text wherever possible. For complex helper text, consider placing it next to the input during its focused state.</figcaption></figure><h1 data-selectable-paragraph="">Differentiate primary from secondary actions</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*STZ7rbj0wO5u2sn0bsR-KQ" width="785" height="285"><figcaption dir="auto">There is a bigger philosophical debate regarding whether a secondary option should even be included.</figcaption></figure><h1 data-selectable-paragraph="">Use field length as an affordance</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*3rOjyzcj68Dm7badROWuxg" width="785" height="171"><figcaption dir="auto">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.</figcaption></figure><h1 data-selectable-paragraph="">Ditch the * and denote optional fields</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*riNfOVAxTChvaQ29n-6IPQ" width="785" height="337"><figcaption dir="auto">Users don’t always know what is implied by the required field marker (*). Instead, it is better to denote optional fields.</figcaption></figure><h1 data-selectable-paragraph="">Group related information</h1><figure><img alt="" src="https://miro.medium.com/max/500/1*1mPIcYr9ZMmZ4g2Ayf5BPA" width="680" height="731"><figcaption dir="auto">Users think in batches, and long forms can feel overwhelming. By creating logical groups the user will make sense of the form much faster.</figcaption></figure><h1 data-selectable-paragraph="">Why ask?</h1><mark>Omit optional fields and think of other ways to collect data. Always ask yourself if the question can be inferred, postponed, or completely excluded.</mark><p data-selectable-paragraph="">Data entry is increasingly automated. For example, mobile and wearable devices collect large amounts of data without the user’s conscious awareness. Think of ways you can leverage social, conversational UI, SMS, email, voice, OCR, location, fingerprint, biometric, etc.</p><h1 data-selectable-paragraph="">Make it fun</h1><p data-selectable-paragraph="">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.</p><p data-selectable-paragraph="" dir="ltr"><em dir="ltr">Here are the </em><a href="https://app.nextuxdesign.com/design/69f181f8-53fa-4c05-8e2b-7fc0150bd3a9" rel="noopener" dir="ltr"><em dir="ltr">form elements</em></a><em dir="ltr"> I created to illustrate concepts in this article. Feel free to use it in your work.</em></p>

Here are the form elements I created to illustrate concepts in this article. Feel free to use it in your work. Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface…

product

Product & Design

<p><em>Here are the </em><a href="https://app.nextuxdesign.com/design/69f181f8-53fa-4c05-8e2b-7fc0150bd3a9"><em>form elements </em> </a><em>I created to illustrate concepts in this article. Feel free to use it in your work. </em> </p>

<p>Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design. </p>

<p>This article focuses on the common dos and don’ts of form design. Keep in mind these are general guidelines and there are exceptions to every rule. </p>

Place checkboxes (and radios) underneath each other for scannability

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

Differentiate primary from secondary actions

<p>Data entry is increasingly automated. For example, mobile and wearable devices collect large amounts of data without the user’s conscious awareness. Think of ways you can leverage social, conversational UI, SMS, email, voice, OCR, location, fingerprint, biometric, etc. </p>

<p>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. </p>

Design Better Forms

Design better forms

Design better forms: best practices

CURATED BY

Related collections

More like this