Accordion

L’accordéon permet d'afficher de grandes quantités de contenu dans un espace réduit grâce à la divulgation progressive.

# Usage

L’accordéon permet de regrouper des informations dans des sections repliables. Chaque section peut être développée ou réduite en cliquant sur l'en-tête de la section. Cela permet aux utilisateurs d’afficher seulement les informations qu'ils souhaitent voir.

Quand utiliser

  • Vente : les accordéons peuvent être utilisés pour organiser des informations détaillées sur les produits comme les descriptions, les spécifications techniques, les avis des clients et les FAQ. Cela permet aux utilisateurs de consulter facilement les informations sans être submergés.

  • Application : les accordéons peuvent être utilisés pour structurer des sections comme les détails de compte, les paramètres de facturation, les historiques de transactions et les options de support. Cela aide à maintenir une interface propre et bien organisée, facilitant l'accès aux informations pertinentes.

Quand ne pas utiliser

  • à des fins purement SEO / éditoriales (cf. mur produits)
  • à des fins de navigation
  • Si l’utilisateur à besoin de lire le contenu de plusieurs accordéon en même temps
  • pour des informations essentielles à l’utilisateur ou pour masquer des étapes (cf. stepper)

# Do & Don't

Ne pas dépasser plus de 5 accordéons pour limiter l’encombrement et la charge cognitive

Les accordions servent à divisé l’information pour lui permettre de se concentrer sur une information à la fois, si il y a trop d’étapes cela signifie qu’une page doit être créer

Ouvrir un onglet revient à fermer les autres

Pour ne pas perdre de vue l’objectif des accordéons qui est d’alléger l’interface, l’action d’ouvrir un accordéon ferme automatiquement l’accordéon qui était initialement ouvert. L’attention de l’utilisateur reste alors sur l’accordéon qu’il vient d’ouvrir.