Johann Savalle

@yasha.solutions

Product designer and full stack developper living in france
< Back to all articles

Designing Forms - Getting it right

July 22, 2019

Forms are the main tool through which you have a conversation with your users. If you fail at them, you fail to have a good conversation with your users

Forms are central to:

  • Registrations : Having more users
  • Revenue : Having more money
  • Data input : Having more data
  • Tasks and interactions : Actually do something useful

Guiding principles

  • Reduce cognitive load
  • Help prevent errors
  • Make it human

In practice this means :

1. Group your fields

meme 01

Sorry we had to say this one out loud but yeah, it seems like it is not always a well understood concept in some isolated regions of the internet.

Image credits: NNGroup

2. Use multi-step forms when you can

Once you've grouped them in logical block, try to see if you can split them.

Split it.

Again.

Again!

Until you get to a number of steps where each step is a breeze and people do not get crazy when they see your form.

Wizard page

  • Less intimidating - reducing cognitive load
  • When you ask for email, phone or any sensitive piece of data at the end, users are more likely to actually answer (sunk cost fallacy principle).
  • Progress bar - use them to provide a boost of motivation to finish to complete your form (endowed progress effect)

Side note regarding the progress bar : progress bar are great without a doubt when it comes to trace your origin. However the benefit is less obvious when it comes to describe the future steps.

Sometime it can be intimidating to know how many steps you still have to go. So in some cases, you will prefer to use only breadcrumbs logic while building your progress bar - just to avoid your users to freak out when they see your form has 15 steps...

Extra bonus for : conditional logic in wizard

3. Keep fields to the minimum

It is now common knowledge but nonetheless, you still see plenty of forms in the wild with a crazy amouts of fields that could totally be reduce to a bare minimum.

If you need data for extra convincing check these:

4. One column all the things

meme 02

The fields, the radio buttons, etc.

Avoid multicolumn, unless there is some logical bound between two fields, like name and familly name, or date of birth has day, month, year fields... but for the rest, just stay away from multicolumn.

5. Labels: top left of input - no inline disapearing on click

Where to put labels have always been a matter of debate.

But consensus has been built over the years that Top Left labels seems to be the best

For sure, disparearing lable inline are really bad (I have used these a lot, but honestly, unless you have a single email form on a landing page, it does not make any sense to use disapearing inline field.)

So are supporting Infield top left, which is basically top left label but inside the field, check the reference for a detail description of this option.

Why Infield Top Aligned Form Labels Are Quickest to Scan

Google Research - Simple is better - Making your web forms easy to use pays off

Also, always display a field label. Even if it seems obvious - just write the label anyway.

6. Radio buttons over dropdowns

Dropdown require extra user action to reveal all the options of the form.

So it is not scan-friendly.

And we know users like to scan quickly information, right?

So, using Radio Button makes more sense. Unless of course, for country list or for any kind of list where the logic doesn't require opening the list to understand what's in there.

7. Explain what you will do with the information you collect

This is part of the user experience too and it helps build trust.

Moreover, with the GDPR law and the global lack of confidence in tech, it is a good thing you just be upfront about it, and give people a reason to trust you.

Other obvious stuff but still worth mentionning

  • Use auto complete for

    • fields with lots of pre-defined options
    • post code / zip code
  • Be careful when asking for phone numbers on landing page - it reduces conversion rate Clicktale study
  • Make sure the key tab navigation is working
  • Dont make people confirm their email twice
  • use real time validation if you can
  • Do not use reset button, please.
  • Do not sign up users into your mailing list, if they did not ask too. That's a douchebag move, seriously.

References

Joe Leech - Forms are boring - NUX2

Julie Grundy – The UX of Form Design: Designing an Effective Form

Book: Web Form Design: Filling in the Blanks, Luke Wroblewski

< Back to all articles