17 Tipi di blog e opzioni di navigazione del sito web

Pubblicato: 2019-07-04

Una persona che naviga attraverso un sito web reattivo su un tablet.

Sai che il 67% dei tuoi visitatori lascerà il tuo sito web se la navigazione li infastidisce? Un buon blog e una buona navigazione nel sito Web sono essenziali per il successo in quanto influiscono sul traffico, sulla quantità di tempo che una persona trascorre sul tuo sito e sui tassi di conversione.

A causa del progresso di Internet, ci sono molte speculazioni sui diversi tipi di menu di navigazione. La navigazione è uno degli elementi principali che influenzano l'esperienza dell'utente e un blog o un sito Web senza navigazione è inimmaginabile.

Sommario

  • Perché la navigazione è così importante per un sito web?
  • Opzioni di navigazione
    • Navigazione interattiva
    • Barre di navigazione appiccicose
    • Navigazione statica della barra laterale verticale
    • Navigazione a scorrimento verticale
    • Navigazione di parallasse
    • Menù Hamburger
    • Menù multimediale
    • Sommario
    • Navigazione di post correlati
    • Mega menu a discesa
    • Navigazione con punti a pagina singola
    • Navigazione universale
    • Navigazione breadcrumb
    • Navigazione dei piè di pagina di grasso
    • Menu subnav reattivi
    • Caroselli di storie migliori
    • Menu scorrevole

Perché la navigazione è così importante per un sito web?

Considera che il tuo sito web è una città. Sei appena atterrato a Singapore, Dubai, Roma o qualsiasi altra destinazione desiderata a tua scelta. Sai quali posti vuoi vedere, ma non hai idea di come arrivarci. La maggior parte delle città ha segnali che possono aiutare a guidare le persone in un determinato luogo. I segni aiutano anche a coinvolgere le persone. Potresti non aver pensato di visitare il Colosseo, ma se vedi un cartello che indica che è vicino, potresti essere convinto a visitarlo.

Le navigazioni di blog e siti Web sono progettate tenendo presente lo stesso principio. Senza la navigazione, i visitatori non possono capire dove andare o quali pagine vale la pena vedere. Non saranno in grado di trovare la pagina dell'elenco dei prodotti o la pagina dell'abbonamento.

Lo scopo della navigazione è quello di aiutare a esplorare ulteriormente il sito web. Deve ispirare curiosità nelle persone e convincerle a fare clic sui collegamenti. Una buona navigazione del sito Web consentirà ai visitatori di passare da una pagina all'altra senza alcuna frustrazione. Se hai fatto un buon lavoro, i visitatori lasceranno il tuo sito con l'intenzione di tornare di nuovo, iscriversi a una newsletter o persino acquistare un prodotto o servizio.

Opzioni di navigazione

Ecco alcune delle nuove moderne opzioni di navigazione che possono funzionare come per magia per il tuo blog o sito web:

Navigazione interattiva Esempio di sito con navigazione interattiva

Questi tipi di menu di navigazione interattivi sono generalmente costituiti da una barra orizzontale con elementi che forniscono interazione quando un visitatore passa con il mouse sopra il collegamento. Questo è uno dei tipi più interessanti di opzione di navigazione in quanto offre una miscela di elementi statici, dinamici e interattivi che sono tutti mescolati insieme per catturare l'attenzione. Promette all'utente un'esperienza coinvolgente, stimolante e interattiva. Tuttavia, a causa dei molti elementi mobili, queste opzioni di navigazione non sono molto compatibili con tutti i tipi di browser o dispositivi mobili.

Barre di navigazione appiccicose Rivista statunitense con una barra di navigazione adesiva

Come indica il nome, una barra di navigazione appiccicosa è un menu del sito Web, generalmente visualizzato orizzontalmente nella parte superiore che rimane in posizione e non scompare quando si scorre il sito Web verso il basso. Ciò ti impedisce di tornare fino all'intestazione del sito Web e di perdere il tuo posto nella pagina di scorrimento. Aiuta gli utenti a navigare nel sito da qualsiasi punto della pagina.

