Accordion in a webapp - Should I allow more than one open?

Question

I have several long forms in my web application.
I thought about using an accordion design to save unused space in the form (The form is already split into several sections)

^{download bmml source – Wireframes created with Balsamiq Mockups}

I'm trying to decide if it's better to have each section of the accordion fold the others when opened or just leave them open.

What is the best approach here? Is there another suggestion as to how I could design a large form?

Answer 1

No, don't close one when you open another.

The reason for this is that the whole screen will start jumping around all over the place when you start closing accordions programatically.

For instance - if the user selects item Four from your example they would expect the accordion to open from that point on the screen, but because Item 1 would close at the same time the newly opened accordion won't be in the same place as it was when it was selected to open. This would drive people crazy.

Answer 2

I agree that generally you would not close one section when you open another - why unnecessarily restrict the user?

However, there can be occasions where it might make sense to do so, and if implemented well it can present a very slick experience.

To make it work:

• each section needs to be of identical size so that the larger frame does not shift around in size, this also allows the submit/apply button to stay in constant position.
• a smooth animated transition as the section opens can make for a less jarring experience - allowing one section to open at exactly the same time as the other closes.
• the section headers can show further information in addition to the title - such as completion status.
• above all it should be appropriate to the workflow. For example if the user is always going to be done with one section as they move to the next and would want to close the previous section manually then there's nothing wrong with helping them out and closing it automatically anyway. It would not work so well if the user requires some back and forth random access to each section.

The in-place nature of such a mechanism may also be well suited to mobile devices as the user doesn't need to see the whole set of expanded content, and thanks to the visibility of the collapsed headers, always has an overview of all the sections.

Clearly too many sections will make the mechanism worse, but that can be alleviated by scrolling section headers out of view at top and bottom as you work through them. (You'd want to indicate number of sections somewhere.)

A particularly well done example can be found in the BBC iPlayer for BTVision implemented by PushButton TV, (since acquired by Amazon). Although this is not a form, it could work equally well as one.

There you can see the second section moving up and reducing in size and the header colour fading out, in synch with the next section opening up, increasing in size and the header colour fading in, resulting in the next section taking the exact same footprint as the previous one when it was open.

Don't get me wrong, I'm not advocating the preferential use of auto-collapsable accordians for all situations. I would just say that the option should not be casually ruled out without considering whether it may in fact be a good fit for a given scenario.

Answer 3

I'd probably go with a long single-page form.

In general, I would probably suggest having them all available at all times. It's ok to have a long page, as long as there's nothing restricting you to a certain page size. (Ex: if you're designing a kiosk or something.)

People have no problems with scrolling, and the annoyance of having to scroll a long way between sections may be better than the annoyance of having to figure out why the form you were just working on disappeared.

Check out the first few chapters of Web Form Design for some good advice on how to keep your forms succinct. It will probably solve a bunch of other problems you didn't know existed.

If your page is getting super long, perhaps have some navigation follow the user down. Either using Javascript or absolute positioning.

Answer 4

Thought this article might help you decide. http://baymard.com/blog/accordion-style-checkout

In summary accordions are becoming more popular as a check out style. Something I have been suggesting for several years. But it looks like you have to think very carefully about the design.

I tend to agree with Roger that when designed well shutting down an option keeps things tidy. Have a look at the Harrods checkout for a fairly good design.

I also agree that using the closed up bar to present as feedback to the user about the choices they have made can prevent users having to go back into the different accordion sections.