Guida approfondita: come ottimizzare la velocità di navigazione in un menu multilivello
Gli utenti devono navigare rapidamente nell’interfaccia. Più velocemente un utente trova le informazioni di cui ha bisogno, più tempo risparmia.
La velocità è una delle metriche più importanti per i menu che contengono più livelli. Più livelli ci sono in un menu, più tempo ci vuole per navigare. Il modello più comune è un menu a tre livelli. Il modo più semplice per ottimizzare la velocità di navigazione in un menu a tre livelli è creare un layout ultraveloce.
Un recente studio condotto dalla California State University di San Jose ha fatto luce su quali sono i layout di navigazione più veloci.
I layout di navigazione possono essere suddivisi in:
- superiore-alto-alto,
- in alto a sinistra,
- in alto a sinistra,
- superiore-sinistra-alto,
- sinistra-sinistra-sinistra,
- sinistra-alto-sinistra-alto,
- sinistra-sinistra-alto,
- sinistra-sinistra.
Le denominazioni dei livelli sono ordinate per priorità e gerarchia (ad esempio, [1] è primario, [2] è secondario e [3] è terziario). I criteri di valutazione della velocità includono:
- tempo di navigazione,
- l’indecisione dell’utente,
- movimento del cursore,
- errori di selezione,
- preferenze dell’utente.
Tempo di navigazione
Le ricerche hanno rilevato che la navigazione primaria a sinistra è più veloce di quella in alto. Questo effetto si applica anche ai livelli aggiuntivi del menu a sinistra. È emerso che la navigazione è più veloce quando il livello primario è separato da quelli secondario e terziario. Di conseguenza, sinistra-alto-sinistra e sinistra-alto-sinistra sono risultate le più veloci, mentre sinistra-alto-sinistra e sinistra-alto-sinistra sono risultate le più lente.
Indecisione dell’utente
L’indecisione si verifica quando si verifica un intoppo nello spostamento del cursore da un livello di menu all’altro. La sinistra-alto-sinistra ha avuto la minore esitazione di tutte le vie di fuga e la sinistra-alto-sinistra la maggiore. Una riduzione significativa delle oscillazioni si è verificata quando i livelli secondari e terziari erano sullo stesso piano.
Movimento del cursore
La frequenza di spostamento del cursore sul piano sbagliato rappresenta il movimento del cursore. Quando il menu principale era a sinistra, il movimento del cursore era minore. Il numero di movimenti del cursore è diminuito anche quando il livello secondario è stato separato da quello primario. E quando i menu secondari e terziari si trovavano su piani diversi, il movimento del cursore era molto intenso. Ma quando erano sullo stesso piano, gli utenti hanno fatto meglio.
Sinistra-sinistra e alto-sinistra-alto hanno registrato la minore quantità di movimenti del cursore, mentre alto-sinistra-alto e alto-sinistra-alto hanno registrato la minore quantità di movimenti del cursore. È un’osservazione molto utile. Quando tutti i livelli di menu si trovano sullo stesso piano, è più difficile per l’utente spostare il cursore sul piano sbagliato.
Errori di selezione
Il numero di clic in più rappresenta un errore di selezione. Quando il livello primario si trovava nel piano sinistro, si sono verificati meno errori di selezione. Il posizionamento del primario di sinistra ha ridotto gli errori di selezione dell’80% rispetto al primario superiore.
Un numero significativo di errori di selezione si è verificato quando i livelli primario e secondario erano sul piano superiore. Le primarie superiori e quelle di sinistra hanno mostrato i risultati peggiori. Si sono verificati meno errori di selezione quando i livelli secondari e terziari erano su un piano separato da quello primario. Sinistra-sinistra e sinistra-sinistra hanno mostrato i risultati migliori.
Preferenze dell’utente
La maggior parte degli utenti preferisce usare il primario sinistro al primario superiore. Gli utenti hanno preferito le disposizioni sinistra-alto-alto e sinistra-sinistra. Hanno inoltre apprezzato l’opzione di raggruppare i livelli primario e secondario o secondario e terziario. Le preferenze più basse sono state quelle di sinistra-sinistra e sinistra-sinistra. Sulla base di queste informazioni, si può concludere che gli utenti non amano saltare avanti e indietro tra i piani.
I migliori layout secondo tutti i criteri e i peggiori
A ogni layout è stato assegnato un punteggio finale in base alle prestazioni. I leyout sono stati valutati in base ai criteri sopra indicati. La migliore disposizione per la navigazione è stata giudicata quella a sinistra-alto-sinistra e quella a sinistra-sinistra-sinistra. I due layout peggiori sono quelli in alto a sinistra e in alto a sinistra. Tra i primi due, la parte superiore-sinistra-alto è stata più veloce della parte sinistra-sinistra di circa 17 secondi.
Sinistra-sinistra-sinistra è più lento di sinistra-alto, perché quando tutti i menu sono a sinistra, l’utente è costretto a scorrere l’elenco delle voci. Man mano che i livelli diventano più ampi e profondi, gli utenti devono scorrere di più. Questo perché non possono visualizzare tutti gli elementi principali su un’unica schermata. Tuttavia, il vantaggio dello schema sinistra-sinistra è che gli utenti vedono più contenuti sullo schermo. Di conseguenza, si dedica meno tempo alla navigazione, ma in questo caso se ne dedica di più ai menu.
Il vantaggio di visualizzare lo schermo da sinistra a destra consente agli utenti di visualizzare più elementi principali contemporaneamente, indipendentemente dalla profondità di navigazione. Tuttavia, vedono meno contenuti sullo schermo a causa delle barre di navigazione superiori. Di conseguenza, gli utenti scorrono meno i menu e più i contenuti.
Raccomandazioni dell’autore
Indipendentemente dallo schema di navigazione scelto, sinistra-sinistra o sinistra-alto sono ottimi layout. Tuttavia, i due schemi presentano vantaggi e svantaggi. È quindi importante determinare quale opzione sia più efficace per la vostra UX.
Se gli utenti si spostano frequentemente tra le categorie principali, utilizzate uno schema sinistra-alto-alto. Questa opzione riduce al minimo lo scorrimento del menu e ne aumenta la visibilità. Se la vostra interfaccia presenta molti contenuti con elementi visivi pesanti (foto, video, grafica), utilizzate il layout sinistra-sinistra. In questo caso si riduce al minimo lo scorrimento dei contenuti e si massimizza la visibilità sullo schermo.
Se si seleziona sinistra-sinistra-alto-sinistra, la barra di navigazione viene nascosta durante lo scorrimento verso il basso e non interferisce con la visualizzazione dello schermo. In questo modo è possibile aumentare la visibilità del contenuto e ridurre la necessità di scorrere verso il basso. Quando l’utente si sposta verso l’alto, la barra riappare. Il presupposto è che quando si scorre verso il basso gli utenti si concentrano sulla visualizzazione dei contenuti e quando si scorre verso l’alto sulla navigazione dell’interfaccia.
A mio parere, il margine di navigazione più vantaggioso è quello di sinistra-alto-alto. Non solo è più veloce di qualche secondo rispetto a sinistra-sinistra-sinistra, ma permette anche agli utenti di identificare la categoria principale di cui hanno bisogno. Se nella barra laterale sinistra sono presenti più livelli di menu, è necessario uno sforzo maggiore per identificare il livello in cui ci si trova. È anche facile confondere gli elementi secondari e terziari, poiché sono molto vicini tra loro.
Il passaggio da sinistra a sinistra semplifica la scansione delle categorie principali. Distingue le categorie secondarie e terziarie da quelle primarie e le colloca a livelli verticali diversi. Perché nella scansione orizzontale c’è più possibilità di confondere elementi secondari e terziari.
Naturalmente, non si tratta di una soluzione unica e ci sono sempre delle eccezioni alla regola. Pertanto, la scelta dei layout deve basarsi sull’orientamento e sulle caratteristiche dell’interfaccia. Ma in generale è adatto alla maggior parte dei menu a tre livelli.
Conclusioni
Da questa ricerca, possiamo identificare tre aspetti importanti che ottimizzano in modo significativo la velocità di navigazione nel menu a tre livelli.
1: Il menu principale dovrebbe essere a sinistra, non in alto. (~ 17 secondi risparmiati).
Questa conclusione è giustificata dal fatto che l’organizzazione delle voci di menu come un elenco con colonne facilita la scansione. È più facile per l’utente percepire un gruppo di elementi disposti in colonna piuttosto che in fila. Inoltre, nella sezione primaria superiore del menu, l’utente può visualizzare più comodamente le singole voci durante la scansione della riga.
2: Il menu principale deve trovarsi su un piano diverso dai menu secondari e terziari. (~ 23 secondi risparmiati)
Questa conclusione è giustificata dal fatto che il menu primario è la categoria madre, che ha una priorità maggiore rispetto alle categorie figlie. Quando i livelli secondari e terziari sono separati da quello primario, si crea una gerarchia corretta e si evita il disordine visivo sullo stesso piano.
3: I menu secondari e terziari devono trovarsi sullo stesso piano. (~ 9 secondi risparmiati)
Questa conclusione è giustificata dal fatto che i livelli secondario e terziario sono figli della categoria madre, il che li rende più connessi. La collocazione sullo stesso piano rende più intuitivo il passaggio da una categoria all’altra.
Se state progettando un menu a tre livelli per un’applicazione desktop, tenete a mente questi concetti UX. Questi sono particolarmente applicabili alle interfacce dei cruscotti, dove l’efficienza è fondamentale. Se attualmente avete un menu a tre livelli in cui la navigazione non è ben studiata, prendete in considerazione la possibilità di cambiarlo. Un rapido margine di navigazione consentirà agli utenti di eseguire le operazioni necessarie nel minor tempo possibile, sperimentando il divertimento del design dell’interfaccia.
