Filling out forms is boring, and reminiscent of trips to the DMV. Nobody really likes filling them out, digitally or otherwise, although sometimes we need to. But what if we could improve the user experience of forms? Imagine how much conversion rates would improve if your users could complete forms much more quickly, and without frustration!
Improving the user experience of forms can reduce frustration and ultimately increase the chances of user-conversion. In this article we'll take a look at how.
1. Remove Friction
The underlying principle behind any sort of action you want your user to take (adding items to a shopping cart, finding out more about your agency, filling out a survey, etc) is to remove as much friction as you can from the user flow, and make it as easy as can be for the user.
For example, you should only ask for the information you need. More form fields = more obstacles = more frustration. If your goal is to get the user to sign up for an email list, ask only for their email address.
Here's a brilliant example by Mailchimp.
You might also want their name so that you can address them properly in your emails, but that field can (and probably should) be optional. You can always ask for more information later when you've built up a level of trust.
Tip: did you know that most credit card information is redundant now? All that's really needed to make a payment is the users' email, card number, expiry date and CVC!
Lets take Stripe for example.
2. Break-Up Long Forms
If you have more than a handful of fields, break it up into sections. A terrific example of this is when e-commerce checkout flows split their forms into three sections: personal info, shipping address and credit card details, although this may seem excessive if you're taking the advice of #1 and stripping unnecessary fields.
A better solution may resemble something along the lines of what Typeform does, something I like to call "focus mode" (if you've used a minimalist writing app you'll know exactly what I mean).
With Typeform, the user is focused on only one field at a time, and the others are quite literally blurred out (out of sight, out of mind, as they say); the user can advance to the next field by tapping return. If you've never used Typeform before, it's a delightful experience.
But don't forget to let the user know how much progress they’ve made in the form, and how many questions/fields they have left, otherwise they may simply give up!
3. Steer Clear of Dropdown Fields
Of all the ways to collect multiple-choice data in forms, dropdown boxes offer the worst UX because they're not mobile-friendly at all. Dropdown boxes on mobile require a lot of awkward scrolling, whereas a series of tappable buttons would be a much better solution.
4. Always Label Form Fields
Placeholders don't make suitable substitutes for labels, because when you focus on an input field the "label" will disappear, and the user will quickly forget what they're supposed to type in the field. It may seem trendy to do without labels, but this negatively affects accessibility.
5. Give Detailed Error/Success Messages
Nothing is more annoying than filling out a lengthy form only to have it respond with a vague error message that doesn't explain what you did wrong. You should be very specific with errors so that users can quickly make the adjustments they need to; or better yet, try to use multiple-choice when you can, as this ensures that the user chooses an option from a series of ready-made values.
6. Google Recaptcha
While there are ways to thwart form-filling bots (such as typing characters as displayed on the screen), they can be a nuisance. Luckily, Google offers a one-click captcha that makes things much easier, and they're even working on an "invisible captcha" that detects bots without user interaction (they won't even know the captcha is there).
Deliberately thinking about UX when designing forms for your website or app can drastically increase the smoothness of the users' journey, as well as improve business metrics. Make sure your forms are easy to use, intuitive, and as delightful as can be to fill out!