7 ms·

Better Form Design: One Thing per Page

151 points by petercooper 9y ago

Terr_ 9y ago
> 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 9y ago
  Glad you shared this experience with us. I agree with the approach :)
cdevs 9y ago
*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.
pjs_ 9y ago
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/country-of-residence https://www.registertovote.service.gov.uk/register-to-vote/c...
- lstamour 9y ago
  "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 9y ago
    That really is a great document.
- adambsilver 9y ago
  Yep :)
vizeroth 9y ago
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.
theprop 9y ago
One Thing per Page should probably be mandated by law for mobile forms! So much easier & faster to manage.
wiradikusuma 9y ago
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.
- kodfodrasz 9y ago
  Same for me.
- adambsilver 9y ago
  A summary panel is useful here (on each page). We did this for Kidly (one of the examples in that post).
  - pknopf 9y ago
    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.
  - TeMPOraL 9y ago
    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 9y ago
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.
AngeloAnolin 9y ago
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.
arnioxux 9y ago
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 9y ago
> 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 9y ago
  Yes it was based on a percentage increase to conversion with the new checkout flow.
unabst 9y ago
> 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.
- adambsilver 9y ago
  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.
- Silhouette 9y ago
  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 9y ago
    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.
    - 9y ago
henrikwm 9y ago
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-law-making-the-choice-easier-for-users https://www.interaction-design.org/literature/article/hick-s...
- GordonS 9y ago
cryodesign 9y ago
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/dp/013092377X/ https://www.amazon.com/Designing-Effective-Wizards-IBM-books...
- untilHellbanned 9y ago
  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 9y ago
    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.
JCzynski 9y ago
Ugh. I wish no one would do this, so I could auto-form-fill things faster.
- matt4077 9y ago
  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?
- throwanem 9y ago
  You're the 1% case. So am I, and I don't design for us either.
  - TeMPOraL 9y ago
    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 9y ago
      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.
kuon 9y ago
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.
- barking 9y ago
  Even better when clicking back clears your entries on the previous page!
- majewsky 9y ago
  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 9y ago
    I am not saying this a bad pattern, but more that it take care to be implemented properly.
    - majewsky 9y ago
      Yes, and I agree with you.
diggan 9y ago
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 9y ago
  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 9y ago
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
- UnoriginalGuy 9y ago
  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.
- gizmo 9y ago
  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.
- teh_klev 9y ago
  > 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.
- mnw21cam 9y ago
  Yay, I have to wait for the web page to load six times, instead of just once.
l5870uoo9y 9y ago
Forms are annoying and should to the greatest extend be automatized. Chrome autofill and saving user's input is helpfull.
swiley 9y ago
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 9y ago
  I guess it doesn't make sense in all cases, but in general, it seems like a good approach.
swah 9y ago
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?
tmaly 9y ago
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.

151 points by petercooper 9y ago

> 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 9y ago
Glad you shared this experience with us. I agree with the approach :)

cdevs 9y ago

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

pjs_ 9y ago

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/country-of-residence https://www.registertovote.service.gov.uk/register-to-vote/c...

lstamour 9y ago
"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 9y ago
  That really is a great document.
adambsilver 9y ago
Yep :)

vizeroth 9y ago

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.

theprop 9y ago

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

wiradikusuma 9y ago

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.

kodfodrasz 9y ago
Same for me.
adambsilver 9y ago
A summary panel is useful here (on each page). We did this for Kidly (one of the examples in that post).
- pknopf 9y ago
  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.
- TeMPOraL 9y ago
  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 9y ago

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.

AngeloAnolin 9y ago

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.

arnioxux 9y ago

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 9y ago

> 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 9y ago
Yes it was based on a percentage increase to conversion with the new checkout flow.

unabst 9y ago

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

adambsilver 9y ago
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.
Silhouette 9y ago
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 9y ago
  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.
  - 9y ago

henrikwm 9y ago

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-law-making-the-choice-easier-for-users https://www.interaction-design.org/literature/article/hick-s...

GordonS 9y ago

cryodesign 9y ago

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/dp/013092377X/ https://www.amazon.com/Designing-Effective-Wizards-IBM-books...

untilHellbanned 9y ago
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 9y ago
  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.

JCzynski 9y ago

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

matt4077 9y ago
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?
throwanem 9y ago
You're the 1% case. So am I, and I don't design for us either.
- TeMPOraL 9y ago
  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 9y ago
    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.

kuon 9y ago

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.

barking 9y ago
Even better when clicking back clears your entries on the previous page!
majewsky 9y ago
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 9y ago
  I am not saying this a bad pattern, but more that it take care to be implemented properly.
  - majewsky 9y ago
    Yes, and I agree with you.

diggan 9y ago

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 9y ago
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 9y ago

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

UnoriginalGuy 9y ago
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.
gizmo 9y ago
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.
teh_klev 9y ago
> 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.
mnw21cam 9y ago
Yay, I have to wait for the web page to load six times, instead of just once.

l5870uoo9y 9y ago

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

swiley 9y ago

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 9y ago
I guess it doesn't make sense in all cases, but in general, it seems like a good approach.

swah 9y ago

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?

tmaly 9y ago

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.