Come Migliorare la Navigazione dei Siti Web (con Esempi e Ragioni Per Farlo)

La navigazione di un sito web è una cosa che molti relegano ad un momento successivo alla costruzione delle pagine e alla creazione dei contenuti. In un recente sondaggio, solo il 50% degli utenti di Internet è stato in grado di prevedere dove si sarebbero trovati i contenuti rilevanti su una struttura di navigazione standard.

Se la metà dei visitatori non riesce a trovare la pagina che sta cercando, siamo di fronte a un enorme problema di UX.

Ciò porterà a frequenze di rimbalzo più elevate, tempi di permanenza sul sito più brevi e tassi di conversione più bassi.

Se gestite un negozio di eCommerce, una cattiva navigazione può anche influire negativamente sui vostri profitti e sulle vostre entrate.

In questo post, ci occupiamo della navigazione dei siti dalla A alla Z. Questo significa che scoprirete le best practise, i diversi tipi di navigazione, e precisamente cosa fare per creare la navigazione perfetta per il vostro sito.

Cominciamo!

Cos’È la Navigazione di un Sito Web?

La navigazione di un sito web è il processo di navigazione di pagine, applicazioni e siti web su internet. La tecnologia alla base di questo processo si chiama ipertesto o ipermedia.

Ipertesto o media sono pagine web basate sul testo che utilizzano collegamenti ipertestuali per collegarle ad altre pagine di Internet. Un hyperlink è un link che conduce il vostro browser web a un URL.

L’URL indica a quale file il browser deve accedere dal server per poi scaricare e rendere i dati in modo che l’utente possa vederli.

I link interni portano a pagine diverse ospitate nello stesso dominio. I link esterni portano a pagine su un dominio esterno, un sito web e un server completamente separati.

La navigazione del sito web utilizza menu con link interni che rendono facile per i visitatori trovare la pagina che stanno cercando. Una buona navigazione è un elemento essenziale per un sito di facile utilizzo.

Cos’È il Menu di Navigazione di un Sito Web?

Un menu di navigazione di un sito web è un insieme di link, tipicamente a pagine interne, che è organizzato in un menu. La maggior parte dei siti web, compreso il nostro, presenta un menu all’inizio.

In ambito web design e sviluppo, questa sezione è chiamata l’header del sito. Alcune delle pagine più comuni che si trovano elencati in questi menu sono:

• La pagina About (o Chi Siamo).
• Blog.
• Contatti.
• Funzionalità.
• Piani/prezzi.

Il menu può, naturalmente, includere anche link ad altre pagine.

Qual È la Struttura di Navigazione di un Sito Web?

La struttura di navigazione di un sito web descrive come le diverse pagine del vostro sito sono organizzate e collegate tra loro.

Ad esempio, alcune pagine e contenuti possono essere raggiunti solo visitando una pagina specifica. I progettisti e i web developer spesso pianificano la struttura di navigazione quando realizzano un nuovo sito web.

In questo esempio, le pagine About, Plans, Contact e Blog sono collegate dal menu iniziale. Per accedere alle pagine Mission e Team, invece, è necessario visitare prima la pagina About.

Perché È Importante la Navigazione su un Sito Web?

Nell’introduzione di questo articolo, avete appreso che il 50% degli utenti di Internet non è in grado di utilizzare correttamente un menu standard. Immaginate come poche persone riuscirebbero a trovare il contenuto giusto se non ci fosse la navigazione.

Con il giusto approccio alla navigazione e ai menu, è possibile portare la percentuale molto al di sotto del 50%. Questo ridurrà le vostre percentuali di rimbalzo, aumenterà il tempo medio sul sito e porterà a un aumento del traffico, dei lead e dei clienti.

Tipi di Navigazione web

Ci sono tre tipi principali di navigazione del sito web. Essi sono:

Se combinati correttamente, aiutano i vostri visitatori a navigare il vostro sito web e a trovare la loro destinazione senza problemi. Diamo un’occhiata più da vicino ad ognuno di loro.

1. Navigazione Globale del Sito

Con la navigazione globale del sito, il menu e i link sono identici in tutte le pagine del sito. Molti menu moderni sono progettati in questo modo, compreso il menu del nostro sito qui a Kinsta: se scorrete la pagina, il menu la “segue”, rimanendo visibile in alto.

Nella schermata è possibile vedere il nostro menu di intestazione semplice e di facile comprensione. È lo stesso su tutte le nostre pagine e conduce ad alcune delle nostre pagine e dei contenuti più importanti.

