Best practice per la progettazione di menu multilivello

La navigazione e la reperibilità sono aspetti centrali della progettazione dell'esperienza utente. Se gli utenti non riescono ad arrivare dove vogliono o a trovare ciò di cui hanno bisogno, si sentiranno frustrati e potrebbero decidere di cercare altrove. Sui siti Web con un'architettura delle informazioni particolarmente complessa, i menu multilivello sono un modo efficace per migliorare la navigazione e la reperibilità, offrendo così esperienze Web efficienti che promuovono la fiducia del prodotto e aumentano le conversioni.

Poiché i prodotti e i dispositivi su cui vengono utilizzati variano notevolmente, non esiste una soluzione valida per tutti che produca il menu multilivello perfetto. Tuttavia, ci sono regole pratiche che ti aiuteranno a creare menu multilivello che migliorano la navigazione e la reperibilità su qualsiasi dimensione dello schermo.

Suggerimenti di progettazione per schermi di qualsiasi dimensione

Un buon menu multilivello dovrebbe portare gli utenti dove devono andare rapidamente presentando le informazioni in modo chiaro e intuitivo. Prima di entrare nelle linee guida specifiche per le dimensioni, diamo un'occhiata ad alcune pratiche che si applicano a tutti i menu.

Utilizzare non più di due livelli di sottomenu. È probabile che più di due livelli di sottomenu confondano e travolgano gli utenti. Mantenere la navigazione relativamente piatta migliora la reperibilità per gli utenti e riduce il carico cognitivo necessario per ricordare dove si trovano. Se la struttura della pagina del sito è profonda, prendi in considerazione l'aggiunta di un menu di navigazione locale nella parte superiore delle pagine strettamente correlate. Ad esempio, Zoho, che progetta prodotti complessi di supporto alle imprese, ha posizionato un menu locale specifico del prodotto nella parte superiore di ogni pagina del prodotto, appena sotto il menu principale. Mentre il menu principale in alto enumera le offerte principali di Zoho, i menu locali forniscono l'accesso a pagine con informazioni più dettagliate, come casi d'uso e prezzi.

Segnala sottomenu con icone. Gestisci le aspettative degli utenti mettendo sempre in chiaro quando sono disponibili dei sottomenu. Le scelte familiari includono una piccola icona con un angolo verso il basso o un'icona a triangolo. Inoltre, considera di capovolgere le icone dei puntatori quando i sottomenu sono aperti.

Organizza le informazioni in modo intuitivo. Assicurati che la gerarchia delle informazioni sia allineata con i modelli mentali degli utenti. Su un sito di e-commerce, ad esempio, valuta se è più probabile che un acquirente si aspetti che gli articoli siano organizzati per marca o per tipo di articolo. Se un utente fa clic sulla categoria "Scarpe", si aspetterà che il sottomenu presenti le opzioni per scarpe da ginnastica, sandali e stivali? O si aspetteranno di vedere un sottomenu che elenca tutte le marche di scarpe offerte dal negozio? Osservando sia la ricerca degli utenti che la ricerca della concorrenza lo chiarirà.

Assicurati che gli utenti sappiano sempre dove si trovano. Evidenzia sempre il collegamento nel menu principale che corrisponde alla pagina in cui si trova l'utente. Se la pagina corrente si trova in un sottomenu, evidenziare anche il collegamento del sottomenu e l'elemento principale nel menu principale. Ad esempio, se qualcuno che utilizza un sito web governativo per rinnovare la patente di guida dovesse navigare dal link "Residenti" nel menu principale al link "Servizi per gli autisti" nel sottomenu e poi a una pagina con un modulo di rinnovo, entrambi i " I link Residenti" e "Servizi per gli autisti" rimarrebbero evidenziati.

