Form UX Design Tips: Best Practice Examples

Form design patterns that help optimize conversion

‍

Although we’re big fans of A/B testing different form patterns to find the optimal design for you, sometimes this is not possible. You may not have large enough sample sizes to draw a statistically significant result or you may be designing your form from scratch so have no point of comparison.

For these cases, there are form patterns that, on average, have been shown to smooth the user experience, minimizing unnecessary drop-off and optimizing the number of people who complete the form meaning that you can use them “off the shelf” without worrying that they’ll wreck your form experience.

At Zuko Analytics we’ve seen these patterns work very well in forms that have added Zuko to track user behaviour and, of course, we made sure we incorporated them into our new form building software when we created that.

‍

This article shares 10 of these top tips to deliver a great form experience for your visitors with live examples from Zuko Form Builder to show how they work in practice:

1. Use defaults and smart search on your dropdowns
2. Use live inline validation
3. Break long forms into multiple steps
4. Don’t use overly strict validation on the phone number field
5. Use radio buttons for small option lists
6. Use microcopy to provide hints
7. Use 3 text boxes for date fields
8. Include a progress bar and let the user move between stages
9. Label optional fields clearly
10. Make tappable elements mobile friendly

‍

1. Use defaults and smart search on your dropdowns

Dropdowns (also known as <SELECT> elements) aren’t the most user friendly formats, particularly for mobile devices, but sometimes they are a necessary evil (if you have a long country list for example).

If you absolutely have to use a dropdown there are a couple of things that you can do to make the experience less annoying:

• Place the most common answers at the top of the list. For example, if the majority of your customers live in the USA then don’t make them have to scroll down 100+ options before finding the answer they need.
• Make the dropdown searchable. This means the user can find the answer they need with a few keystrokes rather than getting repetitive strain syndrome from scrolling.

‍

‍

2. Use live inline validation

Error messages are critical in guiding users through your form to a successful completion. If they make a mistake then it’s important that you tell them right away. If you wait until they reach the bottom of a long form and click submit before triggering errors then they’ll be pogoing up and down to try and locate where they’ve gone wrong.

Just as importantly, if they input a valid answer then giving them that big green tick immediately provides a sense of reassurance and removes stress from their form journey.

Don’t just take our word for it, this famous study by Luke Wrobleski showed a 22% increase in form success rate and a 22% decrease in errors made when using inline validation Vs validation on submit.

‍

‍

3. Break long forms into multiple steps

Have you ever tried to complete a form with dozens of fields all on one page? We have and it’s not a pleasant experience. You’re constantly wondering whether you’ve entered everything right and when the madness will end.

Breaking your form into smaller, manageable steps will keep your user from suffering cognitive overload and dropping out from the accumulation of stress.

If you’re going to do this then we recommend:

• Start simple - If you can ease the user into the form (think fields like name or email address) they’re more likely to commit to completing it.
• Use a progress bar to tell the user how much they have completed and how far they have to go.
• Don’t have too many steps. 4-7 is generally OK but definitely no more than 10.
• Let the user move back and forth between steps - if they can’t go back to correct something it will only increase their annoyance and make it likelier that they’ll abandon.
• Cluster similar questions. For example, personal details, delivery details, payment details, etc.

‍

‍

4. Don’t use overly strict validation on the phone number field

Phone number fields are often tricky for users. They’re not sure whether they should include the country code. Are spaces OK? What about dashes?

If your validation is too strict and stops people entering their phone number the way they are used to it leads to annoyance and abandonment. That’s one of the reasons why ‘Phone Number’ is the third most problematic field based on Zuko data.

Instead, limit your validation to the minimum characters needed to determine that a phone number has been entered (usually 8).

Then, use your back end to reformat the number if necessary. Or, more commonly, the people who will actually have to dial the phone number are more than capable of interpreting what the number is themselves.

‍

‍

5. Use radio buttons for small option lists

When you’ve only got a small list of options for a user to choose from, radio buttons are the most elegant way to ask them. One tap and you’re done.

Using other methods such as dropdown menus mean the user has to click to open, scroll down, select their option, adding unnecessary complexity. You can see some of the distraction they introduce in an eye tracking study Zuko ran.

Only consider using dropdowns over radio buttons if you've got a long list of options that would be too unwieldy to put in a radio option.

‍

‍

6. Use microcopy to provide hints

Microcopy is the lubricant that helps guide a user through the form journey smoothly.

Without copy to provide context and explanation, some questions can lead the form visitor to distraction, confusion and second guessing. Just a small piece of text can be the difference between the user successfully progressing with the form or quitting in anger.

Some good uses of microcopy include:

• Telling users what they are going to need to complete the form (passport number, etc)
• Clarifying what is required (what are the password requirements for example)
• Explaining why you need the information (users can be suspicious - if you need their phone number tell them what you will, or will not, do with it)
• Persuading them - tell them the benefits of giving you the info
• Clarifying errors
• Reinforcing your brand voice

When you use microcopy, make sure it is clearly visible to the user. Don’t hide it behind a tool tip which most people won’t see.

‍

‍

7. Use 3 text boxes for date fields

We’ve all been on forms where we’ve had to scroll back 20+ years (at least) to add our year of birth. Dropdowns and date pickers are hugely inefficient for date fields. Instead, use a simple three text box pattern - three inputs and the user is done.

This isn't just us making it up. Zuko Analytics has eye tracking research on DOB fields that helped us come to the conclusion.

‍

‍

8. Include a progress bar and let the user move between stages

If you’ve got a multi-step form, using a progress bar helps manage user expectations. They know how many stages to go before they are done.

If you are using a progress bar, make sure that the user can bob back and forth between the stages. If you don’t let them go back they’re going to quit in frustration when they realise they’ve made a mistake on a previous stage.

And be darned sure that their previous inputs are saved for them when they do go back. If you’ve nuked all their data they are not going to be happy.

‍

‍

9. Label optional fields clearly

We don’t always want to make a form field compulsory. Some may argue that if a field isn’t important enough to be compulsory then why are you including it at all. However, there are circumstances where it may be warranted.

For example, if you are asking for contextual feedback then forcing people to answer may mean you get nonsense (people answering for the sake of it rather than entering what they believe) that pollutes your data.

If you do have optional fields, make sure they are clearly labelled so there is no confusion.

‍

‍

10. Make tappable elements mobile friendly

Ever spent ages prodding your finger at a mobile phone screen trying to tick a checkbox that has been designed for the desktop format?

If you’re designing a form, avoid that scenario by making your radio buttons, text boxes and checkboxes large enough to easily accommodate the average meat puppet of a digit.

‍

‍

If you’d like more advice on optimizing your form experience you can download our Big Guide to Form Analytics & Optimization.

‍