Forms seem just as common online as adorable kitty pictures, but forms are for more than just oohs and aahs. After spending so much time crafting the perfect form, why aren’t users actually using them?
It’s a question we’ve all asked at some point. What is good form design? Is it just about rectangular text boxes and tiny labels? Is there a deeper meaning?
Let’s take a moment to stop thinking about the form itself and think more about the user experience. After all, the user’s the one who experiences the form. But how can a simple form turn into an experience a user enjoys versus another bland form to fill out?
Guided Typing
Did you think we’d leave you hanging with a question like that? Not at all. When creating an a form experience, one of the first steps is to make entering information a breeze. After all, who wants to type a full report just to sign up for a website?
Now, you have to think about the experience on mobile too. In this case, it’s all about having the right keyboard appear for the right text box. For instance, for numerical only boxes, have the number pad pop up versus the standard keyboard. Easier, right?
For desktop situations, the key is to make it less confusing to enter data. We personally hate entering phone numbers. When are you supposed to enter dashes or parenthesis? Who knows! Go ahead and add those elements right inside the form to guide the user through those confusing boxes.
Less Really Is More
We’ve heard the saying a million times, but if less was more, why is it so hard to stop at just one chip? With good form design, the saying is actually true. Think about the last few forms you filled out. Was all of the information necessary?
Probably not. It’s a common practice to use forms to get as much information about users as possible. Not only does this make forms take forever to fill out, but it scares users. We’d want to second guess why a form wants us to enter a phone number just to sign up for an email newsletter.
Smaller forms lead to better user experiences. They’re easier to fill out and you get the benefit of better conversions too.
Clear Labels Are Key
Left, right, top, bottom? Where should the labels go? We all know that labels are a must. What designers can’t agree on is the perfect place to put them. A dozen forms show you a dozen different placements.
A great user experience means knowing what each field in a form is asking for. On mobile devices, some labels disappear completely when screens are resized. Talk about a confusing situation.
The two most user friendly form label options are top and floating. Floating is still fairly new, but the label starts inside the text box and then floats just above the box when the user clicks on it. It looks great and makes the user experience better.
Add Some Separation
Labels are great, but as a user scrolls through a form, it’s easy to get the labels mixed up. As a designer, you already know how valuable white space is. Incorporate it into your forms and you’ve got a magical combination.
For instance, place the label and it’s text box close together, but provide a wider gap between the text box and the label for the next text box. Another option we think you’ll love is separating required and optional fields using a two-column approach. This helps reduce many of those frustrating “required element” errors users get when filling out forms.
Easy Submissions
We know you hate and we do too – incomplete forms. If users go through all the trouble, why won’t they hit submit? Yes, sometimes they just change their minds. We’re all human after all.
Part of the problem is the form design. Let’s start with those pesky CAPTCHAs. It’s not a pleasant experience when you’re asked to prove you’re human and then can’t read the text you’re given. Hidden fields and simple math problems (like 2+4) are so much easier.
The next problem is the Submit button. On some mobile devices, the button ends up being pushed off the screen. On some forms, the button’s actually a tiny link. If users can’t easily find a way to submit a form, they’ll give up.
We don’t want users giving up. Make submissions easy and then give users a nice congratulatory form submission success message. We all deserve a pat on the back for submitting a form, don’t you think?
Good Form Design Is Usable
Good form design is all about making a form usable. Make users want to fill it out and they will. Believe it or not, it’s that simple.
Always put the user experience first and great forms will follow.
Let us know what you think. What are some ways you turn your forms into experiences?
Image:Damian Zaleski