Sappiamo quali sono le informazioni cruciali che un potenziale cliente vuole sapere su una società di hosting prima di prendere una decisione. Ecco perché abbiamo reso facile per i potenziali clienti trovare i nostri piani, le nostre funzionalità e come contattarci. E, per gli utenti esistenti, abbiamo l’opzione di login per consentire loro di accedere al loro crusscotto MyKinsta.

Anche il nostro menu del footer è globale e mette in evidenza le sezioni essenziali del nostro sito web e alcuni contenuti in evidenza.

I menu globali sono lo standard per la maggior parte delle soluzioni CMS.

Ogni tema di WordPress permette di avere diverse tipologie e aree per i menu di navigazione. Se avete bisogno di qualcosa in più, potete usare un plugin per i menu per avere più opzioni disponibili.

2. Navigazione Gerarchica del Sito

La navigazione gerarchica significa che i menu cambiano a seconda del contesto di ogni pagina.

La maggior parte dei giornali e dei siti web puramente contenutistici sono caratterizzati da una navigazione gerarchica. Ad esempio, se visitate la pagina principale di un giornale, di solito vedrete i link alle categorie di notizie più importanti nel menu dell’header.

Se il menu fosse globale, rimarrebbe lo stesso anche dopo aver fatto clic su una categoria diversa. Ma poiché è gerarchico, rivela nuovi link che portano a sottocategorie della pagina di categoria che visitiamo.

Nella pagina Science del New York Times non si vede affatto il menu di primo livello. Al contrario, si vedono i link a diverse sottosezioni della ricerca scientifica e agli articoli.

Questo cambiamento è ciò che distingue questo menu da un normale menu globale che si trova nella maggior parte dei siti più piccoli.

3. Navigazione Locale del Sito

A differenza della navigazione sia gerarchica che globale, la navigazione locale del sito si riferisce a link interni che sono inclusi nel contenuto stesso. Di solito, all’utente vengono fornite opzioni allo stesso livello gerarchico o a un livello più profondo, oppure link per navigare verso altre pagine rilevanti.

Un buon esempio sono i siti web delle riviste, che spesso usano i link per aiutare i lettori a esplorare il contesto più profondo di un certo articolo. Se menzionano un incidente di cui hanno parlato in passato, si collegano a quell’articolo, invece di spiegarlo in modo approfondito.

Ma questo comportamento non è riservato solo a riviste e siti web di notizie. I negozi di eCommerce si affidano molto a questo tipo di menu di navigazione per presentare prodotti della stessa categoria.

Anche il linking interno è un aspetto cruciale della SEO in generale, e più specificamente della SEO di WordPress, quindi è ormai una pratica standard per chiunque gestisca un sito web.

Esempi di Navigazione dei Siti Web

Invece di parlare di teoria, tuffiamoci in alcuni esempi. Parlerò di un sito web di notizie e del tema WordPress Twenty Twenty.

Sito Web di Notizie: il New York Times

A colpo d’occhio, potrebbe sembrare che il New York Times stia usando principalmente un unico menu globale per l’header con le loro categorie.

Ma non finisce qui. Il NYT utilizza tutti i tipi di navigazione attraverso le sue centinaia di pagine di categoria e milioni di articoli.

Tipi di navigazione utilizzati:

• Gerarchica.
• Globale.
• Locale.

Diamo un’occhiata alla navigazione delle diverse intestazioni per ogni pagina.

Homepage

Nell’header del suo sito web compaiono due menu, un menu globale espandibile sopra il logo e un menu gerarchico sotto l’intestazione. In sostanza, l’impostazione prevede un menu di header e un menu di sub-header.

Se espandete l’hamburger menu nell’header, questo si trasforma in una barra laterale sul lato sinistro, dove c’è un ampio margine come nella maggior parte delle risoluzioni moderne.

Non offusca né si sovrappone a nessun contenuto del sito web.

Homepage (Mobile)

Esaminiamo la stessa sezione di header da mobile. La maggior parte degli utenti di internet accede ai siti web di notizie attraverso il proprio smartphone, quindi l’esperienza mobile potrebbe essere più importante di quella sul desktop.

Il sottomenu della categoria news non fa parte della homepage del sito mobile. Al contrario, è disponibile solo l’opzione espandibile.

Se ampliato, diventa un menu a schermo intero e copre completamente tutti i contenuti della homepage.

Comprende tutte le opzioni del menu principale del sito da desktop e i link sono organizzati in modo ordinato per categoria.

Pagina Categoria

