
Better Form Design: One Thing per Page - petercooper
https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
======
cryodesign
Some good tips and a good reminder not to overload the user with information,
especially on mobile.

However, trying to give this pattern a new name feels a bit disingenuous - it
comes across as self promotional (even if unintended).

This is a well established pattern already and it's known as a Wizard -
guiding users, chunking information, etc -- IBM talked about this back in 2001
[0]

And they wrote a 400 page book about this called Designing Effective Wizards
[1]

I see this quite often in our industry, people trying to coin a new name for
something when one already exists.

Please don't.

Give credit where credit is due or at least acknowledge people who researched
it before.

/rant over

[0] [https://www.ibm.com/developerworks/library/us-
wizard/](https://www.ibm.com/developerworks/library/us-wizard/)

[1] [https://www.amazon.com/Designing-Effective-Wizards-IBM-
books...](https://www.amazon.com/Designing-Effective-Wizards-IBM-
books/dp/013092377X/)

~~~
untilHellbanned
They likely don't know of the prior art. In fairness "one thing per page"
isn't a very literature searchable topic and many people have trouble finding
good search terms to uncover all the relevant prior art. "Wizard" doesn't
intuitively scream out "one thing per page".

I have no idea how prominent IBM wizards are in the design literature, but I'm
a scientist and I can speak to the challenges of finding relevant literature
when all you have is what search terms makes sense to you.

~~~
cryodesign
Wizards are quite well known if you're working in software and design.

Here is another book that mentions it (2011)
[http://designinginterfaces.com/patterns/wizard/](http://designinginterfaces.com/patterns/wizard/)

And some other examples of the term being used:

[http://patternry.com/p=multiple-page-
wizard/](http://patternry.com/p=multiple-page-wizard/)

[http://ui-patterns.com/patterns/Wizard](http://ui-
patterns.com/patterns/Wizard)

[https://storify.com/kaniasty/how-to-design-a-
wizard](https://storify.com/kaniasty/how-to-design-a-wizard)

The author worked in the industry for at least 10 years and not coming across
this well established pattern seems unlikely, hence why it felt a bit self-
promotional.

~~~
Nition
The "Wizard" idea is pretty old too. Microsoft Works had document "wizards"
(complete with little picture of a wizard) in the 90s. "Install Wizards" were
also common already then.

------
unabst
> 12\. IT ADDS A SENSE OF PROGRESSION

And entrapment. Many users are afraid to hit the back button when they're in
the middle of submitting information. This design leverages Back Button
Anxiety. It forces the shopper to make a decision. It may not alter the minds
of anyone set on quitting or going forward, but it will most certainly
influence anyone having second thoughts or thinking of coming back later. Even
if it's just to look at an item description one more time, if that option
carries risk of sunk costs, they might just go with it. But chances are they
were about to get distracted and end up not buying anything, so the shop wins.

~~~
Silhouette
I find the close button is often a satisfying alternative if a site won't let
me go back.

I don't know how much money Amazon have lost from me in recent years because
their order pages are so awkward that I've given up and bought elsewhere
instead, but it must be the equivalent of several hundred dollars by now, if
not thousands.

~~~
unabst
Amazon is a perfect example actually... I was trying to find a reference but
gave up. I remember reading about the logic behind isolating the checkout
experience. For a while I don't think they even had a link to go back to your
cart. Even now they make it non-obvious and have a dialog that will ask you
before you leave. They also remove links of any products to their product
pages. All trivial UI elements you'd think would be good design, but it turns
out entrapment is better. Heck, Amazon would know.

They do have an accordion, but they minimize data entry to an absolute
minimum. It's all multiple choice and submit.

~~~
Silhouette
From personal experience, streamlining a checkout process as much as possible
can make a rather dramatic difference to conversion rates. However, the "as
possible" is important. You don't want any unnecessary distractions, but if
you back someone into a corner so they can't check something they are worried
about or correct a mistake, they'll probably just go somewhere else.

------
swiley
These kinds of forms are the WORST! I'm forced to fill out FAFSA every year
and they try to seperate the increadibly long form onto multiple pages. The
result is that I don't know what information I'm going to be asked after
moving to the next page so I get to play telephone tag with my parents.

Even when I have all the information myself it's still pretty painfull. I
stopped using turbotax because they build their site this way. Moving down the
form provides plenty of "a sense of progress" for me.

~~~
pknopf
I guess it doesn't make sense in all cases, but in general, it seems like a
good approach.

------
pjs_
UK voter registration is a brilliant example of this. It's a freaking joy to
use.

[https://www.registertovote.service.gov.uk/register-to-
vote/c...](https://www.registertovote.service.gov.uk/register-to-vote/country-
of-residence)

~~~
lstamour
"Start with one thing per page": [https://www.gov.uk/service-
manual/design/form-structure](https://www.gov.uk/service-manual/design/form-
structure)

~~~
Angostura
That really is a great document.

------
wiradikusuma
For reducing cognitive load, I think the opposite might happen, at least for
me. I keep wondering if what I've typed so far is correct, so I keep going
back and forth, and become frustrated when the data is lost during page
transitions.

~~~
adambsilver
A summary panel is useful here (on each page).

We did this for Kidly (one of the examples in that post).

~~~
TeMPOraL
A detailed enough summary panel for me not to worry about data entry issues is
pretty much identical to the original form itself, so at this point one may as
well put the whole form on one page.

------
kodfodrasz
The idea is not totally bad, but I have come across some bad implementations.

The worst is when there is no visual progress feedback, to know where I am in
the filling process.

Also for me this is worse than a single form. At some point a question comes
up which I don't want to answer, eg. for privacy reasons, or you don't need to
know that for the operation I'm carrying out. I have already given out info,
which I'd rather not in this case, as I changed my mind on the way.

I believe that multiple page forms have a lower conversion rate, while also
wasting non-converted consumer time. this adds frustration, and lowers future
conversion rates. Happened to me.

------
diggan
Hm, no mention of Typeform when it comes to "Better Form Design" and also one
thing per page? Basically, Typeforms main UX is all about showing (or rather
focusing) as little part of the form as possible while you fill out, leading
to way higher response rate and also (at least personally), a form that is
easier and faster to fill out.

Example:
[https://templates.typeform.com/to/zvlr4L](https://templates.typeform.com/to/zvlr4L)

~~~
UnoriginalGuy
What's with the invisible text input boxes? And navigation is all over the
place, I have no idea where I am, and where I am in relation to the rest of
the process.

------
jbb67
Perhaps it's just me but I absolutely _detest_ this pattern. It turns a simple
page where you fill into your details then hit submit into a "simple" 36 step
process where at each stage you think "Argh ANOTHER page, just get on with
it".

Half the time if it takes more that 2 pages to submit something I'll just give
up and find a competent website instead

~~~
gizmo
In your case the problem is that you don't want to fill out all the
information in the first place, not whether the form has one page or four
pages. Getting asked for too much information when signing up for something is
annoying.

A multi-stage form should indicate how many pages there are, to prevent the
"ARGH it keeps going" effect you mentioned. Surveys are some of the worst
offenders here.

------
arnioxux
A lot of components library call these steppers:

[http://www.material-ui.com/#/components/stepper](http://www.material-
ui.com/#/components/stepper)

[https://react.semantic-ui.com/elements/step](https://react.semantic-
ui.com/elements/step)

[https://ant.design/components/steps/](https://ant.design/components/steps/)

I was trying to pick a react components library (for fast prototyping) and one
of my requirements was having this particular component.

------
zizee
> The result was an extra 2 million orders a year.

Does the author actually believe that the change of the form setup was solely
responsible for the increase in orders? Or was this just a poor choice of
words?

It is a pity that they didn't study (or publish) the results of an A/B test on
this change.

~~~
adambsilver
Yes it was based on a percentage increase to conversion with the new checkout
flow.

------
kuon
I've seen abuse of this pattern. I am currently re-designing a medical form
that has about 50 steps on separate pages, and if you do an error on page 5
and notice it later on page 45, you have to hit back 40 times and refill those
40 pages again.

~~~
majewsky
The ticket machines of Deutsche Bahn (the German national railway) solve this
rather nicely. The dialog is separated into about 10 pages, but the pages are
laid out as tabs at the screen's top edge. So that gives you a sense of
progression, and an easy way to jump back to any earlier page to change the
selection. The rest of the selections are retained properly as far as I
recall. Furthermore, every page is populated with sensible defaults, so if
you're a single adult who wants a single ticket for today, you can enter your
destination and then jump straight to checkout.

~~~
kuon
I am not saying this a bad pattern, but more that it take care to be
implemented properly.

~~~
majewsky
Yes, and I agree with you.

------
vizeroth
The key is to avoid the extreme of a wizard design where the user clicks
through multiple pages with little value in what is displayed on each page.

------
Terr_
> Users don’t mind clicking, as long as each step brings them closer to their
> goal.

Yeah, I've been in a similar struggle with single-page-application involving a
product-manager whose primary metric was "number of clicks". This was for an
internal ERP-type interface where it was trying to "unify business processes"
between two companies that had merged. (Already scary, yes?)

Anyway, the unfortunate result is an interface where _way_ too much
information is eagerly loaded and displayed. The user is given choices with a
huge "branching factor", and whenever they _do_ click it takes so long to jump
to the next big data-vomit that they stop being engaged and get bored.

My belief is that we should have been focusing on an interface where the user
is presented with lots of fast an easy questions, so that they are funneled to
data/forms that help them accomplish a specific business task which we've
actually identified.

~~~
adambsilver
Glad you shared this experience with us.

I agree with the approach :)

------
JCzynski
Ugh. I wish no one would do this, so I could auto-form-fill things faster.

~~~
throwanem
You're the 1% case. So am I, and I don't design for us either.

~~~
TeMPOraL
The 99% of the 99% case don't complain because they're not aware that websites
could not be shit; they think this is how things must be.

~~~
throwanem
Thus: we design best so that the 99% have their expectations, developed
painfully over years of dealing with shit websites, met with a minimum of
suffering, and also so that the 1% find a maximum of purchase for the tools we
use to improve our own experience.

It's not easy! But I don't know a better way.

------
tmaly
I am currently building out a wizard for the next version of my side project.
One other benefit not directly spelled out is the idea of progress.

If you look at how linkedin utilizes the progress indicator, it creates a
natural tendency to want to complete the profile for many of the users.

------
swah
Its not my concrete case, but for something _like_ a "daily TDEE (total
calories)" calculator, what would be better? A single, complex page or a
wizard?

------
AngeloAnolin
The article could have been better if concrete end to end example was provided
(or references where people could clearly see) that they could apply to their
own scenarios.

------
l5870uoo9y
Forms are annoying and should to the greatest extend be automatized. Chrome
autofill and saving user's input is helpfull.

------
cdevs
__*50 celebs who gained weight, just click next to see person one and
completely reload the page and ads and crank up your mobile data charges.

I think those people agree with this article very much.

------
theprop
One Thing per Page should probably be mandated by law for mobile forms! So
much easier & faster to manage.

------
henrikwm
I've been a developer for 10+ years and this is very much in focus at the
customer I work for at the moment, where we've created a login portal for our
end-users. Recently this design pattern has spread to other sites as well.
Over 50% of our users are on mobile devices and almost all of them are
traveling. So our services needs to be fast, unobtrusive, responsive and
capture just enough of user information. With as little cognitive impact on
the user as possible. Travelling is stressful enough as it is without having
to potentially struggle with bad UX on a website when you just want to see
your flight details.

So the Login page, Forgot password page, Create user page etc. are all asking
for one single piece of information at a time, with a clear single call-to-
action. This interaction design pattern really works nice when you're
conscious about the context the user is in. Be careful not to go overboard
with the minimalism though. You still need a good page title, breadcrumb,
texts and labels to explain the context where the form is shown.

Example:

When the user has logged-in to your website to shop, have a random step after
sign-in that asks for a single piece user information (delivery address, phone
number etc.) before they continue. It must be very easy to dismiss,
unobtrusive, and easy to understand why you're asking. Some will enter their
information, some will do it later. And that's ok because now they had the
power of choice. And when they're ready to create an order, the time-to-order
(conversion rate) will decrease because some of the information has been pre-
filled.

Designing forms for data-capture is difficult and you need to decide on when
it is appropriate to ask the user for the information you need.

I've made those God-forms before but never again. Serving the user a God-form
with dozens of required input fields, however optimized for data-entry as
you'd like, will only add to your drop rate, it will annoy the user and by re-
designing how you capture user information you will improve your site's UX
(and probably increase your profit as well!)

When designing a form next time, ask yourself: Do I have to ask the user for
all of this information right now all at once, or can I capture this
information in the context of the user working towards an end goal in other
areas of my site?

Minimize cognitive load: [https://www.nngroup.com/articles/minimize-cognitive-
load/](https://www.nngroup.com/articles/minimize-cognitive-load/)

Making the choice easier for users: [https://www.interaction-
design.org/literature/article/hick-s...](https://www.interaction-
design.org/literature/article/hick-s-law-making-the-choice-easier-for-users)

~~~
smichel17
> It must be [...] easy to understand why you're asking.

This is the most common place I've seen the pattern you describe go wrong.
Sites that ask me for seemingly unnecessary information are asking to be left.

~~~
henrikwm
Yeah, I agree that it can be a negative experience if it's implemented badly.
Prompting too often and too aggressively is bad practice.

However if it's a quick, easily dismissed question, it can work when used
sparingly

