Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now let's talk about the individual fields on your form. You've properly seen some forms where every field is the same length. That may look neat, but it's essentially unhelpful to visitors. When people see fields of different lengths it gives them clues as to how much information you expect them to provide. Phone numbers are a different length to credit card numbers which are different length to card verification numbers. Using fields of the correct size helps people work out what information to put where. You should also help people out by giving them a clue as to which fields are required and which aren't.
The typical way to do this is to use an asterisk, that's a star, next to the required fields. Another way to help people is to limit their choices. A dropdown list box or set of radio buttons means that people get to pick from a set of options rather than having to think about what to type. In terms of human memory recognition is much easier than recall. As long as you've put the right options on the page it's easier for someone to just make a selection than it is to have to start from an empty field. It also allows you to make a default suggestion so long as that default is in line with what most visitors want, it will reduce the time it takes them to complete the form.
When you start putting controls on the page, make sure you use the correct one. Radio buttons and checkboxes are different for a reason. Checkboxes let your visitors choose one, some, all, or none of the options. Radio buttons only let them choose one. Knowing where the name comes from will help you remember which one to use. Old car radios used to have buttons to choose a station. These were physically connected to the tuning controls. Only one could be pushed in at any time, because you could only listen to one station at a time. When you pushed a different one in, it popped the currently selected one back out.
Just as a reminder, here is one case where Fick's Law comes into effect as well. The target size of checkboxes and radio buttons is really small. The solution is to make sure that the text is clickable too. This should happen automatically in most modern browsers, but please check it's working for your forms. Radio buttons and checkboxes are also the exception to the labels to the left rule. Use the checkbox or button is a bullet point so the label goes to the right and put each option on its own line, because otherwise it's how to tell which selector goes with each label.
Another way to make form filling faster and more accurate is to add Help text in line. People won't always click on help links in a form, because they're scared they will be navigated away from the page and then lose their information. If you instead put the help text alongside the form information, it lets them see what's required without the risk of leaving the page. Before you write any help text though, see whether you can make visitors lives easier by making sure the field labels are clear as they can be. A well laid out form shouldn't need masses of extra help text.
One final thing about form layout. Back in the mist of time, the default buttons at the bottom of the form was Submit and Reset. Please do not put a reset button on your forms. The pain that this button inflicts on people who accidentally click it is not worth the hassle. Also, try and use a verb on the submit button that sums up what's going to happen once the user clicks it. For instance, register or sign up for newsletter or request information. Any of these are more educational than the word Submit and they help customers understand what is they will get as a result of completing the form.
You might want to put a Cancel option on a page, more as a reassurance to visitors any the data they've typed in won't get sent. But if you do, make sure it has less visual weight and is physically removed from the submit button so that it doesn't get click on accidentally. And when people press the submit button make sure you reassure them that their data made it through by providing a confirmation screen.
Get unlimited access to all courses for just $25/month.Become a member