As users, we generally don’t enjoy filling in forms online. This is down to a number of reasons. Forms tend to be time-consuming – we are already thinking about the product or service that waits beyond the thank you page, and we want to get there as quickly and easily as possible. Forms often seem complicated, and the increased cognitive load they put on us makes completing the actions even harder. And then of course there is the risks and issues around personal data. Everyone is now much more aware of GDPR – and anyway, why do you really need to know my birthday for me to sign up for this service? Forms are the key touchpoint between our users and us, so it is odd that they tend to be neglected by designers. Having done all the hard work to sell the product or service we then force the user to prove themselves worthy by navigating a long-form with obscure error messages and input fields. With this in mind, what steps can we take when building these touchpoints for our users that will make the process simpler and generally more enjoyable? Try using some of these suggestions in your next project.
01. Ask as little as possible
Following the recent GDPR legislation your attitude towards collecting data will most likely have changed a little, and really you want to only ask the bare minimum in order to let your user complete their goal. The less the user has to fill in, the more likely it is that they will.
02. Visually ‘chunk’ your forms
Sometimes you have no choice but to request lots of data for a sign-up or registration. In this case, it really helps to visually break your content down into bitesize amounts. You can usually group these based on the type of information you need
03. Embrace a single-column layout
Although two-column layouts can look visually nice in a design and are often used in print, they will naturally track vertically. By having two-column form layout the user’s eye will have to zigzag left to right in search of new lines, which will impair the users' ability to give you the info you need.
04. Use input constraints
Make use of constraints on your user’s inputs. It may be quicker just to use text fields for everything, but the well-planned use of number fields or JavaScript to ensure that only a certain type of data can be added will ensure you have less erroneous data in your submissions, and most importantly will help to guide the user.
05. Auto-focus
Remove a click straight away by auto-focusing on the first field in the form. It gives the user a good starting point. Make sure the focus itself is styled to be clear and prominent. This will really help the user to see where they are in the process.
06. Prefill and preselect where possible
If you have data relating to a user, or they have filled in some information previously, then use it to prefill elements of the form. A perfect example would be a billing/shipping address. Make sure you give the user the option to use the same address rather than type it in twice.
07. Error checking
Now your user has entered their data, make it as simple as possible for them to rectify any errors. Always show your errors inline next to the field in question, and explain the issue so the user knows what to do to solve it. If possible use real-time validation to check as the user fills the form in, and perhaps give a signal via an icon, such as a tick, to show when it is correct.
08. Show that optional fields are not required
As mentioned, with the new GDPR guidelines you should only hold the information on a user that you really need. With this in mind everything on your form should be mandatory, so indicate optional fields rather than adding an asterisk to every required field.
09. Explain why you need information
If you do want to make someone’s experience better with extra personalisation, make sure you explain what you will use the information for. Bear in mind that the information you’re asking from a user could be personal so they won’t want to just give it away. A site like Facebook will use this information to try and build a personal relationship with you, but generally, you should follow the ‘less is best’ rule and not ask if it isn’t necessary
10. Make your CTAs work
Now the user has filled in your form, make sure the design and visual hierarchy of the page works so that they naturally press the submit button. There are loads of ways to visually do this.