Accordion sui siti web mobile: come ottimizzare la UX
Cosa troverai in questo articolo. Gli accordion sono elementi grafici che permettono di condensare le informazioni presenti su una pagina e poi espanderle secondo necessità. Così facendo, permettono di dare una panoramica immediata dei contenuti di un sito e agevolare il passaggio fra blocchi di informazioni diverse, una caratteristica che rende molto più semplice interagire con la pagina web quando la navigazione avviene su dispositivi mobili. Gli accordion possono però anche contribuire ad aumentare il disorientamento dell’utente, ad esempio dando l’illusione che ci sia stato un cambio di pagina quando invece il contenuto dell’accordion espanso è stato semplicemente spinto verso il margine superiore della pagina, oppure quando, in presenza di un contenuto molto lungo, il titolo dell’accordion rimane fuori dalla porzione visibile di pagina rendendo necessario un lungo scroll per tornare all’intestazione che permette di chiudere l’accordion stesso. Questi problemi possono essere risolti con piccolissimi cambiamenti di design.
Indice
Gli accordion sono spesso utilizzati per organizzare e presentare informazioni in modo gerarchico, consentendo agli utenti di accedere a dettagli specifici solo quando necessario. Specialmente sui dispositivi mobili, essi offrono il beneficio di risparmiare spazio e consentire una navigazione più fluida. Tuttavia ci sono anche delle criticità che potrebbero inficiarne l’efficacia: vediamo allora, in questo articolo, quali sono le principali ottimizzazioni che è possibile attuare sulla UX mobile degli accordion.
Cosa sono gli accordion?
Un accordion è un elemento grafico che permette di espandere e ridurre le informazioni presenti su una pagina tramite un clic o tap anziché mantenerle sempre visibili. Sui siti mobile, essi sono uno dei più utili elementi di design: il loro maggiore beneficio è quello di permettere agli utenti di farsi un’idea generale del contenuto della pagina prima di focalizzarsi sui dettaglio; inoltre permettono di ridurre il colpo d’occhio negativo che si associa, per la maggior parte degli utenti, a pagine troppo ricche di testo.
Perché gli accordion funzionano così bene su mobile?
Quando gli utenti atterrano su una pagina web, essi cercano di ottenere rapidamente una panoramica del suo contenuto in modo da capire se vi sia presente o meno ciò di cui hanno bisogno. A quel punto, gli utenti possono prendere due diverse strade: o continuare a scorrere la pagina qualora siano convinti che essa sia rispondente ai loro bisogni, oppure abbandonarla alla ricerca di una fonte di informazione migliore.
Se la pagina contiene numerosi contenuti di diverso tipo, l’utente ha bisogno di scansionarli tutti finché non giunge a trovare quello giusto per lui o lei, un compito piuttosto complesso se si ha a disposizione uno schermo piccolo come quello dello smartphone; noioso, anche, o addirittura frustrante se la maggior parte del contenuto in pagina non è rilevante rispetto ai bisogni dell’utente. In effetti, molti utenti mobile tendono ad abbandonare la navigazione prima di trovare le informazioni di cui sono alla ricerca semplicemente perché queste si trovano troppo in fondo alla pagina.
Raggruppare le informazioni in accordion significa rendere molto più facilmente raggiungibili le informazioni per gli utenti senza che debbano scorrere un lunghissimo muro di testo. Gli ambiti di applicazione sono numerosi, dalle pagine di autodiagnosi medica alle ricette, in generale tutti quei contenuti lunghi e complessi con cui l’utente fa normalmente fatica a interagire da mobile; l’uso di accordion migliora la facilità di navigazione, riducendo anche il bounce rate.
Gli accordion possono però migliorare anche la UX di pagine non focalizzate sul contenuto, ad esempio i moduli di contatto: in questo caso, la suddivisione del modulo in accordion espandibili è un modo eccellente per mantenere l’idea di “flusso” nel processo di contatto senza però sovraccaricare l’utente di informazioni, quindi facendo sembrare molto più breve quel procedimento e senza richiedere ricaricamenti di pagina, con indubbi vantaggi per la velocità del sito e dell’interazione dell’utente.
Possibili problemi di UX con gli accordion e soluzioni
Gli accordion possono causare un po’ di disorientamento quando, nell’espandere l’accordion, questo viene spinto in cima alla pagina, dando l’impressione che sia avvenuto un cambio di pagina. Di conseguenza, per tornare alla vista “ridotta”, l’utente tenderà a cliccare sul pulsante “Indietro” del browser, il che invece lo porterà fuori dalla pagina corrente. Per evitare questo problema, è possibile utilizzare il pulsante “Indietro” come comando di riduzione degli accordion. Si può anche pensare di non spingere graficamente il contenuto dell’accordion espanso in cima alla pagina, anche se questa soluzione implica un utilizzo meno efficiente dello spazio a disposizione sullo schermo mobile.
Nel caso di un contenuto molto lungo, è poi consigliabile prevedere una soluzione che permetta di chiudere l’accordion una volta aperto senza dover scorrere di nuovo il contenuto per tornare all’intestazione, che è in genere l’elemento da cliccare per espandere e ridurre il contenuto degli accordion. Questa soluzione può essere rappresentata dallo stesso comando “Indietro” del browser, come detto nel paragrafo precedente. L’alternativa è quella di ancorare l’intestazione dell’accordion o prevedere un pulsante di chiusura sempre visibile in modo da garantire la possibilità di navigare fra i contenuti in maniera più veloce.
Per concludere, quando si tratta di ottimizzare la UX degli accordion bisogna tenere conto delle dimensioni dello schermo limitate e delle modalità di interazione specifiche dei dispositivi mobili. Oltre a progettare gli accordion in modo tale che l’utente non si senta sopraffatto da troppe informazioni, tenete sempre presenti questi criteri:
- Le aree di tocco degli accordion devono essere abbastanza grandi da poter essere facilmente selezionate. Evitate di sovrapporre troppi elementi interattivi nelle vicinanze per ridurre il rischio di clic accidentali;
- Se utilizzate animazioni per espandere o contrarre gli accordion, assicuratevi che siano fluide e non rallentino l’esperienza utente;
- Assicuratevi che il testo all’interno degli accordion sia leggibile. Usate dimensioni di carattere adeguate e un contrasto tra testo e sfondo sufficiente per una chiara visibilità;
- Fornite feedback visivi chiari quando un accordion viene aperto o chiuso. Questo può essere realizzato attraverso cambiamenti di colore, icone animate o altri indicatori visivi per segnalare lo stato corrente;
- Gli accordion devono essere compatibili con lo scrolling e non creare conflitti con la normale interazione dello scrolling sulla pagina.
Va da sé che il design degli accordion deve essere totalmente responsive e adattarsi a diverse dimensioni di schermo. Il design degli accordion va dunque sempre testato su diversi dispositivi mobili reali per assicurarsi che l’esperienza sia ottimale su diverse dimensioni di schermo e piattaforme.
Coming soon:
La prossima settimana, sul blog di Seed, parleremo dei contenuti “pillar” e di come crearli. Tornate a leggerci!
