User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm designing a multi-step accordion form flow for a package shipping process. The users fill out their "to" and "from" information easily in separate accordion sections, but the third section contains multiple steps within it for the user to fill out.
Does anyone have ideas on how to display this elegantly? Making it one long scrolling section is an option, but it might be too much scrolling for some users' tastes.
It's hard to say without the context, but an accordion inside another accordion seems excessive.
Accordion section label usually gives a brief overview of it's content. So the user will only be informed about the first level and could probably miss the important details inside the second accordion level.
I'd rather map the whole process linear, if it's possible.
According to this article, from NN Group:
Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. Better to show all page content at once when the use case supports it. In such cases, don’t worry too much about page length. Relevance trumps page length.
With that said, I think you should consider not using accordion for the "to" and "from" part of your screen, and maybe a Stepper component for the last part. But, like Anton said, it is difficult to see what would be better without the context.