Nella pagina delle categorie, sotto l’hamburger menu dell’header, si vede un link ad un ulteriore sottoinsieme di categorie.

Questo fa sì che le persone che sono interessate solo a un’area specifica di un argomento più ampio trovino facilmente articoli che potrebbero essere più in linea con i loro interessi.

Pagina Categoria (Mobile)

Da mobile, queste pagine di categoria includono lo stesso menu e la stessa struttura dell’hamburger menu visto nell’header della versione desktop. Il menu secondario dell’header non è affatto nascosto, cosa che facilita la navigazione e la scoperta dei contenuti.

Un’altra ragione potrebbe essere il fatto che molte delle esperienze di navigazione sui siti mobile partono dalla ricerca sui motori o dai social media, piuttosto che da una visita diretta alla homepage del NYT.

Articolo Singolo

Per i singoli articoli, l’header in modalità floating (“galleggiante”) indica la sezione in cui ci si trova attualmente, ma presenta solo il menu globale espandibile (oltre alla casella di ricerca).

Articolo Singolo (Mobile)

Da mobile, viene mantenuta la navigazione pulita grazie a un unico menu, cioè l’hamburger menu dell’header.

Footer

Il menu del footer del NYT è lo stesso in tutta la homepage, le pagine delle categorie e i singoli articoli.

Footer (Mobile)

Da cellulare, il menu del footer mostra solo cinque voci di menu le quali si espandono tutte in sottosezioni quando ci si fa clic sopra.

Ad esempio, facendo clic sulla sezione Arts, sarà possibile sfogliare queste sottosezioni:

Poiché il sito web utilizza JavaScript per caricare dinamicamente più contenuti mentre si scorre verso il basso, potrebbe sembrare che il footer non esista affatto.

Questo è un bel trucco che può aiutare a migliorare il tempo sul sito e a far leggere ai lettori altri articoli, ma rende il sito web un po’ più difficile da navigare.

Layout dei Contenuti

Alcuni potrebbero sostenere che lo strumento di navigazione principale utilizzato dai giornali e dai blog online non è solo il menu: è il layout stesso dei giornali, la spina dorsale della navigazione per il NYT e altri siti simili.

Tutti gli elementi evidenziati sono cliccabili e conducono a diverse pagine interne del sito web del New York Times.

Il layout dei contenuti è un altro elemento chiave della navigazione del sito web che il NYT implementa nella homepage e nelle pagine di categoria.

Il Tema WordPress Twenty Twenty

Anno nuovo, nuovo tema predefinito di WordPress. Questa volta è Twenty Twenty, che ora analizzeremo in profondità per vedere cosa è cambiato con la navigazione.

Vedremo se c’è qualcosa di diverso nel modo in cui gli sviluppatori hanno deciso di impostare i menu e il linking interno con questa nuova release di WordPress.

Menu dell’Header

Proprio come per qualsiasi tema standard di WordPress, la nuova versione ufficiale include un menu senza fronzoli nella sezione dell’header. È possibile selezionare diverse posizioni di visualizzazione ed è così che appare l’opzione Desktop Horizontal Menu:

D’altra parte, l’opzione Desktop Expanded Menu aggiungerà la possibilità di espandere i link del menu in una barra giustificata in alto a destra.

L’area principale dei contenuti è colorata di grigio scuro, guidando l’attenzione dell’utente verso il menu con i link.

Footer

Nel footer non ci sono link per la navigazione interna, ad eccezione di un semplice link “To the top” che riporta all’inizio della pagina.

Quali Fattori Migliorano la Navigazione di un Sito Web?

La buona navigazione di un sito web è sempre progettata partendo all’utente: utilizza un linguaggio chiaro e di facile comprensione, e link alle pagine più importanti.

Si avvale di un ampio spazio bianco, di cambiamenti di colore o di altre tecniche di progettazione per distinguersi chiaramente dal contenuto principale. Inoltre, è più facile da leggere e da usare su tutti i dispositivi (mobile e desktop).

La navigazione orientata all’utente significa anche che è contestuale. Prende in considerazione l’esperienza e le aspettative dell’utente. Questo potrebbe essere un motivo per cui i giornali online non riescono ancora a staccarsi dal loro design “pieno”.

Nel contesto della lettura di un giornale, questo è ciò che si aspettano i loro utenti e i potenziali clienti, includendo i menu molto ampi di categorie e sottocategorie.

Nella prossima sezione vedremo quali sono le basi per creare una buona navigazione per il vostro sito.

8 Principi per una Migliore Navigazione dei Siti Web