A causa dei plug-in CSS e jQuery, molti temi del sito Web ora sono integrati con il menu permanente come funzionalità predefinita. Questo tipo di navigazione funziona alla grande anche per i dispositivi mobili poiché lo schermo è più lungo e più sottile.

Se il tuo sito ha molte pagine in cui navigare, è una buona idea utilizzare un menu di navigazione appiccicoso, poiché aiuta nel coinvolgimento degli utenti e mantiene i visitatori più a lungo sul tuo sito. Anche alcune barre di navigazione appiccicose si riducono di dimensioni mentre scorri verso il basso in modo che diventino meno invasive e ti consentano di visualizzare meglio il contenuto della pagina.

Navigazione statica della barra laterale verticale

Navigazione statica della barra laterale verticale di Amazon

La navigazione statica nella barra laterale è di tendenza da diversi anni. Sebbene la maggior parte dei designer affermi che questi menu funzionano meglio per siti Web compatti ed eleganti, ci sono molti blog e riviste che utilizzano ancora questo stile di navigazione.

La maggior parte dei siti Web utilizza un pannello statico dai colori vivaci sul lato sinistro della pagina che può visualizzare tutti i collegamenti in modo rapido ed efficace. Nel frattempo, puoi scorrere verso il basso la pagina web senza che la barra laterale vada da nessuna parte. Ciò garantisce un'esperienza utente eccezionale poiché tutti i collegamenti pertinenti sono disponibili a portata di mano.

Navigazione a scorrimento verticale

Navigazione della barra laterale scorrevole verticale Akris

Molto simile alla barra laterale statica, tranne per il fatto che questa opzione di navigazione è dotata di un'opzione di scorrimento o scorrimento verso il basso in modo che i visitatori possano visualizzare un elenco di pagine più ampio di quello che può essere visto con una barra statica. Un gran numero di siti Web moderni ora utilizza la tendenza della navigazione a scorrimento verticale e funziona molto bene. Questa opzione di navigazione è molto popolare con le agenzie creative o i siti Web di portfolio che spingono i limiti del design di siti Web tradizionali.

Questo design funziona bene su un layout a schermo intero piuttosto che su un web design a griglia. Una barra laterale scorrevole verticale non è facile da progettare e, a volte, lavorare può essere piuttosto complicato se si utilizza un dispositivo mobile o touch. Tuttavia, se sei curioso di provare nuove fantastiche idee di navigazione, una barra di scorrimento verticale può essere un'ottima idea.

Navigazione di parallasse Il sito web di Walking Dead utilizzava al massimo la navigazione in parallasse

La navigazione in parallasse o lo scorrimento in parallasse consiste in un layout web con lo sfondo principale della pagina che si muove a una velocità inferiore rispetto ad altri elementi in primo piano. Questa opzione di navigazione è basata sulla grafica e conferisce alla pagina web un effetto tridimensionale.

Insieme a diversi elementi visivi e mobili, il sito Web di parallasse mantiene le cose interessanti e impedisce ai visitatori di perdersi nel sito.

A seconda del tipo di sito Web, la parallasse può anche essere utilizzata con parsimonia nei siti Web per dare un tocco di dimensione aggiuntiva e aiutare a far emergere il primo piano e gli elementi importanti.

Menù Hamburger Il menu dell'hamburger su Mic

L' icona dell'hamburger è il pulsante del menu che si trova in genere nell'angolo in alto a sinistra o in alto a destra di un sito Web. È chiamato così perché l'icona è composta da tre brevi linee orizzontali impilate l'una sull'altra, che danno l'aspetto di un panino con hamburger. Questo di solito si trova nei siti Web ottimizzati per i dispositivi mobili o nei moderni siti Web desktop dall'atmosfera techno.

Questo è uno dei tipi più popolari di pulsante di navigazione in quanto riunisce tutti i collegamenti in un unico posto senza aggiungere molto disordine. Questo tipo di menu è molto discreto, elegante e dinamico. Anche se ora è uno standard leader nella navigazione mobile, alcune persone meno esperte di tecnologia trovano difficile trovare questo tipo di opzioni di navigazione nascoste. Pertanto, l'aggiunta della parola menu accanto al pulsante può facilitare la navigazione per tali visitatori.

