Modelli di navigazione essenziali nel 2016
Il menu di navigazione crea o interrompe l'UX del tuo sito Web, che è ciò che dovresti principalmente progettare in ogni momento. Non esiste un servizio migliore che puoi fornire ai tuoi clienti come designer piuttosto che assicurarti che i siti che crei per loro vantino un'esperienza utente straordinaria e altamente funzionale.
Una splendida UX garantisce che i siti dei tuoi clienti ricevano più contatti, visitatori e lettori, senza dimenticare i visitatori abituali. È la parte più importante della creazione di un sito, e hai un grande controllo su di esso in base alla progettazione del menu di navigazione del tuo sito.
Sfortunatamente, non tutti i designer attribuiscono un'alta priorità alla progettazione per un'eccellente navigazione, il che rende un disservizio ai clienti e ai visitatori.
Per creare una reputazione molto credibile come designer e per essere un designer in-demand, è necessario padroneggiare uno degli aspetti più basilari del web design. Ciò sta creando una navigazione stellare per i siti dei tuoi clienti.
Ecco come.
Navigazione appiccicosa
Navigazione appiccicosa è un componente essenziale della navigazione poiché consente agli utenti di accedere istantaneamente al menu e trovare facilmente ciò che desiderano sul tuo sito. La navigazione appiccicosa rimane bloccata in posizione mentre gli utenti scorrono lungo una pagina. Non c'è niente di più frustrante, specialmente nel caso di pagine a scorrimento lungo, piuttosto che dover scorrere di nuovo verso l'alto per passare a un'altra pagina del sito.
Ricorda che, sul Web, la velocità è tutto (caricamento di pagine, ricerca di contenuti desiderati, ecc.) In modo da consentire agli utenti di accedere più rapidamente al menu di navigazione.
Includendo una barra di navigazione appiccicosa, stai anche aiutando a ridurre il carico cognitivo sui tuoi utenti mettendo costantemente le loro opzioni di navigazione di fronte a loro.
Stampa alternativa offre un buon esempio di come incorporare la navigazione appiccicosa nelle tue pagine. Nota come tutte le sezioni più importanti siano facilmente accessibili e identificabili, mediante un efficace contrasto di colori, nella barra di navigazione, indipendentemente dalla distanza di scorrimento della pagina.
Ipertesto ovvio
L'ipertesto è qualsiasi riferimento di testo sulle tue pagine che gli utenti possono fare clic per ottenere informazioni aggiuntive, di solito su un'altra pagina, sia che si trovino sullo stesso sito o fuori sede. I collegamenti ipertestuali sono probabilmente l'esempio di ipertesto più identificabile.
Dal momento che l'ipertesto contiene informazioni che aiuteranno l'utente a fornire ulteriori informazioni, è ovvio che tali riferimenti utili siano resi molto evidenti. Complessivamente, ciò aumenta la navigabilità del sito che costruisci.
Consiglio di rendere l'ipertesto sfacciato da due semplici funzionalità di progettazione:
- sottolineatura
- Cambiare il colore
Quando sottolinei qualsiasi parola sul contenuto della tua pagina, diciamo che si tratta di un collegamento ipertestuale alla pagina del tuo cliente, attira immediatamente l'attenzione dei visitatori del sito, che li aiuta a navigare con informazioni importanti con maggiore facilità.
Allo stesso modo, quando rendi il colore dei collegamenti ipertestuali diverso dal testo e dallo sfondo delle tue pagine, di nuovo lo fai risaltare sulla pagina, in modo che gli utenti possano identificarlo facilmente e fare clic su di esso.
Sito di marketing The Daily Egg usa sia la sottolineatura che i colori differenti per il suo ipertesto, rendendo molto facile agli utenti l'identificazione dei collegamenti.
Mega menu
Mega menu sono una grande idea per la navigazione, soprattutto se il sito che stai progettando per il tuo cliente ha molti contenuti e categorie. i negozi di e-commerce vengono in mente. Questi sono essenzialmente enormi pannelli a discesa che aprono ulteriori livelli di navigazione per aiutare gli utenti a trovare in modo specifico ciò che vogliono più rapidamente.
Tali menu migliorano l'esperienza dell'utente includendo vantaggi come:
- eliminazione dello scrolling;
- tooltip;
- strutturazione ordinata del contenuto tramite icone, layout o tipografia.
Tutto sommato, queste funzionalità rendono molto più semplice l'utilizzo del menu di navigazione.
Per un esempio solido di un mega menu, vai a Rete alimentare Il sito Si noti come il menu a comparsa visualizzi uno dei contenuti più ricercati del sito, le ricette, in un formato di facile visualizzazione che consente agli utenti di scegliere immediatamente dove desiderano andare invece di scorrere o impaginare per ulteriori opzioni.
Considenze di pattern e linguaggio
L'acquisto di un modello utilizza un simbolo convenzionale che la maggior parte dei visitatori del sito capirà immediatamente, ad esempio un'icona della casa per rappresentare la home page del sito. Un'abitudine linguistica è l'uso esplicito di una parola, come "casa", per chiarire che facendo clic su questa scheda si accederà agli utenti della home page del sito.
Le comunicazioni comunicano agli utenti come possono interagire con gli elementi del tuo design. Mentre questo è certamente Design Basics 101, è ancora importante da praticare oggi come lo era agli albori di Internet.
Un menu di navigazione funzionale dovrebbe avere il simbolo della casa o la parola "home" posizionata nella prima scheda di navigazione sulla sinistra. Mentre alcuni designer possono invece optare per includere un logo aziendale come icona o pulsante "casa", ciò lascia comunque troppo spazio per l'errore dell'utente.
eTailer Frame Warehouse dimostra questo principio di design a un tee, con il suo uso di "casa" per non lasciare dubbi su dove quella scheda porterà i visitatori del sito.
Tempo di caricamento veloce
Velocità = ottima esperienza utente. I progettisti di tutte le strisce dovrebbero considerarlo una delle regole progettuali più importanti che semplicemente non possono e non dovrebbero relegare. Secondo Wired Magazine quasi il 50% degli acquirenti desidera caricare la pagina media in due secondi o meno! In altre parole, se le pagine che progetti per i tuoi clienti impiegano più di due secondi per caricarle ... ci sono davvero buone possibilità che lascino i siti dei tuoi clienti e non tornino mai più, causando così gravi incubi di conversione.
Questa è una statistica preoccupante, certo, ma c'è qualcosa che i designer possono fare al riguardo per garantire che forniscano prestazioni di pagina di alta qualità ai loro clienti. Basta testare la velocità della pagina delle pagine che disegni. Esistono numerosi strumenti affidabili che consentono di determinare i tempi di caricamento della pagina:
Per un esempio di un tempo di caricamento molto veloce della pagina, andiamo a Enchanted Learning Che cosa è una balena? pagina. Il design potrebbe usare del lavoro, ma la pagina si carica in poco più di un secondo, secondo la barra degli strumenti di analisi di Alexa.
La grande navigazione è ottima UX
Una parte enorme di una grande esperienza utente è la navigazione del tuo sito. È la base su cui poggia l'intera esperienza utente, se ci pensi veramente. Quando i tuoi utenti non riescono a trovare facilmente la direzione del sito del tuo cliente, allora diventa frustrante per loro, causando loro di andarsene di fretta. Pertanto, una navigazione eccellente dovrebbe rendere facile per le persone utilizzare qualsiasi sito creato; questo è il punto di riferimento di una bella esperienza utente.
Mentre può essere allettante dare alla navigazione la scarsa attenzione nelle fasi di progettazione - a causa delle nuove tendenze del design che spuntano continuamente - non è consigliabile. I tuoi utenti noteranno, così come i tuoi clienti. Per soddisfare i tuoi clienti, devi soddisfare i loro utenti. Puoi farlo solo quando progetti per una grande esperienza utente prima di tutto, con un'enfasi primaria su come ottenere la navigazione fin dall'inizio.