What are some alternatives to accordions?

Question

I need to add "next steps" at the end of a form but there are ~11 steps that I need to add. I want to use an element like an accordion where I can list all the steps but not overwhelm the user. I don't want to use accordions because they're one of those elements that are not great for UX. I saw this website suggest tabs, but are there any other options?

Answer 1

It seems pretty touch to add another 11 steps at the end of the form, because users are generally eager to complete the transaction and would not be anticipating a lot of follow up actions.

I would probably suggest thinking about what those steps involve and whether you can group them in some way or maybe think about putting some of the simple steps upfront or at the end and don't put too many complex things at the end.

Having said that, it would probably be quite a lot of tabs to try and organise across the screen if there are 11 of them you need to accommodate. In the article that you referred to, there are pros and cons for the tab vs. accordion in terms of content presentation and layout design so you have to look at the number of steps as well as the amount of detail in each steps.

Ultimately the difference between tabs and accordions is whether you are able to see all of the steps and all content in the steps at the same time or if you want to control how much the user sees at any given time.

Answer 2

Long forms (with accordions or dynamic content) are appropriate when your user is performing the same task frequently and doesn't want to click through a lot of screens. Accordions on long forms are not automatically bad UX when used correctly, and you could save your user a lot of clicks by keeping things on one page.

On the other hand, wizards (which I think is what you're referring to with tabs) are great for novice users or those who aren't performing the 11-step workflow all the time. By keeping one or two tasks on each step, it's less overwhelming and requires less cognitive effort. Studies show that users make fewer errors when they use wizards.

So, if your user is doing this process a lot - long form. If they're doing this once or infrequently - wizard. See Wizards: Definition and Design Recommendations for more information.