Introduce UX practices into your forms to give users a better experience and help increase conversions. #
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 lies beyond the thankyou page and want to get there as quickly and easily as possible. Forms often seem complicated, and the increased cognitive load it puts on us makes completing the actions needed 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 touch point between our users and us, so it is odd that they tend to be neglected by designers, you have done all the hard work to sell your product or service and then force the user to prove themselves worthy by navigating a long drawn out form with obscure error messages and input fields.
With this in mind, what steps can we take when building these touch points for our users that will make the process simpler and generally more enjoyable.
Try using some of the following suggestions in your next project.
Less is more - ask as as little as possible #
With the recent GDPR legislation your attitude towards collecting data will most likely have changed a little, 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!
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 into bitesize amounts. You can usually group these based by the type of information you need.
Embrace a single column layout #
Although 2 column layouts can look visually nice in a design and are often used in print, the eye tracks vertically naturally. By having a 2 column form layout the users eye will have to zig zag left to right to search of new lines which will impair the users ability to give you the info you need.
Use Input Constraints #
Make use of constraints on your users inputs, it may be quicker just to use text fields for everything, but well planned use of number fields, or javascript to ensure only a certain range or type of data can be added will ensure you have less erroneous data in your submissions and most importantly help guide the user.
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 see where they are in the process.
Pre fill and pre select 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.
Error Checking #
Now your user has entered their data, please make it a 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 know what to to do to solve it. If possible use real time validation to check as the user fills the form in and maybe give a signal via an icon such as a tick to show when it is correct.
Show optional fields not required #
As mentioned, with the new GDPR guidelines you should only hold the information on a user you really need, with this in mind everything on your form “should” be mandatory so indicate optional fields instead rather than adding an asterisk to every required field.
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 - therefore they won’t want to just give it away. With a site like Facebook, they use this information to try and build a personal relationship with you, generally you would follow the less is best rule and not ask if it isn’t necessary.
Make your CTA’s work #
Now your 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.
Credits: #
This tutorial was originally written and commissioned for Webdesigner Magazine - Issue 285.