Progettare un menu di navigazione vincente Idee e ispirazioni
Il menu di navigazione su un sito Web è come un cartello stradale su una strada o una directory di livello in un centro commerciale. Non puoi raggiungere la tua destinazione senza prima sapere dove ti trovi. Come nella vita reale, la navigazione nel web design è molto importante e gioca un ruolo importante nell'usabilità di un sito web e nell'esperienza dell'utente.
Al giorno d'oggi puoi vedere molti tipi diversi di menu di navigazione con disegni interessanti, creativi e insoliti. Ma che ne dici di una navigazione efficace in un sito web, come sarebbe? come dovrebbe essere?
Oggi vorrei condividere le mie osservazioni e conoscenze sull'importanza della navigazione nel web design. Ti mostrerò alcuni semplici suggerimenti che puoi utilizzare per migliorare la navigazione e l'usabilità del tuo sito web. Ci saranno anche alcuni esempi di menu di navigazione efficaci per darti un'idea di come pianificare il tuo prossimo progetto.
Informazione architettura
La pianificazione della navigazione dovrebbe iniziare con l'architettura delle informazioni. È vitale sedersi e brainstorming sull'architettura delle informazioni di un sito Web. Devi capire che tipo di funzionalità offre il sito web, cosa è più importante e cosa potrebbe essere collocato in livelli più bassi nella gerarchia delle informazioni.
L'architettura delle informazioni include caratteristiche, esigenze degli utenti, sitemap, test e wireframe. Puoi leggere ulteriori informazioni sull'architettura delle informazioni nell'articolo di Cameron Chapman in Information Architecture 101: Tecniche e best practice.
Utilizzo di tecnologie abilitate dall'utente
Evita l'uso di Flash, JavaScript, jQuery o qualsiasi altra cosa che rischi di inibire l'accesso alla navigazione del tuo sito web nella costruzione della barra di navigazione, o almeno assicurati che siano in grado di degradare con grazia.
Per ulteriori riferimenti su degradazione elegante di javascript, controlla questo post su 10 metodi di fallback utili per CSS e Javascript.
Utilizza termini semplici e intuitivi
È meglio usare semplici, ovvi e termini facili da capire che mantenere i termini di settore per il menu di navigazione. Un collegamento che richiede agli utenti più di un secondo o due per capire è probabilmente inadatto per l'uso.
Se un utente deve fare clic su un collegamento per capire a cosa conduce il collegamento, ciò contribuirà a una cattiva esperienza utente per i visitatori.
Esempi
I termini nel menu di navigazione del sito web di Larissa Ness sono facili da capire e abbastanza comuni. Gli utenti non lo troveranno confuso perché hanno già esperienza con menu come questo.
Ecco un altro buon esempio di un menu di navigazione del sito web pulito e chiaro con termini comuni utilizzati, in csupport.
L'agenzia creativa Eighty8Four utilizza il termine "showroom" che può essere fonte di confusione per i visitatori. Questo termine potrebbe significare portafoglio o lavoro, ma non è chiaro e i visitatori non hanno altra scelta che fare clic per verificarlo.
Standardizza il design di navigazione
Utilizza lo stesso modello di navigazione in tutte le tue pagine È molto importante perché senza un design coerente, un utente può effettivamente pensare di trovarsi in un altro sito web. Assicurati di utilizzare lo stesso modello di navigazione in modo che gli utenti possano facilmente andare sul tuo sito Web senza perdersi.
Bluegg, mostrato di seguito, utilizza un design di navigazione semplice e pulito che rimane lo stesso in tutte le sottopagine. L'unica differenza è l'indicatore di colore, che mostra la pagina in cui il visitatore si trova attualmente.
Indica dove sei
È fondamentale far sapere all'utente dove si trova in ogni momento. Puoi farlo da cambiando lo sfondo del link, il colore del nome della pagina o trasforma il testo in grassetto nel menu di navigazione per renderlo diverso dagli altri.
Austin Eastciders usa un colore e uno sfondo diverso per indicare la pagina su cui si trova l'utente. Questo indicatore può anche funzionare come un sottile cambiamento di design, ad esempio utilizzando a sfondo di navigazione diverso che crea la sensazione che altre voci del menu siano approfondite.
Chirurgia dei media usa un colore più scuro come indicatore per una sottopagina aperta. Semplice ma efficace.
Utilizzare le convenzioni Web
Si tratta di una navigazione del sito intuitiva e facile da usare. Le convenzioni Web rendono molto più semplice per i progettisti di aggirare i loro progetti. La maggior parte degli utenti farebbe clic sul logo del sito Web per tornare alla homepage, quindi progettare il logo per farlo.
Se non lo fai, li stai facendo trascorrere del tempo per imparare qualcosa di nuovo o in alcuni casi li disturba non fornendo quelle che si aspettano essere norme di navigazione comunemente accettate.
Puoi saperne di più sulle convenzioni web qui:
- 10 Convenzioni di Web design
- Non reinventare la rotella del Web Design
- Design con convenzioni Web
Iniettare Design posiziona il logo nell'angolo in alto a sinistra che si adatta a una delle convenzioni Web più utilizzate oggi.
Creazione di Adams utilizza una delle convenzioni Web più comuni: il logo è posizionato nell'angolo in alto a sinistra del sito Web e contiene collegamenti alla home page.
Provalo: coinvolgi una terza parte
Verifica sempre la tua progettazione di navigazione con qualsiasi persona che abbia utilizzato Internet in precedenza. Potresti voler portare persone che non erano imparentate con il processo di progettazione per testarlo. Osserva le loro preferenze quando navigano attraverso il tuo sito e analizzare il tempo necessario per trovare le pagine che cercavano.
Per una migliore precisione, coinvolgere più persone, raccogliere i dati, analizzarli e sintetizzarli per una migliore vestibilità. Fai un sondaggio post-test se è necessario. Potresti ottenere idee e input inaspettati che altrimenti non sarebbero rilevati senza questa esecuzione di test.
Fornire contesto
Per essere coerenti con i contenuti e la navigazione, fornire agli utenti del sito un contesto in cui trovare le cose di cui hanno bisogno rapidamente. È possibile posizionare piccole icone relative al contenuto a cui si effettua il collegamento o brevi descrizioni per fornire una panoramica di cosa tratta la pagina.
La mia propria bici utilizza icone semplici per fornire agli utenti ulteriori informazioni su ciò che possono trovare in determinate pagine secondarie.
Sarah Parmenter utilizza sottotitoli brevi e carini sotto la navigazione principale per fornire alcune informazioni sulle sottopagine a cui si sta collegando la navigazione principale.
Scopi di SEO
A Google piace la navigazione coerente. È bene avere una navigazione coerente non solo per gli utenti per capire e avere l'idea di come navigare attraverso il tuo sito web, ma anche per i motori di ricerca per indicizzare il tuo sito web.
I robot dei motori di ricerca scorreranno attraverso il tuo sito web per indicizzare il tuo sito web e inserire i link nella pagina dei risultati dei motori di ricerca. Se vuoi essere visibile, fai attenzione alla buona progettazione della navigazione e ottieni più traffico.
Script di navigazione gratuiti (CSS e jQuery)
Ecco una breve lista dei menu di navigazione più recenti che potresti trovare utili per i tuoi progetti. Questi script renderanno ancora migliore l'esperienza utente del tuo prodotto aggiungendo alcune caratteristiche interessanti e rendendolo piacevole da usare.
Script di script di notizie verticali basato su XML con HTML e jQuery: vScroller
Filtrify
Pagina Scroller
Portafoglio temporale
HorizontalNav
Menu di navigazione minimalista CSS3
Circle Navigation Effect con CSS3
Effetti di navigazione a griglia con jQuery
ascensor
Crea un elegante menu di navigazione CSS3
Vetrina di una bella navigazione orizzontale
E, ultimo ma non meno importante, alcuni interessanti menu di navigazione orizzontale. Controlla questi fantastici siti Web e le loro soluzioni di menu di navigazione per trovare nuove idee per i tuoi progetti.
Ch3mical
Bloom Search Marketing Inc.
Alex Perez
Libor Zezulka
Hauska!
Golden Isles
Neil Carpenter
Marc Thomas
Polistirolo 3D
Liechtenecker
Mondo di avventura
Fotografia Arbutus
OMDRL
4 Pines Birra
Vini dei cacciatori
Spero che troverai questo articolo utile e informativo. Se hai qualche idea o se non sei d'accordo, per favore condividi la tua opinione nella sezione commenti.
