Modelli di design frustranti: menu al passaggio del mouse Mega-Dropdown

I siti Web complessi spesso si basano su una navigazione complessa. Quando un sito Web ospita migliaia di pagine, spesso combinate con micro-siti e centinaia di sottosezioni, alla fine la navigazione sarà ampia e profonda. E con una navigazione multilivello così complessa, mostrare l'ampiezza delle opzioni richiede un bel po' di spazio. Pensa ai grandi rivenditori di e-commerce e ai grandi siti aziendali, che si rivolgono a molti segmenti di pubblico e hanno molti punti di accesso.

Non c'è da stupirsi che un modo comune per affrontare questa complessità sia esporre rapidamente i clienti a una grande quantità di navigazione. Questo è esattamente il motivo per cui i mega-dropdown sono diventati in qualche modo un'istituzione sul web, anche se principalmente per progetti complessi e di grandi dimensioni. Un mega menu a discesa è essenzialmente una grande sovrapposizione che appare sull'azione di un utente. Di solito include un miscuglio di collegamenti, pulsanti, miniature e talvolta menu a discesa e sovrapposizioni nidificati da soli.

Per decenni, un comportamento comune per questo tipo di navigazione è aprire il menu al passaggio del mouse . E per decenni, la lamentela di un utente comune su questo modello è stata l'assoluta mancanza di certezza e controllo su come e quando la sottonavigazione si apre e si chiude.

A volte il sottomenu appare inaspettatamente , a volte scompare improvvisamente, ea volte rimane sullo schermo per un po', anche se il puntatore del mouse si trova già in una parte molto diversa della pagina, o su un'altra pagina del tutto.

Perché i menu al passaggio del mouse Mega-Dropdown sono frustranti?

Il motivo principale per cui i mega-dropdown possono essere ingombranti da utilizzare è a causa di una mancata corrispondenza di intenzioni e aspettative . Con i menu al passaggio del mouse, cerchiamo di dedurre e agire in base a un intento particolare monitorando il comportamento del mouse, tuttavia i nostri clienti potrebbero avere obiettivi molto diversi e limitazioni molto diverse quando accedono a una pagina.

Il comportamento del cliente è solitamente imprevedibile, anche se le nostre analisi potrebbero raccontare una storia leggermente diversa con punti dati raccolti e normalizzati su un periodo di tempo più lungo. Solo raramente possiamo prevedere il comportamento con precisione.

Gli scenari comuni che di solito esploriamo sono:

1. Il cliente punta al collegamento della categoria e vi si reca direttamente per esplorare gli elementi di navigazione secondaria in quella categoria.
2. Il cliente sta spostando il mouse verso un obiettivo sullo schermo , ma la traiettoria che il mouse deve percorrere copre un collegamento di navigazione che apre un mega-dropdown.

Tuttavia, ci sono anche molte altre situazioni da considerare. Solo per citarne alcuni:

1. Il cliente desidera cercare le opzioni del mega-menu a discesa durante la digitazione di un completamento automatico della ricerca. Per farlo, devono continuare a riaprire il mega-menu a discesa o utilizzare schede di navigazione separate, posizionate una accanto all'altra.
2. Il cliente potrebbe utilizzare un trackpad (o un mouse) per azionare un ampio display secondario, quindi i movimenti del puntatore saranno più lenti, bruschi e imprecisi. Ciò causerebbe l'apertura involontaria del mega-menu a discesa ogni volta che l'utente si ferma quando si reca alle CTA o al carrello degli acquisti nella parte superiore della pagina.
3. Il cliente desidera aprire la pagina della categoria , quindi passa al collegamento della categoria, fa clic su di esso, ma sperimenta uno sfarfallio perché un mega-menu a discesa appare in ritardo.
4. Con i sottomenu nidificati all'interno di un mega menu a discesa , il cliente desidera esplorare elementi simili all'interno della categoria in cui si trovano attualmente, ma a causa dell'annidamento, deve riaprire il mega menu a discesa più e più volte e viaggiare per il stesso tunnel al passaggio del mouse più e più volte.
5. Immagina una situazione in cui desideri ridimensionare la finestra e, proprio mentre stai per agganciare il bordo destro della finestra, un menu al passaggio del mouse continua a essere visualizzato, solo perché hai spostato il cursore del mouse troppo vicino.
6. L'utente inizia a scorrere lentamente verso il basso per valutare il contenuto di una pagina, ma il menu continua a comparire. E ogni volta che l'utente sposta un cursore per leggere il contenuto del mega-dropdown, il menu scompare accidentalmente.

