A while back, we made a post on the qualities of a good website design Top 10 qualities of a good website design . It’s highly encouraged to give that a read, but if you want the CliffsNotes version, here it is:
Stop stressing your users out!
From Confusion To Conversion: 8 Ways To Improve Your Website Form Design
From Confusion To Conversion: 8 Ways To Improve Your Website Form Design
- August 19
- 8 mins
Reducing the stress and confusion users feel when navigating a website is key to keeping them around long enough to do the thing you want them to do (whatever that might be). Website-induced stress happens in many ways, and that post covered a lot of them: Clashing colours, too many call-to-actions, confusing navigation, and more. But it wasn’t an exhaustive list, and today we’re going to discuss one more area that could be causing those poor retention rates: your forms.
Website forms can be used for all sorts of things! Creating a user. Signing up for a newsletter. Building a music playlist just for you and your pet. Pets by Spotify Whether it’s the main point or an afterthought, a simple contact method or a whole 10-step program, your website probably has at least one form on it. But just having that form is no guarantee users are going to fill it out, and that sort of defeats the whole purpose, doesn’t it?
If your form is stressful, confusing, unintuitive, or just plain boring, you lessen the chance of your user sticking around to complete it. Let’s go over 8 ways you can stop your website form design from working against you:
- Keep it short and sweet
- If you can’t make it short, make it digestible
- Use autofill (properly)
- Allow multiple formats
- Use intuitive error feedback
- Keep labels clear (even after input!)
- Use the right field type for the job
- Give users a reason to finish the form!
1. Keep it short and sweet
The longer your form is, the less likely users are going to stick around to finish it. In this chart from Eloqua, you can see that form conversion swiftly declines the more form fields there are:
Every time you add a new field to your form, you should ask yourself:
- Is this field necessary?
- Is this form the best point to collect this information?
If either of those answers are no, then maybe that field shouldn’t be there. The issue of overly-long forms is especially bad for mobile users, who are taking up more and more of the web’s traffic every year. There are going to be those people who will willingly slog through a ridiculously long form! But are they the majority of your target audience? How many others will look at that long list and lolnope their way out of your website?
If conversions are more important than having every one of those fields accurately filled in, then sacrifice the non-essential fields in your website form design to bring those conversion rates up, up, up.
2. If you can’t make it short, make it digestible
Sometimes, you just can’t shorten your form to 7 fields or less. Maybe it’s a very niche application, or a complicated sign-up process. It would be nice if it could be shorter, but it can’t, so what can we do to make it less stressful for users to fill out?
This is where some popular form tricks come in handy!
Conditional Logic
Do some fields rely on others to be filled out first? Do users need to select a very specific radio button for the following fields to even matter? Hide those fields, and only show them when that radio button is selected! Users whom the field doesn’t apply to don’t even have to know it’s there.
Multi-Page Forms
This is especially helpful for those monster forms that feel like filling out a school application. Can you break them up into smaller sections? Do it, and have each section be on a separate page. Breaking things into digestible pieces like this will keep users from being overwhelmed by the sheer number of visible form fields that need to be filled out.One of my favourite examples of this is on SHIP’s (Service and Housing In The Province) application page. The form is massive, but feels way more manageable in separate pages. There’s also a progress bar at the top of the fields to let users know how far along the process they are.
Estimated Time To Complete
Informing users of how much time they’re going to have to set aside for your form will help them make smart decisions about whether they can take that time now, or later. This will also help with reducing form abandonment rates (the rate at which a user starts a form and quits before completing). Going back to SHIP’s application form, you can see the estimated time to completion at the very top of the form: 30 minutes! (I said it was a long form!) Adjusting your website form design to warn users that the form needs a lot of time to complete might seem unintuitive, but it’s far better than your user getting halfway through the form, running out of time, and leaving in frustration and never coming back.
(If your form is this long, it also might be a good idea to provide them with a way to save their progress and come back later.)
3. Use autofill (properly)
Sometimes you can save the user the hassle of filling in those form fields altogether. Contact forms, landing page forms, even newsletter signups tend to have similar fields in them: name, email, phone number, things like that. If your form has those fields, you can let the browser autofill handle the work for your user.
Just make sure that the autofill is pulling the information you’d expect to receive. If you’re expecting a postal code and the autofill adds the country name instead, now your user has to delete the incorrect information on top of filling out the field properly!
4. Allow multiple formats
This is especially bad for phone number fields. Actually, this point is here mostly for phone number fields. Whether the user writes their number as 123-456-7890 or (123) 456-7890, your form should accept it regardless. If you must accept numbers in a very specific format, use masking as well as an example of the format directly above/below the field.
(And then expect autofill to get it wrong regardless.)
5. Use intuitive error feedback
Users are going to get your form wrong sometimes. This happens more often with longer forms, but even on a shorter form it can be easy to just miss a required field completely. When the user gets the form wrong, make sure you tell them exactly what went awry. Detailed error messages at the top and bottom of the form, highlighting the incorrect field, and scrolling users to the incorrect field are all things that’ll help direct your user to the parts they need to fix.
6. Keep labels clear (even after input!)
Okay, we’ve been guilty of this too. It’s just so tempting to keep website form designs clean by using placeholders inside the field instead of labels!
The problem comes when the user fills out the field. If there’s no label visible, there’s no indication of what that field was for. You can rely on the user remembering what they filled in 5 seconds ago, sure, but what if autofill was on? Those fields are now filled, and users have to either delete the text inside to see what the field was even for, or just hope it autofilled correctly.
If you still want to have the labels visible as placeholders inside the field, it’s a good idea to replace them with actual labels when the field is filled. This is a big part of material form design.
7. Use the right field type for the job
If there’s a limited number of options, use a select field or radio buttons. If the options are a range, use a slider. Avoid using text inputs for fields where they’re not needed, and you’ll save users valuable time and effort. Your mobile users especially will thank you!
8. Give users a reason to finish the form!
With every part of your website, users are going to have one question: What’s in it for me?
Sometimes, the answer to this question is easy. They might fill out a form to gain access to a resource. They might get a free consultation. But if the answer to this question isn’t immediately obvious, then users might decide not to even bother filling out your form at all.
Review forms suffer from this the most. Adjust your website form design to make it clear what users will get in return for their time and effort. Maybe you can offer an additional 5% off coupon for those who take the time to fill out a review?
Takeaway
By following these tips in your website form design, you can increase your conversion rates and reduce the stress and confusion your users might feel while filling out your form. The more enjoyable the experience is, the better for everyone involved!
About the author
I'm a designer and programmer with a can-do attitude and a song recommendation for every mood. Good design is like music: it moves people. If at first you don't succeed, try again with a different soundtrack.
Read more posts by Julie
