Close

Contact Us

Accordion su mobile: buone pratiche per lo sviluppo di un'app

Gli accordion sono un elemento di UX importante per ottimizzare la navigazione mobile

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.

Condividi articolo
TAG
sviluppo app
UX
Alessandro Medici
Alessandro Medici

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.

Related News

Quanto costa e quanto tempo ci vuole per sviluppare un'app Android, iOS o cross-platform

Quanto costa sviluppare un'app e quanto tempo ci vuole?

Tra le domande che ci rivolgono più spesso c'è sicuramente questa: quanto costa sviluppare un'app?. ...

Scopri di più
Addestramento con realtà virtuale e tecnologia indossabile

VR Training e Wearable Technology

Eccoci, siamo tornati per affrontare questo 2021 più carichi che mai con un nuovo device, la Tacsui ...

Scopri di più
EnvAR è un software che permette di effettuare videochiamate con realtà aumentata

EnvAR, il software di assistenza remota con l'AR

Hai mai pensato di usare un software di realtà aumentata per offrire e richiedere assistenza? Inseri ...

Scopri di più
Istruzione e formazione a distanza

Istruzione e formazione: la distanza non è più un limite

Dopo lo smartworking, agevolato dalle nuove tecnologie e dalla copertura sempre più uniforme della ...

Scopri di più
Un'app in realtà aumentata per esplorare gli interni della Cattedrale di Mantova all'epoca di Giulio Romano

Cattedrale di Mantova: un'app AR per esplorarla

L'utilizzo della realtà aumentata nei musei può trasformare radicalmente l'esperienza dei visitatori ...

Scopri di più
MyVisualField permette di effettuare esami del campo visivo fai da te

Un’app “fai da te” per il controllo del campo visivo

Il controllo del campo visivo è un esame che permette di evidenziare gli eventuali difetti della vis ...

Scopri di più
Tilt Five propone un nuovo modo di utilizzare la realtà aumentata nei giochi da tavolo

Tilt Five: la rivoluzione dell'AR nei boardgame

Il mondo dei giochi da tavolo è sempre stato un luogo di creatività e connessione sociale, ma negli ...

Scopri di più
quale software house scegliere a treviglio e in provincia di bergamo

Scegliere una piccola software house: vantaggi nell'ecosistema dello sviluppo software

Nel vasto panorama delle software house, la scelta tra un gigante del settore e una piccola impresa ...

Scopri di più
tendenze del 2024 per lo sviluppo di app web

App per smartphone: le tendenze del 2024

Il mondo dello sviluppo di applicazioni mobile è in continuo fermento e rimanere aggiornati sulle te ...

Scopri di più
Principali differenze di costi, requisiti e utilizzi fra app AR e VR

Quali sono le differenze fra realtà aumentata e realtà virtuale

Realtà aumentata e virtuale possono offrire un vantaggio competitivo importante alla tua azienda, co ...

Scopri di più
Request information for a PoC or write to us for a quote on mobile or web application development, AR/VR.

We Design Your Ideas

Don't wait to shape your plans, let us carry out your project with care and attention

Tell us what you're up to