Best way to make user complete each accordion of content

Question

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...

Answer 1

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. 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.

Answer 2

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.

Answer 3

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.

Answer 4

If you have to use an accordion (which, as others indicated, is just not suitable for this workflow) and actual completion is more important than order of entry (i.e. there are no inter-compartmental dependencies), you could include a "completeness" indicator on each tab header / accordion title that tells the user that this compartment requires further data.