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
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.
No comments:
Post a Comment