Na­vi­ga­zio­ne re­spon­si­ve: menu dinamici per navigare sui di­spo­si­ti­vi mobili

La na­vi­ga­zio­ne re­spon­si­ve (o anche reattiva) è uno degli aspetti prin­ci­pa­li dell’ot­ti­miz­za­zio­ne mobile. Se la na­vi­ga­zio­ne mobile non porta cor­ret­ta­men­te gli utenti da A a B, la pagina verrà ab­ban­do­na­ta ra­pi­da­men­te, perdendo traffico e so­prat­tut­to vendite. Diversi concetti, come la na­vi­ga­zio­ne a scor­ri­men­to o la barra di na­vi­ga­zio­ne inferiore, offrono una soluzione.

Cosa ca­rat­te­riz­za una buona na­vi­ga­zio­ne re­spon­si­ve?

Una buona na­vi­ga­zio­ne ha un ruolo fon­da­men­ta­le in un sito web, perché gli utenti devono poter trovare at­tra­ver­so di essa le in­for­ma­zio­ni più rilevanti. I comandi do­vreb­be­ro fun­zio­na­re senza dif­fi­col­tà, la struttura dovrebbe essere fa­cil­men­te com­pren­si­bi­le, au­toe­spli­ca­ti­va e per­met­te­re un uso intuitivo dell’offerta web. Le sfide spe­ci­fi­che della na­vi­ga­zio­ne re­spon­si­ve sono so­prat­tut­to date dalla mancanza di spazio e dalla presenza del principio touch come metodo di in­se­ri­men­to nei di­spo­si­ti­vi mobili. Tuttavia, ci sono alcune soluzioni re­spon­si­ve, che per­met­to­no comunque una na­vi­ga­zio­ne su un sito web chiara e user-friendly.

L’idea alla base del design re­spon­si­ve è che i contenuti e il design di una pagina si adattino in maniera dinamica alle con­di­zio­ni in cui si trovano, cioè alle di­men­sio­ni del di­spo­si­ti­vo in uso. Spesso si creano siti web con l’approccio Mobile First. Questo tipo di pro­get­ta­zio­ne mette in primo piano l’ot­ti­miz­za­zio­ne dei siti per i di­spo­si­ti­vi mobili: la creazione, l’usabilità e le per­for­man­ce della versione mobile sono al primo posto mentre al secondo segue l’adat­ta­men­to per la vi­sua­liz­za­zio­ne su computer desktop e portatili. Infatti, adattare un sito web da desktop a di­spo­si­ti­vo mobile è spesso difficile e richiede molto tempo.

Prima di iniziare con la pia­ni­fi­ca­zio­ne e la rea­liz­za­zio­ne della na­vi­ga­zio­ne re­spon­si­ve, ci sono però ancora alcune domande di base a cui ri­spon­de­re, tra cui prima di tutto il po­si­zio­na­men­to e la struttura di base della na­vi­ga­zio­ne.

Dove deve essere po­si­zio­na­to il menu?

Gli approcci più comuni per il po­si­zio­na­men­to sono l’in­se­ri­men­to della barra di na­vi­ga­zio­ne nel footer o all’inizio della pagina. Se il menu è nel footer, l’utente trova all’inizio della pagina sul di­spo­si­ti­vo mobile solo l’avviso di una barra di na­vi­ga­zio­ne, che lo porta di­ret­ta­men­te al footer, dove ci sono le voci del menu.

Le barre di na­vi­ga­zio­ne collocate nel footer non sono molto user-friendly. Gli utenti si aspettano che gli elementi di na­vi­ga­zio­ne im­por­tan­ti siano ra­pi­da­men­te ac­ces­si­bi­li, motivo per cui la na­vi­ga­zio­ne nel footer viene uti­liz­za­ta sempre meno. Più spesso, la barra di na­vi­ga­zio­ne sui di­spo­si­ti­vi mobili si trova ora all’inizio della pagina. Questa è una con­fi­gu­ra­zio­ne classica della na­vi­ga­zio­ne per design re­spon­si­ve ed è quella più familiare alla maggior parte delle persone.

Come è strut­tu­ra­ta la na­vi­ga­zio­ne in sé?

