User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Am looking into crafting an accordion for a multistep form. Like the idea of a single page walkthrough that provides anticipation (ie. what's about to come) and affirmation (ie. what's happened), but am curious if this approach is suitable.

Is this a route I should proceed with for my form? If not, what are the problems with this approach?

share|improve this question
Please don't just ask for examples - there is no 'correct' example of an interface. As a Q&A site you should aim your questions to get explicit and useful answers that you can put into practice. Therefore you should ask if the accordion is appropriate for your situation, or if there is a more usable alternative. Some examples may arise from the answers, but they will be in support of useful answers, not just examples in their own right. – JonW Dec 3 '13 at 0:16
Fair enough :-) I'll need to arrange a multistep form. I was hoping to get some inspiration from accordions to provide a single page walkthrough that fosters anticipation and affirmation, but am open to any approach. Are you aware of any good patterns? – zaph0t Dec 3 '13 at 8:14
I've tweaked your question so it's more answerable than just asking for examples/patterns. Hopefully my edit is still suitable to your issue, but feel free to edit if it's not. – JonW Dec 3 '13 at 9:42
Thanks! That is a lot more clear :-) – zaph0t Dec 3 '13 at 14:00

Whether or not an accordion form is appropriate will depend on the purpose of the form.

Luke Wroblewski did some user testing with accordion forms and found that they didn't increase the number of people successfully completing the form (compared to single page or multi-page alternatives) but also noted that they didn't have a negative influence either.

...simply porting the same questions you have on one long web page or across several web pages into an accordion form isn’t likely to increase conversion... The flip side of this, of course, is that accordion forms aren't likely to negatively influence conversion either.

The research did however find that users were considerably faster at completing accordion forms.

While completion speed may not be paramount for e-commerce, there are plenty of other situations online where quickness matters. Online auctions or exchanges come to mind, where the failure to act quickly could result in a lost opportunity. Accordion forms just might fit the bill in these situations.

Accordion forms are particularly useful when you want to provide users with a summary of what they've entered so far. Rather than having the form split over multiple pages with a summary page at the end, the accordion method builds the summary as each section is completed.

share|improve this answer
The confirmation about what they've entered so far is my major motivation for considering an according. Thanks for the confirmation! Are you aware of any forms that show this effect quite nicely? – zaph0t Dec 3 '13 at 13:59

Accordions don't fit well with progress intimation strategies a user/persona is very accustomed of. Conventionally and most popularly accordion are employed as navigational aid. When defining UI's it's good to keep a distinction of purpose for every piece that solves the puzzle...but that's a personal opinion.

You could show a separate progress indicator or use a navigation menu with indication logic juxtaposed.

enter image description here

share|improve this answer

Apple store applies the accordion model as a part of the checkout process. Here is a walkthrough:

The accordion model can work well if

  1. The amount of information you are capturing is small enough
  2. The process will be completed in one step, and user cannot save and revisit
  3. User needs to refer to information as they are creating
  4. Most importantly, If the steps are seen as a sub-components of 1 single thing, and not as separate distinct steps. For example, when signing up for twitter, after signup, it used to suggest people to follow. Account signup and following people are two very distinct things, so while they can be put next to each other to guide the user, they are not sub-components of 1 single thing.
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.