How to create great UX for BBFs (big, beautiful forms)
And my discussion of the Amazon delivery-option selection box
Welcome to Ask a UX Consultant! This newsletter is for developers, PMs, founders, and other non-designers who want to get better at UX. If you have a question, send it to ask@uxbysarah.com. The more specific, the better!
JD writes:
What’s the best way to handle big forms? One page or several pages?
Great question! The best form design depends on what you’re trying to do with the form, who your users are, and why they’re filling out the form. Every situation is different, but I’ll discuss some guidelines that can point you in the right direction depending on your scenario.
The first thing you want to consider is why the user will be filling out your form and how strong his motivation is. Is it because he has to, like a job application, an expenses-reimbursement form, or an airline reservation? Is he a contractor being paid for data entry? Or does he have much lower motivation, such as taking a survey or filling out a quote request on a commoditized product? Or is it somewhere in the middle, like a checkout flow?
In general, the lower the user’s motivation, the greater the odds that he’ll abandon at a page break. Having said that, low-motivation users will also abandon if they see a giant single-page form with a tiny scrollbar. In both of these cases, a great way to mitigate the low-motivation exodus is by setting the user’s expectations up front for how much effort the form will take. This is why we’ve seen the proliferation in recent years of site surveys with progress bars, pagination, or the estimated time being embedded within the call to action.
If your users are highly motivated, it’s probably not worth your resources to build these mitigations, but it’s good to understand the base principle so you can keep it in your back pocket for the future.
But to get back to your question — when choosing between a single page and a multi-page form, in most cases it’s preferable to go with the one that feels shorter. What does that mean? Well, imagine that your form has five input fields. If you put them all on one page, the form will certainly feel much shorter than if you split the questions across five pages. Now imagine your form has x questions, and as x increases from 5, eventually two pages feels shorter than one giant mega-page because the many inputs and tiny scrollbar look so daunting. The value of x at that threshold will vary based on many factors.
If you’re a big company and this form has the ability to make or lose you a bunch of money, it might be worth testing a few variants to see which one performs best with the metrics that you care about. If you’re a small company and “probably” is good enough for the resources you have available, mock up some full-resolution versions, show them to five people in a browser, and ask which one looks like less work. (There’s a lot more that I could say about the best way to do lightweight drive-by UX tests like this, but that’s a topic for another post!)
All that said, there are a few things you can do to make a form feel shorter than it is.
Cluster related inputs. For example, an address usually consists of name, street line 1, street line 2, city, state, zip code, and country. But for most users, those seven inputs feel much shorter than just three or four independent inputs that are not related — especially if they’re laid out in an “address” shape and not just a left-aligned column of fields.
Break the form into sections. Just as we all hate to receive emails from our relatives that consist of one gigantic mega-paragraph, dividing a large form into logical sections makes it much more digestible.
Consider adding a second column. If the labels of your inputs aren’t too long, adding a second column can often make a big difference to its appearance. If you do this, it’s prudent to make sure the that tab ordering behaves in a logical manner. It’s also worth doing some hallway usability tests to make sure that the layout isn’t confusing, which can happen sometimes depending on the data that’s being requested. Additionally, some studies have shown that multi-column form layouts can be less efficient time-wise. But unless efficiency is extremely important in your application (such as with a contractor doing data entry), I’d argue that that’s less important than reducing abandons.
Use generous white space. A lot of times we react to the density or uniformity of a form instead of its actual length. Being generous with the minimum spacing as well as the spacing between sections will make a big difference.
These tips won’t all be applicable to all situations, but they’re good to have in your tool belt.
Drawing the line
In the preceding paragraphs I’ve listed a lot of features that every form-maker could spend a lot of time implementing. So how do you decide where to draw the line for your application? Which of these should you bother with on your form? Here are my recommendations:
If your users are highly motivated (e.g., reimbursement forms) and your brand doesn’t revolve around elegance or ease of use, it’s probably not worth implementing many of them unless/until you see a problem with abandons. (Always make sure you have the ability to measure abandons!)
If your users have low motivation (e.g., survey respondents), try to do as many of the above suggestions as possible (while also weighing that dev effort against the value you expect to gain from the survey).
If you have (or are building) a high-status brand or you make a software product whose major selling point is ease of use, I’d recommend doing all of the above suggestions. Additionally, you should also invest some effort in the minutiae of form-UI best practices around input validation, auto-complete, auto-save, placeholder text, optional/required fields, etc. (Those best practices are a deep topic for another article, but this should point you in the right direction.)
For everything else — the medium-motivation users of medium-status brands — implement the low-hanging fruit, measure your abandons, and add more features as necessary. Additionally, if your form is of a common type that your users will be familiar with (e.g., a checkout flow), make sure that yours is at least average relative to your competitors.
I hope that answers your question, JD! It’s hard to cover every circumstance where a long form may be required in a post of this length, but I tried to hit the main use-cases. For subscribers, let me know what you think in the comments below or if you have any follow-up questions!
A small final note
One of my very favorite sites for creating forms is typeform.com. They aren’t paying me to say that; I’m just a happy user. They’ve created a really great product that is one of the best-designed forms out there. If you want some inspiration for what a well-designed form looks like, I recommend checking out their sample forms. Or you could take my one-question survey (which I created with Typeform) to tell me what topics you’d like me to talk about next.
Sign up now so you don’t miss an issue
In coming issues, I’ll do deep dives into specific UX examples, answer more of your questions, discuss low-cost user-research techniques, and share practical tips and advice for improving your UX skills. Even if (or especially if) you don’t have a UX or design background yourself.
Discussion: the Amazon delivery-option selection box
Let’s jump right in. The first design choice I notice about this portion of the UI is that it has a lot of different kinds of text. I count eleven at first glance, but there may be one or two more. Most people with a cursory exposure to UX principles are probably aware that it’s usually considered worse to have many different kinds of text, so what does that say about the design choices they made?
Aside from being a pretty cluttered UI, there are some other questionable decisions here too. The vertical spacing between lines isn’t standardized throughout the UI, and there’s also inconsistent use of parentheticals and horizontal spacing as well:
So does that make this bad UX? No. It may not be beautiful, but that doesn’t make it bad UX.
These design choices are one of the reasons that I chose this Amazon component to discuss today. It’s a great example of a UI that violates a lot of accepted design principles but still provides a pretty good experience to the user. It informs him when his package will arrive, provides most of the information necessary to help him make the best decision, and lets him choose other delivery options with a single click. And although these are ostensibly the user’s goals, not Amazon’s goals, I’d say they’re Amazon’s goals as well since they’re necessary steps to completing a purchase.
Could this UI be more attractive? Absolutely. It’s easy for us to imagine what Apple’s equivalent UI would look like. But we don’t have to imagine, because I’ve got it right here:
Just look at the differences between those two UIs. On Apple’s, you can only take two actions. (Really more like 1.5, because how many people read Apple’s shipping policy?) On Amazon’s we have six actions available, MUCH more information presented to the user, and a decidedly less elegant page. So when you’re building a custom checkout flow for your startup, how do you know which of these two successful companies to emulate?
It depends on your business goals. Apple wants its customers to know that it highly values visual design. Amazon would rather launch a less-attractive but empowering feature than delay the launch to make it look nicer. As it happens, if you step through Apple’s checkout flow, it has most of the missing actions that we see on Amazon’s UI - they’re just broken out into several stages so each one feels much more spacious and elegant than Amazon’s dense interface. These are both acceptable choices and perfectly fine above-the-threshold UX. For infinite money and time, we can imagine improvements to both. But if your money is less than infinite, the better choice for your product depends on your brand and your customers. If they’re highly price-conscious, it’s probably better to spend your resources on something besides improving your flow’s elegance. On the other hand, if your flow is so inelegant that it becomes difficult to use, well, that’s a problem worth paying to fix.
What do you want to learn next?
What do you want me to talk about in the next issue? Let me know by taking this quick one-question survey about it.
Get your UX question answered.
What topics would you like me to cover next time? Send your UX questions to ask@uxbysarah.com. The more specific, the better! I also <3 screenshots, but they are not required. Don’t overthink it; just click this button and ask me now.
Thanks for joining me.
If you know someone who would be interested in this newsletter, share the love by sending it to them. See you next time!