An accordion is a panel that can be expanded and collapsed to show more or fewer details in digital interfaces.
Reading service terms, policies, or EULAs online feels even worse and slower than reading them on paper, especially if we are reading them on mobile. This experience is suboptimal because the information has not been designed and envisioned to work effectively in a digital, interactive medium. As a result, it discourages users from reading and engaging.
You can use accordions in any legal document to prevent the "wall of text" effect and make create a more compact and structured layout. Accordions can be used to chunk down the information into thematically coherent blocks. They also help layerying information, as they show the key details only at first, and give users the opportunity to drill down for further details on-demand.
Readers tend to engage with information only if they perceive that it is relevant and not too effortful to process. Accordions help the user to get a general sense of the document and proceed to understand it step by step, instead of overloading them with details from the get-go.
© 2022 Stefania Passera.
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License
Example 1
Accordions are used to provide additional details "on demand" under each clause. In this way, the key details can be more concisely presented to users when they first skim through the page.
© Juro & Stefania Passera. used with permission.
Source: Juro Privacy Policy
Example 2
In this privacy policy, all the topics are presented in a more compact accordion layout, where only the topic heading is visible at first glance. Users can open each topic and read more on demand.
Example 3
This design uses accordions as well as an icon system to describe their purposes for data processing in a structured and systematic way.
Source: Privacy Icons Forum
Have you used accordions? You can contribute to the Library by sharing an example.