3 regole essenziali per un design di navigazione efficace
Progettare la navigazione del tuo sito web è come gettare le basi per la tua casa. La mancata pianificazione corretta della tua fondazione potrebbe mettere a rischio il tuo edificio di crollare, indipendentemente da quanto sia bello. Se desideri beneficiare delle migliori vendite o conversioni possibili dal tuo sito, devi dedicare del tempo a pianificare in che modo il tuo pubblico interagirà con i tuoi contenuti e capire il modo più intuitivo di organizzarlo e rappresentarlo.
Ricorda sempre, se ottieni questa parte in modo sbagliato, rischi di alienare una larga parte del tuo pubblico.
Cos'è la navigazione?
C'è più di un modo di guardare la navigazione. Potresti dire che è un elemento focale sul tuo sito Web che consente ai tuoi clienti di trovare ciò che stanno cercando senza confusione o clic non necessari. Allo stesso modo, potresti sostenere che è un modo per guidare gentilmente i tuoi clienti verso le informazioni più importanti sul tuo sito, al fine di generare vendite o richieste di informazioni.
Le probabilità sono entrambe.
Il design della navigazione è come molte altre cose nel design: non esiste un "modo giusto" universalmente concordato per farlo. Ogni sito presenta le proprie sfide, che possono essere affrontate in vari modi. La buona notizia è che ci sono modi di pensare e organizzare contenuti che riducano al minimo il rischio di fallimento.
Il sito di 70percentpure dispone di una navigazione semplice che è sia verticale che orizzontale.
1) Per prima cosa finalizza la tua IA
Pianificare il contenuto per un sito Web di grandi dimensioni è un'attività essenziale che deve essere completata prima di progettare la navigazione. Altrimenti nota come IA (Information Architecture) questa panoramica, comprensione e manipolazione dei tuoi contenuti è ciò che costituisce la spina dorsale dell'usabilità del tuo sito web. Progettare la navigazione prima - o invece di - progettare correttamente la tua IA sarebbe come creare un indice prima di comporre le pagine. Non è una buona idea.
Una naturale capacità di vedere l'immagine grande aiuta quando si lavora su IA. Ancora più importante, devi essere in grado di vedere il contenuto dal punto di vista dell'utente. A volte questo significa andare contro il modo stesso del cliente di categorizzare il loro contenuto - quindi preparati a resistere se è il caso.
Ecco alcune cose che puoi chiedere a te stesso per aiutarti a preparare il tuo schema e giustificarlo al cliente:
- Quali pagine sono necessarie per questo sito?
- Ogni pagina ha uno scopo all'interno di uno schema più ampio ed il contenuto è suddiviso in parti sensibili e relazionabili?
- Quali indennità devono essere fatte per aggiungere contenuti in futuro?
- Con quali gruppi di utenti stai lavorando? (es. login / out, tipi di abbonamento, inserzionisti, ecc.)
- Qual è l'obiettivo principale per ogni tipo di utente?
Rispondere a quanto sopra e capire in che modo il contenuto si relaziona con i tuoi utenti è fondamentale per una buona progettazione della navigazione.
2) BACIO: Keep it simple, a volte
Chiunque abbia mai usato un sito Web può probabilmente concordare: un'area di navigazione dovrebbe essere il più semplice possibile. Schiacciare l'utente con scelte e affollare la navigazione con il testo è una cattiva idea e ostacolerà seriamente l'usabilità generale del tuo sito web.
La semplice navigazione di Bloomberg smentisce la complessità delle informazioni sul loro sito.
Eppure, la semplicità può essere ingannevole. Scava più in profondità e potresti scoprire che ciò che è in realtà piuttosto complesso è stato abilmente confezionato in un modo che sembra semplice. Questa è IA in azione.
Prendi ad esempio la home page di Microsoft. La loro navigazione principale ha solo quattro elementi, che suona come non abbastanza, considerando la loro gamma di prodotti. Ma i menu a discesa sono suddivisi in sezioni molto intelligenti e presentati in modo tale da poter trovare ciò che stai cercando in modo rapido e semplice.
Le sotto pagine sono come mini-siti, seguendo lo stesso formato di navigazione. Il menu si sente e si comporta allo stesso modo, ma si adatta per offrire più dettagli più approfondisci nel sito.
È facile da usare, prevedibile e coerente. Considerando la loro gamma di prodotti e il numero di pagine sul loro sito Web, questo non è un'impresa da poco, ed è ovviamente il prodotto di molte ore di sviluppo iterativo. Non solo si sente come uno dei loro prodotti - che è molto rassicurante per il visitatore - ma organizza il contenuto in un modo che è buono per entrambi i clienti e Microsoft stessi.
3) Scegli attentamente l'orientamento
Dato che lo schermo di un computer è tradizionalmente utilizzato in un formato orizzontale, la navigazione orizzontale ha molto senso. Per la maggior parte del tempo sembra semplicemente più equilibrato, meno invadente e facile da collocare in una prospettiva di progettazione.
Oculus, i produttori di cuffie VR sarebbero folli se non parlassero dei loro paesaggi virtuali con un menu orizzontale. Non solo porta una bella metafora, ma consente all'utente di approfondire il contenuto scorrendo la pagina verso il basso.
Tuttavia, i menu orizzontali non aggiungono valore in ogni contesto, motivo per cui vedrai un sacco di navigazione verticale, in particolare nell'e-commerce. Trasporta gli echi delle schede colorate che aiutano a trovare i prodotti in un catalogo fisico, evitando di ingombrare una barra orizzontale con troppo testo e troppe opzioni.
Una buona navigazione verticale non è un'impresa facile, soprattutto se si hanno molti prodotti. Questo è il motivo per cui mi piace questo di Jack Jones.
Le icone accanto al testo facilitano davvero la leggibilità. Le forme semplici sono sorprendentemente comunicative e aiutano a mantenere l'area di navigazione concentrata e in ordine. Fai clic su una categoria e il menu si espande per mostrare le opzioni secondarie, di nuovo in un modo molto semplice per gli occhi.
Un uso più insolito del menu verticale può essere trovato sul sito di Squarepusher. Qui, la navigazione viene utilizzata come una scheda, al di fuori del contenuto principale, che l'utente può semplicemente scorrere e fare clic. È un approccio molto più lineare e riecheggia la natura sequenziale di una traccia di Squarepusher.
Le regole stanno cambiando
Come per tutte le cose sul Web, nuove tecniche, tecnologie, dispositivi e tendenze portano sul tavolo le proprie sfide e innovazioni. Il web design reattivo significa che un nav orizzontale tradizionale ora è anche un nav verticale (su schermi più piccoli). Le tecniche di parallasse vedono le aree di navigazione riflettono e scorrono come la marea, a seconda di dove ti trovi sulla pagina.
Non esiste un unico modo per creare il navigatore perfetto per il sito. Ma un approccio iterativo di progettazione e test, preferibilmente con l'accesso alle statistiche del tuo sito e ai dati di conversione, potrebbe produrre i migliori risultati.
Essendo il motore che guida il tuo sito web, la tua navigazione dovrebbe essere prevedibile, semplice, coerente e ben posizionata.