The first and most important form design question to ask yourself is what’s most important to you: a form that is beautiful or one that is user-friendly. They’re not mutually exclusive – web interfaces today are both more attractive and easier to use than they were 10 years ago – but there are still times when you need to prioritize one over the other.
Take color blindness, for example, which affects more than 4% of the population. Color choices are unlikely to make someone who's not color blind more or less likely to fill out a form. For users who are color blind, on the other hand, it’s not a matter of preference. If they can’t read the words on the page, your conversation rate drops.
When each form submission contributes to a larger goal – revenue, engagement, project progress – usability usually comes before aesthetics. Your design decisions might boil down to “Which option will lead to the highest number of responses?” followed by “How can I make the form look better without making it harder to fill out?”
UX optimization is a massive field. Large companies have entire teams dedicated to UX and accessibility improvements. But if you’re working solo or on a small team and looking for some form design best practices, here are five entry points to get you started, drawn from a few our our favorite UX experts and sources.
1. Shorten your form with autocomplete fields and conditional questions
Before fussing over question phrasing or formatting, create a list of everything you want to ask. Then, cut as many questions as possible. Because all else being equal, a shorter form almost always has higher completion rates than a longer one.
If you’re working on a Contact Us form on your website, that might mean ditching the Company and Address fields. A lead’s email address and phone number will often tell you where they live and work. And when you can’t glean more info from an email or phone number, you can always ask for more information later.
When you’re working with a form that’s hard to shorten, like an order form, autocomplete can at least create the feeling of a quick and easy experience. Fillout forms, for instance, have an option to add autocomplete to an address field. Users only need to provide the first few characters of their address to generate a suggestion that takes care of the rest.
Similarly, hide certain fields until specific conditions are met with conditional logic to further reduce the number of questions on the page. Anything that minimizes the number of inputs will usually translate into higher conversion rates.
2. Split up questions and use consistent phrasing
Clear and concise forms win the day. In Adam Silver’s Form Design Mastery course, he talks about little things you can do to cut down on word count. “We used to use questions like ‘What is your phone number?’ But that’s quite long,” says Silver. “And it means you’re not frontloading the important bit of the information.”
Silver goes on to say, “People [use question phrasing] because subsequent fields such as ‘Are you over 18?’ need to be questions anyways. So they revert to using questions throughout for consistency, which is no bad thing.” One to have the best of both worlds is to base your phrasing on the field type. When you present users with options (e.g. a dropdown menu or a multiple-choice field), make the header a question. When you need users to enter information into a textbox, use an action statement like “Create a password” or “Explain how we can help…”
Then, think carefully through your word choices, something the UK National Health Service’s excellent How to Write Good Questions for Forms recommends. Imagine you have a form that includes the question “Should we ship finished prints to you by mail?” and the options are “Yes” and “No.” Removing “you” from the question would prevent users from feeling confused or frustrated about whether or not someone else could receive the order. Similarly, one-word answer options don’t communicate much. Does choosing “No” mean the user is committing to pick up the order? That’s not clear from the choices.
One of the most common question phrasing mistakes is squeezing two questions into one without realizing it. When you think about it, “Should we ship the prints to you by mail?” is determining two things. First, “What do you want us to do with the finished prints? Mail them to one address - Mail them to multiple addresses - Hold them for pickup.” And second, “Who will receive the prints?” Always ask someone who doesn’t work on your product or service to review your form for ambiguity before hitting Publish.
3. Pick the right field types and keep formatting requirements visible
You probably shouldn’t use a dropdown menu to present fewer than five options. First, users have to click the dropdown, then click their answer. And as silly as it may sound, that’s twice as much work as a multiple-choice field where users can pick their answer in a single click. Here’s Lyft’s flowchart for selection patterns for choosing form field types that minimize user inputs:
When a dropdown does make the most sense, think about the most convenient way to order the options. Sure, a list of t-shirt sizes should be ordered from smallest to largest. But if you’re asking leads what industry they operate in, and most of your clients are manufacturing companies, put that choice at the top of the list, followed by the second most popular, and so on.
4. Avoid using placeholder text and always mark required fields
Even with the visual aid of date pickers, questions that ask for a date are still some of the most common sources of submission mistakes. Whether a user prefers to type the whole date or select a day and month from a calendar view and update the year by typing, they need to know the required format. Your first inclination might be to put placeholder text in fields to suggest the date format. But as Adam Silver says, “When the user types, the placeholder text disappears to make room for the user’s answer. They’re popular because they save space and have a minimalist aesthetic.”
But placeholders are usually a light grey and harder to read than question headers. And when users forget the desired format, they need to delete their answer to see the placeholder again. What’s more, users might remember the placeholder text incorrectly, answer in the wrong format, and fail to notice that the form “corrects” it for them (e.g. 30/5/2023 becomes 5/30/2023).
In Silver’s words, “Instructional text is crucial content that users need to answer questions correctly and easily. Putting that text above the input gives users access to the content they need, when they need it no matter the situation. That’s just good design.” Many UX experts use similar logic to recommend that required questions are clearly marked as such.
You may feel like adding either an asterisk or ‘Required’ to every mandatory question is overkill, overcrowding your form for a small boost in clarity. Nielsen Norman Group, one of the largest UX training firms in the world, says they often see people often try to get around the issue with “Instructions at the top of the form saying All fields are required, or All fields are required unless otherwise indicated.” Or by only “marking the optional fields, since they are usually fewer.”
Both approaches are problematic. Users often don’t read instructions (or they forget them). And when only optional questions are marked as such, users have to determine what is required by looking for the absence of something rather than a clear and present indicator. And thanks to Jakob’s Law (Design for patterns for which users are accustomed to from other sites), all you need is an asterisk since it’s “very common on the web and users are familiar with its meaning…put it just before the field description is to help the eyes easily locate which fields are required by scanning just the left-most character of the label.”
5. Use pages to emphasize positive experiences and simplify error messaging
If you’re looking for a simple, easy-to-digest list of UX principles, LawsOfUX.com is a wonderful place to start. Number one on the site’s Cognitive Biases list is the Peak-End rule, which postulates that “people judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.” It comes from an experiment where people actually preferred a longer painful experience over a shorter painful experience, simply because the longer experience ended on a higher note than the shorter one.
Since users are most likely to associate their experience with your form based on 1) the page that took the longest to fill out and 2) the final page, focus on making those as painless and pleasant as possible. You might consider using the one-question-per-page format for the most difficult sections of an application form (e.g. employment history, education, etc.) and grouping questions that ask applicants to talk about their strengths or their salary expectations on a slightly longer page, since those are more likely to pique their interest.
When you’re putting multiple fields on a single page, use page scrolling as a rough limit for page length. If a user skips a required question or answers with the wrong formatting and then tries to go to the next page, most form interfaces will automatically jump or scroll up to the error. According to UX expert Vitaly Friedman, “Any sudden movements on the page are likely to cause frustration with at least some users.” This isn’t a problem when the page is short enough that no scroll bar is necessary.
The clearest memory users will have of your form is the last page. Always put a little effort into finishing on a high note. That might be a personalized thank you that uses answer piping to include the user’s name, a photo of you or your team wishing a job applicant good luck, a testimonial from a happy customer – anything to make users feel like filling out your form was worth their effort.
Start simple with a clear, concise, and fun form
Your first form doesn’t have to incorporate every UX recommendation or cater to every possible user. Design for the largest group first, and then iterate over time, using the Virtuous Tornado approach to continue optimizing your form so it works for more and more users.
Ask for user feedback, keep an eye on partial submissions, and subscribe to UX newsletters like Adam Silver’s to keep learning and improving your forms. You’ll see the fruits of your efforts in higher form completion rates and happier users.
Ryan Farley is a writer and co-founder of Pith and Pip. He lives in Bangkok, Thailand where he previously managed the editorial team of a web marketing agency.