Ci sono diverse pos­si­bi­li­tà per strut­tu­ra­re una na­vi­ga­zio­ne. Tra le più comuni ci sono i menu a lista e la na­vi­ga­zio­ne a griglia.

La pre­sen­ta­zio­ne classica a lista si usa sia nella na­vi­ga­zio­ne a un livello che in quella a più livelli. I vantaggi con­si­sto­no in una con­fi­gu­ra­zio­ne semplice e nel fatto che si vada incontro alle abitudini degli utenti.

Una na­vi­ga­zio­ne a griglia è indicata quando ci sono voci del menu brevi ed è usata so­prat­tut­to negli e-commerce. Queste voci vengono mostrate una accanto all’altra nella griglia e il numero delle colonne dipende dalle di­men­sio­ni dello schermo. Se si ha in mente una griglia a due colonne, il numero di voci dovrebbe essere lo stesso su entrambe, per evitare una pre­sen­ta­zio­ne asim­me­tri­ca.

Quali concetti di na­vi­ga­zio­ne mobile ci sono?

Arriviamo ora alla domanda centrale: come si apre la barra di na­vi­ga­zio­ne sui di­spo­si­ti­vi mobili? Il modo in cui il menu si presenta ne determina il tipo. Le opzioni di pre­sen­ta­zio­ne sono mol­te­pli­ci: la barra di na­vi­ga­zio­ne è già di­ret­ta­men­te visibile o si apre solo con un tocco della mano, il contenuto si sposta a lato oppure il menu si so­vrap­po­ne. Abbiamo raccolto qui alcuni esempi.

Na­vi­ga­zio­ne con il menu a tendina

Tra i classici della na­vi­ga­zio­ne re­spon­si­ve rientrano anche i menu a tendina o dropdown. Ricordano molto la struttura tipica della na­vi­ga­zio­ne da desktop, ragion per cui sono familiari agli utenti e spesso si rivelano un tipo di barra di na­vi­ga­zio­ne azzeccato. La na­vi­ga­zio­ne si attiva premendo un pulsante o sul ri­spet­ti­vo tasto e si so­vrap­po­ne al contenuto senza coprirlo com­ple­ta­men­te.

Menu a scor­ri­men­to

Un altro tipo di na­vi­ga­zio­ne molto amato è il menu a scor­ri­men­to, co­no­sciu­to anche come na­vi­ga­zio­ne accordion. Premendo su una delle voci del menu o su un pulsante si apre la barra di na­vi­ga­zio­ne. Al contrario del menu a tendina però le varianti dello scor­ri­men­to non si so­vrap­pon­go­no ai contenuti ma li spostano verso il basso. Questa barra di na­vi­ga­zio­ne è alquanto di­spen­dio­sa nella con­fi­gu­ra­zio­ne, ma in compenso è ben scalabile e occupa poco spazio. Grazie alla pos­si­bi­li­tà di integrare delle sottovoci nel menu, si ha a di­spo­si­zio­ne una soluzione elegante sia per barre semplici che complesse.

Barra di na­vi­ga­zio­ne inferiore

La barra di na­vi­ga­zio­ne inferiore è una soluzione sempre più popolare per le app e i siti web mobili, in cui il menu viene vi­sua­liz­za­to in fondo allo schermo. Questo tipo di na­vi­ga­zio­ne è par­ti­co­lar­men­te facile da usare perché è par­ti­co­lar­men­te ac­ces­si­bi­le sugli smart­pho­ne. Si adatta bene a progetti con pochi ma im­por­tan­ti punti di na­vi­ga­zio­ne e fornisce una struttura chiara e ordinata che aiuta gli utenti a passare ra­pi­da­men­te da una sezione all’altra del sito web.

Na­vi­ga­zio­ne off canvas

In questa soluzione la na­vi­ga­zio­ne re­spon­si­ve si trova al di fuori del campo standard che viene vi­sua­liz­za­to. Il menu non è integrato nel layout, quindi la na­vi­ga­zio­ne off canvas è una soluzione che permette di ri­spar­mia­re spazio, non prendendo alcun posto nella finestra vi­sua­liz­za­ta. Solo premendo sull’icona del menu, la na­vi­ga­zio­ne appare sopra l’immagine e sposta tutto il layout. Questa soluzione è adatta a barre di na­vi­ga­zio­ne grandi con diversi sottomenu.