Sono molti i clienti che bussano alla porta della nostra web agency a Bologna (QuoLAB) per chiedere un rifacimento del loro sito o per crearne uno nuovo. Dopo 10 anni di incontri e colloqui, posso dire che tra gli aspetti più sottovalutati nella creazione o nel rifacimento di un sito vi sono sicuramente la navigazione e la strutturazione dei contenuti.

In realtà, dotarsi di un menu funzionale e di una solida strutturazione delle pagine interne può davvero essere la chiave per convertire di più e far fruttare il nostro progetto. In questo articolo, troverete alcuni consigli per una corretta impostazione! Iniziamo!

L’usabilità prima di tutto

Prendendo in prestito il motto del web marketing content is king (molto in voga fino a un paio di anni fa e comunque sempre attuale), vorrei coniare un mio personale mantra per lo sviluppo dei siti: usability is king.
In diversi articoli del nostro blog ho parlato dell’importanza dell’usabilità. Non finirò mai di dirlo: l’usabilità è la cosa più importante di un sito web.
Quando un utente naviga in cerca di informazioni ha poco tempo e apre tanti link diversi: la nostra pagina è solo una delle tante che l’utente visualizza e per questo dovremo essere molto bravi a catturare da subito la sua attenzione.

Guardiamo il nostro sito con oggettività, cosa non sempre facile… Chi mi conosce sa che sono l’uomo delle metafore. Per ogni genitore il proprio figlio è super intelligente, unico, ecc., ma quando va a scuola, per un occhio esterno, è semplicemente uno dei 28 ragazzini che popolano una classe.
Beh, con un sito è la stessa cosa: per chi lo sviluppa (o per il proprietario) risulterà sicuramente semplice, intuitivo, facile da navigare, ecc., ma per un visitatore che lo vede per la prima volta e si ferma 5 secondi, è davvero così?
I siti non devono essere semplici, devono essere ovvi!

Il test dei cinque secondi

Uno strumento fondamentale per valutare la chiarezza di un sito è il cosiddetto test dei cinque secondi. Il funzionamento è piuttosto semplice: si prende uno screenshot della parte visibile a schermo di una pagina web (la cosiddetta parte above the fold) e lo si mostra per 5 secondi a una persona che non ha mai visto il sito (e che non deve nemmeno sapere i contenuti e gli argomenti trattati da quest’ultimo). Una volta rimossa l’immagine chiederemo alla nostra “cavia” di dirci che cosa voleva comunicare il sito e quali messaggi gli sono rimasti impressi.

Facendo questo semplice test vi accorgerete di quanti siti non sono assolutamente efficaci nel riuscire a interessare il visitatore in questo breve ma significativo lasso di tempo. Cinque secondi possono sembrare pochi, ma immaginiamoci questo scenario: state cercando una web agency su Bologna per rifare il vostro sito. Scriverete in Google, qualcosa tipo web agency Bologna e salteranno fuori decine di siti, annunci AdWords e mappe. A questo punto aprirete ogni link in una nuova scheda e visualizzerete rapidamente i risultati apparsi.

Siete sicuri di soffermarvi molto più di cinque secondi su ciascun sito?

Menu breve e chiaro

E’ provato da diversi studi che l’essere umano medio ha difficoltà a tenere a mente nello stesso istante più di 6/7 elementi contemporaneamente. Pertanto, il menù del nostro sito, non dovrebbe contenere più di sette voci principali. Ne avete di più? Non ci sono problemi, possiamo usare le tendine.

Per quanto invece riguarda le diciture, ovvero i nomi che compaiono in corrispondenza di ogni sezione del menu, dobbiamo fare in modo che l’utente, anche senza aprire la voce relativa, sia in grado già di immaginare cosa lo aspetta quando cliccherà. Per esempio, se scriviamo degli articoli di approfondimento sull’argomento trattato nel nostro sito, sarà sempre meglio chiamare la voce blog piuttosto che Nel dettaglio…

In generale è meglio non essere troppo originali nello scegliere le diciture: le voci devono essere standard (la pagina con il modulo di richiesta informazioni, deve essere Contatti, non Chiamaci). Non disorientiamo gli utenti e rispettiamo gli standard della navigazione: sarebbe come salire in macchina e trovare la leva delle frecce a destra invece che a sinistra!

Il pulsante Home

Il menu dovrebbe sempre contenere la voce Home, per permettere agli utenti di tornare alla pagina principale. Ho appena scritto che gli elementi di un menu non dovrebbero essere più di sette: se non vogliamo scarificare dello spazio nella barra di navigazione per la home, possiamo sostituirla con l’immagine di una casina (un risparmio in termini di spazio su schermo, e una cosa gradevole alla vista, che non inficia la chiarezza perché chiunque può immaginare che cliccando sul simbolo si torni in home page).