Anche se siete principianti assoluti, sarete in grado di navigare il vostro sito web seguendo i suggerimenti qui di seguito.

1. Pianificare la Struttura della Pagina e la Navigazione

Prima ancora di iniziare a scrivere contenuti per il vostro sito web, pianificate la struttura della vostra pagina e la navigazione.

La pianificazione è una parte essenziale del processo di fornire ai vostri visitatori una navigazione soddisfacente. Potete usare un creatore di mappe del sito per aiutarvi a creare rapidamente dei mockup per quella che volete che sia l’esperienza utente sul vostro sito web.

Un esempio di un buon strumento per mappe del sito è GlooMaps.

Potete creare gratuitamente tutti i documenti di cui avete bisogno. Ognuno di essi avrà un URL unico che potrete condividere per raccogliere i vostri commenti e lasciare che altri lo modifichino. Una volta creato, il vostro URL sarà disponibile per 14 giorni, a meno che non venga rivisto. Ogni nuova visita prolunga la vita del link per altri 14 giorni.

GlooMaps non è l’unico strumento che potete usare; ce ne sono molti altri come Octopus, VisualSitemaps o Creately, solo per citarne alcuni.

2. Seguire gli Standard Stabiliti

Non cercate di reinventare la ruota. La navigazione sul sito web è più una questione di usabilità che di creatività.

Per elementi di design essenziali come dove posizionare il menu e come indicare che è espandibile, seguite gli standard riconosciuti.

Le tre strisce orizzontali, o il segno “hamburger” ☰, sono una delle icone più riconoscibili per identificare un menu espandibile. L’altra sono i tre punti che creano una linea orizzontale.

Se cercate di essere creativi e di sviluppare un’icona personalizzata, è probabile che molti visitatori non capiranno lo scopo del vostro progetto e faranno fatica a trovare il vostro menu.

3. Utilizzare il Vocabolario degli Utenti

Invece di collegarvi semplicemente alle stesse vecchie pagine, usando il gergo standard dello sviluppo web, o un copy eccessivamente creativo, usate un linguaggio che sia più vicino a ciò che i vostri utenti usano, cercano e desiderano.

Questo approccio è vantaggioso sia per la SEO che per l’usabilità. Create pagine che riflettano ciò che i vostri utenti cercano online.

Potete quindi collegarvi a queste stesse pagine utilizzando le stesse parole e frasi che aiutano gli utenti a trovare il vostro sito web su Google.

4. Utilizzare i Menu Responsive

Dal momento che oltre il 52% di tutto il traffico online si produce ormai mobile, il responsive/mobile-first design è diventato un must assoluto.

Invece di menu che escono dal frame nel browser web da mobile o che sono troppo ingombranti, assicuratevi di implementare menu mobili espandibili.

C’è un motivo per cui i menu espandibili sono diventati uno standard industriale. I menu orizzontali con testo minuscolo sono difficili da leggere, da cliccare e da utilizzare correttamente sul cellulare.

La buona notizia è che tutti i migliori temi di WordPress hanno un design responsive e menu responsive di default. A meno che non stiate progettando il vostro sito WordPress da zero, WordPress viene in vostro aiuto, da questo punto di vista.

5. Approfittare del Menu del Footer

I lettori che continuano a leggere e a scorrere fino in fondo il vostro sito web sono più impegnati dell’utente medio. Approfittatene e utilizzate lo spazio in fondo ad ogni pagina per evidenziare i contenuti di valore.

Dal momento che il footer non mangia lo spazio “above the fold”, potete includere più categorie ma anche evidenziare le pagine o i vostri articoli fondamentali.

Per esempio, guardate come gestiamo il nostro footer in questa stessa pagina. Abbiamo inserito le pagine delle caratteristiche essenziali, la descrizione della nostra azienda, esplicitato le nostre risorse e altro ancora.

Il footer consente di evidenziare il contenuto che “non riusciva a entrare” nell’header.

6. Usare il Colore e lo Spazio Bianco per Separare la Navigazione dagli Altri Elementi

Utilizzate colore, font e spazio bianco per separare i vostri menu dai contenuti principali e dalle barre laterali. Rendete chiaro dove inizia e dove finisce la navigazione.

Non importa che lingua usate nei vostri o a quali pagine vi collegate se poi i visitatori del vostro sito non riescono nemmeno a trovare il menu.

7. Evitare i Menu a Tendina