Mantieni la copia semplice. Un menu non è il posto per giochi di parole intelligenti; assicurati che le etichette dei link abbiano un forte profumo di informazioni. Ciò significa mantenere i nomi delle etichette semplici e descrittivi in ​​modo che gli utenti sappiano subito cosa troveranno quando fanno clic. Più chiara è la copia, più rapidamente gli utenti troveranno ciò di cui hanno bisogno.

Dai priorità alla leggibilità. Usa un semplice carattere sans-serif e assicurati uno spazio adeguato intorno agli oggetti per evitare disordine. Assicurati che lo sfondo sia abbastanza opaco da bloccare tutto ciò che si trova dietro il menu. Ma non ignorare il marchio generale del sito. Anche se la leggibilità viene prima di tutto, assicurati che lo stile del menu integri il resto dell'aspetto grafico del sito.

Rendi accessibile il clic e il tocco. Per rendere il menu accessibile agli utenti con problemi di controllo motorio, segui le linee guida per la progettazione dei materiali di Google e formatta gli elementi cliccabili in modo che abbiano una dimensione di almeno 48 x 48 pixel.

Suggerimenti di progettazione per desktop

Anche con una tendenza crescente verso i dispositivi mobili, ci sono ancora molte ragioni per cui i clienti potrebbero richiedere siti desktop con funzionalità complete. Ad esempio, potrebbero aver bisogno di rendere disponibili online più informazioni di quanto sia fattibile per un sito mobile, come un sito Web per un'università o un istituto finanziario. Oppure la loro ricerca potrebbe mostrare che i loro utenti si affidano semplicemente di più ai desktop.

Un menu desktop dovrebbe essere facile da scansionare, offrire interazioni chiare e, naturalmente, essere reattivo. Dovrebbe anche essere il più coerente possibile con il sito mobile per rendere l'esperienza intuitiva per i visitatori di ritorno.

I menu dovrebbero aprirsi al clic, non al passaggio del mouse. Una delle decisioni fondamentali che dovrai prendere è come gli utenti accederanno al menu del sito. Il semplice passaggio del puntatore sull'elemento principale, il nome della categoria, sarà sufficiente per attivare l'aspetto del menu o gli utenti dovranno fare clic su di esso?

L'approccio al passaggio del mouse è popolare, ma fare clic per aprire è il modo migliore per garantire che il menu funzioni in modo affidabile e intuitivo su tutti i dispositivi. L'approccio del clic consente ai siti Web di funzionare in modo più coerente sia sui tradizionali monitor dei computer che sui touchscreen ed evita molte frustrazioni che si verificano con l'approccio al passaggio del mouse, tra cui:

• Stretti tunnel sospesi. Un tunnel al passaggio del mouse è il percorso che un mouse deve seguire per navigare mantenendo aperto il menu. Se è troppo stretto, il menu potrebbe scomparire prima che l'utente raggiunga il collegamento desiderato.
• Apertura accidentale. Un menu al passaggio del mouse tende ad aprirsi inavvertitamente se un utente tenta di attraversarlo mentre si dirige verso un'altra posizione sulla pagina. L'impostazione di un breve ritardo risolve il problema, ma può causare frustrazione quando l'utente desidera aprire il menu.
• UX incoerente sui touchscreen. I menu al passaggio del mouse non funzionano sui touchscreen. Richiedono una correzione del codice per rilevare i touchscreen e passare al tocco per aprire; poiché la linea tra laptop e tablet diventa sempre più sfocata, queste soluzioni alternative potrebbero diventare obsolete.
• Domande su cosa è cliccabile. Con i menu al passaggio del mouse, gli utenti non sempre sanno se il collegamento principale è selezionabile o meno finché non provano a fare clic. Questo è l'opposto di intuitivo.
• Accessibilità. I menu al passaggio del mouse possono presentare problemi agli utenti che utilizzano utilità per la lettura dello schermo o navigano tramite tastiera.

