UI Design Best Practices For Form Design (Part 2) | Designlab

May 28th, 2019

10 minute read

Welcome to the second half of our ultimate guide to form design! In part 1, we took a look at process & preparation, structure, layout & hierarchy, text & copywriting, as well as engineering & validation considerations.

This time, we’re going to take a closer look at visual design principles in form design, how to create inclusive & accessible forms, and some evidence-based ways to optimize the performance of your form for conversion. Let’s go!

Visual Design

50. Visually differentiate primary and secondary actions

Buttons that function differently should appear differently. Give prominence to the button that takes the user to the expected next step along the path to completion.

51. Arrange primary and secondary actions logically

It is still fairly common to see a “Next” or “Submit” button on the bottom-right of a form, even though most of the time the user’s eye will be following a vertical reading pattern, and naturally come to rest at the bottom-left of a form. We recommend putting both primary and secondary actions at the bottom left of a form, with the primary action on the left, and the secondary action—differentiated as per the previous tip—on the right.

52. Don’t use visual design to trick users

Forms are sometimes deliberately designed to confuse people, so that they are more likely to choose an action they didn’t originally intend. This is often seen in flows relating to account cancellation or unsubscribing from a service, where primary and secondary actions are visually reversed, or confusing copy is used intentionally.

53. Use field length as an affordance

The size of a field should reflect the amount of data that the user needs to enter. For example, a 5-character postal code field should be approximately the size of the 5 characters, not the size of a short paragraph.

54. On mobile, make inputs at least 48px tall

This ensures that form fields are tall enough to be tapped or clicked on accurately on smartphones.

Andrew Wilshere

Designlab

Designer, Writer, and Mentor

Inclusion and Accessibility

55. Ensure a form can be navigated with the tab and enter keys

For users who are unable to use a mouse or other pointing device, the ability to move between form fields using the tab key, and the submit the form using the enter key, is the difference between a form being usable and useless. Many users also prefer navigating a form in this way.

56. At handoff, specify the form’s behavior

Developers don’t magically know how you want a form to behave, so make sure to specify all elements of a form’s interaction design in comprehensive handoff documentation.

57. Remember basic principles of text size and contrast

Body text should be no smaller than 16px on both desktop and mobile, and on desktop should be closer to 20px. Similarly, body text should have a high contrast ratio. See our article on inclusion and accessibility for more info.

58. Don’t use a reset button on your form

Users very rarely want or need to use a reset button, and if one is present, it is vulnerable to being clicked accidentally—resulting in frustration, data loss, and possible abandonment of the form.

59. Disable the “Submit” button once pressed

Once the “Submit” button has been pressed, disable it from being clicked again—and reflect that it has been disabled in its visual state, for example by graying it out. This both confirms that the intended action has been triggered, and helps avoid duplicate form submissions.

60. Auto-focus on the first field in a form

On a page or screen where the primary purpose is to interact with a form, “auto-focus” on the first field in that form. This means that the user can start entering data without having to actively select the first field. For an example of auto-focusing, head to Google! (However, avoid auto-advancing to the next field—see tip 33 here.)

61. Accommodate diverse color vision.

Particularly when it comes to functional elements like buttons and validation errors, avoid color combinations that are problematic for people with colorblindness. In particular, avoid combinations of red and green and orange and green, and especially avoid using these combinations where the two colors are very close in value (darkness). See our article on inclusion and accessibility for more info.

62. Use masks in preference to placeholders

Placeholders can be problematic for a number of reasons. Let’s take the example of “MM/DD/YY” (a mask) vs. “01/01/80” (a placeholder):

“MM/DD/YY” reduces ambiguity, and requires less interpretation
“01/01/80” could be a bank sort code
“01/01” doesn’t make clear which portion is the day, and which is the month
Depending on the visual design, placeholders can make a field look like it’s already been filled out

All of these factors can increase cognitive load on the user, as they have to actively think these ambiguities through.

63. Accommodate differences between countries and locales

Most countries don’t have a thing called a “ZIP code”, and their equivalent code may be in a completely different format. Ensure that your form can handle this form of diverse input, and validate accordingly.

64. Don’t ask for password confirmation

Password confirmation—whereby users have to enter their chosen password twice—generally serves no purpose and adds an unnecessary step. Even if the user makes a mistake when typing their chosen password, you can allow them to reset it using your service’s standard “Forgotten password” link.

65. Respect people’s privacy—and privacy law

As a point of principle, as designers we should respect people’s privacy and avoid creating experiences that request any personal data unnecessarily. Increasingly, domestic and international privacy laws (such as GDPR) require the gathering and storage of personal data to be consent-based, and necessary for the provision of the requested service.

