WorldCC Foundation
WorldCC Foundation
  • Home
  • About this Library
    • Introduction
    • Why use this Library?
    • A design pattern approach
    • Who is this Library for?
  • How to use this Library
    • Get started
    • Browsing the Library
    • Start from the contract users
    • Using the patterns
  • Explore the Library
  • Pattern families
    • Pattern families in brief
    • Emphasis
    • Explainers
    • Layering
    • Layout
    • Navigation
    • Organizing
    • Reviewing
    • Summarizing
    • Tone of voice
    • Visuals
  • Contribute
  • FAQ
  • About the team
  • About WorldCC Foundation
  • Contact

Accordion

  • Pattern
  • Examples

What is it?

An accordion is a panel that can be expanded and collapsed to show more or fewer details in digital interfaces.

 

What problems does it solve?

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.

 

When to use it?

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.

Why use it?

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.

 

Where to use it?

  • Any legal document online (terms of use, EULAs, policies...)



© 2022 Stefania Passera.
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License

Example 1

Juro privacy policy

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

Privacy policy of a European railways service

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

Privacy Icons Forum privacy policy

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

 

 

 

Share an example!

Have you used accordions? You can contribute to the Library by sharing an example.

Submit example

Business terms first

Loading...

© WorldCC Foundation, Stefania Passera & Helena Haapio

Back to worldcc.foundation Sign in / Register Privacy Policy