The thing that interests me with this and similar design patterns (e.g. forms in tabs) is how you relate validation errors to the user once they hit the bit ‘Continue’ button that actually does the form submit to the server.
You can, of course, expand the section that has the error in by default (all other sections contracted). But what if there are multiple errors in different sections.
There are ways of marking the section headings and such forth, but as you say about the ‘click the heading’ approach, they start to drift away from what your average user knows about filling in a form on the web.
Copy & paste the code below to embed this comment.
bugrain
Apologies, only noticed your response to @shmulik having submitted my comment (hadn’t noticed the pagination for comments section).
Still, does doing server side validation negate the impact of an accordion form? I presume your tests used JavaScript to expand/collapse the sections (which is fine), but if you have to server round trip instead does the user get frustrated by the delay?
And what if the user decides to go back – do you validate what they have input on current section and not let them go back until fixed? Throw what they have input away? Or keep dirty data until they come back to this section (if indeed they actually bother to).
All interesting dilemmas and, as you say, not a “one size fits all” approach.
Copy & paste the code below to embed this comment.
Luke Wroblewski
@bugrain -best to do client side validation dynamically as people complete each section rather than at once when you submit the entire form. Since you are dynamically displaying the panels -you are already in bed with Javascript. Might as well go the extra step and do client side validation -no?
I don’t agree with some commenters who say a 100% pass rate is useless. To know that accordion worked as well as other approaches is, in my book, very useful indeed!
I am puzzled, however, by the speed result which showed the accordion faster than the single page form. Luke, do you have any idea why that would be the case?
Also, is the approach to navigation that you used in “D”—i.e. “continue” and “back” allowing movement between sections—your recommendation? If so, do you suggest:
triggering client-side validation upon each submission of the continue button?
not having any other mechanism (e.g. + and – icons in section headers) to change the display and location in the form?
Copy & paste the code below to embed this comment.
Shira
I enjoyed the article, Luke. It’s good to see some numbers behind the different methods, so thanks for that.
One comment though, I’m not convinced about your conclusion on the clickable headers vs. continue buttons because I think that:
a. To suggest clicking, the headers need to be designed as such – either using some button design conventions or by using the (pretty much standard) arrow/triangle that’s usually used to indicate a collapsible section.
b. The form submission button should be inside the last section. In it’s current position and with the current section header display, it’s more prominent and easily identified as a call to action, so it’s no wonder really that people clicked on it first.
Copy & paste the code below to embed this comment.
Joss
Hey mate,
Great article, very well written up. I think the sample for the testing might have been an issue though. If they all had 3+ years of experience, they may not be an accurate reflection of people buying things online (think about 14 year old kids buying things with their parents’ credit cards!)
Designing forms is always a headache and it is great to see what actually works.
However, I have been wondering if an AJAX submit vs a page refresh or new page has any impact on user experience?
Thank you for the article Luke, it certainly was a very interesting read. I get the joke about the 3 point 5 pages per form, however in my opinion there is only one valid answer to the question “how long should my web form be?”: as short as possible.
I think that accordions can be very useful to speed up the form completion process in cases where the multi-page form already has very high pass rates – like the old Apple checkout form.
On the subject of validating form data, what’s your opinion on validating each field directly or validating entire sections?
I often have to design forms that have to accept a variety of phone number and zip code formats that need to be saved in a certain pattern to allow automatic processing of the entered data.
Do you think it might be more useful to point out errors immediately after the user has entered the data or is it better to let him correct all the possible errors at once after he has tried to submit the form?
28 Reader Comments
Back to the Articlebugrain
The thing that interests me with this and similar design patterns (e.g. forms in tabs) is how you relate validation errors to the user once they hit the bit ‘Continue’ button that actually does the form submit to the server.
You can, of course, expand the section that has the error in by default (all other sections contracted). But what if there are multiple errors in different sections.
There are ways of marking the section headings and such forth, but as you say about the ‘click the heading’ approach, they start to drift away from what your average user knows about filling in a form on the web.
bugrain
Apologies, only noticed your response to @shmulik having submitted my comment (hadn’t noticed the pagination for comments section).
Still, does doing server side validation negate the impact of an accordion form? I presume your tests used JavaScript to expand/collapse the sections (which is fine), but if you have to server round trip instead does the user get frustrated by the delay?
And what if the user decides to go back – do you validate what they have input on current section and not let them go back until fixed? Throw what they have input away? Or keep dirty data until they come back to this section (if indeed they actually bother to).
All interesting dilemmas and, as you say, not a “one size fits all” approach.
Luke Wroblewski
@bugrain -best to do client side validation dynamically as people complete each section rather than at once when you submit the entire form. Since you are dynamically displaying the panels -you are already in bed with Javascript. Might as well go the extra step and do client side validation -no?
thanks for the comment!
Jessica Enders
I don’t agree with some commenters who say a 100% pass rate is useless. To know that accordion worked as well as other approaches is, in my book, very useful indeed!
I am puzzled, however, by the speed result which showed the accordion faster than the single page form. Luke, do you have any idea why that would be the case?
Also, is the approach to navigation that you used in “D”—i.e. “continue” and “back” allowing movement between sections—your recommendation? If so, do you suggest:
Shira
I enjoyed the article, Luke. It’s good to see some numbers behind the different methods, so thanks for that.
One comment though, I’m not convinced about your conclusion on the clickable headers vs. continue buttons because I think that:
a. To suggest clicking, the headers need to be designed as such – either using some button design conventions or by using the (pretty much standard) arrow/triangle that’s usually used to indicate a collapsible section.
b. The form submission button should be inside the last section. In it’s current position and with the current section header display, it’s more prominent and easily identified as a call to action, so it’s no wonder really that people clicked on it first.
Joss
Hey mate,
Great article, very well written up. I think the sample for the testing might have been an issue though. If they all had 3+ years of experience, they may not be an accurate reflection of people buying things online (think about 14 year old kids buying things with their parents’ credit cards!)
J C
Merrill Mayer
Designing forms is always a headache and it is great to see what actually works.
However, I have been wondering if an AJAX submit vs a page refresh or new page has any impact on user experience?
frank_klein
Thank you for the article Luke, it certainly was a very interesting read. I get the joke about the 3 point 5 pages per form, however in my opinion there is only one valid answer to the question “how long should my web form be?”: as short as possible.
I think that accordions can be very useful to speed up the form completion process in cases where the multi-page form already has very high pass rates – like the old Apple checkout form.
On the subject of validating form data, what’s your opinion on validating each field directly or validating entire sections?
I often have to design forms that have to accept a variety of phone number and zip code formats that need to be saved in a certain pattern to allow automatic processing of the entered data.
Do you think it might be more useful to point out errors immediately after the user has entered the data or is it better to let him correct all the possible errors at once after he has tried to submit the form?
Thanks for your answer.