As you work through your designs, it is only a matter of time until you have to design a way for users to give you information. So today we will take a whirlwind tour of:
Forms.
(If you’re just starting the UX Crash Course: Start Here.)
****
Forms are one of the places you will spend a lot of your time, usability-wise. They cause confusion, mistakes, and loss of engagement, and they are one of the most valuable parts of your site.
If they aren’t one of the most valuable parts of your design, why are you using a form? Did I mention that they cause confusion, mistakes, and loss of engagement?
****
One Long Page or A Few Short Pages?
The most common question with forms — from UX designers and marketers alike — is “how long is too long?”
It is a good general rule to keep forms as short as possible, but don’t be afraid to break it into pages if it makes sense, or if you want to save information in steps, just in case the user quits in the middle.
The main thing is to make a form feel simple. Keep related questions together. Eliminate questions you don’t really need. And use as many pages as you need; no more, no less.
****
Input Types
The purpose of a form is to get input. i.e. — information from the user. And there are a number of ways you can collect it. Whether you use a standard text field, or a super-custom slider, you should choose the input type that gives you the highest quality answers.
For example, lets say you want the user to pick their favourite type of goat. Check Boxes and Radio Buttons are both ways to let the user pick from a list of options. However, check boxes allow them to choose more than one option, but radio buttons only allow one selection.
If you want a more complete answer, use check boxes. If you want a more selective answer, radio buttons might be your thing.
****
Labels & Instructions
We’ll talk about actually writing labels and instructions tomorrow. For now, let’s talk about the function of labels.
When you’re labeling your inputs — how else will the user know what to do with them? — be short, clear, legible, and put them close to the input they are labeling. In the grand scheme of things, that will solve 99% of labeling problems.
Sometimes instructions are needed if the question is unconventional or complicated. In that case, it can be helpful to add a little explanation. If it’s only a few words, put it near the label and the input. If it’s more than a few words, put it on the side of the form instead of within it, so it doesn’t interrupt the flow of users who know what they’re doing.
I highly recommend the book Web Form Design, by Luke W.
****
Preventing & Handling Mistakes
When it comes to forms, mistake happen. It’s our job to prevent as many as possible, and handle the rest as gracefully as possible.
You can prevent mistakes by adding some intelligence to the inputs. For example, if a text field is for phone numbers, make the form smart enough to handle “(000) 000-0000” or “000 000 0000” or “0000000000” or “000.000.0000”. (Talk to your developers about this)
Giving users an example of the input you expect can also reduce errors. It can be directly in a text field, for example, or part of your instructions.
When users miss a question or make a mistake, you should alert them so they can fix it. If it is a question that you can verify, you can show a check mark or an “X” to indicate whether it is correct or incorrect. This is called inline error handling.
Password fields also use the inline method to indicate if the password is “weak” or “strong” as you type.
Do not use inline error handling if you can’t verify the input, like when people enter their name.
When the user clicks “next” or “done”, you can check the form for missed questions or mistakes. If there is a problem, make it very obvious — visually — which ones they missed, and why they are wrong.
Protip: make sure the user can see the error from the bottom of the form! If they have to scroll up to find out what happened, they won’t.
****
Speed vs. Mistakes
This is a little advanced, but super useful:
Are you asking really common questions like “name” and “email”, or more unusual ones like “what’s your favourite type of velvet artwork?”
For common questions, a form with labels that are left-aligned & above the input will get users through it as fast as possible. It keeps everything on the Axis of Interaction.
For uncommon or complex questions, a form with labels to the left of the input (on the same row) will slow users down a little, but create less errors.
For most forms, put the “done” button on the left, on the Axis of Interaction.
If the form will do something really destructive or critical, put it on the right, so people pause to look for it instead of clicking it by reflex.
****
Phew, that was a lot for one lesson! Good work!
Tomorrow we will learn how to write labels, instructions, and calls-to-action: UX Copywriting.