Luke Wroblewski recently published an article on A List Apart documenting the findings of a user test that examined accordion-style form usability against a multi-step process.
Accordion forms take an expand-collapse approach. The user is only showed the “open” section of the form he or she is completing. The intent is to minimize distractions, make the form appear less complicated at a glance, and speed up the process (no additional page loads). Many accordion forms validate each section at a time, which may also be more user-friendly (as opposed to gnarly error messages after the whole form has been filled).
Here’s an example from Old Navy:
Clicking on buttons like “Next” or “Continue” move the user along in the form.
Some retailers omit the continue buttons, and require customers to click on the header bars to proceed.
Luke teamed up with usability testing firm Etre, rounded up 24 web-savvy participants and tested 4 versions: a multi-step control version, a single-page, expanded form, and 2 accordion versions. One accordion form used buttons, like Old Navy, the other required users to click section headers to move forward, Success rates, error rates, completion times, satisfaction ratings and eye tracking metrics were measured.
While Luke W and usability testing firm Etre discovered that all versions had a 100% pass rate, the interesting finding is this:
“…very few people thought to interact with the headers as they made their way through our forms. The vast majority of our participants quickly gravitated to the primary action buttons and clicked them to move on. Even our explicit labeling of the form’s final action…button as “Make payment and complete order” didn’t help. People selected this action to move forward even though they had not yet entered any payment information. This, of course, resulted in some unintended errors.
The lesson here is that even when innovating, you should try to embrace conventions. Though accordion forms may be new to many people, clicking on a visually prominent button to complete a web form is not.”
Something to consider when designing accordion-style checkout.