Better Form Design: One Thing per Page | Hacker News Reader

Better Form Design: One Thing per Page

smashingmagazine.com

151 pointspetercooper62 comments

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/

[1] https://www.amazon.com/Designing-Effective-Wizards-IBM-books...

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.

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/

And some other examples of the term being used:

http://patternry.com/p=multiple-page-wizard/

http://ui-patterns.com/patterns/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.

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.

Funny to see Jennifer Tidwell's Designing Interfaces mentioned here. It's an excellent resource–not just for its specific content, but also in the problem/pattern system is uses. (and it's an excellent antidote against the common believe that designers just care about making things 'pretty' and have no understanding of data or technology)

> They likely don't know of the prior art.

Anyone who's ever installed software on Windows has seen a wizard in action. I think "wizard" is actually in the titlebar in many of them, since these are often autogenerated.

"Wizard" sounds very Windows 95. It wouldn't surprise me to see someone who knows the history very well still trying to rebrand it - I wouldn't want to try to sell it under that name, either, not least because "wizards" in most consumer OSes have a longstanding reputation of not working all that well. And everything old is new again, etc.

(Actually, I have sold it not under that name! Back in 2011, breaking up a gigantic and incomprehensible triathlon registration form into topic-specific sections, presented one at a time with a next/previous flow and a review at the end before submitting. I didn't call it anything much, since it was a one-off and something of a desperation play, but it went over very well indeed, so that was nice. I sure as hell didn't call it a wizard!)

Thanks for sharing those resources. Will have a read.

ODK Collect has had it for a long time too.

Because everyone loved to hate on the wizards in the 00's, people reinvented them and just gave them different names. It's still a wizard.

To be fair, they were hated because a bad experience became expected. Many wizards were painful, were unclear about what was happening or about which options could be changed later, either didn't provide a method of moving non-linearly or erased your progress if you did, etc. Not to mention the dark patterns sneakily installing toolbars and whatnot.

I agree both with the parent comment as well as the sibling comment that absolves anyone from wanting to stay unassociated with that word.

Most wizards were just annoying pop-ups which made you click on Next for a few times to get you where you wanted to be.

> 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.

Unfortunately, lots of site break the back button making this a problem.

First make sure the back button works correctly and offer a link to go back.

People should trust those more than hitting the browser's back.

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.

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.

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.

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.

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

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...

"Start with one thing per page": https://www.gov.uk/service-manual/design/form-structure

That really is a great document.

Yep :)

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.

Same for me.

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

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

Ya, the pattern is fine.

As long as you...

1. Don't break back button. 2. Provide an overview so user can jump around. 3. Give a progress bar.

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.

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.

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

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.

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

Communicating where the user is along the steps can help alleviate this situation somewhat. Instead of a seemingly never ending series of steps, you can see there is e.g. 6 steps and you're on step 2.

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.

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

Then I guess you don't buy car/home insurance online then (or any other financial products)? That's probably the worst case example most folks would encounter. Most UK insurers run to about four of five pages (non-mobile) of data collection. Even if they do already know who you are, many things may have changed (driving convictions, health status, profession, etc; you might even have changed your vehicle), but they also like to confirm your existing details (address, age, sex). There's often no way around this.

That said, any half decent design that absolutely needs to capture this amount of data over several pages will have some kind of progress indicator, hopefully something like "Step 3 of 5", to indicate to the user how much further they have to go to completion.

Yay, I have to wait for the web page to load six times, instead of just once.

A lot of components library call these steppers:

http://www.material-ui.com/#/components/stepper

https://react.semantic-ui.com/elements/step

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.

> 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.

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

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.

Even better when clicking back clears your entries on the previous page!

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.

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

Yes, and I agree with you.

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.

> 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.

Glad you shared this experience with us.

I agree with the approach :)

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

This leads to the slightly more productive question: Is there a way to programmatically catch this case, and what would be the best way to handle it?

I can think of for example rendering all the form fields, only with some being off-screen. When they all suddenly get set to values (detecting autofill), moving them to the visible area to allow for checking and submitting them in a single step.

Better ideas?

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

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.

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.

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.

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?

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.

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

*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.

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

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/

Making the choice easier for users: https://www.interaction-design.org/literature/article/hick-s...

> have a random step after sign-in that asks for a single piece user information

I think being asked a different question next time might ring alarm bells for me, have me double-checking I hadn't mis-spelled the domain.

> 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.

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

Reply on news.ycombinator.com