Il problema è che dobbiamo supportare tutte queste intenzioni e tutti questi incidenti, ma allo stesso tempo dobbiamo assicurarci di non creare un'esperienza fastidiosa e frustrante per nessuno di questi casi. Naturalmente, come designer e sviluppatori, abbiamo inventato una serie di tecniche per affrontare questo problema.

Ritardo entrata/uscita al passaggio del mouse

Una delle prime soluzioni, e anche una delle più comuni ancora, è quella di introdurre un ritardo di entrata/uscita al passaggio del mouse. Dobbiamo assicurarci che il menu non si apra e non si chiuda troppo presto . Per raggiungere questo obiettivo, introduciamo un ritardo, solitamente di circa 0,5 secondi. Ciò significa che diamo ai clienti un buffer di circa 0,5 secondi per:

• Attraversa la traiettoria verso un obiettivo remoto, se necessario, o
• Indicare che intendono esplorare la navigazione rimanendo sul collegamento della categoria mega-menu a discesa, oppure
• Correggi un errore se hanno lasciato per sbaglio i confini di un mega-dropdown.

In altre parole, finché il cliente rimane all'interno dell'overlay mega-dropdown, continuiamo a visualizzarlo. E nascondiamo l'overlay una volta che il cliente ha spostato il cursore del mouse al di fuori dell'overlay di navigazione secondaria per almeno 0,5 secondi.

Sebbene risolva il problema dello sfarfallio accidentale sulla pagina, introduce un ritardo nei casi in cui un utente ha lasciato il mega menu a discesa per più di 0,5 secondi. Di conseguenza, rallenta ogni interazione con il mega-menu a discesa nell'intero sito. Purtroppo diventa molto rapidamente molto evidente, soprattutto se la navigazione viene utilizzata molto.

Alcune implementazioni aggiungono una transizione fade-in/fade-out per rendere meno improvvisa l'apparizione di un mega-dropdown, ma in pratica si traduce in un aumento del ritardo di entrata/uscita a 0,8–0,9s, che introduce anche un più evidente ritardo. Un esempio è ADAC.de, con un ritardo di dissolvenza in ingresso di 100 ms e una transizione in dissolvenza in uscita di 300 ms. (La transizione non si applica quando si passa da una categoria all'altra del mega menu a discesa.)

Ovviamente, più a lungo rimane visibile l'overlay, più penalizziamo le persone che vogliono intenzionalmente sfuggire all'overlay. In realtà, questo diventa un problema poiché introduciamo un timeout superficiale tra l'azione dell'utente e la risposta dell'interfaccia utente.

Percorsi di movimento del mouse tolleranti: triangolo della traiettoria

Invece di introdurre un ritardo, possiamo cercare di essere più generosi con i percorsi che i clienti percorreranno. Poiché i movimenti del mouse sono intrinsecamente imprecisi, per ridurre al minimo la frustrazione, possiamo evitare tunnel di librazione stretti e allargare i corridoi di viaggio.

