Accordion è un componente UI che mostra titoli compatti e rivela il contenuto al click o alla tastiera, aiutando a organizzare informazioni lunghe senza appesantire la pagina.

Esempio: una sezione FAQ in cui le domande si aprono per mostrare le risposte.

• Organizzare contenuti lunghi (FAQ, policy, specifiche tecniche).
• Ridurre lo scroll e migliorare la scansionabilità.
• Guidare l’attenzione a blocchi tematici.

Un buon accordion unisce semantica, accessibilità e motion: heading cliccabile, stato espanso/collassato, focus management e animazioni leggere.

• Progetti Enterprise: documentazione tecnica e knowledge base.
• Startup & PMI: MVP con contenuti incrementali.
• Agenzie & Consulenti: template modulari per progetti cliente.
• Team interni: standardizzazione nei design system.

• Obiettivi chiari e KPI prima del rilascio.
• Test & iterate (A/B test su copy e ordine dei pannelli).
• Documenta pattern e casi limite (contenuti lunghi, nested).
• Forma il team su accessibilità e semantics.
• Monitora interazioni e drop-off nei pannelli.

• Nessuna ricerca: strutture non allineate ai bisogni utenti.
• Accessibilità trascurata: niente focus/etichettature.
• Motion eccessiva o lag che penalizzano la UX.
• Timeline irrealistiche senza QA.
• Nessuna misurazione delle interazioni e conversioni.

Valuta l’impatto dell’accordion con KPI SMART su UX e conversione:

• Usabilità: time-to-content, tasso di apertura per pannello.
• Conversione: CTR elementi annidati, completion rate.
• Soddisfazione: CSAT/NPS per task informativi.

Suggerimento: usa heading gerarchici (H3/H4) dentro i pannelli per migliorare la navigazione.

Esplora altri termini del Glossario Marketing con esempi e best practice.

Ultimo aggiornamento: Ottobre 2025.