Menù multimediale Sito multimediale di Entreprenrsgatan

Un menu multimediale è costituito da diversi elementi visivi come immagini e video che sono presenti nelle voci di un menu di navigazione. Questa opzione meravigliosa e coinvolgente è tutto grazie ai progressi della tecnologia che ci consente di aggiungere molti contenuti multimediali senza compromettere le funzioni, l'accessibilità e le prestazioni del sito web. Pertanto, questo tipo di navigazione attraente, moderna e di tendenza sta rapidamente diventando un must per i siti Web dinamici ed eleganti.

La navigazione multimediale utilizza una varietà di diversi tipi di opzioni di navigazione come il menu hamburger e la navigazione a piè di pagina ed evidenzia solo la parte più importante della descrizione.

Sommario Un sommario sulla pagina della mitologia greca in Wikipedia

Sappiamo che Google ama i contenuti di lunga durata e quindi i blogger ora si sforzano di scrivere contenuti sempre più lunghi. Sebbene questa sia un'ottima pratica secondo il motore di ricerca, può lasciare i lettori incapaci di orientarsi. Per semplificare le cose, molti siti Web aggiungono un sommario all'inizio dei loro articoli che li classifica in diverse sezioni. In questo modo gli utenti possono semplicemente fare clic sul collegamento della sezione in cui desiderano accedere e verranno portati lì senza dover scorrere incessantemente la pagina. Questo aiuta l'articolo a sembrare meno intimidatorio e fa meraviglia per l'esperienza dell'utente.

L'esempio più evidente è quello di Wikipedia che ha utilizzato i sommari sin dalla sua creazione.

Navigazione di post correlati Navigazione dei post correlati in Gizmodo

Uno dei tipi più importanti di opzioni di navigazione, solitamente utilizzato nei blog, nei siti di notizie e negli elenchi di prodotti, è la relativa navigazione dei post . Questo tipo di navigazione consiste in collegamenti ad altri post di blog, notizie o prodotti in primo piano, inseriti tra, sopra o sotto il contenuto principale.

Il più grande vantaggio di questa opzione di navigazione è che offre contenuti simili che i visitatori potrebbero trovare interessanti. La relativa navigazione dei post incoraggia i visitatori a navigare tra altre offerte e post simili sul sito, aumenta il coinvolgimento, riduce la frequenza di rimbalzo e sollecita un acquisto.

Mega menu a discesa Il menu a tendina di Adidas

I menu a discesa sono noti per essere controversi. Per uno, possono essere difficili da scansionare per i robot dei motori di ricerca. Dall'altro, possono essere fastidiosi per i visitatori che non sono interessati a guardare un lungo elenco di pagine web. Inoltre fanno perdere ai visitatori pagine importanti. Tuttavia, un tipo di menu a discesa funziona molto bene. Questo è il mega menu a discesa.

I mega menu a discesa funzionano sempre molto bene su siti Web che presentano determinati settori come sport, notizie online e negozi di e-commerce. Il mega menu a discesa è un componente multi-funzione a più colonne che copre quasi l'intera larghezza dello schermo. Può anche bilanciare elementi come video, immagini e persino carrelli della spesa. Poiché si tratta di un componente molto complesso, a volte può far sì che la pagina non risponda, specialmente sui browser mobili. Tuttavia, è una delle migliori opzioni se il tuo sito Web offre una vasta gamma di servizi o prodotti diversi.

Il più grande vantaggio offerto dai mega menu a discesa è che i visitatori possono farsi un'idea del tipo di contenuto offerto da un sito Web diversificato. Pertanto, c'è un numero enorme di utenti che amano questo stile di navigazione.

Navigazione con punti a pagina singola Navigazione a punti di una singola pagina impiegata dall'autore Robin Hobb

