Disclosure o schede: scegliere quello giusto

Schede e accordion nascondono e mostrano entrambi dei contenuti, perciò vengono spesso confusi. Scegliere il pattern sbagliato può disorientare gli utenti.

Un insieme di schede presenta viste mutuamente esclusive: aprire un pannello chiude gli altri. È adatto a contenuti che l’utente confronta una porzione alla volta.

Un accordion consente di lasciare aperte contemporaneamente diverse sezioni. È adatto a una pagina lunga di FAQ, quando gli utenti possono voler confrontare due risposte affiancate.

Un singolo elemento da mostrare e nascondere è una disclosure: un pulsante e una regione. La usi quando c’è un solo blocco di dettagli facoltativi da rivelare.

I pattern usano ARIA in modo diverso. Le schede richiedono tablist e tasti freccia; una disclosure o un accordion richiede soltanto un pulsante con aria-expanded.

Le schede funzionano meglio quando ogni etichetta è breve e la riga entra nella parte superiore. Se le etichette sono lunghe, un accordion disposto in verticale è più leggibile.

Su schermi stretti, una riga orizzontale di schede spesso fuoriesce dai margini. Un accordion si dispone naturalmente in verticale, perciò molti team cambiano pattern sugli schermi piccoli.

Si chieda se le sezioni sono indipendenti. Se gli utenti traggono vantaggio dal leggerne diverse insieme, scelga un accordion; se è adatta una sola vista alla volta, scelga le schede.

Eviti di costruire uno dei due pattern usando semplici link che fanno scorrere la pagina. I link portano a destinazioni; questi controlli alternano la visibilità dei contenuti, quindi richiedono la semantica dei pulsanti.

Se un pattern è al limite, preferisca quello più semplice. Una disclosure o un accordion hanno meno ARIA da configurare erroneamente rispetto a un widget completo di schede.

La scelta corretta dipende dal contenuto, non dall’aspetto. Decida come gli utenti devono leggerlo e confrontarlo, quindi associ a queste esigenze il pattern appropriato.

Gli utenti vogliono spesso leggere contemporaneamente diverse risposte alle vostre FAQ. Quale pattern è più adatto?

Ha imparato a scegliere in base alle esigenze del contenuto: schede per viste da mostrare una alla volta, accordion per sezioni apribili insieme, disclosure per una singola rivelazione.