Scegli il layout giusto: menu a discesa vs. Mega menu. Se il sito desktop utilizza un layout di menu tradizionale (una barra dei menu orizzontale situata nella parte superiore della pagina), ci sono due tipi di sottomenu che puoi considerare: un menu a discesa standard a colonna singola o un mega menu a più colonne.

Prendi in considerazione l'utilizzo di un menu a discesa se la categoria principale contiene meno di otto collegamenti. Se il menu a discesa è abbastanza lungo da richiedere uno scorrimento verticale, dovresti considerare di organizzare le informazioni in modo diverso, magari come un mega menu o perfezionando le categorie principali.

Un mega menu è un tipo di menu nidificato che in genere utilizza un layout ampio che può estendere la larghezza del browser. È necessario utilizzare questo tipo di menu se i sottomenu contengono molti collegamenti diversi che possono essere raggruppati in colonne. In genere, puoi vedere menu come questo su grandi siti di e-commerce.

Quando si progetta un mega menu, considerare quanto segue:

• Aggiungi immagini o icone per semplificare la scansione delle informazioni.
• Aggiungi titoli alle pagine correlate al gruppo.
• Aggiungi descrizioni se i nomi delle categorie non sono evidenti.

I mega menu possono essere difficili da leggere e navigare su dispositivi mobili, ma a volte il miglioramento dell'esperienza utente su uno schermo più grande fa sì che valga la pena fare il lavoro extra per riconfigurare le informazioni per i dispositivi mobili.

Aggiungi chiari stati al passaggio del mouse. Anche con i menu a portata di clic, inclusi stati al passaggio del mouse chiari per tutti gli elementi cliccabili rendono le interazioni soddisfacenti e rassicurano gli utenti che i collegamenti sono attivi. È possibile rendere lo sfondo dell'area selezionabile leggermente più scuro per indicare uno stato al passaggio del mouse. Assicurati solo che l'area al passaggio del mouse corrisponda all'area selezionabile. Se il test mostra che gli utenti hanno bisogno di più indicazioni o contesto, prendi in considerazione l'aggiunta di nomi di etichette più descrittivi o una descrizione comando, purché non blocchi nulla di importante.

Fare clic per chiudere i sottomenu. Mantieni le cose intuitive chiudendo i menu quando gli utenti fanno clic altrove o quando aprono un altro sottomenu. Questo è il modo in cui funzionano i campi di input a discesa nei moduli, quindi la maggior parte degli utenti lo troverà familiare.

Abilita la navigazione da tastiera sul desktop. Non tutti usano un mouse per navigare, quindi il menu dovrebbe consentire agli utenti di navigare usando solo una tastiera. Ciò significa che tutti i collegamenti dovrebbero avere stati focalizzati distinti in modo che gli utenti possano vedere dove si trovano a colpo d'occhio. In genere una cornice di colore più scuro funziona bene per indicare lo stato di messa a fuoco.

Suggerimenti di progettazione per schermi mobili

Se non stai già progettando mobile-first, dovrai ottimizzare il menu per un dispositivo portatile. I layout dei menu tradizionali raramente funzionano bene su schermi molto piccoli: se rimpicciolisci semplicemente la barra dei menu del desktop, nessuno sarà in grado di leggerla. Queste linee guida ti aiuteranno a passare con successo al piccolo schermo.

Semplifica il menu principale. Poiché gli schermi degli smartphone sono così piccoli, molte delle informazioni che troverai in un menu del desktop dovranno essere inizialmente nascoste. La barra del menu principale dovrà essere molto semplice, ma è una buona idea far emergere i collegamenti più importanti per migliorare la reperibilità. È possibile apporre la barra dei menu nella parte inferiore o superiore dello schermo.

Aggiungi un trigger di menu. Poiché tutto o parte di un menu mobile potrebbe essere nascosto, gli utenti avranno bisogno di un modo per trovarlo. L'aggiunta di un'icona di hamburger alla barra dei menu o in un pulsante mobile facile da raggiungere è una soluzione popolare che molti utenti riconosceranno. Tuttavia, il menu dell'hamburger non è l'unica scelta. Se stai progettando per utenti più anziani, potrebbe essere meglio utilizzare una casella con la parola "Menu", ad esempio. Oppure, se vuoi rendere più evidenti le funzionalità del sito, potresti volerle visualizzare in un menu a schede in alto o in basso.

