Designing a form (when shorter isn't always better)

My least favorite thing to do online might be filling out forms. So when it’s my turn to design a form, especially one with more than just a few fields, I’m always thinking about ways I can make it less painful for my user.

So what can we do to create a better experience? How can we better design our forms?

There are a lot of parts to a form – the placeholders, the labels, the fields, the sections. So when we’re dealing with a longer form, one strategy you might consider is breaking it up into columns.

At first glance, a multi-column form, like this one from Walmart’s 2021 checkout flow, feels easier on the eyes.

Shorter’s usually better, isn’t it? It’s less intimidating and looks more compact, like there’s less work to do. But research has actually shown that multi-column layouts in forms are generally a bad idea.

Let me explain.

The Baymard Institute, an independent web UX research institute that’s conducted over 130K hours of research on a number of usability topics, released a report a few weeks ago revealing that although multi-column forms might look more aesthetically pleasing, they’re actually a terrible user experience.

Where do I go?

When you only have one column, it’s pretty clear what direction you need to go in – you start at the top and you work your way down. Simple!

But when you have multiple columns, that direction is gone. Let’s revisit that Walmart form. Here it is again:

Which way do you go? Reading in the English language tells you to move from left to right, but if we did that, we’d go from “First Name” to “Street address” down to “Last name.” That doesn’t make any sense.

So I guess you should finish one column first then go back up to the second? This lack of clear direction can throw users off and create confusion.

But why does this matter?

Oopsie daisy!

When users get confused about which direction to go and where to look, there’s a higher chance they’ll miss something entirely and get a frustrating error when they thought they were done. Or, they’ll fill something out incorrectly, mistaking it for a different field, and get an error message that way.

Filling out a form is already a chore. You don’t want to add pain to the process. Forms that are multi-column are more prone to user error, making it a less pleasant experience for your users.

But isn’t there autocomplete or other tools to help fill out the form for you?

Good point! When considering a checkout flow like Walmart’s, users often have the help of password managers or autocomplete to make filling out the form easier, but as designers, we can’t rely on users having these tools. To be safe, we have to assume these aren’t in play.

What about related fields?

There is one exception to the one-column layout that Baymard found, and it’s that fields where the concepts are related can be placed in-line with no usability issues. Fields like “first name” and “last name” are perfectly fine to put next to each other, as are “zip code” and “city”, along with “cvv” and “expiration date.”

But these in-line exceptions should be used sparingly for just a few fields so that the overall layout is still a single-column layout.

Let’s look at Walmart’s checkout flow as it is today as an example of a tempting option that you should still avoid. Here it is below:

To be fair, this two-column layout is a big improvement to their 2021 version.

Rather than creating two columns where you go down one column and then back up the next, they created a two-column layout where the two fields next to each other are actually related. You’ve got your first and last name in the same row. Makes sense. Then street address and apt or suite number. Fair enough. And then you’ve got city, state, and zip together. Sure thing.

The natural inclination to read left to right is honored by grouping related fields next to each other while creating an experience that visually feels like less work because it’s shorter. Seems like a win-win!

But Baymard’s research shows otherwise – that even when fields are grouped together in relatable ways, the two-column layout can still be confusing and prone to error.

The problem is that, at first glance, it’s still not visually obvious which direction I should go in, at least not as clear as a one-column layout.

Instead, I have to read each field to realize that the correct flow is left to right, and in my scanning, I might make an error of skipping a field by accident.

Because of that, Baymard recommends doing the occasional inline fields while keeping the overall layout single column.

So if we shouldn’t use a two-column layout, what can we do to make our forms more approachable?

Break it up

There is one thing that Walmart does well with their form experience – they don’t just break up the form into different sections with headers – they actually hide most of the form until you’ve finished with a section.

Take a look at the following screenshot:

This form has three sections: Shipping, Payment, and Mobile contact. But they don’t show you all three. They’ve actually collapsed and grayed out the Payment and Mobile contact sections, making it feel much more approachable.

In fact, when I complete the Shipping section and hit “continue,” I feel good about making progress on what would’ve otherwise felt like an endless column of fields. It’s a more satisfying experience than seeing the sections and fields upfront.

So consider not just using sections and headers to break up your form, but actually hiding parts of the form from your user, until you’re ready for them to fill it out.

Give it constraints

If I were building a long form from scratch, I might start with something basic like this.

The default for our form fields is for them to take up the whole width of our container.

Instead of placing them directly on the body, another way to make it feel more manageable is to offer them a home on a card or panel with a max-width and some padding, like this:

That makes them feel a lot more contained and organized, a little more approachable.

Another strategy is to have a two-column layout, not for the form, but for the page. You’ll have one column for the form and a second for some additional content. On a checkout page, it makes sense for that second column to be a summary of what the person is buying.

It’s good context and a helpful way for them to confirm what they’re about the purchase, but the other benefit is that it balances out the form. And if your summary includes a photo of what they’re purchasing, that provides a nice visual to offset the column of fields, like this.

If you’re building a form where some type of summary doesn’t make sense, another option is to include some supporting text thanking them for filling out the form. It might be a reminder of what the form is about or why it’s important, plus a fun emoji or small graphic to brighten the page. It’s easy to ignore as a user while I fill out the form, but still brings a lightness to the experience.

When you’re designing your long, single-column form, it might look like a lot, but take comfort in the fact that as a user, you’re providing a single flow – one direction that’s easier to follow than a multi-column alternative. And with the ideas in this issue, hopefully you found ways to make your long form more friendly.

Happy designing!

Saron

Not A Designer Newsletter Shoutouts

It’s super validating to hear your thoughts on the newsletter. Thanks for the shoutout, Julia ❤️