Gli accordion sono un elemento molto usato nello sviluppo di mobile app perché permettono di ridurre la lunghezza della schermata, rendendo l'interazione con la pagina molto più rapida. Sebbene i loro benefici per la UX siano evidenti, è importante essere consapevoli dei possibili passi falsi che si possono compiere nel processo di design e implementazione per evitare che essi si trasformino in un ostacolo alla navigazione dell'utente, anziché svolgere la funzione di facilitatori. Vediamo allora nel dettaglio cosa sono gli accordion e come implementarli secondo le attuali best practice.
Cosa sono e come funzionano gli accordion?
Gli accordion sono un elemento di design che permette di espandere informazioni nascoste rimanendo nello stesso punto della pagina. L'accordion è costituito da una serie di sezioni ognuna delle quali contiene informazioni aggiuntive che possono essere rese visibili attraverso il tap o click sul relativo titolo. Il contenuto appare immediatamente sotto il titolo e può poi essere reso nuovamente invisibile cliccando ancora sulla stessa voce.
Tecnicamente l'accordion di un sito web è realizzato tramite HTML, CSS e JavaScript: ogni pannello, con il relativo titolo e contenuto, corrisponde in genere a un "div", mentre il CSS viene utilizzato per lo stile e la disposizione degli elementi; apertura e chiusura dei pannelli sono invece regolati attraverso JavaScript.
È un meccanismo molto utile per evitare muri di testo sugli schermi molto piccoli degli smartphone, consentendo agli utenti di trovare velocemente le informazioni che interessano loro. In particolare, la presenza di un accordion permette all'utente di costruirsi un quadro generale delle informazioni che troverà sulla pagina prima di impegnarsi in una lunga e noiosa caccia al tesoro dei contenuti che gli interessano. Allo stesso tempo, fornisce all'utente una scorciatoia per raggiungere subito il contenuto specifico che gli interessa.
Per questo sono molto usati anche nei moduli di contatto, perché permettono di rendere chiaro all'utente in che punto del processo si trovi ma senza sovraccaricarlo di troppe informazioni tutte insieme e senza prevedere il caricamento di più pagine, meccanismo che porterebbe via troppo tempo all'utente.
I problemi più comuni nell'implementazione di accordion
Nello sviluppo di un'app o di un sito con accordion si può incorrere facilmente in alcuni errori di usabilità. Uno dei più comuni è quello per cui il contenuto aperto cliccando su un titolo dell'accordion venga spinto in cima alla pagina anziché essere caricato nel punto del click/tap: per quanto si tratti di un errore spesso fatto in buona fede, con l'idea di sfruttare al massimo la superficie dello schermo mostrando quanti più contenuti possibili, ciò disorienta molto l'utente, cui viene spontaneo pensare di aver caricato una nuova pagina.
In base a questa erronea convinzione, per tornare al menù dell'accordion in forma compatta, l'utente tenderà a cliccare sul pulsante Indietro, azione che, invece di riportarlo alla visione compatta dell'accordion, lo farà atterrare sulla pagina del browser (o della app) precedentemente visualizzata.
Una soluzione può essere quella di abbinare il pulsante Indietro a un'azione di compressione dell'accordion qualora questo venga cliccato in seguito all'espansione dell'accordion. In alternativa si può rimuovere l'effetto di scroll dell'accordion verso l'alto, ma in questo si dovrà rinunciare a sfruttare un'ampia porzione di schermo.
Nel caso in cui il contenuto caricato sia molto lungo, poi, per evitare che l'utente debba fare scroll troppo a lungo, conviene mettere a sua disposizione un pulsante di chiusura sempre visibile per velocizzare tale tipo di interazione: si può decidere di fissare in pagina l'intestazione dell'accordion oppure inserire un altro elemento fluttuante (una scritta “Chiudi”, ad esempio) per comprimere di nuovo l'accordion.
Best practice per gli accordion nello sviluppo di un'app
Nello sviluppo di web application gli accordion rappresentano un elemento ricorrente, utile per organizzare e presentare informazioni in modo strutturato e interattivo. Tuttavia, viste le dimensioni ridotte degli schermi degli smartphone, è cruciale prestare particolare attenzione alla UX di questi elementi. Per implementarli efficacemente ti consigliamo di seguire alcune buone pratiche:
- Assicurati che gli accordion siano chiari e coerenti in tutta l'app, utilizzando lo stesso stile grafico e le stesse dinamiche di interazione;
- Limita il testo all'interno di ciascun pannello dell'accordion per mantenere la chiarezza e la facilità di comprensione. Evita testi eccessivamente lunghi che potrebbero appesantire l'interfaccia utente;
- Utilizza indicatori visivi, come frecce o icone, per indicare se un pannello dell'accordion è aperto o chiuso. Questo aiuta gli utenti a comprendere rapidamente lo stato corrente dell'accordion;
- Fornisci un feedback visivo immediato quando gli utenti interagiscono con gli accordion, ad esempio cambiando il colore dello sfondo o l'icona quando un pannello viene aperto o chiuso;
- Assicurati che gli accordion siano accessibili a tutti gli utenti, compresi quelli con disabilità visive o motorie. Utilizza attributi aria-label e aria-expanded per migliorare l'accessibilità degli accordion;
- Se utilizzi animazioni per aprire o chiudere i pannelli dell'accordion, assicurati che siano fluide e non troppo rapide o troppo lente. Su smartphone, comunque, è consigliabile ridurre al minimo ogni tipo di animazione.
Seguire queste buone pratiche garantisce una buona base per implementare gli accordion in modo efficace e user-friendly. Sarà poi necessario condurre test approfonditi di usabilità per assicurarti che soddisfino le esigenze degli utenti. In Magnetica Development puoi trovare tutto il supporto tecnico che ti serve in questo senso: scopri come possiamo aiutarti nello sviluppo di app mobile implementando tutte le migliori e più aggiornate pratiche del settore, contattaci per maggiori informazioni o un preventivo.
In arrivo sul blog di Magnetica
Rimani con noi per i prossimi contenuti: il nostro blog torna il mese prossimo con un approfondimento su come gestire in maniera efficace i progetti di sviluppo software.
