Testing Accordion Forms

by Luke Wroblewski

28 Reader Comments

Back to the Article
  1. Surely it’s about accordi*o*n forms instead of accordi*a*n forms?
    Copy & paste the code below to embed this comment.
  2. ““Three point five pages.” It’s my usual answer when someone asks me “how long should my web form be?”” I appreciate where you’re coming from, Luke, but *you* are the expert and the people asking the question obviously are not. Derision is hardly an appropriate response. Helping them understand what is involved in designing the form might be a more optimal - and professional - response.
    Copy & paste the code below to embed this comment.
  3. Overall I thought this was a very well written and informative article. I wanted to bring out 1 point about ARIA. New screen readers, I’m sure, do support ARIA. But the problem with most readers is that they are crazy-expensive to not only buy, but upgrade as well. JAWS, the most popular screen reader, costs around $900 and that’s just for the standard version. I guess my point is that we can’t really rely on disabled people having up to date screen readers, like we do for people who can upgrade a Web browser for free. So be cautious in fully relying on cutting edge accessibility techniques.  I’m not sure where that leaves us in regards to accordion menus (I would love to test one in a screen reader), but I think it should speak to the importance of using proper markup while creating these forms. Very good read, thanks for putting it together.
    Copy & paste the code below to embed this comment.
  4. @gef05 -it’s a joke. Sorry if you’re upset. To your request: “Helping them understand what is involved in designing the form might be a more optimal — and professional” That’s what the rest of this article is all about. Hope you find it useful.
    Copy & paste the code below to embed this comment.
  5. @Tim Wright -if you get a chance to test one -let us know what you find!
    thanks.
    Copy & paste the code below to embed this comment.
  6. Interesting article, but with a 100% pass rate I think “accordion forms aren’t likely to negatively influence conversion” is inaccurate. The right conclusion is that the test doesn’t accurately model conversion rates, so those shouldn’t be predicted here.
    Copy & paste the code below to embed this comment.
  7. Right now I’m looking at split testing data from a live test, pitting a long form vs a form broken into steps on a single page (almost identical to an ‘accordion’ form) The test has a sample size of several thousand users, and so far both pages are converting exactly the same. I’m not saying that accordion forms don’t have the potential to help conversions - I just wanted to illustrate how important testing can be, and how dangerous it can be to make assumptions about user interaction.
    Copy & paste the code below to embed this comment.
  8. A proper accordion form could be made accessible without using ARIA tags. As long as you are hiding the sections in a way that doesn’t cause the screen readers to not see the sections (position:absolute;left:-9000px; or height:0;overflow:hidden; vs display:none;) screen readers will simply see the form as one long form. If you set it up properly it would be even better for screen readers than the long form because you are breaking the form up logically instead into clearly labeled sections/fieldsets rather than one long form. This should be done anyway but this display model forces it. ARIA tags are fine and dandy but they are more important for non-standard interactions rather than something like forms, which screen readers typically handle very well.
    Copy & paste the code below to embed this comment.
  9. I think that 100% pass rate of only 24 users isn’t really meaningful result, but increase in speed of completion is very important if it’s impossible to shorten a form. As I can see, accordion forms is a great idea. Thanks for the article!
    Copy & paste the code below to embed this comment.
  10. @monty -thanks for letting us know about the data. Any chance you can share the details?
    @n80 -this is qualitative/small sample stuff that illustrates the same thing i’ve seen on larger quant analysis like those mentioned by @monty above. @gef05 -it’s a joke. Sorry if you’re upset.
    To your request: “Helping them understand what is involved in designing the form might be a more optimal — and professional”
    That’s what the rest of this article is all about. Hope you find it useful. @Tim Wright -if you get a chance to test one -let us know what you find!
    thanks. @mdarnell -thanks for the added info. I’m not an accessibility expert but was asked to include some info on accessibility considerations. So thanks for putting in a more informed opinion! appreciate it.
    Copy & paste the code below to embed this comment.
  11. @Luke Wroblewski, Great article. Very helpful information. @monty, Would be great to see any conclusions from your test.
    Copy & paste the code below to embed this comment.
  12. @luke, Thanks for this article which —like any good story— leaves many questions unanswered: Did people feel different about the different forms? Were people able to freely navigate between the different sections and choose their own order for filling out the form? How about designing the headers of the accordion sections more like buttons? @kevin I think you just drew my daughter’s all time favorite straw. Nice. @editor: figure 2 should be: c) accordion with buttons d) accordion with headers.
    Copy & paste the code below to embed this comment.
  13. Great article. I think you missed talking about one of the best parts of the Apple form, which was the summarised information from the previous section. The fact that it gives you all the information as text in a new, cleaner format, gives you a chance to quickly look back and confirm that you didn’t make a mistake in a previous section.
    Copy & paste the code below to embed this comment.
  14. @editor Sorry my fault. the figure caption is just fine.
    Copy & paste the code below to embed this comment.
  15. Great article.
    What about validation errors indications, both server client side and client side?
    I guess client side validation might be done on acordion slide change, but what about sever side, when erros might be for fields in several slides? Shmulik
    Copy & paste the code below to embed this comment.
  16. First, let me say that I found the article to be interesting and well-written. however, one rather jarring note was “But consider this design solution a quiver in your bow”.
    my weird brain kept trying (and failing) to make sense of that.
    a quiver is a container to hold a number of arrows, usually carried on the back. “another arrow in your quiver” makes sense,
    esp. since a archer would carry a number of different types of arrows in his quiver, so he could choose the one most suited to the current task :o)
    Copy & paste the code below to embed this comment.
  17. Great study and article. Do you by chance have the means and standard deviations of the task times between both forms? I was unable to determine if the same 24 users interacted with all forms (within-subjects) or whether you randomly assigned people to only one form type (between-subjects).
    Copy & paste the code below to embed this comment.
  18. @skilldrick -“summarised information from the previous section” -we didn’t find that people interacted with these summaries in the study. could be that is was familiar data to them. I specifically looked into this as, like you, I thought this was a nice feature. @ shmulik you can do validation on section change (see the apple video) or inline see: http://www.alistapart.com/articles/inline-validation-in-web-forms @ rhammack another arrow in your quiver is correct thanks :)
    Copy & paste the code below to embed this comment.
  19. @luke - I love the answer ‘three point five.’ I often receive the question of how long a web video should be, and often respond, “Never more than 54 seconds,” or “Exactly 4 minutes,” when the answer obviously depends on the content, the audience, the campaign, among other factors. Great post.
    Copy & paste the code below to embed this comment.
  20. iCITA (Illinois Center for Information Technology and Web Accessibility) has a few examples of using ARIA tabpanels, one of which is “an accordion form”:http://test.cita.illinois.edu/aria/tabpanel/tabpanel2.php. It’s worth looking at if you’re interested in upping the accessibility ante.
    Copy & paste the code below to embed this comment.
  21. 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.
  22. 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.
  23. @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!
    Copy & paste the code below to embed this comment.
  24. 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.
  25. 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.
  26. 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
    Copy & paste the code below to embed this comment.
  27. 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?
    Copy & paste the code below to embed this comment.
  28. 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.
    Copy & paste the code below to embed this comment.