La navigazione di un sito è un criterio essenziale del suo successo. Per questo, i menu di navigazione sono lì per guidare efficacemente gli utenti. Devono essere chiari in modo che la loro visita sia il più agevole e piacevole possibile.

Il ruolo dei menu di navigazione :

Strutturare e dare priorità al contenuto e alle caratteristiche del prodotto
Evidenzia le caratteristiche essenziali
Semplifica il percorso dell'utente

Nell'età di "mobili-prima” dove l'UX mobile è una questione chiave, scopriremo insieme i diversi tipi di menu di navigazione mobile più utilizzati.

#1 The Tabber o Tab Bar: un grande classico

La barra delle schede, un menu generalmente posizionato nella parte inferiore dell'applicazione, è in assoluto la più diffusa. Il suo design classico consente all'utente di navigare con una mano, che è uno dei motivi della sua popolarità.

Avantages : Visualizza chiaramente il punto di ingresso e le caratteristiche più importanti.

svantaggi : Di fronte a un gran numero di funzionalità, questo modello sembra meno appropriato.

fonte: https://dribbble.com/shots/4800174-Fluid-Tab-Bar-Interaction

#2 Navigazione e carosello della griglia

La navigazione a griglia riunisce i principali punti di ingresso sulla home page. Tuttavia, il suo design non consente agli utenti di vedere il contenuto al primo tentativo, il che rende le loro scelte più difficili. Sempre meno applicazioni utilizzano questo tipo di menu come navigazione principale, è comunque interessante per la progettazione del sommario delle pagine secondarie o dei punti di ingresso per gli strumenti.

Avantages : Questo tipo di navigazione è semplice ma non complesso da impostare. La sua efficacia può essere ottimizzata rendendola più chiara ed evidente.

svantaggi : La scelta dei colori è fondamentale. Un design troppo sofisticato potrebbe causare affaticamento visivo per l'utente.

fonte: https://dribbble.com/shots/14723386–54-Bonsai-Gardening-99-Days-in-the-Lab

#3 Il cassetto ("Cassetto"), "Flyout" o menu nascosto

Il menu del cassetto è una buona alternativa alla barra delle schede che limita il numero di funzioni. Il problema si risolve riordinando verticalmente gli elementi interattivi e nascondendo parte della pagina corrente.

Avantages : libera spazio e consente agli utenti di concentrarsi sulla pagina corrente.

svantaggi : Non è adatto agli utenti che vogliono spostarsi velocemente da una categoria all'altra (es. nell'e-commerce).

fonte: https://dribbble.com/shots/3661919-Navigation-Drawer-Concept

fonte: https://dribbble.com/shots/4731003-Airbnb-Menu-transition-Mobile

#4 Il menu del timone ("Timone") o la barra delle schede piegata
("Barra delle schede pieghevole")

A metà strada tra la barra delle schede e il pulsante mobile, il nome di questo menu è ispirato al timone della nave con altri pulsanti di controllo su entrambi i lati. È posizionato e strutturato come la classica barra delle schede ma quando piegato libera spazio per altre funzioni.

Avantages : Proprio come la barra delle schede, evidenzia il punto di ingresso delle funzionalità principali. Inoltre, è possibile aggiungere altre funzionalità specifiche della pagina attiva.

svantaggi : Lo stesso del menu del cassetto. non è adatto agli utenti che vogliono navigare velocemente da una categoria all'altra.

fonte: https://dubaimonsters.com/blog/create-a-functional-mobile-navigation-menu/

#5 Il pulsante di azione mobile (FAB)

Un pulsante di azione mobile (FAB) è un pulsante circolare che attiva l'azione principale nell'interfaccia utente dell'app.

Il suo nome viene utilizzato per la prima volta da Google in Material design.

A differenza del menu del timone, la sua posizione e struttura sono libere,
che abilita più funzioni.

Avantages : Dà la possibilità di integrare un maggior numero di funzionalità.

svantaggi : Non è adatto agli utenti che desiderano destreggiarsi da una categoria all'altra all'istante. Inoltre, in assenza di didascalie, l'iconografia potrebbe essere difficile da comprendere per alcuni utenti.

fonte: https://dribbble.com/shots/3908815-Floating-button

# 6 Navigazione combinata

Per superare i limiti di alcuni tipi di menu, i progettisti non esitano a combinare diverse modalità di navigazione per una migliore efficienza. Ecco alcuni esempi:

Tabber + timone

fonte: https://dribbble.com/shots/13986315-Floating-Button-File-Upload

Tabber + pulsanti di azione mobili

fonte: https://dribbble.com/shots/5722292-Tabbar-Animation/attachments/11019477?mode=media

Griglia + Timone

fonte: Alessio Permyakov- https://freefrontend.com/css-menu/

"Quello non è il mio nome!"

Mini gioco: NChiamati erroneamente, questi menu "hamburger" sono in realtà chiamati qualcos'altro. Riesci a trovare l'origine dei loro nomi?

Fare clic per tornare

Menù Bento

Fare clic per tornare

Il menù dell'hamburger

Fare clic per tornare

Il menù del kebab

Fare clic per tornare

Il menù delle polpette

Fare clic per tornare

Il menu "Doner".

Fare clic per tornare

Il menu "Hamburger vegetariani".

Conclusione

I designer sono sempre più consapevoli dell'importanza della progettazione del menu di navigazione per migliorare l'esperienza dell'utente.

Che sia su Android o iOS, il menu Hamburger viene gradualmente sostituito dal menu Tab Bar, che è tornato alla ribalta sin dal suo periodo di massimo splendore nel 2008.

Per farli efficienti e innovativi, i progettisti sfruttano tutte le possibilità tecniche integrando icone più grandi e più chiare.

Ogni giorno nascono nuove idee, orientate verso una navigazione semplificata e una migliore ergonomia.

E tu, cosa hai in menu oggi?