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.
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.
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.
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:
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.
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.
Sono uno sviluppatore web/mobile e UX designer appassionato di innovazione tecnologica. Oltre alla programmazione mi occupo anche di progettazione di Database e di User Experience. Trovare una soluzione facile a un problema difficile è la cosa che più mi diverte.
Tra le domande che ci rivolgono più spesso c'è sicuramente questa: quanto costa sviluppare un'app?. ...
Eccoci, siamo tornati per affrontare questo 2021 più carichi che mai con un nuovo device, la Tacsui ...
Hai mai pensato di usare un software di realtà aumentata per offrire e richiedere assistenza? Inseri ...
Dopo lo smartworking, agevolato dalle nuove tecnologie e dalla copertura sempre più uniforme della ...
L'utilizzo della realtà aumentata nei musei può trasformare radicalmente l'esperienza dei visitatori ...
Il controllo del campo visivo è un esame che permette di evidenziare gli eventuali difetti della vis ...
Il mondo dei giochi da tavolo è sempre stato un luogo di creatività e connessione sociale, ma negli ...
Nel vasto panorama delle software house, la scelta tra un gigante del settore e una piccola impresa ...
Il mondo dello sviluppo di applicazioni mobile è in continuo fermento e rimanere aggiornati sulle te ...
Realtà aumentata e virtuale possono offrire un vantaggio competitivo importante alla tua azienda, co ...
Una delle attività che ci troviamo più spesso ad affrontare nella nostra software house è quella del ...
Negli ultimi anni, la gamification ha dimostrato di essere uno strumento potente per influenzare com ...
Per gli sviluppatori, la creazione di siti web è un processo relativamente semplice una volta che ...
Per realizzare un’esperienza utente soddisfacente su un’app o un sito web, nessun dettaglio è superf ...
La realtà aumentata è una delle tecnologie più promettenti per trasformare il marketing digitale p ...
Don't wait to shape your plans, let us carry out your project with care and attention