Ogni voce al suo posto

Oltre a quanto già detto, è bene che le varie voci di menu siano dove l’utente se le aspetta. La prima voce, come già accennato, deve essere il tasto Home; a seguire è ben inserire un Chi siamo (o una voce analoga, importante anche in questo caso è non esagerare con la creatività: l’utente deve capire che all’interno di quella sezione si parla dell’azienda o dell’attività trattata dal sito). Dopo il Chi Siamo, solitamente, vengono inseriti i prodotti o i servizi: se ne abbiamo pochi e poche voci di menu, possiamo creare una voce di menu per ciascun prodotto/servizio; in caso contrario è preferibile raggrupparli sotto un’unica voce, eventualmente usando un menù a tendina.
Nell’ultima posizione del menu è sempre bene inserire il modulo di contatti: la voce di menu deve necessariamente essere Contatti o Contattaci. Consiglio di mettere in questa pagina anche un eventuale Dove Siamo (fanno eccezione i casi in cui sia estremamente importante specificare la sede, per esempio per le attività con diversi punti vendita o se le voci di menu sono poche e abbiamo necessità di rimpinguarle).

Le pagine di smistamento

All’inizio di questo articolo ho detto che è importante avere siti con strutture brevi.

Parlando di strutture brevi, intendo che ogni pagina deve essere raggiungibile con uno, massimo due, clic del mouse. Per farlo, dovendo utilizzare al massimo sette voci di menu principali, è comodo usare le tendine (o menu dropdown).
Esempio: la nostra attività offre cinque servizi. Creiamo una voce di menu principale chiamata, appunto, Servizi che apre un menù a tendina contenente le cinque sotto-voci (una per ciascuno dei cinque servizi).

Questo metodo ha solo un problema: i menù a tendina sono scomodi da mobile, anche perché quando il sito sarà visualizzato da smartphone, la barra di navigazione classica si trasformerà in un Burger menu (in pratica tre linee orizzontali). Nel programmare questo menu per la visualizzazione da mobile abbiamo due opzioni:

1. Mostriamo tutte le voci: il menù a questo punto passa da sette voci principali a un numero di voci pari alla somma delle voci principale e di tutte le voci estese
2. Mostriamo solo le voci principali

Ovviamente, avendo molto a cuore l’usabilità, consiglio caldamente la seconda soluzione. Ma come facciamo a raggiungere le pagine dei vari servizi in maniera pratica, rapida e usabile? Creiamo una pagina di smistamento!

Si tratta di una pagina raggiungibile cliccando sulla voce di menu principale in cui vengono presentate le varie sottovoci. In questa maniera, anche da mobile non avremo problemi di navigazione: basterà cliccare sulla voce generale (nel caso del nostro esempio “Servizi”), e aprire la pagina di smistamento con l’elenco esteso. Per vedere un esempio concreto di come funziona questo meccanismo, vi invito a visualizzare una pagina di smistamento su QuoLAB, il nostro sito Web. Cliccando sulla voce di menu Web Marketing, compariranno tutte le sotto sezioni relative: SEO, Gestione Social, AdWords, …

Un unico menu

Come abbiamo spiegato in questo articolo, i siti moderni vengono realizzati con tecnologia responsive, in modo da adattare il contenuto al dispositivo che lo visualizza.

Come abbiamo appena visto, questo comporta qualche novità anche dal punto di vista del menu principale. Ma c’è dell’altro: se fino a qualche anno fa era normale inserire diversi menu usando le sidebar a destra o a sinistra del contenuto, oggi è invece opportuno evitarlo. Non inserite i menu nelle sidebar, nella visualizzazione da mobile anche questi moduli vengono ridisposti e rischiamo che:

• il menu compaia sopra al contenuto
• il menu compaia sotto al contenuto
• il menu non compaia affatto!

Per tutte queste ragioni è meglio avere un unico menu principale. Eventualmente, se ne abbiamo bisogno, in alcune pagine possiamo servirci di navbar di supporto, ma che devono semplicemente supportare la navigazione e mai sostituirsi a main menu. Ecco qui un esempio.

Conclusioni

Come avrete capito, è fondamentale strutturare correttamente il vostro sito, anche attraverso la barra di navigazione. Per iniziare a mettere in pratica questi consigli, potete confrontare quanto detto con il menu attuale de vostro sito: ci sono aspetti da migliorare? Se volete discuterne insieme, non esitate a contattarci, saremo felici di aiutarvi!