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 a page with a number of accordions on the page that are used to group certain items together and take up less screen space.

I want the user to know to have to go through each accordion to complete this step.

I have thought about having text above stating 0 complete of 4 etc and then having an icon to show complete / not complete.

I would love to hear your thoughts...

share|improve this question
    
Does the accordion have to default to being closed? Why not start in an open state? –  Jimmy Breck-McKye Jul 31 '12 at 16:53
1  
So this is really more like a Wizard with steps that can be completed out of order, right? Why don't you treat it more like a Wizard than an accordion? It's a very common pattern. Do you have an image example of how it looks? –  Ben Brocka Jul 31 '12 at 16:54
1  
Opinion: don't make it an accordion. I believe the only reason the Stack Exchange FAQs are like this is to enable gamification of the FAQ (for the Analytical badge ux.stackexchange.com/badges/73) and for that, you need some active interaction. Otherwise, why make me click more? –  msanford Jul 31 '12 at 19:02
add comment

3 Answers

up vote 4 down vote accepted

I think it makes sense to expand the first accordion by default so that users can start typing right away without clicking any controls. If the user has to go through each accordion you can reveal the next accordion if the user filled in the previous accordion. When the user fills in an accordion and clicks Submit the next accordion opens up and the previous accordion becomes read only with a control to make it editable. Apple checkout uses the same approach. Accordions, created in Axure LukeW wrote a very nice article about accordion design that is accompanied by the user tests. Accordions that had a primary control (e.g. Continue to move on) performed faster than accordions where the user had to click an accordion header. Also the accordion performed faster than a multi-page wizard.

share|improve this answer
1  
+1 Notwithstanding my personal bias against accordion design, testing > my opinion. :) –  msanford Jul 31 '12 at 19:03
add comment

Consider the control objectively. Ask yourself how the user normally interacts with the type of accordion you envision and then see if that interaction fits the scenario.

These are the characteristics of an accordion:

  • few panels
  • first one is optionally open on start
  • click header to open an accordion panel (optionally close all others)
  • click any header in any order, no dependency
  • information in panels not dependent (i.e. no restriction on which panel you can view in what order)

If this is not what you want, either don't use an accordion or don't make it look like an accordion (i.e. headers might not look like something I'd want to click).

Here's an idea:

I just used a good form to register for a course. It had an accordion-looking left panel with green checkmarks for ones I've done. They were not labeled as steps. The middle panel showed form for each panel.

I started in a workflow with the first. At each "step" I could "Save and continue". If I left and returned to the site, home page said "Resume registration where you left off...". However, at any time I could click any of the panels in any order to fill in any of the information. The checkmarks on the left made it clear which steps I completed and what is left. When I completed all of them, it wasn't really clear what to do (I think this could've been done better). So I either clicked the home page or a new step appeared... I can't recall. In any case, I was now at a page showing a submit/confirmation/you're done content and button.

I think something like this is a good way to create workflow that is clear but also flexible. There was no confusion because it didn't really look like an accordion, but I liked the ability to fill in info in any order and go back directly without traditional Next/Prev pagination.

share|improve this answer
add comment

The short answer: Don't use accordion. It's better to group elements visually. If the form is a huge one, use steps.

Early websites actually punished people if they made the error of clicking on something else than form fields. Usually a clicked link caused a the page to fully reload and all the work was lost. Sad days for users. So basically people have been taught never to click anything else than the field or risk losing your work.

When users are filling out forms, they generally don't expect they should click anything else than the actual form they see. Using accordion in forms only works for situations where you choose the right section first and then only fill that part.

share|improve this answer
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.