Ad esempio, possiamo utilizzare la tecnica del triangolo di Amazon, in cui abbiamo costruito un triangolo di traiettoria che collega la posizione corrente del puntatore del mouse con i bordi dell'area del mega dropdown. Se si suppone che quell'area appaia accanto alle categorie a destra (come mostrato nell'immagine sotto), colleghiamo il puntatore del mouse con i bordi superiore destro e inferiore destro del contenitore in cui sono elencate le categorie.

Finché l'utente rimane all'interno del triangolo o all'interno dell'intera area del mega menu a discesa, l'overlay viene comunque visualizzato. Se l'utente sceglie di viaggiare al di fuori del triangolo , il contenuto dell'overlay mega-dropdown cambierà di conseguenza. E ovviamente scomparirà del tutto immediatamente una volta che l'utente si sarà spostato completamente al di fuori dell'elenco delle categorie.

Chris Coyier mette in evidenza alcune delle complessità tecniche di questa tecnica nel suo post su Menu a discesa con percorsi di movimento del mouse più indulgenti, insieme a una demo JavaScript vanilla di Alexander Popov su "Menu mirati".

Con questa tecnica riduciamo al minimo l'attrito dovuto alla scomparsa improvvisa e alla ricomparsa della sottonavigazione. Ma potrebbe diventare inefficace se i collegamenti alle categorie sono posizionati troppo vicini tra loro o se visualizziamo il menu al passaggio del mouse passando il mouse su un pulsante più grande. Possiamo fare un po' meglio con le aree di uscita del percorso SVG.

Aree di uscita del percorso SVG

Quando si calcola un triangolo di traiettoria con la tecnica precedente, a volte non solo tracciavamo la posizione esatta del puntatore del mouse, ma ricalcolavamo anche il triangolo con ogni movimento del puntatore, in ogni momento. Possiamo migliorare la strategia calcolando l' area di sovrapposizione SVG complessiva una volta e tracciando se il puntatore del mouse si trova al suo interno, senza ricalcolare il triangolo tutto il tempo. Un ottimo esempio è l'implementazione di Hakim el Hattab che disegna le aree in modo dinamico con SVG in base alla posizione dell'elemento di navigazione sullo schermo.

La soluzione di Hakim è in realtà reattiva, quindi se la navigazione secondaria non si adatta allo schermo, galleggerà accanto all'elemento di navigazione principale , visualizzato a tutta larghezza o altezza. L'area del percorso SVG verrà ricalcolata di conseguenza, ma solo se l'utente scorre verticalmente o orizzontalmente. Puoi vedere una demo funzionante della tecnica in azione sulla modalità di visualizzazione debug di Hakim del pattern Menu.

Sebbene questa opzione sia precisa ed elimini completamente il ritardo che abbiamo riscontrato con i ritardi al passaggio del mouse, causerà uno sfarfallio quando il cliente percorre accidentalmente un elenco di categorie di grandi dimensioni che richiede l'apertura del mega-menu a discesa su ogni elemento di navigazione.

Ancora una volta, la radice del problema è che i clienti non hanno alcun controllo su quando si aprono e si chiudono i mega menu a discesa, né spesso capiscono quando questi menu appariranno o scompaiono. Questa mancanza di prevedibilità porta spesso a errori e frustrazioni. Ma a volte i mega menu a discesa hanno problemi di accessibilità nascosti ancora di più.

Insidie ​​dei Mega-Dropdown che si aprono al passaggio del mouse

Come accennato in precedenza, tutte le tecniche sopra elencate condividono lo stesso obiettivo. Tentano di prevedere l'intenzione dell'utente di aprire e chiudere il menu di navigazione, basandosi su alcune osservazioni sulla velocità dei movimenti del mouse, sulla durata della permanenza in una singola area o sull'esatta posizione sullo schermo. Queste previsioni falliranno prima o poi per alcuni clienti e non c'è davvero molto da fare al riguardo.

I mega menu a discesa che si aprono al passaggio del mouse presentano molti problemi di accessibilità. Ovviamente, dobbiamo supportare la navigazione all'interno del mega menu a discesa per gli utenti solo da tastiera e dobbiamo assicurarci che gli elementi vengano annunciati correttamente anche agli screen reader. Ma anche in termini di layout generale, dobbiamo essere cauti su dove è posizionato il mega-dropdown.

Ricerca interrotta da un mega-menu a discesa

Se una caratteristica importante viene visualizzata abbastanza vicino alla navigazione a mega-menu a discesa, questo di solito causerà una buona quantità di problemi e lamentele. Ad esempio, se una barra di ricerca viene visualizzata sopra l'area del mega menu a discesa, ciò alla fine causerà un'incredibile quantità di attrito e frustrazione.

A meno che non venga utilizzato un ritardo di entrata/uscita al passaggio del mouse sufficientemente lungo, il mega-dropdown overlay interferirà sempre tra la ricerca e i risultati della ricerca, come nel caso di Thesauraus.com di seguito. Ogni volta che un utente si allontana dalla barra di ricerca verso i risultati (e torna indietro), il mega-menu a discesa si intromette.

Più sottonavigazioni che appaiono con ritardi

L'esperienza sarà ingombrante quando ci sono più sotto-navigazioni che si aprono al passaggio del mouse in ritardo , una dopo l'altra. Uno sfortunato esempio in azione è il sito Web Vodafone di seguito. Se in questo caso, ogni elemento di navigazione funge anche da collegamento autonomo alla categoria (oltre all'apertura di un mega-menu a discesa), dovremmo aspettarci molti clic di rabbia su tutto il sito web.

Nell'esempio sopra, ci sono 4 livelli di navigazione visualizzati uno sotto l'altro e 2 di essi si aprono al passaggio del mouse con una transizione di 300 ms . Allo stesso tempo, poiché ogni titolo di categoria è anche un collegamento alla pagina della categoria, gli utenti possono anche passare direttamente alla pagina della categoria. Ma una volta che hanno fatto clic e mentre aspettano che appaia la nuova pagina, il menu al passaggio del mouse apparirà brevemente in modo semi-interrotto, spesso non avendo abbastanza tempo per passare alla visualizzazione corretta per essere registrato da un cliente.

Aggiungi ad esso eventuali problemi di memoria o di elaborazione sul dispositivo leggermente più vecchio dell'utente, un paio di pesanti estensioni del browser e un controllo antivirus in esecuzione in background e l'esperienza complessiva diventerà rapidamente insopportabile.

Inoltre, poiché il 4° livello di navigazione compare solo in hover se il 3° livello di navigazione è già aperto, e il 3° livello di navigazione compare solo in hover se il 2° livello di navigazione è già aperto, per spostarsi tra le pagine del 4° livello livello, gli utenti devono riaprire la navigazione più e più volte e ricordare dove hanno cliccato in precedenza per passare il tunnel al 4° livello.

Fondamentalmente moltiplichiamo i ritardi e i problemi di hover tunnel di cui abbiamo parlato in precedenza, facendo sempre attendere agli utenti che appaia la navigazione e chiedendo loro di essere molto precisi all'interno di un hover corridor una volta che la navigazione appare . Ecco da dove viene la frustrazione.

Nel caso in cui devi affrontare una navigazione complessa di questo tipo, potrebbe valere la pena testare se i problemi scompaiono quando viene utilizzato un solo menu (anziché due) al passaggio del mouse. Quel menu sarebbe leggermente più grande e conterrebbe tutte le opzioni all'interno di colonne. Oppure, se possibile, per ogni categoria, considera la visualizzazione di tutte le opzioni di navigazione all'interno di quella categoria come una barra di navigazione permanente (barra laterale o barra superiore adesiva): di solito dovrebbe eliminare del tutto tutti questi problemi.

I titoli delle categorie fanno troppe cose

Come abbiamo visto in precedenza, a volte i titoli delle categorie hanno due diverse funzioni . Da un lato, ogni titolo di categoria potrebbe essere collegato alla pagina della categoria, in modo che i clienti possano fare clic su di esso per andare direttamente alla pagina. D'altra parte, potrebbero anche aprire un mega overlay a discesa. Quindi, se l'utente passa sopra il titolo per un tempo sufficientemente lungo, si aprirà il mega menu a discesa, ma l'utente potrebbe aver già fatto clic su un collegamento e ciò causerà uno sfarfallio. Per i clienti, è difficile avere le giuste aspettative quando l'interfaccia non fornisce realmente alcun suggerimento.

Ci sono alcune opzioni per risolvere questo problema:

1. Per indicare che il titolo della categoria è un link, potrebbe essere utile sottolinearlo ,
2. Per rendere più evidente la distinzione tra il titolo della categoria e un menu a discesa, aggiungi un separatore verticale (es. linea verticale) e un'icona (chevron),
3. Lascia che il titolo della categoria apra solo il mega menu a discesa e aggiungi un collegamento alla sezione "Home" della categoria all'interno della sovrapposizione del mega menu a discesa. Potrebbe anche essere un pulsante "Vedi tutte le opzioni" prominente (vedi l'esempio di The Guardian sopra).

Come accennato in precedenza, a volte puoi vedere un'icona in più utilizzata per indicare che il menu apre una sovrapposizione, mentre il titolo della categoria è un collegamento. Nei nostri test di usabilità, abbiamo notato che ogni volta che è presente un'icona (e non importa quale sia), gli utenti spesso fanno una distinzione mentale tra l'azione che verrà richiesta da un clic su un'icona e l'azione richiesta con un clic sul titolo della categoria.

Nel primo caso, di solito si aspettano l'apertura di un menu a discesa e, nel secondo caso, la visualizzazione della pagina della categoria. Ancora più importante, sembrano aspettarsi che il menu si apra al tocco/clic, piuttosto che al passaggio del mouse .

Mailchimp è un buon esempio di un mega menu a discesa che evita la maggior parte dei problemi sopra descritti, con i titoli delle categorie che agiscono solo per aprire un mega menu a discesa. Il menu a discesa è accessibile per gli utenti della tastiera con uno stile :focus . Una volta selezionata, ogni categoria viene evidenziata come sottolineata e ciò potrebbe indurre alcune persone a supporre che il titolo si sia trasformato in un collegamento, soprattutto perché la sottolineatura è esattamente la stessa per il collegamento "Prezzi" nella parte superiore della navigazione. Forse evidenziarlo con un colore di sfondo sarebbe un po' più a prova di proiettile. Un ottimo esempio di riferimento da considerare per i menu al passaggio del mouse.

In generale, sembra essere una buona idea evitare di sovraccaricare i titoli delle categorie con più funzioni. Questo non vale solo per i mega menu a tendina, ma praticamente per tutti i menu, inclusi fisarmoniche o suggerimenti: l' intera area dovrebbe fungere da espansione, mostrando le opzioni di navigazione quando viene toccata o cliccata. Nella maggior parte dei casi, è solo più semplice e meno frustrante in questo modo.

Progettare un Mega-Dropdown migliore: tocca/fai clic sul menu

Uno dei motivi comuni per cui i mega-dropdown si aprono spesso al passaggio del mouse perché molte grandi aziende vogliono esporre i propri clienti all'ampia gamma di opzioni disponibili sul sito, in modo rapido. Con le opzioni di navigazione che cambiano al passaggio del mouse, possiamo visualizzare più opzioni più velocemente e anche il cliente può esplorare più opzioni più velocemente. Ecco perché è difficile immaginare un grande rivenditore di eCommerce senza un ampio overlay di navigazione, ad esempio.

Tuttavia, è una buona idea verificare se il tempo di coinvolgimento e le percentuali di clic rimangono gli stessi (o aumentano) se la navigazione al passaggio del mouse viene sostituita con una navigazione tocco/clic . In effetti, la maggior parte dei problemi sopra elencati può essere risolta facilmente facendo proprio questo: il mega-dropdown overlay si aprirebbe e si chiuderebbe solo quando l'utente richiede esplicitamente questa particolare azione. Quindi, non è necessario tracciare il puntatore del mouse o regolare i ritardi di entrata/uscita al passaggio del mouse. Inoltre, poiché non c'è comunque il passaggio del mouse sui dispositivi mobili, dobbiamo fornire un'opzione per aprire il menu toccando/facendo clic per dispositivi mobili in un modo o nell'altro, quindi possiamo mantenerlo così anche per schermi più grandi.

Un buon esempio di questo in azione è il sito web del Museo Ebraico di Berlino. Non solo la barra di navigazione in alto apre i mega menu a discesa toccando e facendo clic, ma anche la navigazione della barra laterale basata su icone. Inoltre, poiché l'utente deve aprire/chiudere attivamente l'overlay, possiamo evidenziare la categoria selezionata con gli stili :focus / :active .

Il sito Web non utilizza alcuna icona per indicare che il menu potrebbe essere aperto o chiuso e le opzioni del menu non sono collegamenti che indirizzano a una pagina separata. Ciò rende l'esperienza complessiva molto calma e prevedibile, anche se probabilmente più lenta nell'esposizione delle opzioni di navigazione rispetto ai menu al passaggio del mouse.

Tuttavia, poiché il sito Web non ha molte opzioni di navigazione da visualizzare, sembra funzionare molto bene. E questo è un ottimo esempio di riferimento da tenere a mente quando si lavora su un mega menu a discesa accessibile che si apre al tocco/clic.

Se hai un po' più di navigazione, un esempio leggermente più avanzato è Allianz.de. Invece di utilizzare un unico grande overlay a discesa mega, la navigazione secondaria è raggruppata in menu a discesa più piccoli. Tuttavia, il menu non mostra sempre tutte le opzioni per ciascuna categoria. Invece, mette in evidenza le opzioni più importanti , con un link per vedere tutte le opzioni in basso. L'unico dettaglio che potrebbe mancare è un gallone che indica che un menu a discesa apparirà al clic.

Sui dispositivi mobili, il mega-dropdown è un gruppo di fisarmoniche , con una buona scelta di contrasto cromatico e indentazione per indicare la gerarchia della navigazione. Ogni fisarmonica non mostra mai più di 4 voci di navigazione alla volta. Un ottimo esempio di riferimento per una complessa navigazione a mega discesa che funziona bene.

Se stai cercando un'implementazione tecnica, puoi controllare In Praise of the Unambiguous Click Menu, in cui Mark Root-Wiley mostra come creare un click menu accessibile. L'idea è di iniziare a costruire il menu come un menu al passaggio del mouse solo CSS che utilizza li:hover > ul e li:focus-within > ul per mostrare i sottomenu.

Quindi, utilizziamo JavaScript per creare gli elementi <button> , impostare gli attributi aria e aggiungere i gestori di eventi. Il risultato finale è disponibile come esempio di codice su CodePen e come repository GitHub. Questo dovrebbe essere un buon punto di partenza anche per il tuo menu.

Fisarmoniche vs sovrapposizioni vs menu divisi su dispositivi mobili

Inutile dire che non tutti i mega menu a discesa su tap/click funzionano bene. Target.com è un altro esempio interessante di una navigazione ampia e accessibile che evita il layout a più colonne e mostra solo un livello di navigazione alla volta: tutto si apre al tocco/clic.

Il menu a discesa mostra le opzioni in una sola colonna alla volta, quindi mentre ti muovi all'interno delle categorie, rimani sempre concentrato all'interno della stessa sovrapposizione sullo schermo. Ogni sezione selezionata occupa l'intera colonna. L'esperienza è prevedibile e tranquilla, ma ancora una volta il cliente potrebbe vedere meno navigazione alla volta.

Dinoffentligetransport.dk, un sito Web di servizi di trasporto pubblico dalla Danimarca, utilizza invece più colonne , con la navigazione in alto completata da un'icona chevron e si apre anche al tocco/clic.

In alcune altre implementazioni, è possibile vedere più sovrapposizioni che appaiono una sopra l'altra. In effetti, questo è il caso di Unilever (esempio sotto). Il mega menu a discesa si apre al tocco/clic, con più chevron visualizzati contemporaneamente. Cosa rappresenta ogni gallone? E cosa dovrebbe aspettarsi il cliente quando fa clic su di essi?

"I nostri marchi" porta a una pagina separata mentre ogni etichetta sottostante apre un nuovo overlay di navigazione in cima al mega menu a discesa. Hai notato che "Tutti i marchi" è sottolineato, mentre il resto dell'opzione di navigazione non lo è? Si può vedere l'intenzione dei designer di creare il menu. Infatti, "Tutti i marchi" è un collegamento, mentre le altre etichette aprono un overlay:

Con tutte queste opzioni in atto, come andremmo in giro a visualizzare una navigazione a mega discesa sui dispositivi mobili ? A quanto pare, è difficile raggruppare tali mega sovrapposizioni a discesa sui dispositivi mobili: di solito non c'è abbastanza spazio né aiuti visivi per evidenziare i diversi livelli in modo diverso e renderli facili da distinguere. Nell'esempio sopra, potrebbe volerci del tempo per capire a quale pagina siamo effettivamente arrivati.

È un po' più facile capire a che livello ci troviamo attualmente e quali opzioni abbiamo con un approccio a fisarmonica, come possiamo vedere su Dinoffentligetransport.dk. Tuttavia, potrebbe essere una buona idea sottolineare i collegamenti all'interno di ciascuna sottosezione poiché indirizzano i clienti alla pagina della categoria. Inoltre, l'intera barra delle categorie dovrebbe essere probabilmente cliccabile ed espandere la fisarmonica.

Nell'esempio sopra, la maggior parte delle volte saremo probabilmente in grado di mostrare un numero limitato di sezioni di navigazione alla volta. Ma se i titoli di ciascuna sezione sono relativamente brevi, potremmo dividere lo schermo orizzontalmente e visualizzare più livelli contemporaneamente. LCFC.com è un buon esempio di questo modello in azione.

Quale opzione funziona meglio?

Nella mia esperienza personale, quando confrontiamo le implementazioni dei mega-dropdown sui dispositivi mobili, le fisarmoniche verticali sembrano essere più veloci e prevedibili delle sovrapposizioni (che si tratti di una singola colonna o di più livelli). E i menu divisi sembrano essere più veloci e prevedibili delle fisarmoniche.

Ci sono alcuni vantaggi che offrono sia le fisarmoniche che i menu divisi:

• Non è necessario visualizzare un pulsante "Indietro" per tornare alla pagina principale.
• L'occhio non deve saltare tra la parte superiore del menu di navigazione e la sottonavigazione della sezione ad ogni salto.
• I clienti possono navigare tra più livelli più velocemente: invece di premere "Indietro" più volte, possono saltare alla fisarmonica che trovano interessante.
• I clienti possono esplorare più sezioni contemporaneamente (a meno che l'implementazione non chiuda automaticamente una fisarmonica quando ne viene aperta un'altra). Non è possibile con le sovrapposizioni.

In generale, le fisarmoniche e i menu divisi sembrano essere un'opzione migliore . Ma non sembrano funzionare bene quando c'è molta navigazione in atto. Ogni volta che ogni categoria ha più di 6-7 elementi , si è rivelata una buona idea aggiungere un pulsante "Sfoglia tutto" sotto 6-7 elementi all'interno di un'altra fisarmonica (o su una pagina separata) o utilizzare invece le sovrapposizioni.

Quindi, a seconda della quantità di navigazione, possiamo iniziare con i menu divisi , quindi, se non è possibile, passare alle fisarmoniche e, se la navigazione sta diventando ancora complessa, alla fine trasformare le fisarmoniche in sovrimpressioni.

Quando dopo tutto il Mega-Dropdown potrebbe non essere necessario

Abbiamo già fatto riferimento al lavoro del team di Gov.uk nell'articolo precedente, ma le loro intuizioni sono preziose anche nel contesto dei mega-dropdown. Per una navigazione ampia e multilivello, il team ha deciso di utilizzare i risultati del principio una cosa per pagina dell'esperta di moduli Caroline Jarrett. Secondo Caroline, “le domande che naturalmente 'accompagnano' dal punto di vista dei designer […] non hanno bisogno di essere sulla stessa pagina per funzionare per gli utenti”. Caroline l'ha applicato principalmente alla progettazione di moduli Web, ma potremmo applicarlo anche nel contesto della navigazione.

L'idea, quindi, è quella di evitare del tutto complessi mega-dropdown e fornire ai clienti un modo chiaro e strutturato per navigare attraverso le trincee del sito web, da una pagina all'altra. Nel caso di Gov.uk, sembra avvenire attraverso un'architettura informativa ben ponderata e guide, che guidano i visitatori attraverso passi prevedibili verso l'obiettivo.

Il Canton Zurigo utilizza lo stesso schema. Invece di livelli di navigazione a mega discesa, tutte le opzioni vengono visualizzate in modo strutturato, con gli argomenti principali presenti in alto come "Argomenti principali" e la navigazione all'interno di ciascuna sezione visualizzata come una barra di navigazione adesiva in alto.

Un approccio alternativo consiste nell'utilizzare il modello di navigazione "Voglio" . Oltre alla navigazione convenzionale, potremmo fornire un "menu a discesa di navigazione" per consentire ai clienti di costruire una query di navigazione a loro scelta ed essere indirizzati direttamente alla pagina che stanno cercando. Fondamentalmente, è una serie di menu a discesa che appaiono sotto un altro per consentire all'utente di selezionare ciò che intende fare o trovare sul sito web.

Per un po', il pattern è stato usato su Commonbond (guarda il video sopra), ed è usato anche su Corkchamber.ie. Un modo interessante, anche se non convenzionale, per fornire l'accesso a un livello di navigazione profondo senza dover utilizzare affatto un mega-menu a discesa.

Lista di controllo per la progettazione della navigazione Mega-Dropdown

Ogni volta che apriamo una conversazione sui mega menu a discesa, sembra che tutti si stiano sistemando in alcuni gruppi: alcuni colleghi preferiscono il passaggio del mouse, altri preferiscono toccare e fare clic, alcuni preferiscono entrambi e agli altri non importa neanche finché c'è è sia un collegamento di categoria che un'icona che apre il menu.

È impossibile dire che un approccio sia sempre migliore degli altri, ma sia in termini di implementazione tecnica che di UX, l'apertura del menu al tocco/clic di solito causa molti meno problemi e molta meno frustrazione pur consentendo una semplice implementazione, e quindi risultando in una navigazione prevedibile e tranquilla. Prima di passare a un menu al passaggio del mouse, potremmo provare a mantenere prima il comportamento di tocco/clic, misurare il coinvolgimento e studiare se dopo tutto è necessario il passaggio del mouse.

E come sempre, ecco alcune cose generali da tenere a mente quando si progetta e si costruisce un mega-dropdown:

• Evita di posizionare oggetti importanti e utilizzati di frequente vicino al mega-menu a discesa (ad es. barra di ricerca, CTA, icona del carrello) (se al passaggio del mouse),
• Evita che più sotto-navigazioni all'interno del mega menu a discesa vengano visualizzate l'una dopo l'altra con ritardi (se al passaggio del mouse),
• Evita di sovraccaricare i titoli delle categorie con più funzioni.
• Sottolinea i titoli delle categorie per identificarli come link alla pagina della categoria (ovviamente se sono collegati alla pagina della categoria).
• Se puoi, aggiungi un link "Home" o un pulsante "Sfoglia tutto" all'interno di ciascuna sottocategoria invece di collegare direttamente la categoria.
• Evita le sovrapposizioni orizzontali e considera la possibilità di sostituirle con fisarmoniche verticali e menu divisi,
• Aggiungi un'icona per indicare che il titolo di una categoria attiva un mega-menu a discesa al clic (ad es. chevron) e rendilo sempre abbastanza grande per un comodo tocco (ad es. 50×50px),
• Evita lunghe transizioni di dissolvenza in entrata/in chiusura quando appare/scompare un mega menu a discesa (al massimo 300 ms),
• Prendi in considerazione la possibilità di testare una guida strutturata o una query di navigazione (modello di navigazione "Desidero") invece o in aggiunta al mega menu a discesa.
• Se possibile , evita i mega menu a discesa al passaggio del mouse .