larlet-fr-david-cache/cache/ea6f3644381c108795010c0ae6aee332/index.md

title: Form design: from zero to hero all in one blog post
url: https://adamsilver.io/articles/form-design-from-zero-to-hero-all-in-one-blog-post/
hash_url: ea6f3644381c108795010c0ae6aee332

<p>Hi there. If we haven’t met before, I’m Adam and I’m obsessed with designing forms. And I have been for almost 20 years.</p>
<p>What is it about forms then?</p>
<p>Every meaningful interaction on the web is achieved by a form of some sort. Whether it’s letting users renew their passport, send an email or buy something.</p>
<p>Basically anything that isn’t just reading content.</p>
<p>What’s interesting though is that on first glance, forms are easy. In a few minutes you can have text boxes and radio buttons on screen and working.</p>
<p>But look around the internet for a minute, and you’ll find a million and one usability issues revolving around forms.</p>
<p>I’m pretty sure I’ve come across every single one of them. And spent hours solving each one in a way that works for everyone.</p>
<p>And some forms have more than just fields and buttons. They can contain complex interactions or form part of a wider journey—both of which need due care and attention.</p>
<p>So, if I was designing a new form, I’d want to know how to avoid the common issues. And to use my time to solve newer and perhaps more difficult problems.</p>
<p>Seriously, who wants to spend time solving something that’s already been solved?</p>
<p>That’s right—nobody.</p>
<h2 id="a-note-before-we-begin">A note before we begin</h2>
<p>Much of what I’m going to say might sound obvious and boring. But <a href="http://blog.capwatkins.com/the-boring-designer">boring is good</a>, we don’t need to over complicate matters.</p>
<p>So if you’re looking for new and innovative ways to design forms, this is not for you.</p>
<p>This is about designing forms that everyone can use and complete as quickly as possible. Because nobody actually wants to use your form. They just want the outcome of having used it.</p>
<p>This guide is quick and to the point—a whistle stop tour of the knowledge I’ve accrued in my years of form design. It’s not exhaustive, but rather an entry point, designed to save you time on the basics.</p>
<p>Many points I make link off to other articles. If you read each of them, you’ll be more than equipped to make simple and inclusive forms that get out of the user’s way.</p>
<p>Let’s begin.</p>
<h2 id="don%E2%80%99t-mess-with-labels">Don’t mess with labels</h2>
<p><a href="https://adamsilver.io/articles/always-use-a-label/">Every input needs a label</a>. Sighted users can see them, visually-impaired users can hear them and motor-impaired users can more easily set focus to the related input.</p>
<p>Labels should be placed above the input because this works well for different size content and different screen sizes.</p>
<p><a href="https://adamsilver.io/articles/placeholders-are-problematic/">Placeholders are problematic</a>—both as makeshift labels and as a means of storing additional hint text. <a href="http://nostyle.herokuapp.com/examples/registration-form">Instead put hint text below the label and above the input</a>.</p>
<p><a href="https://adamsilver.io/articles/float-labels-are-problematic/">Float labels are also problematic</a>. They have many of the same problems that placeholders have—and some of their own.</p>
<p>Seriously, don’t mess with labels.</p>
<h2 id="crafting-questions">Crafting questions</h2>
<p>You should <a href="https://www.gov.uk/service-manual/design/form-structure#know-why-youre-asking-every-question">know exactly why you’re asking every question</a>. Use a <a href="https://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php">question protocol</a> to help you.</p>
<p>Don’t mark required fields, mark optional ones. Or better yet <a href="https://adamsilver.io/articles/form-design-handling-optional-fields/">avoid optional questions by using a branching question</a>.</p>
<p>Use hint text to tell users why you’re asking them for certain information—it’s not always obvious.</p>
<p>Hint text should be used where users are more likely to make a mistake, like when having to satisfy a complex set of password rules. Error messages should be a last resort.</p>
<h2 id="style-and-microcopy">Style and microcopy</h2>
<p>Form fields should look like form fields. That means they should be bordered and empty so it’s obvious where the input goes. Make fields easy to tap—44px height or more is good.</p>
<p>The width of the field gives users a clue as to the length of the content it requires. So don’t make all fields the same width for aesthetic purposes when you know the expected length.</p>
<p>Avoid <a href="https://baymard.com/blog/avoid-multi-column-forms">multi column form layouts</a>. They’re error prone, slower to use and can cause abandonment.</p>
<p>Buttons should look like buttons. They’re harder to spot when they’re aligned right, especially for screen magnifier users. So <a href="https://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">position the button to the left and below the last field</a>.</p>
<p><a href="https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98">Use sentence case for labels, hints and error messages</a>. It’s easier to read and to spot nouns. Button text should be a simple verb because the user is <em>doing</em> something.</p>
<h2 id="form-validation">Form validation</h2>
<p><a href="https://adamsilver.io/articles/inline-validation-is-problematic/">Live inline validation is problematic</a>. <a href="http://adrianroselli.com/2019/02/avoid-default-field-validation.html">Turn off HTML5 default validation</a>. Don’t <a href="https://axesslab.com/disabled-buttons-suck/">disable buttons</a>—users won’t know how to fix errors without feedback.</p>
<p>Validate forms <code>onsubmit</code>. You can still catch errors with JavaScript to avoid a server-side round trip.</p>
<p>Be tolerant of mistakes like extra whitespace, dashes and slashes. Do the hard work so users don’t have to.</p>
<p>Show an error summary at the top of the page which contains a list of errors. When one is clicked, set focus to the input. For a group of inputs, like radio buttons, set focus to the first input.</p>
<p>The error message should also be placed in context of the field. Put the message just above the field. Placing it <a href="http://adrianroselli.com/2017/01/avoid-messages-under-fields.html">below can cause problems</a>.</p>
<p>Prefix the word “Error:” to the document’s title. It’s the first thing announced by screen readers when the page loads.</p>
<p>Style error messages in red and use a warning icon to provide a <a href="https://developer.paciellogroup.com/blog/2018/01/inclusive-design-principle-provide-a-comparable-experience/">comparable experience for colour blind users</a>.</p>
<p>Error messages should be concise, specific, use plain language and avoid pleasantries like ‘please’. The <a href="https://design-system.service.gov.uk/">GOV.UK Design System</a> is full of brilliant examples.</p>
<p>You can <a href="http://nostyle.herokuapp.com/examples/validation">see all of this in action here</a>.</p>
<h2 id="flow-and-order">Flow and order</h2>
<p><a href="https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/">Start with one thing per page</a>. Then put the questions in a sensible order. For example, payment details should come after delivery details.</p>
<p><a href="https://design-system.service.gov.uk/patterns/question-pages/#using-progress-indicators">Start without a progress indicator</a>. They’re often not noticed and can be tricky to design for dynamic flows.</p>
<p>Tell users what they need and how long the form will take to complete before they start.</p>
<p>In really long forms, let users save their progress and return to finish it later. Use the <a href="https://design-system.service.gov.uk/patterns/task-list-pages/">task list</a> pattern to break up the journey into small, manageable parts.</p>
<p>Put <a href="https://design-system.service.gov.uk/patterns/question-pages/">back links in the top left of the page</a> so users don’t have to scroll past the form to go back. Avoid putting links within the body of the form as it disrupts the tab sequence for keyboard users.</p>
<p>Just before the end of a transaction, let users <a href="https://design-system.service.gov.uk/patterns/check-answers/">check their answers</a> and make changes. This provides reassurance and <a href="https://inclusivedesignprinciples.org/#give-control">keeps users in control</a>.</p>
<p>When a transaction is complete, show a <a href="https://design-system.service.gov.uk/patterns/confirmation-pages/">confirmation page</a> and send users an email confirmation. Tell users what will happen next.</p>
<p>Now’s a good a time to let your brand shine through. This is the beginning of the relationship—not the end.</p>
<h2 id="go-faster">Go faster</h2>
<p><a href="https://www.gov.uk/service-manual/design/form-structure#design-for-the-most-common-scenarios-first">Design for common circumstances</a> by putting the most used option first and marking it as selected. Except when you need to avoid bias—like in surveys.</p>
<p>Use the <a href="https://www.smashingmagazine.com/2017/03/improve-billing-form-ux/">browser’s autofill routine</a> to stop users from typing data manually. This also reduces the risk of typos.</p>
<p>Avoid the <code>maxlength</code> attribute. Many users don’t look at the screen as they type, so they won’t notice that some of their keystrokes were ignored until they look up.</p>
<p>Use form validation and a <a href="http://nostyle.herokuapp.com/components/character-countdown">character count</a> component instead.</p>
<p>Use <code>autocapitalize="none"</code>, <code>autocorrect="off"</code> and <code>spellcheck="false"</code> to stop browsers automatically changing user input on fields that expect grammatically incorrect data—like email addresses and passwords.</p>
<h2 id="field-design">Field design</h2>
<p>Use the right input type. On mobile it will provide users with a more useful keyboard.</p>
<p>Learn <a href="https://adamsilver.io/articles/form-design-when-to-use-the-number-input/">when and when not to use the number input</a>.</p>
<p>Don’t mix up radio buttons and checkboxes. And remember <a href="https://uxmyths.com/post/931925744/myth-23-choices-should-always-be-limited-to-seven">you can have more than 7 options on a page</a>.</p>
<p><a href="https://www.youtube.com/watch?v=CUkMCQR4TpY">Select boxes should be a last resort</a> because they’re really hard to use. Try radio buttons instead. Or use an autocomplete, if there’s a long list of options.</p>
<p>Don’t use <code>datalist</code> for an autocomplete. It’s <a href="https://caniuse.com/#feat=datalist">buggy and lacks support</a>. Autocompletes are really tricky, so you can <a href="http://nostyle.herokuapp.com/components/autocomplete">use mine</a>.</p>
<p>Use <a href="http://nostyle.herokuapp.com/components/memorable-date">three separate text boxes for dates</a>. Only use a date picker when users need to find a date in relation to another, or if they need to know the day, week or month that the date relates to. Date pickers are tricky, so you can <a href="http://nostyle.herokuapp.com/components/date-picker">use mine</a>.</p>
<p>Use a <a href="http://nostyle.herokuapp.com/components/stepper">stepper component</a> to help users make small numerical adjustments quickly and easily.</p>
<p>Don’t use multiple inputs when one will do, like when asking for a sort code. If you do have multiple inputs for a field, don’t auto tab between them. It causes users to make mistakes.</p>
<p>File uploading: try to accept large files and as many file types as possible. Don’t <em>rely</em> on the <code>multiple</code> attribute. Besides a lack of support, it can only be used to select files from a single directory.</p>
<p>Here’s one accessible way to let <a href="http://nostyle.herokuapp.com/examples/dropzone">users upload multiple files</a>.</p>
<h2 id="the-end">The end</h2>
<p>So there you are. A few hundred words on how to avoid 90% of the problems found in most online forms.</p>