I mega menu sono presenti sul web fin dai primi anni 2000 e non hanno bisogno di molte presentazioni.
In realtà, i menu a discesa con espansione a più livelli non rappresentano una semplice tendenza, ma una necessità per quei siti web che ospitano una grande quantità di contenuti.
In questo articolo esaminerò 15 dei miei esempi preferiti di mega menu per questo tipo di siti e discuterò i vantaggi che offrono per la navigazione.
Il Mega Menu può sicuramente migliorare l’esperienza utente, rendendo la navigazione fluida, ben strutturata e intuitiva per determinati tipi di siti web.
Vediamo quindi i suoi utilizzi più comuni.
- Siti eCommerce: Negozio online con molteplici categorie di prodotti.
- Blog / Riviste / Siti di notizie: Portali media con una vasta gamma di argomenti.
- Siti di Hotel: Pagine di hotel e resort suddivise in categorie come prenotazioni, offerte speciali, promozioni stagionali, brand, ecc.
- Siti per Servizi/Prodotti: Questi siti utilizzano i mega menu per presentare informazioni dettagliate per ogni caso d’uso.
I mega menu non sono consigliati per siti web di piccole dimensioni, come i siti vetrina con pochi contenuti, siti personali con un numero limitato di pagine o funzioni singole, oppure siti focalizzati su un unico argomento.
In questi casi, il loro utilizzo risulterebbe superfluo e potrebbe confondere gli utenti, ottenendo l’effetto opposto rispetto a quello per cui questa tipologia di navigazione è stata progettata.
Ho scelto 15 esempi di mega menu efficienti in base a diverse funzionalità o al valore di design e ordine.
In generale, i mega menu non sono particolarmente diversificati, poiché seguono una funzione di base. Tuttavia, ciò non significa che non possa essere creativo e personalizzare la navigazione con animazioni, transizioni, schemi di colori piacevoli e altri miglioramenti.
InVision
Un mega menu molto ordinato e pulito di InVision che contiene i servizi della piattaforma. I servizi rivelano un menu di secondo livello con casi d’uso, prezzi e aggiornamenti sui prodotti, separandoli dalle categorie educazione, blog e community.
Figma
Ciò che mi piace del mega menu di Figma è la sua semplicità e il design che si adatta perfettamente alla piattaforma. Le numerose categorie e pagine sono così ben organizzate che dà l’impressione che il menu abbia molte meno pagine di quelle effettivamente presenti.
Il menu dei prodotti rivela i diversi servizi, mettendo in evidenza FigJam Beta come l’ultima novità.
Asana
Asana è un ottimo esempio di un sito ricco di contenuti che riesce a organizzare tutto in modo efficiente tramite un mega menu.
Quando clicchi su uno degli elementi del menu principale, appare un menu a discesa a larghezza intera con navigazione a più livelli, che struttura tutto in modo logico.
Ad esempio, il menu delle funzionalità rivela le caratteristiche principali con una breve descrizione di ciascuna sulla sinistra e un menu pertinente con tutti i piani di servizio inclusi.
Adobe
Un altro esempio di mega menu che mi piace è quello sul sito di Adobe. Alcune delle sue principali directory mostrano una navigazione di secondo livello con sottocategorie per la creatività e il design, il marketing, le soluzioni aziendali e altro ancora.
È perfettamente organizzato e facile da navigare.
Daniella Draper
Daniella Draper è l’esempio perfetto di un sito eCommerce con una vasta gamma di prodotti suddivisi in categorie. Il mega menu è un menu a discesa a due livelli, dove ogni categoria principale ha alcune sottocategorie.
Queste sono semplici ma progettate con cura, con immagini che rendono più facile per gli utenti navigare nel sito.
Atlassian
Atlassian sviluppa strumenti agili come Jira e Trello, strumenti per team, e condivide pratiche, metodi e guide per un ottimo lavoro di squadra agile.
Il sito ha suddiviso in modo intelligente la sua enorme quantità di contenuti in categorie e sottocategorie tramite un mega menu a discesa.
Che tu preferisca esplorare gli strumenti per la pianificazione, la collaborazione o la sicurezza, la navigazione è molto intuitiva e facile da usare.
Oracle
Oracle Database è una soluzione cloud database tutto-in-uno per data mart, data lake, reportistica operativa e elaborazione batch dei dati.
Naturalmente, si tratta di un sito web con un’enorme quantità di dati, che include infrastrutture, applicazioni e risorse per sviluppatori, startup e studenti.
Per questo motivo, il mega menu occupa l’intera pagina. È progettato per mostrare molteplici opzioni in un unico posto senza dover scorrere. Questo è fondamentale per trovare contenuti molto profondi che altrimenti potrebbero essere difficili da reperire.
QuickBooks
Il software di contabilità QuickBooks offre strumenti per gestire clienti, fornitori, inventario e finanze. La sua navigazione a più livelli è piuttosto ricca e organizza intuitivamente i contenuti per categorie.
H&M
Un altro esempio di mega menu lo troviamo nel shop online di H&M. Alcune delle sue principali directory mostrano una navigazione di secondo livello con sottocategorie per prodotti per donne, uomini, bambini e altro ancora. È perfettamente organizzato e facile da navigare.
Evernote
Ho scelto questo esempio in particolare per il suo bellissimo schema di colori e la combinazione di testo e icone per le diverse categorie.
Riad11
La mia scelta successiva per l’esempio di Mega menu è il sito dell’hotel Riad11, che presenta una navigazione nascosta. Quando clicco sull’icona del menu, si trasforma in modo fluido in un mega menu a pagina intera con icone stilizzate, ben progettate, per le stanze.
A differenza di quanto consigliato in precedenza, questo è un esempio di navigazione tramite mega menu che funziona davvero bene per siti con poche pagine.
Il menu non presenta molte informazioni o categorie a più livelli, ma riesce comunque a utilizzare questa funzione nel modo giusto, senza complicare l’esperienza dell’utente.
Android police
Android Police è un sito molto popolare che pubblica costantemente notizie e recensioni su tutto ciò che riguarda Android. Il sito ha suddiviso in modo intelligente la sua enorme quantità di contenuti in categorie e sottocategorie tramite un mega menu a discesa.
Che tu preferisca navigare tra le ultime notizie su Android OS, un marchio specifico di dispositivi Android, applicazioni o semplicemente trovare recensioni su tablet Android per decidere il tuo prossimo acquisto, la navigazione ti guida passo dopo passo.
Fao Schwarz
Fao Schwarz è un negozio molto popolare per giocattoli, articoli di arte e fai-da-te. Presenta i suoi contenuti in un mega menu pulito e ben organizzato, con una transizione fluida.
Ho scelto questo esempio principalmente per l’ottima animazione del sottomenu. Questo dimostra che si può sempre essere creativi quando si progetta la navigazione.
Callaway Golf
Callaway Golf posiziona la sua navigazione nascosta in modo verticale e, anziché con un hover, espande il secondo livello con un click.
È pulito e semplice, un esempio che dimostra che meno è di più.
HuffPost
