Adaptive Form Layouts: Accordion

There are times when not all information is required for the end user to view when completing a form but rather the material is added to help add context when needed. This type of layout can benefit from the out of the box accordion layout.

When you set a parent panel to have a layout of accordion each child element will appear as a collapsible box stacked beneath each other. Selecting on an accordion will collapse the currently open accordion and expand the newly selected section. As the accordions are stacked vertically having many sections will not cause any issues with the visibility of the sections.

Accordion layouts can be very helpful when trying to streamline a large amount of referenceable content. As the sections of the accordion are collapsed the screen is less cluttered and allows the end user to open the sections that they want to see while masking the details of the content that is not pertinent at the specific moment.

Try to avoid using an accordion layout when users need to be aware of the content from each section. This layout does not give an implicit reaction to move from each section, so it is best to use this layout when the sections are optional. People are not likely to select every accordion and expand each section therefor the likelihood of the end user seeing all the content is low. Users are more likely to scroll down a long page to see content rather physically having to select each section so keep this in mind when determining if an accordion is the correct layout for your content.

When trying to determine if the accordion layout makes sense for your use case, consider that you want people to be aware of the content subject but only want to show the details if they feel it is relevant. Some optimal times to leverage the accordion layout would be a FAQ, a help section or specific features lists. If we look at the FAQ as an example, the end user can quickly scan the list of questions and when they find a question that they would like clarity on they can then expand that section rather than having everything out on display, keeping the page focused. This comes back to information that is pertinent being accessible at any given time so not to confuse the end user.