Modelli di navigazione per dieci tipi comuni di siti web
La navigazione è uno degli aspetti più importanti di qualsiasi sito web. Senza una buona navigazione, un sito diventa inutile per i visitatori. Non riescono a trovare le informazioni di cui hanno bisogno e cercano invece siti concorrenti. È fondamentale che i tuoi siti siano facili da navigare se vuoi essere un designer di successo.
iMa non ci sono soluzioni a misura unica per la navigazione. Ciò che funziona alla grande su un sito di notizie potrebbe non funzionare bene per un sito personale. Qualcosa che è incredibilmente user-friendly su un blog potrebbe essere frustrante su un sito di e-commerce.
Di seguito sono riportati dieci tipi di siti comuni, con suggerimenti per i tipi di schemi di navigazione che funzionano bene per ciascuno di essi.
Ci sono anche degli esempi, per darti un'idea migliore di ciò di cui stiamo parlando. Sentiti libero di condividere altri grandi esempi nei commenti!
Tutti i siti
Esistono alcuni schemi di navigazione che funzionano praticamente su tutti i siti. Piuttosto che rielaborare le stesse informazioni in ognuna delle categorie seguenti, le includerò qui.
Il primo modello è la navigazione a schede. Le schede sono perfette per la navigazione, perché psicologicamente ricordano ai visitatori le schede di carta e navigano verso una nuova sezione di un blocco note o un raccoglitore, cosa che i pulsanti o i collegamenti di testo non fanno. Le schede sono quasi sempre il metodo preferito per lo styling dei tuoi collegamenti di navigazione principali, anche se naturalmente funzionano meglio quando c'è un numero limitato di link in un menu.
Il secondo modello è la navigazione dell'intestazione. Se il tuo sito web ha un'intestazione (e la maggior parte dei siti Web lo fa), la navigazione dell'intestazione è una buona idea. I visitatori sono abituati a guardare l'intestazione per i link di navigazione. Questo comportamento predeterminato ti consente di rendere più facile l'utilizzo del tuo sito web individuando la navigazione all'interno o vicino all'intestazione.
Il modello finale che si applica a praticamente tutti i siti è la navigazione a piè di pagina. Molti utenti (anche se non tutti) guarderanno il piè di pagina per un collegamento se non riescono a trovare ciò che stanno cercando nell'altra navigazione. Molte pagine di base sono spesso collegate da un piè di pagina, compresi i collegamenti "about", "contact" e "sitemap", indipendentemente dal fatto che siano collegati altrove nella navigazione o meno.
1. Blog
I blog hanno generalmente un grande volume di contenuti, in ordine cronologico inverso. Questo presenta sia una struttura logica per la tua navigazione, sia alcune sfide uniche, a seconda del tipo di blog.
La maggior parte dei blog utilizza una combinazione di paginazione (o scorrimento continuo), una pagina di archivio, la navigazione nella barra laterale per categorie e / o tag e possibilmente anche la navigazione tra intestazioni e piè di pagina. È importante pensare esattamente a come i tuoi visitatori vorranno accedere ai contenuti del tuo blog.
Ad esempio, un blog personale potrebbe non avere bisogno di navigazione di categorie o tag al di fuori dei link nelle meta informazioni per ogni post. In questi casi, si desidera che i visitatori accedano ai contenuti in ordine cronologico inverso piuttosto che saltare in giro per argomento. Un blog di argomento, d'altra parte, deve avere la navigazione di categorie e tag, perché i visitatori sono probabilmente alla ricerca di informazioni su argomenti specifici all'interno dell'argomento generale.
Come minimo, i blog dovrebbero includere la navigazione per spostarsi cronologicamente attraverso il contenuto (impaginazione, link successivi / precedenti o scorrimento continuo), nonché la navigazione dell'intestazione o della barra laterale per pagine specifiche al di fuori della pagina principale del blog.
I blog di argomento (e talvolta aziendali) dovrebbero includere anche categorie o menu di tag nella loro navigazione, nell'intestazione o nella barra laterale. I blog particolarmente grandi dovrebbero anche prendere in considerazione l'implementazione di una funzione di ricerca, per rendere più facile agli utenti trovare rapidamente esattamente ciò che stanno cercando. Assicurati solo che la funzione di ricerca funzioni come previsto e mostri davvero tutti i risultati pertinenti.
Ecoki , di seguito, include le categorie di livello superiore nella navigazione dell'intestazione, con la navigazione in pagine importanti in una barra di navigazione dell'intestazione secondaria. È un layout efficace che pone chiaramente l'accento sui collegamenti più utilizzati.
2. Siti di notizie
I siti di notizie sono simili ai blog, in quanto generalmente presentano storie in ordine cronologico inverso. I siti di notizie sono spesso altamente classificati e hanno un'architettura di informazioni più complessa rispetto a molti altri tipi di siti. Per questo motivo, i loro schemi di navigazione sono spesso più complessi.
La chiave non sta rendendo la navigazione più complicata di quanto debba essere. I menu a discesa e a tendina sono entrambi buoni modi per gestire i menu più grandi senza ingombrare la pagina. Se guardi i siti di notizie più grandi (come Google News, per esempio, sotto), suddividono le notizie in ampie categorie come Politica, Locale, Mondo, Sport, Spettacolo, ecc. Le categorie che utilizzi dipenderanno dal fatto se il sito è un sito di notizie generali o un sito di notizie di attualità.
I tag possono anche migliorare sostanzialmente la navigazione. Taggando ciascuna storia, è facile per gli utenti trovare storie correlate, senza creare una struttura di categoria complicata o gonfia. È una buona idea non solo includere link di tag in ogni articolo, ma anche includere un elenco di tag o una nuvola di tag da qualche parte (solo includere tag popolari può essere una buona idea per i siti con centinaia di tag).
Il collegamento in linea all'interno degli articoli migliora notevolmente l'esperienza dell'utente. Molti dei più grandi siti di notizie lo fanno, consentendo agli utenti di accedere immediatamente a tutti gli articoli su un argomento. È molto simile a includere tag, ma piuttosto che una lista all'inizio o alla fine dell'articolo, i collegamenti sono all'interno del testo stesso.
3. Siti di e-commerce
I siti di e-commerce sono a volte incredibilmente complessi e hanno centinaia (o migliaia) di pagine individuali per prodotti e altre informazioni. Per questo motivo, il modo in cui viene gestita la navigazione è vitale sia per l'esperienza dell'utente che per la linea di fondo. Senza un'eccellente struttura di navigazione, i visitatori di un sito di e-commerce avranno difficoltà a trovare i prodotti che stanno cercando, il che significa che ci sono buone probabilità che si rivolgano ai concorrenti per la frustrazione.
La cosa principale di ogni sito di e-commerce con più di una manciata di prodotti ha bisogno di un buon sistema di ricerca. La ricerca assistita è la chiave, in cui gli utenti possono effettuare ricerche non solo per parole chiave, ma anche perfezionare i risultati in base a fattori quali prezzo, dimensioni, categoria o altre metriche (a seconda dei prodotti specifici).
Anche la navigazione di categoria è indispensabile per gli utenti che desiderano navigare. A seconda che si utilizzino sottocategorie, la navigazione con breadcrumb può anche essere una buona idea (se il tuo sito ha più di due o tre livelli di profondità, i breadcrumb possono migliorare l'usabilità).
Offrire ai visitatori più modi per trovare i prodotti che desiderano è un ottimo modo per aumentare le vendite, ma assicurarsi che ogni metodo mostri tutti i prodotti pertinenti. Se i visitatori scoprono che la ricerca restituisce un set di prodotti durante la navigazione restituisce un set diverso, causerà solo frustrazione.
Il Blik il sito web, di seguito, è un ottimo esempio di un sito che utilizza una barra laterale con filtri per rifinire i risultati del prodotto. È il modello di ricerca guidato, senza l'aspetto della ricerca.
4. Siti informativi e di riferimento
I siti di riferimento hanno in genere una cosa in comune: una tonnellata di informazioni su molte pagine. Questo rende difficile creare qualsiasi tipo di menu standard. Le categorie possono essere utili per la navigazione, ma quando si inizia ad arrivare al punto di avere migliaia, decine di migliaia o persino milioni di pagine (come Wikipedia), il sistema di categoria si rompe. Inoltre, molte persone visitano siti per uno scopo specifico e non per navigare, rendendo le categorie non particolarmente utili.
È fondamentale che i siti di riferimento abbiano eccellenti capacità di ricerca. Anche la ricerca guidata, molto simile a quelle utilizzate nei siti di e-commerce, può essere utile, specialmente se utilizzata in combinazione con una buona organizzazione di tagging e categoria.
È ovvio che Reference.com , sotto, vuole che i visitatori usino la ricerca per trovare quello che cercano, dato che è posizionato in alto nella parte superiore dello schermo.
Le pagine su un sito di riferimento dovrebbero inoltre utilizzare il collegamento in linea alle informazioni correlate. Ciò consente ai visitatori di trovare facilmente tutto il materiale di cui hanno bisogno per capire cosa stanno leggendo, senza dover eseguire più ricerche. La necessità di collegamenti in linea è il motivo per cui le piattaforme wiki hanno generalmente una sintassi standard per il collegamento all'interno del testo di un articolo, in modo che i creatori di contenuti non debbano dedicare il tempo a cercare i collegamenti pertinenti.
Wikipedia , di seguito, e altri siti wiki fanno buon uso del collegamento in linea per aggiungere il contesto agli articoli.
5. Siti aziendali
C'è un'enorme varietà nella struttura e nella dimensione dei siti aziendali. Alcuni sono semplicemente per attirare nuovi clienti. Altri sono creati per mantenere aggiornati i clienti attuali. Altri ancora devono servire sia come attrattiva per i nuovi clienti, un portale di notizie per i clienti esistenti e il front-end per una intranet aziendale.
Indipendentemente dallo scopo del sito aziendale, la navigazione chiara è fondamentale. Non vuoi che gli utenti debbano passare il tempo a cercare la tua navigazione o cercare di capire quale link fare clic per ottenere dove devono andare. Assicurati che i link siano sistemati logicamente, che ognuno di essi abbia un significato facile da capire e che si trovino in luoghi logici (l'intestazione e la barra laterale sono i tuoi amici qui).
Tutti i seguenti siti mostrano che solo perché la navigazione si trova nei luoghi più comuni, non significa che non possa essere creativa. Finché è utilizzabile e facile da trovare, sentiti libero di creare qualcosa di unico.
In siti più grandi di una dozzina di pagine, è una buona idea includere funzionalità di ricerca. È anche consigliabile includere una mappa del sito per facilitare gli utenti che hanno problemi con la normale navigazione per trovare esattamente quello che stanno cercando.
6. Siti di community o social network
Generalmente con grandi siti di social network, la ricerca è il mezzo principale di navigazione. Ha senso quando ci sono milioni (o anche miliardi) di pagine sul sito. La navigazione standard basata su menu è praticamente inutile quando si ha a che fare con quel volume di informazioni.
Quindi la ricerca si occupa della navigazione generale del sito. Ma questo lascia comunque le pagine dei profili dei membri. Qui è importante che ci sia coerenza su tutto il sito. Indipendentemente dal fatto che il tuo sito consenta ai membri di personalizzare i loro profili o meno, è imperativo che i link si trovino nello stesso posto in ogni pagina.
Prendi Facebook, ad esempio: ogni profilo membro e ogni pagina ha collegamenti a cose come foto e informazioni sul lato sinistro. Le notifiche, i messaggi e le richieste di amicizia sono sempre collegati in alto, così come i link alle impostazioni dell'account e la disconnessione. Una barra di navigazione in alto standard come quella, che si collega sempre all'account e alle informazioni del visitatore è diventata un pilastro di social network ben progettati.
Anche i collegamenti in linea dovrebbero essere coerenti. Ad esempio, ogni volta che un nome utente viene visualizzato come collegamento, è necessario collegarlo al profilo dell'utente, indipendentemente dal contenuto a cui è associato. Pensa attraverso quali informazioni dovrebbero collegarsi logicamente a quali pagine, e poi assicurati che sia coerente a prescindere da dove questi link si presentino.
7. Siti di eventi
I siti degli eventi sono generalmente semplici e non hanno un numero enorme di pagine. Ma è importante pensare a come i tuoi visitatori useranno il sito. È molto probabile che vogliano fare una delle seguenti cose: iscriversi all'evento, vedere chi partecipa o parla, ottenere informazioni sulla partecipazione (compresi costi e cose come hotel location e area) e vedere il programma per l'evento.
Iscriversi all'evento, anche se si tratta di un evento gratuito, dovrebbe essere considerato una transazione di e-commerce. Per questo motivo, desideri un pulsante di chiamata in primo piano per le iscrizioni.
L'intestazione standard e / o la barra laterale di navigazione sono una scelta eccellente per i collegamenti ad altre pagine. La navigazione locale potrebbe anche essere necessaria se intendi includere singole pagine per attività come workshop o oratori specifici. I menu a discesa o a comparsa possono funzionare in questo caso solo se si dispone di un numero limitato di collegamenti secondari. In caso contrario, è meglio usare la navigazione secondaria in una barra laterale o all'interno di una pagina principale.
Il Hull Digital Live 10 sito web ha una navigazione intestazione concisa, facile da usare che rende facile trovare esattamente ciò che un visitatore potrebbe essere alla ricerca.
Suggerimento: se il sito dell'evento include un'area dei partecipanti o una rete intranet, consulta i suggerimenti per la navigazione su un social network o sito della comunità per le linee guida sulla navigazione.
8. Rivedi i siti
I siti di recensioni sono generalmente utilizzati in due modi. Il primo è quando gli utenti sono interessati a un prodotto specifico e vogliono vedere recensioni per quell'articolo. In questo caso, un'ottima funzione di ricerca è la migliore navigazione. Permette agli utenti di accedere rapidamente al prodotto che stanno cercando.
Il secondo utilizzo è la ricerca di determinati tipi di prodotti. Per questo uso, la ricerca è ancora un metodo di navigazione valido. Ma le categorie e la ricerca guidata sono altrettanto importanti. Consentendo agli utenti di sfogliare le recensioni per categoria e sottocategoria, è possibile trovare una varietà di prodotti adatti alle loro esigenze. Inoltre, consentendo loro di perfezionare quei risultati basati su cose come il prezzo o il marchio, consente un'esperienza utente ancora migliore.
Blippr , di seguito, include sia la navigazione di categoria (con menu a discesa per la navigazione secondaria) sia una barra di ricerca prominente.
9. Siti personali
I siti personali sono davvero le wild card del mondo del web design. Puoi usare praticamente qualsiasi tipo di modello di navigazione che desideri. I mainstays come l'header e la barra laterale di navigazione saranno comunque i più utilizzabili, ma non c'è niente di sbagliato nel fare qualcosa di completamente diverso.
I siti personali dovrebbero essere un riflesso del proprietario del sito. Se qualcosa di inaspettato si inserisce nella personalità del sito, allora con tutti i mezzi: provaci. Tuttavia, può essere comunque una buona idea includere un link alla sitemap da qualche parte, se si utilizza la navigazione non standard, per rendere più facile per i visitatori che non "ottengono" la ricerca di ciò che stanno cercando.
Daniel Mall's la pagina del portfolio ha uno dei modelli di navigazione più esclusivi che abbia mai visto. È facile da usare pur rimanendo molto diverso dalla norma.
10. Gallerie
Gallerie di immagini e i siti di portfolio dovrebbero generalmente utilizzare una combinazione di standard di navigazione o sidebar, tagging e categorie. Consentire ai visitatori di restringere le immagini visualizzate in base a un tag o una categoria è importante per una buona esperienza utente, specialmente quando il volume delle immagini aumenta.
Anche la paginazione sarà vitale per i siti più grandi. Lo scorrimento continuo può sembrare una buona idea, ma poiché gallerie e siti di portfolio, per la loro stessa natura, sono pieni di media, lo scorrimento continuo può finire con l'utilizzo di molte risorse di sistema. Ti consiglierei contro di esso per qualsiasi sito con più di qualche dozzina di immagini (anche se su siti di gallerie e portfolio più piccoli può essere davvero un bel tocco).
Mostra minima usa categorie, ricerca e impaginazione.
Il take-away
Se esiste un concetto di navigazione che è assolutamente necessario indipendentemente dal tipo di sito che si sta progettando, è questo: coerenza!
Puoi farla franca con la maggior parte delle opzioni di navigazione logica purché sia coerente nell'intero sito. Non iniziare con la navigazione della barra laterale per metà del sito e la navigazione dell'intestazione per l'altra metà, senza alcun motivo logico per farlo. Se il collegamento home è sempre in alto a sinistra, assicurati che rimanga in alto a sinistra. Questo vale per ogni elemento della tua navigazione e diventa esponenzialmente più importante con l'aumentare delle dimensioni del sito.
Oltre alla coerenza, la cosa più importante da fare quando si progettano i propri schemi di navigazione è pensare a come i visitatori utilizzeranno effettivamente il tuo sito. Non temere i test A / B o multivariati per scoprire se i tuoi schemi di navigazione funzionano effettivamente come dovrebbero.
Indipendentemente da quanto fresca o nuova sia la tua navigazione, se non esegue la sua funzione di base di consentire ai visitatori di spostarsi da un'area del tuo sito a un'altra nel modo in cui lo desiderano, la tua navigazione non è riuscita.
Sentiti libero di condividere esempi di fantastici schemi di navigazione in azione nei commenti qui sotto! Fateci sapere se avete altri suggerimenti per modelli di navigazione adatti per tipi specifici di siti.