Uno dei tipi di navigazione più trendy visti in questi giorni è la navigazione con punti a pagina singola . Ciò comporta una serie di simpatiche icone circolari situate a sinistra, a destra o al centro dello schermo. Ogni punto rappresenta una sezione diversa della pagina. Quando un visitatore passa sopra o fa clic su un punto, viene portato a una sezione della pagina Web o a una diapositiva collegata a quel punto. Il punto su cui il visitatore fa clic viene evidenziato per contrassegnare la posizione dell'utente sul sito web.

Questo tipo di navigazione è ottimo per quando vuoi mostrare un gran numero di prodotti su una singola pagina ma non vuoi occupare molto spazio. In effetti, la navigazione con punti a pagina singola funziona molto bene insieme ad altre navigazioni come i menu a discesa e le barre di navigazione in alto appiccicose.

Navigazione universale Navigazione universale

Alcune aziende sono conglomerati e hanno più marchi sotto il loro nome. Queste aziende hanno spesso un menu di navigazione universale in tutto il sito web. Come suggerisce il nome, questa opzione di navigazione include tutti i diversi marchi, servizi e prodotti forniti dal marchio principale.

Uno dei migliori esempi di tale tipo di navigazione è Disney, che possiede un canale TV, film, parchi a tema, giochi e altro ancora. La navigazione universale ha senso in questa situazione poiché attira l'attenzione su tutti i prodotti Disney. Anche questa navigazione non è inclusiva per i conglomerati. Viene anche utilizzato su reti di siti Web come quelli di proprietà di Univision Communications, inclusi Jezebel, Deadspin e Lifehacker e i collegamenti di navigazione a tutti e sette i marchi precedentemente di proprietà di Gawker Media.

Un vantaggio di questo tipo di navigazione è che consente agli utenti di sapere quali altri siti fanno parte della rete del sito Web e aiuta a creare un'identità di marca e una consapevolezza del marchio di successo. Questo può aiutare i visitatori a impollinare in modo incrociato attraverso la rete tutti i siti web.

Navigazione breadcrumb Navigazione breadcrumb

Nella storia "Hansel e Gretel", i bambini lasciano una scia di briciole di pane per ritrovare la strada di casa. La navigazione breadcrumb, o breadcrumb trail , funziona secondo lo stesso principio. Si tratta di collegamenti di navigazione gerarchici che vengono visualizzati nella parte superiore di una pagina Web in caratteri minuscoli e mostrano al visitatore la propria posizione nel sito Web.

Lo schema breadcrumb mostra i link della categoria a cui è assegnata la pagina in cui ti trovi, le sezioni del sito in cui è presente e riporta alla home page. A volte, la navigazione breadcrumb mostra anche il nome della pagina in cui ti trovi ma che non è collegata a un collegamento ipertestuale.

Nel caso del nostro esempio Amazon, il libro appartiene alla categoria "Genere Fiction", che fa parte della sezione "Letteratura e narrativa" e riconduce alla sezione principale "Libri" del sito Web di Amazon.

Navigazione dei piè di pagina di grasso Navigazione dei piè di pagina di grasso

La navigazione a piè di pagina è simile nell'aspetto alla tradizionale barra dei menu nella parte superiore del sito. Tuttavia, la differenza principale è che si trova nella parte inferiore della pagina web. Per questo motivo, si chiama navigazione nel piè di pagina.

In molti siti la navigazione a piè di pagina è solitamente costituita dai link contatti, privacy e legali; tuttavia, ora è diventato abbastanza tipico visualizzare i campi di iscrizione e-mail, i collegamenti ai social media e persino i collegamenti alle pagine dei prodotti nel menu a piè di pagina.

La maggior parte dei visitatori esegue la scansione del menu a piè di pagina come ultima risorsa. Molti siti Web, in particolare i siti Web di vendita al dettaglio, utilizzano il menu a piè di pagina per mostrare collegamenti a pagine che non possono essere mostrate nel menu di intestazione.

Menu subnav reattivi Menu subnav reattivi

