Navigazione responsive: menu dinamici per navigazioni da dispositivi mobili

Oggi il design responsivo fa parte degli standard nella creazione di siti web, non importa se si realizza un negozio online, un blog di notizie o il profilo di un’azienda. Infatti, i potenziali clienti non navigano più solo con i tradizionali computer fissi o portatili, ma si è moltiplicato l’uso di dispositivi mobili, come smartphone e tablet. Questa non è una novità, ormai da anni si poteva prevedere stando ai numeri in crescita nella vendita di dispositivi mobili e nell’uso sempre maggiore di Internet dai dispositivi mobili. Avevamo già spiegato in questo articolo quanto un’ottimizzazione mobile sia uno degli standard richiesti che contribuisce al successo di un business online.

Una cosa è certa: in un mondo digitale sempre più legato alla tecnologia da mobile, si riesce ad affermare solo chi offre ai suoi utenti la massima usabilità su tutti i dispositivi. Uno degli aspetti principali dell’ottimizzazione per dispositivi mobili è la conseguente navigazione responsive.  

La navigazione su dispositivi mobili rappresenta una sfida ben particolare per i web designer: il comportamento degli utenti su display piccoli e touch è difficilmente confrontabile con quello su    grandi schermi, sui quali la navigazione è facilitata ulteriormente dal mouse. Per rendere l’esperienza dell’utente su mobile altrettanto semplice e soddisfacente, si dovrebbe tenere in conto la necessità di investire parecchio tempo nella creazione di una navigazione responsive, perché, così come il comportamento dell’utente è mutato, anche il suo livello di pazienza è cambiato e oggi gli utenti (quindi i potenziali clienti) sono sempre più impazienti. Se la navigazione da mobile non lo porta senza difficoltà da A a B, è un attimo perché decida di cliccare su un’altra pagina, e così il traffico e soprattutto il giro di affari di un’azienda diminuisce rapidamente.

Una buona navigazione ha un ruolo fondamentale in un sito web, perché l’utente deve poter trovare attraverso di essa le informazioni per lui rilevanti. I comandi dovrebbero funzionare senza difficoltà, la struttura dovrebbe essere facilmente comprensibile, auto esplicativa e permettere un uso intuitivo. Le sfide specifiche della navigazione responsive sono soprattutto date dalla mancanza di spazio e dalla presenza del principio touch come metodo di inserimento nei dispositivi mobili. Ma ci sono alcune soluzioni responsive, che permettono comunque una navigazione su di un sito web che sia panoramica e user-friendly. 

L’idea alla base del responsive design è che i contenuti e il design di una pagina si adattino in maniera dinamica alle condizioni in cui si trovino, cioè alle dimensioni del dispositivo in uso. Lo stesso vale anche per la navigazione responsive.

La maggior parte dei web designer propone di creare siti web con l’approccio Mobile First. Questo tipo di progettazione mette in primo piano l’ottimizzazione dei dispositivi mobili: la creazione, l’usabilità e le performance della versione mobile sono al primo posto mentre al secondo segue l’adattamento per la visualizzazione su desktop e laptop. Infatti, adattare un sito web da desktop a dispositivo mobile, non solo è spesso difficile e richiede molto tempo, ma i risultati sono spesso insoddisfacenti e non accontentano l’utente.

Prima di iniziare con la pianificazione e la realizzazione della navigazione responsive, ci sono però anche alcune domande di base a cui rispondere. La prima decisione da prendere è dove posizionare il menu nella pagina.

I modelli più comuni sono l’inserimento della barra di navigazione nel footer o all’inizio della pagina. Se il menu è nel footer, l’utente trova all’inizio della pagina su dispositivo mobile solo l’avviso di una barra di navigazione, che lo porta direttamente al footer, dove ci sono le voci del menu.

Le barre di navigazione collocate nel footer non sono sempre user-friendly, al contrario il posizionamento talvolta confonde l’utente. Per questo motivo il focus viene posto sui contenuti della pagina iniziale, cosa che è, a seconda dell’obiettivo del sito web, uno dei vantaggi maggiori. Più spesso che nel footer, la barra di navigazione su dispositivo mobile si trova all’inizio della pagina. Questa è una configurazione classica della navigazione per design responsive ed è quella più familiare alla maggior parte degli utenti.

In entrambe le varianti si possono aggiungere ulteriori sottosezioni, che appaiono in dissolvenza.

Arriviamo ora alla domanda centrale: come si apre la barra di navigazione da dispositivo mobile? Il modo in cui il menu si presenta all’utente ne determina il tipo. Le opzioni di presentazione sono molteplici: la barra di navigazione è già direttamente visibile o si apre solo cliccandola, il contenuto si sposta a lato oppure il menu si sovrappone. Abbiamo raccolto alcuni esempi.

Quale tipo di navigazione sia quello giusto per un sito web, dipende da molti fattori. Una cosa è certa: una soluzione unitaria non esiste. Gli stili di navigazione presentati sono un buon punto di partenza, ma devono essere naturalmente adatti alle singole idee e progetti. Per iniziare è in ogni caso importante ragionare su quale sia la struttura di navigazione o le diverse categorie di un sito web. Infatti sarebbe ragionevole decidere precedentemente come costruire la barra di navigazione e su quali punti si vuole porre particolare attenzione.

L’icona hamburger è oggi uno standard per i dispositivi mobili e dovrebbe quindi essere brevemente menzionata. Il piccolo simbolo con tre linee orizzontali parallele si è affermato come segno universale per indicare la presenza di un menu nascosto.

Il grande vantaggio è naturalmente il fatto che è facilmente riconoscibile, ma tra i web designer resta un simbolo controverso. L’oggetto della controversia è l’usabilità: i critici vedono negativamente il suo essere nascosto e ritengono che richieda una maggiore interazione. Originariamente era stato concepito all’inizio degli anni ’80 per Xerox Star, una delle prime workstation con un’interfaccia grafica, ma si trovava già anche nella prima versione di Windows.