Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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)

mockup

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?

share|improve this question
1  
And why would you disallow it? –  Marjan Venema Nov 29 '12 at 12:37
    
Will the accordion fit the screen height (and scroll the form inside) or will it flow out of visible area? –  Frantisek Kossuth Nov 30 '12 at 0:08
    
in dev-speak, it would no longer be called an accordion. it would be a list of collapsing panels. –  Neil McGuigan Dec 17 '12 at 5:39
add comment

4 Answers 4

up vote 14 down vote accepted

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.

share|improve this answer
    
Very good point about the items moving. accepted –  Ben Nov 29 '12 at 12:39
1  
@JonW I'm actually referencing this in my answer to our customer. Thanks Jon! –  Benny Skogberg Jan 30 at 10:04
add comment

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.

enter image description here

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.

share|improve this answer
    
Thanks. You've educated me :-) –  Ben Dec 2 '12 at 7:10
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
+1 for the link and agreeing with me :-) This baymard website review/report looks pretty good - have you got/read the full checkout report? –  Roger Attrill Nov 30 '12 at 14:04
    
+1 for the link –  Ben Dec 2 '12 at 7:16
add comment

Your Answer

 
discard

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.