Text and Copywriting
19. Label fields clearly and concisely
The role of good copywriting is underestimated in form design. Striking the right tone, and communicating labels and instructions clearly and concisely, can significantly increase the user’s trust not only in the form, but in your overall brand.
When writing labels for each form field, aim for the minimum number of words and the maximum amount of clarity. If you anticipate any ambiguity or uncertainty on the part of the user, include some short helper text that gives unequivocal instructions on how to fill out the field.
When designing your form, it can also be helpful to produce multiple options for how each field could be labeled. This enables you to test different labeling options, or at least make an informed choice between the available alternatives.
20. Use descriptive, action-based words on buttons
Buttons should describe the action that will be launched by clicking on that button. Sometimes, particularly in more technical applications, “Submit” and “Cancel” are okay, but usually they are too dry and feel too generic. Instead, consider using words or short phrases like “Sign up”, “Send information”, “Create account”.
21. Consider using the first-person on buttons
This depends on your brand’s style guide, and the overall tone you want to strike. However, it’s been shown that buttons that include the first person voice (“I”, “me”, “my”) tend to have higher conversion rates. So instead of “Create account”, you could consider “Create my account”. A rule of thumb is that any button text could be preceded by the words “I want to” and make grammatical sense, as well as making emotional sense in context.
22. Don’t use placeholder text as labels
Placeholder text is the text that displays inside a text entry field before you select it. There are a number of problems with using placeholder text as labels, including:
placeholder text tends to be grayed out, and is therefore less inclusive and accessible
screen readers generally won’t read out placeholder text, making your form unusable for visually impaired users
placeholder text disappears once you select the field and start typing, meaning the user might forget what they are supposed to be doing
placeholder text should help with data entry format, which it can’t if it’s being used as a label
Instead, use both labels and placeholder text to give users the best and most helpful guidance.
23. Don’t use all-uppercase in labels or placeholder text
Uppercase text is usually harder and slower to read, so don’t use it for the body of your form (including labels, placeholder text, and helper text). Generally uppercase text is okay if used sparingly—for example, in section headings, buttons, and icons.
24. Don’t hide helper text
Helper text is instructions or extra guidance beyond just the label—for example, “Password should be 8 or more characters.” If you are using it, display it rather than hiding it behind a question mark icon or tooltip.
25. Make the required input format clear
When entering data like validation codes, phone numbers, or credit card details, users may be unsure whether they can or should include text like brackets, spaces, and dashes. Make the required input clear in helper text—for example “Enter your card number without spaces.” Doing this reduces cognitive load, by taking a decision out of the user’s hands. (However, see also tip #45 below!)
26. Shorter is better than longer, as long as nothing essential is missed
Fewer form fields are preferable to more form fields—but it is counterproductive to make your form so short that it doesn’t actually gather the information you need. In the paradoxical adage occasionally attributed to Albert Einstein, “Everything should be made as simple as possible, but not simpler.”
27. Use confirmation messages where appropriate
Even when a user actively clicks on the “submit” button, you might nevertheless want to consider displaying a confirmation dialog. Again, this might be appropriate in a setting where the action is momentous, or where the user might need reminding to check through what they’ve entered (like sending a job application).
28. Use success states
Once the user has submitted a form, it’s important to display confirmation that the submission was successful. At best, failure to do this means the user is left without a sense of completion. At worst, it could mean the user submits the form again, perhaps placing duplicate orders.
29. Use a sans-serif typeface with a high x-height
Although carefully chosen serif typefaces can work well on forms, generally sans-serifs are a safer option. Many modern sans-serifs—like Roboto, San Francisco, or Proxima Nova—are designed specifically for use on screens. An important feature of these fonts is that they have a large x-height—meaning that the lowercase letters are relatively large.
30. Autofill form fields where possible
There are two main ways of automatically populating form fields: using information that your system already has, and using information that the user’s browser already has. Most modern browsers have “browser auto-fill”; unless you have a good reason to disable this for your form, leave it enabled, as it will usually reduce the amount of work for the user.
31. On mobile, bring up the correct keyboard for the form field
Displaying the standard QWERTY keyboard for all form fields on mobile is a very common mistake in form implementation. If the required input is numerical—like for a phone number—make sure to display the numeric keyboard. This is something you will need to specify when handing off your designs to a developer. Your users will thank you.
32. On mobile, don’t auto-hide password entry
The risk of other people visually snooping on a user’s password entry is very low on mobile—partly because the screen is very small, and partly because people tend to use their phones in such a way that others can’t easily see the screen.
It’s good to give users the option of hiding their password entry with a toggle, but consider not hiding it automatically. The advantage of not auto-hiding password entry is that users can actually see what they are typing, and visually validate it themselves before submitting the form.
33. Don’t auto-advance to the next field in a form
There are a number of arguments against auto-advancing to the next field in a form:
- People are generally not used to it.
- It removes control from the user.
- It makes it harder to visually check and correct the data you’ve entered.
- It may cause people using the tab key to accidentally skip fields.
- Having to manually jump back to previous fields is frustrating.
Instead, when a user reaches the end of the current form field, leave the cursor right where it is!
34. Use conditional logic to shorten forms where appropriate
There are some cases where, depending on the user’s responses, a number of fields in a form won’t need to be filled out. In this case, consider revealing only the fields that the user actually needs to complete. This practice is sometimes called “progressive disclosure”.
35. Make your form usable without a mouse
It should always be possible for the user to fill out and submit your form using only the tab and enter keys. If your form requires mouse clicks at any point, remember that this will make your site or app unusable for some people.
36. Instead of long dropdowns, use predictive search
In fields where there is a very large number of discrete options—for example, country of residence—it is better to implement predictive search rather than a dropdown menu. This pattern allows users to start typing their country; the system then suggests options for completion, which the user can then choose from.
37. Allow users to resize fields themselves where appropriate
Particularly for free text fields, where there might be wide variation in the amount of text entered by different users, it can be helpful to allow the user to expand the field themselves. Wherever possible, enable and accommodate this functionality.
38. Auto-save form data
As you’ll know from experience, there’s little more frustrating on the web than when you spend a long time filling out a form, only to hit submit, realize that your wifi has dropped, and lose all that work. Wherever possible, your system should cache the data entered—whether server-side or client-side—and help the user to pick up where they left off.
39. Be intentional about when Enter submits the form
On a simple form, like an email signup, there is probably no harm in Enter submitting the form even while the user still has an input field selected. However, in a more complex form, or a form where the “submit” action is more momentous (like applying for a loan), or where the action might be triggered accidentally, it makes sense to restrict this functionality.
You could do this by requiring that a keyboard user tab to the “submit” button before Enter will submit the form. Alternatively, you could create a confirmation dialog along the lines of “Are you sure you want to submit your loan application?”
Take particular care in long text-entry fields, where people are likely to use Enter to add line breaks—make sure that Enter doesn’t accidentally submit the form!
40. Allow copy and paste
People may want to paste in information that they use a lot, like their postal address. In particular, the user may also want to paste in a password from a password management tool. Ensure that your password field allows this.
41. Consider splitting a single-screen form on desktop into a multi-screen form on mobile
Different devices present different visual and usability constraints. A form that works well as a single screen on desktop may be too much for a single screen on mobile. In this case, it makes sense to switch to a multi-screen pattern on mobile, rather than sticking to a cramped or lengthy single-screen layout.
42. Test and optimize your form for all major browsers and devices
Forms can rely heavily on how the browser is programmed to handle HTML form elements, meaning that different devices and platforms can give rise to unexpected issues. Start with the most common browsers, but don’t neglect the edge cases: according to StatCounter, as of October 2018, over 6% of people are still using Internet Explorer. Further, data entry on mobile is a very different experience than on desktop, so give adequate time and resources to testing and optimization for both device formats.
43. On mobile, use native OS features for date pickers and other special inputs
Google’s Android and Apple’s iOS both have built-in interfaces for certain kinds of data entry, like date pickers. Aim to use these native elements wherever possible, rather than programming your own. Users will be more familiar with the native option, and it’s very likely to perform better.
44. Use inline validation in preference to submit validation
It’s better to validate the user’s data entry as it happens, rather than doing all the validation when they try to submit the form or move to the next screen. This is partly because it makes sense to address errors while the user is already thinking about the information, and partly because displaying errors when users submit the form disrupts user progress and makes it more likely they will give up rather than fix the error.
Where appropriate, the system should also offer information that helps the user identify the precise nature of the error—for example, “that doesn’t look like enough numbers,” or “did you mean…?”
45. Tolerate a range of input formats where possible
Wherever possible, the system should correct format errors itself, rather than making the user do it. For example, if the use has added dashes to a credit card number, the system should simply strip them out rather than returning an error.
46. Don’t use captchas unless absolutely necessary
Captchas are those little boxes where you have to type in the numbers displayed in a grainy image. They have been shown to severely impact flow completion, so wherever conversion is important, captchas shouldn’t be used.
47. Use inline validation to confirm user progress
Use inline validation to confirm that the user is making progress. This could mean a “tick” icon appearing next to fields once they’ve been correctly filled out.
48. Ensure that error messages help the user to fix the error
Don’t assume that error messages are self-explanatory: “invalid data” next to a credit card number probably won’t help the user identify what’s wrong. Instead, use something like “it looks like you missed a number”.
49. Disable the “Next” or “Submit” button until validation is passed
This provides a clear visual indicator to the user that their data entry is ready for submission.
Thanks for reading!
If you’ve found these form design tips helpful, come back next time for Part 2—when we’ll be looking at conversion rate optimization, more visual design tips, and how to design inclusive forms.
Sign up to our newsletter below and we’ll email you when the next installment is published. Until then!
Want to learn more about the finer details of user interface (UI) design? Check out our brand new, 4-week, mentor-led UI Design course.