Le persone ora utilizzano i loro dispositivi mobili più dei loro computer desktop. Tenendo presente questa cosa, gli sviluppatori hanno escogitato un nuovo e più efficiente sistema di navigazione chiamato menu subnav reattivo. Questo menu di navigazione secondaria sembra piccolo, il che va bene per gli schermi mobili, ma può essere ampliato per mostrare le categorie nascoste con la semplice pressione di un pulsante.

I siti con menu di navigazione secondaria reattivi sono costituiti da una piccola icona più, un segno di freccia o un cambio di colore, che indicano che il menu contiene sottocategorie.

Caroselli di storie migliori Caroselli di storie migliori

L'opzione di navigazione del carosello delle notizie principali sta rapidamente diventando una tendenza sui siti di notizie e sui blog ad alto traffico. Molti di questi importanti siti possono pubblicare dozzine di post ogni giorno e l'aggiunta di un semplice carosello nella parte superiore della pagina può dare ai visitatori la possibilità di guardare i post più recenti. Gli articoli nei caroselli vengono aggiornati e curati in modo dinamico e possono essere modellati in modo che assomiglino a immagini in miniatura.

Questo tipo di navigazione è perfetto per siti Web e blog ad alto volume e può dare una spinta all'esperienza utente. Mentre si trovano su una pagina, i visitatori possono scoprire più storie diverse a cui potrebbero essere interessati e troveranno più tempo per esplorare il sito. Ciò aumenta il tempo di coinvolgimento, migliora la fidelizzazione degli utenti e riduce la frequenza di rimbalzo.

Menu scorrevole Menu scorrevole

Questa è un'altra di quelle navigazioni "nascoste", simile al pulsante dell'hamburger. I menu a scorrimento sono popolari per i dispositivi mobili che hanno uno schermo più sottile e non hanno spazio sufficiente per mostrare il contenuto e il menu. Quindi hanno ricevuto un'enorme popolarità e ora i designer li stanno implementando anche nei siti Web desktop.

Il menu a scorrimento è indicato da un indizio visivo, come un'icona, ad esempio una freccia o un piccolo testo, che quando premuto fa emergere il menu. In genere, il menu a scorrimento viene visualizzato sul lato sinistro, anche se in questi giorni può provenire da destra, dall'alto e persino dal basso.

La navigazione è una parte essenziale della progettazione di qualsiasi sito Web e i progettisti devono prestare particolare attenzione al tipo di navigazione che non è solo adatto alle esigenze del cliente ma riflette anche la voce dell'azienda. Oltre a questo, ecco alcuni suggerimenti che devi seguire per assicurarti che la tua navigazione funzioni nel miglior modo possibile:

  • Devi pianificare la tua mappa del sito all'inizio di ogni progetto. In poche parole, una mappa del sito è un elenco di URL e pagine Web su un sito Web. Ciò significa che è uno dei migliori strumenti di navigazione possibili, dal punto di vista dei motori di ricerca.
  • La navigazione di un sito web dovrebbe garantire che tutti i suoi utenti conoscano la loro posizione sul sito, dove il sito li condurrà e quali pagine hanno attraversato.
  • I migliori siti Web non sono dotati di un solo tipo di navigazione, ma offrono una combinazione di diversi siti di navigazione moderni. Ad esempio, un sito Web ottimizzato per dispositivi mobili può avere un pulsante hamburger, oltre a un menu a scorrimento, un piè di pagina e un'intestazione adesiva per una facile navigazione.
  • Tutte le opzioni di navigazione dovrebbero inoltre seguire le convenzioni web in modo che i visitatori sappiano dove trovare determinate funzionalità.
  • È una buona idea utilizzare elementi di navigazione del sito Web reattivi come pulsanti hamburger e menu a scorrimento sui siti Web, ove appropriato.

Sebbene esistano diversi tipi di opzioni di navigazione, sia tradizionali che moderne, spetta all'utente decidere quale navigazione desidera impostare sul proprio sito, dopo averne soppesato vantaggi e limiti. Quando si tratta di navigazione, le tendenze sono davvero dinamiche e ogni nuovo anno vede una gamma completamente nuova di menu straordinari. Che tipo di navigazione merita il tuo sito web dipende interamente da te.