Metti il ​​menu in una barra laterale. Esistono molti modi diversi per progettare un menu mobile. Puoi utilizzare un layout a larghezza intera, che funziona in qualsiasi situazione; un cassetto in basso, che è meglio quando ci sono solo pochi collegamenti; o un menu ad angolo circolare, che è un'opzione dall'aspetto futuristico per un piccolo menu senza sottomenu. Una buona opzione è utilizzare una barra laterale con uno sfondo scuro e traslucido che blocca il contenuto della pagina, rimuovendo così le distrazioni, e consente agli utenti di toccarla facilmente per chiuderla. Considera anche l'utilizzo di un'animazione diapositiva da sinistra per evitare un'esperienza stridente. Per i menu della barra laterale e del cassetto inferiore, assicurati che il menu sia scorrevole verticalmente in modo che nulla venga tagliato su schermi più piccoli o in modalità orizzontale.

Consenti agli utenti di chiudere facilmente il menu. Gli utenti possono intuitivamente toccare un menu per chiuderlo, ma considerare anche l'aggiunta di un pulsante X. Puoi trasformare l'icona dell'hamburger in una X o aggiungerne una nell'angolo in alto a destra del menu.

Usa le sezioni espandibili per i singoli sottomenu. Prendi in considerazione l'utilizzo di sezioni espandibili se il menu ha un solo livello di sottomenu. Puoi espanderli sotto l'elemento principale e utilizzare un colore di sfondo diverso per chiarezza. Puoi anche consentire agli utenti di espandere più sottomenu contemporaneamente. Prendi in considerazione l'utilizzo di un angolo verso il basso o di un'icona a triangolo sul lato destro dell'elemento principale per indicare che è disponibile un sottomenu.

Sostituisci mega menu e più sottomenu con menu sovrapposti. Se devi espandere più di un sottomenu o riconfigurare un mega menu, opta per un approccio sovrapposto: invece di espandere un sottomenu sotto o accanto al genitore, fai in modo che il sottomenu sostituisca il genitore. Con questo approccio dovrai includere un collegamento "Indietro" su tutti i pannelli ad eccezione del primo livello. Per il menu di primo livello, considera l'utilizzo di un'icona ad angolo retto o di una freccia destra per gli elementi principali.

Sottomenu pre-aperti. Sul desktop, è utile evidenziare la pagina corrente e il relativo genitore. Su schermi piccoli, considera di fare un ulteriore passo avanti. Se un utente tocca per aprire il menu principale e la pagina in cui si trova attualmente si trova all'interno di un sottomenu, considera di aprire automaticamente anche il sottomenu, in modo che l'utente capisca dove si trova rispetto al resto delle voci di menu.

Mantienilo chiaro e coerente

La navigazione è una componente cruciale dell'esperienza del cliente. Gli utenti non vogliono andare a caccia al tesoro o passare più tempo a farsi strada attraverso i menu del necessario. Se non riescono a trovare facilmente ciò di cui hanno bisogno, potrebbero impegnare le risorse del tuo cliente con una chiamata di supporto o, peggio, portare la loro attività altrove.

Un menu multilivello ben progettato è un componente chiave di qualsiasi sito Web con un'architettura informativa complessa. Sebbene queste linee guida non dovrebbero mai sostituire la ricerca e il test degli utenti, ti serviranno bene in un'ampia varietà di casi d'uso.

Ulteriori letture sul blog Toptal:

• La guida completa all'architettura dell'informazione
• Design reattivo: migliori pratiche e considerazioni
• Principi di architettura dell'informazione per dispositivi mobili (con infografica)