Conversion Rate Optimisation (CRO)

Any of the points above will help users to complete your form with a minimum of friction. But there are some additional tips that will help support your form design’s conversion rate. (In this context, “conversion rate” means the percentage of users who submit the form rather than abandoning it.)

66. Emphasize benefits or value points

Even in short forms, users can very quickly lose an emotional connection to whatever initially motivated them to click through. Particularly in multi-screen forms and in submit buttons, remind the user of the benefits or value points associated with completing the flow. For example, in the signup flow for a book subscrition app, instead of using the button text “Sign up”, we could try “Sign up and start reading”.

67. Use progressive engagement patterns

Testing has shown that, in general, multi-step forms tend to convert better than single-step forms. This is possibly because the initial step is “smaller” and less threatening, encouraging the user to take it; and that, having taken the first step, users are then biased towards completing the process. So, to enhance conversion, consider splitting even simple forms into two steps.

68. Show a progress bar in multi-step forms

In any multi-step or multi-screen form, displaying a clear visual indicator of progress will encourage the user to stick with the flow and complete the process. It’s the equivalent of seeing the light at the end of the tunnel.

69. Use multiple choice options for easy progress

If data can be gathered by presenting multiple-choice buttons or links, then using this form of input requires minimal user effort, and means users are more likely to advance to the next step.

70. Use images for multiple-choice options

Even better, if those multiple choices can be represented using images or icons (think Buzzfeed quizzes), people are even more likely to engage with them and continue their journey through the form.

71. Don’t ask for people’s phone number.

People are significantly more likely to abandon your form if you require their phone number. Omit this request unless you truly need that information to deliver the requested product or service.

72. Use milestone submissions.

A milestone submission describes the point in a form where all the most important information has been gathered. For example, a conventional account creation process might go like this:

First name
Last name
Email address
Address
Credit card details
Create account

This means that the user only converts to account creation by completing the entire flow. However, by using a milestone submission, we can allow the user to complete account creation much earlier, with the other information being entered as a follow-up:

Email address
Create account
First name
Last name
Address
Credit card details

This means that, even if the user doesn’t complete all the information, the conversion to account creation has still taken place. Marketing and follow-up can then be adjusted accordingly.

73. Use subtle illustrations and iconography to aid understanding and build trust

Accompanying sections or labels with explanatory icons or illustrations can help people to more readily understand what’s they’re being asked for, and generally make the interface more friendly, aiding conversion. However, be careful not to make images too distracting: they should support engagement with the data entry process, rather than draw the user away from it.

74. Display social proof

Particularly in longer forms and checkout processes, displaying social proof from people who completed the same purchase can help encourage people to see it through. For example, “Amy bought a Designlab course and ended up changing to a career in design!” combined with a nice photo and quotation.

75. Don’t use security seals in flows that don’t include payment

Security seals like the one pictured below can help to build trust during a checkout process. However, if you display them even when no financial information is being requested, people are likely to abandon the form, since the seal gives the impression that payment will be required.

76. Use transitions between screens to slow things down

Sometimes, a multi-screen form can move on to the next step without the user noticing that anything has changed, particularly if the layout is similar. Introducing subtle animated transitions between steps can help to ensure that the user realizes the next screen has loaded.

77. Use clear signposting

Rather than using generic “Next” and “Back” buttons, write microcopy that gives clear information about the steps ahead. So instead of “Next”, you could use, “Continue to payment”. Although it’s more wordy, it creates greater transparency and trust, and a sense of progress replaces the threat of endless “nexts”.

78. During form entry, remove irrelevant navigation elements

Displaying your full navigation options during form completion—particularly in a multi-screen form—increases the chances that the user will either deliberately or accidentally leave the process. Therefore, consider removing your main navigation in areas like checkout flows.

79. Make your call-to-action bright and high in contrast

To encourage users to hit the prized “Submit” button, give it an appealing and vibrant accent color, and plenty of contrast with the surrounding content.

80. Once the form is successfully submitted, display next steps

After the user has completed the form, display a clear completion message explaining what the user can expect to happen next. For example, at the end of an application flow, a screen could be displayed with information about when the user will hear back.

81. Add your company’s helpdesk info, live chat, or a chatbot to help

Particularly in checkout or other sales-related flows, having a visible way to get immediate help might help reduce flow abandonment. It potentially gives you an opportunity to answer and resolve a concern in real time, where otherwise the user might have changed their mind and closing the tab.