Creativity & Code

Category Icon Back to Basics - Better Form User Experience

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!

PE _1_BETTER_FORMS_AMAZON.png

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.

PE _2_BETTER_FORMS_CHUNKING.png

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.

PE _3_BETTER_FORMS_SINGLE.png

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.

PE _4_BETTER_FORMS_CONSTRAIN.png

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.

PE _5_BETTER_FORMS_FOCUS.png

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.

PE _6_BETTER_FORMS_PREFILL.png

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.

PE _7_BETTER_FORMS_ERRORS.png

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.

PE _8_BETTER_FORMS_OPTIONAL.png

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.

PE _9_BETTER_FORMS_EXPLAIN.png

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.

PE _10_BETTER_FORMS_CTA.png

Credits:

This tutorial was originally written and commissioned for Webdesigner Magazine - Issue 285.

Previous

Websites are not for designers and developers, they are for users

Read Post

Up Next

Back to Basics - CSS & HTML

Read Post

Work and Play

Thoughts on the design industry and other such bits and bobs.Things I do for fun... be it out in the hills, geeking out or drinking beer :)

2018 +

2017 +

2016 +

2015 +

2014 +

2013 +