Per la maggior parte dei siti web (non tutti), i menu a tendina non sono necessari né utili. Quando gli utenti vedono un link in un menu, presuppongono che sia cliccabile. A meno che il design non lo separi dai link cliccabili, un menu a tendina può portare a confusione.

Avere troppi link nel menu principale può anche influire negativamente sull’usabilità del vostro sito web.

L’implementazione di una navigazione gerarchica e locale al posto dei menu a tendina può portare a un flusso di utenti più fluido. Permette inoltre agli utenti di interagire con più pagine e di passare più tempo sul vostro sito, invece di navigare attraverso una gigantesca lista di link.

8. Appiattire la Struttura

Se volete rendere il più semplice possibile l’esplorazione di tutte le pagine del vostro sito web da parte dei visitatori, mantenete una struttura di navigazione il più possibile piatta.

Invece di collegarvi a una manciata di pagine della vostra home page, e poi espandervi con sempre più sottopagine e categorie, mantenete le cose semplici.

Assicuratevi di collegarvi a categorie significative dalla vostra homepage, e collegatevi ad un singolo livello di sottocategoria o a singole pagine di articoli.

È dimostrato che l’appiattimento della struttura in questo modo ha un effetto positivo sulla SEO e può farvi ottenere dei sitelink di Google. Quindi non lasciate che la struttura del vostro sito web diventi troppo disordinata!

Tendenze dei Menu di Navigazione dei Siti Web nel 2024

Anche se le tendenze del web design degli ultimi anni includono elementi di design in 3D e l’inserimento di fotografie su misura in progetti creativi, i menu non hanno avuto un anno entusiasmante.

Ma questo non significa che non sia cambiato nulla. Ecco la nostra rapida panoramica su alcune delle tendenze più importanti del menu negli ultimi due anni.

Categorie Espandibili nei Menu Mobile a Schermo Intero

Uber e altre grandi aziende con un design rinnovato e moderno, hanno aggiornato i loro menu per essere più utilizzabili.

Un problema per queste imprese è che hanno così tanti prodotti e categorie diverse che può essere impossibile includerle in un unico menu in modo sensato.

Questo porta a menu mobili espandibili chiari e categorizzati, invece che una lista infinita di link.

Menu dell’Header in Modalità Floating

Forse la tendenza universale per i menu negli ultimi anni è il menu dell’header in modalità floating (“galleggiante”).

Con questo termine intendiamo un menu che rimane impresso nella parte superiore della finestra del browser web mentre l’utente scorre la pagina (come quello che usiamo nel sito kinsta.com). Di solito fa parte di una sezione dell’header che include un piccolo logo e forse anche una barra di ricerca.

Difficile argomentare contro questa scelta, perché avere un accesso costante a un menu rende la navigazione interna molto più facile. Questo tipo di menu è incluso in molti temi di WordPress e la tendenza non sembra volersi arrestare.

Menu a Tendina Sovrapposti sul Desktop

Fra i consigli più basilari per la navigazione su un sito web c’è quello di stare lontano dai menu a tendina. E c’è un motivo.

Ma questo non significa che siano per forza terribili. I menu a tendina sono spesso difficili da implementare in un modo che abbia senso sullo schermo del computer.

Sovrapponendo il loro colore sul contenuto principale, possono forzare l’utente a spostare la sua attenzione sul menu. Sono poi disponibili migliori opzioni per le categorie espandibili rispetto alla visualizzazione di ulteriori link in hover.

Questi fattori si sono uniti per trasformarsi in un trend di crescita nel 2019. Infatti, molti siti web e modelli innovativi includono menu a tendina con overlay sul desktop.

Riepilogo

Questo articolo dovrebbe avervi dato una chiara comprensione di cosa sia la navigazione del sito web e di alcuni dei suoi punti chiave.

La navigazione del sito web dovrebbe essere sempre incentrata sulla semplicità, sulla chiarezza, piuttosto che su colori intensi e sul design creativo. Poiché la navigazione e i menu del vostro sito devono tenere conto sia degli utenti desktop che di quelli mobili, le cose possono diventare più complicate e l’assunzione di uno sviluppatore web può essere una buona scelta.

Cercate sempre di seguire le migliori pratiche di progettazione dei menu del sito web per garantire che i vostri visitatori e i motori di ricerca possano navigare facilmente tra i vostri contenuti.

L’usabilità e la chiarezza continueranno ad essere priorità per il futuro. Quindi, se riuscirete a padroneggiare il linguaggio dei vostri utenti e a creare una struttura che abbia un senso per loro, sarete in grado di rendere i vostri menu a prova di futuro.