5 alternative intelligenti al menu dell'hamburger
Lo spazio sullo schermo è una risorsa preziosa per i dispositivi mobili. Per affrontare la sfida del piccolo spazio sullo schermo e allo stesso tempo rendere accessibile la navigazione, i progettisti spesso si affidano a nascondere la navigazione dietro l'icona dell'hamburger, un primo esempio di navigazione nascosta. In questo articolo, vedremo perché la navigazione nascosta crea una cattiva UX e quali alternative sono disponibili per i progettisti.
Perché il menu dell'hamburger è negativo per UX
Sui dispositivi mobili, la navigazione visibile viene utilizzata 1,5 volte più dell'hamburger
Se stai lavorando su prodotti digitali, probabilmente hai già letto dozzine di articoli che descrivono come il menu dell'hamburger sul cellulare ferisca le metriche UX. Lo svantaggio principale è la sua bassa reperibilità, e questo è supportato da numeri reali. Negli studi qualitativi, Trovato NNGroup quella navigazione nascosta è meno rilevabile della navigazione visibile o parzialmente visibile. Ciò significa che quando la navigazione è nascosta, è meno probabile che gli utenti utilizzino la navigazione. I menu di hamburger guidano il coinvolgimento, rallentano l'esplorazione e confondono le persone.
Quindi cosa dovremmo usare invece?
Sebbene non vi sia una regola rigida per le app e i siti web per dispositivi mobili, una raccomandazione generale è quella di utilizzare sia visibile - le opzioni di navigazione principali sono visualizzate in una barra di navigazione visibile - o la navigazione combinata , dove sono visibili alcune delle principali opzioni di navigazione e alcuni sono nascosti sotto un elemento interattivo.
1. Barra delle linguette
Se hai un numero limitato di destinazioni di primo livello nel tuo sito web o nella tua app, una soluzione di navigazione a schede potrebbe essere la soluzione. Quando un menu è visibile in alto o in basso, è fondamentalmente pubblicità che una navigazione è lì e le persone sono in grado di vedere le opzioni di navigazione fin dall'inizio.
Le schede sembrano essere il modello di navigazione più semplice. Tuttavia, alcune cose dovrebbero essere considerate quando si progetta questo tipo di navigazione:
- La barra delle schede consente di visualizzare 5 o meno opzioni di navigazione.
- Una delle opzioni dovrebbe essere sempre attiva e dovrebbe essere visivamente evidenziata, ad esempio, usando un colore contrastante.
- La prima scheda deve essere la home page e l'ordine delle schede dovrebbe riguardare la loro priorità o ordine logico nel flusso dell'utente.
- È preferibile utilizzare le icone insieme alle etichette per ciascuna opzione di navigazione. Le icone senza etichette funzionano solo per azioni comuni, come l'icona di una lente di ingrandimento per la ricerca e per le interfacce utilizzate frequentemente dagli utenti (ad esempio Instagram).
Suggerimento: per risparmiare spazio sullo schermo, la barra di navigazione potrebbe essere nascosta / rivelata durante lo scorrimento verso il basso e verso l'alto.
2. Barra delle linguette con l'opzione "Altro"
Quando hai più di 5 destinazioni di primo livello, una soluzione pratica potrebbe essere quella di mostrare le 4 sezioni prioritarie e di avere un quinto elemento come elenco delle opzioni rimanenti.
I principi di progettazione di questa soluzione sono sostanzialmente gli stessi della barra delle schede. C'è solo un'eccezione: l'ultimo elemento è l'elemento "altro".
L'elemento "Altro" può funzionare come menu a discesa o anche collegarsi a una pagina di navigazione separata con le sezioni rimanenti. A prima vista questa soluzione non è molto meglio del menu dell'hamburger, poiché nasconde anche il contenuto e la sua etichetta non dice troppo su ciò che è nascosto dietro di esso. Tuttavia, se si impostano correttamente le priorità delle opzioni di navigazione, la maggior parte degli utenti disporrà di 4 o 5 opzioni di navigazione a priorità assoluta visibili sullo schermo, in modo da migliorare l'esperienza di navigazione per loro.
3. Menu che si riduce progressivamente
Il menu a compressione progressiva, noto anche come pattern "Priorità +", è un menu che si adatta alla larghezza dello schermo. Mostra la maggior parte della navigazione possibile e mette tutto il resto sotto un pulsante "altro". Fondamentalmente, questo modello è una versione sofisticata della navigazione "Tabbar + more" in cui il numero di opzioni di navigazione nascoste dietro il menu "more" dipende dallo spazio disponibile sullo schermo. La flessibilità di questa soluzione offre un'esperienza utente migliore rispetto a una "Tab" statica "+ altro".
Credito d'immagine: Brad Frost
4. Navigazione scorrevole
Simile ai precedenti due modelli, questo è un altro approccio per elenchi più lunghi. Se si dispone di un numero di opzioni di navigazione senza una distinzione importante nelle priorità, ad esempio i generi musicali, è possibile elencare tutti gli elementi in una vista scorrevole. Rendendo scorrevole la lista si consente agli utenti di spostarsi da una parte all'altra.
Il rovescio della medaglia di questa soluzione è che ancora solo i primi elementi sono visibili senza scorrere e tutti quelli rimanenti sono fuori dalla vista. Questa è, tuttavia, una soluzione accettabile quando si prevede che gli utenti esplorino il contenuto, ad esempio categorie di notizie, categorie musicali o in un negozio online.
5. Navigazione a schermo intero
Mentre con altri modelli menzionati in questo articolo, la lotta è quella di minimizzare lo spazio occupato dai sistemi di navigazione, il modello a schermo intero assume l'esatto contrario. Questo approccio di solito dedica la pagina iniziale esclusivamente alla navigazione. Gli utenti toccano o sfiorano in modo incrementale per rivelare opzioni di menu aggiuntive mentre scorrono verso l'alto e verso il basso.
Questo modello funziona bene in applicazioni e siti Web basati su attività e direzione, specialmente quando gli utenti tendono a limitarsi a un solo ramo della gerarchia di navigazione durante una singola sessione. L'incanalamento degli utenti da pagine panoramiche a pagine di dettaglio li aiuta a capire cosa stanno cercando e a concentrarsi sui contenuti all'interno di una singola sezione.
Navigazione a schermo intero in Yelp
Utilizzando la navigazione a schermo intero, i progettisti possono organizzare grossi pezzi di informazioni in modo coerente e rivelare informazioni senza sovraccaricare l'utente. Una volta che l'utente prende la decisione su dove andare, puoi dedicare l'intero spazio dello schermo al contenuto.
Conclusione
Con i modelli di navigazione per dispositivi mobili, non esiste una soluzione valida per tutti; dipende sempre dal tuo prodotto, dai tuoi utenti e dal contesto. Tuttavia, la base di ogni navigazione ben progettata è l'architettura delle informazioni: struttura chiara, priorità e etichette in base alle esigenze dei tuoi utenti. Aiutare gli utenti a navigare dovrebbe essere una priorità assoluta per ogni designer di app. Sia gli utenti principianti che i clienti di ritorno dovrebbero essere in grado di capire come spostarsi attraverso la tua app con facilità.