UX Series: Creating forms that won’t scare your users away
Forms are often met with friction from users because, let’s be honest, they are a nuisance to fill in. This makes it all the more important to get them right. By following these tips, you can create forms that won’t frustrate your users or lead them to abandoning your site.
Organise your form properly
To make your form as simple as possible, organise it properly by grouping related fields together. For example, you could group all personal information together and all billing information together to make it clear what information you are asking for, instead of lumping it all together and letting your users decipher it for themselves.
You could also choose to hide inputs or fields until it is necessary for the user to see them, that way you’re not overwhelming them with information that they don’t need to see yet.
Lastly, don’t forget to make sure your calls to action stand out and have a clearly defined purpose. A call to action that is labelled descriptively such as ‘Create account’ will likely have greater success over something vague like ‘Submit’.
GoCardless uses simple icons and clear subheadings to help group related information together, making it easy for users to scan content and understand quickly what is required of them.
Use help-text
Don’t make it a guessing game for your users, give them a bit of guidance by providing help text. You can use this text to help them understand how their details are going to be used or the format you would like them to use when entering their details.
Help reassure your users
You can use help text to reassure users when asking for sensitive information. For example, when asking for email information you could use ‘we’ll only use your email address for creating an account’. They are less likely to get put off this way because you have been up-front about your intentions.
Reduce the amount of thinking for your users
To reduce the likelihood of your users inputting information incorrectly, guide them on the correct format in your help text. For example, when asking them to set up a password you could use ‘minimum 6 characters, at least 1 number’. This helps speed up the form filling process and keeps frustration to a minimum for the user.
A few other things to remember when using help text:
- Keep it simple and use as few words as possible.
- Don’t use help text if it’s not necessary. For a first name field, there would be little value in adding the help text ‘write your first name’, for example.
- If you don’t want the help text to be visible to all users, you could make it user triggered by hiding it behind a tooltip. This reduces clutter for your users but still provides help.
Moneysupermarket use pop-ups to show their help text when necessary. In this example, they have used their help text to reassure their users why they are asking for a registration number. It has been purposefully placed out of the main view of the form so that it doesn’t obstruct the user when entering information, and they’ve also provided the option to close the pop-up in case it causes any frustration.
Choose your input type & length wisely
There are many types of input:
- text-based
- checkboxes
- radio buttons
- drop down lists
It is important to choose the right input type based on the type of information you would like to collect.
Radio buttons, drop down lists and checkboxes
If you want your users to choose one option, then use radio buttons and for times when you have more than 5 options, consider using a drop down list. If you want your users to have the option to select multiple options, then use check boxes.
Text-based inputs
If using text-based inputs, think carefully about how you size them. The size of the input field should reflect the amount of information you are expecting. A typical example; the postcode input should be shorter in length than the input for an address. If the inputs are much longer than the information that is needed, your user might think that they have completed it incorrectly, when they haven’t.
It’s also a good idea to make sure your inputs are big enough to ensure your users have enough room to type and enough room to read what they’ve typed. But avoid using very tall and narrow fields or very wide and short fields, they need to be just right (think Goldilocks).
I was enquiring about a yoga class the other day and was presented with this contact form. It was simple and easy enough to use, but the text holder for the email input is too small. By the time you’ve finished entering your email, you can only see half of it so there is no way of knowing if you’ve written it correctly at a glance. I had to scroll back to the beginning of the text holder to check, which adds unnecessary time. This is something that is easily avoided if you size your text holders to reflect the amount of information you are expecting.
Use labels that add clarity
Adding clear labels to your form makes it easier for your users to quickly scan the form and understand what is required of them. Often you will see labels placed inside text inputs, but this is bad practice for usability as the label will disappear as soon as the user starts typing and makes it very difficult for the user to check back through their submission. Keep your labels simple and as short as possible so that your users can understand the data you are requesting quickly.
Research has shown that putting labels on top of text-holders helps users fill out forms quicker than if labels were placed either to the left or right of text-holders. So if you can afford the vertical space, put them on top.
Lastly, don’t forget to indicate to your users which of your fields are required and which are optional. You can simply do this with an asterisk or another symbol of your choosing and place it near the required field elements with an explanation of the symbol below the form.
No labels. No help text. What were Southeastern thinking? You would hope that most people would take a logical guess and think these boxes were for your ‘From’ and ‘To’ stations, but why leave it up to your users to guess what information you need? Forms like these will cause confusion and slow things down which will only frustrate your users. So, at the very least make sure you label your inputs!
Let your users know how they’re doing
Keep the tone conversational by letting your users know when they’ve made a mistake or when they’ve accomplished something.
Ensure error messages provide a clear description of the error. The error should also be pointed out on the form, so that the user doesn’t have to trawl through the form to find it. In some situations, you could also offer the user alternative suggestions for inputs. Creating unique usernames, for example, can often be time consuming so providing suggestions in this scenario would be a good idea.
Reward your user with complimentary feedback when they have done something correctly. You can do this in real-time as the user types by showing ticks for each field that is completed correctly, or you can show success messages or separate pages for when they have completed the form entirely. This not only helps decrease form completion time because the user is confident they have entered the correct information, but it also increases user satisfaction.
MailChimp have used real-time feedback to let their users know if the password they have created is secure enough to move on to the next stage. This is much better than allowing users to proceed and then showing them an error message informing them that their password is not up to scratch and that they have to try again.
Don’t ask for unnecessary information
Who likes completing forms? No one. So keep it short and simple and don’t ask the user for something unless it is necessary. You might think that all your information is necessary, but it might not be at that particular stage, so remove anything that you could show later on. If you can reduce the information you show at the early stages, you’ll have more luck getting your user through the first round (for example signing up). You can then ask your users for more information later on or allow them to change the information they’ve provided when it suits them.
Twitter have done a great job of keeping things simple at their sign up stage and only ask for the information that they need. There’s currently a mere 645 million (ish) registered twitter users out there, so you could say this form has been tried and tested.
Keep mobile in mind
Remember that users on mobile devices will be seeing your form on a small screen size and using touch as the method of input, so you will need to accommodate for this. You can do this by using larger font sizes and increasing the height of your input fields. Remember that all of the tips above apply for mobile too, you might just have to apply them slightly differently.