Buon anno a tutti i nostri lettori! Oggi daremo un'occhiata a tre principali tendenze di navigazione che domineranno il 2015.
Si potrebbe pensare che abbiamo esplorato ogni possibile variazione della navigazione sul web, eppure vediamo continua esplorazione all'interno di questa nicchia molto specifica. È davvero sorprendente quante varianti di design possano essere applicate ad un modesto elenco di link.
Qui voglio considerare 3 tendenze popolari nel campo della navigazione: prima di tutto l'uso del navicon (o dell'icona dell'hamburger) sta cambiando, in secondo luogo un nuovo approccio usando i menu a schermo intero e infine quello che considero la perfezione del menu a tendina. Entriamo e vediamo questi approcci al lavoro.
Facebook ha il merito di aver reso popolare l'uso dei navicons per nascondere le opzioni di navigazione fuori dallo schermo o fuori dalla tela. Con la nascita di un web design reattivo, la comunità del web design era alla disperata ricerca di una soluzione per la navigazione. Imballare tutto in un pannello di navigazione che si trova fuori dalla tela e passare alla selezione del navicon è stata una soluzione allettante. Sembra che la comunità si sia aggrappata ad essa come una soluzione un po 'facile che sembrava rendere la vita molto più facile per il progettista e lo sviluppatore. Di conseguenza, il navicon è diventato un'opzione per le app e i siti Web mobili.
Recentemente tuttavia, il navicon è finito sotto attacco. In molti di questi dibattiti sembra che un dettaglio cruciale sia omesso. L'industria delle app mobili si sta facilmente spostando dalla navigazione fuori schermo in favore delle opzioni sullo schermo. Questo si verifica quando la tendenza è verso app mirate e monouso. Questo rende la modifica più ragionevole. Al contrario, anche un piccolo sito Web può essere ricco di dozzine, se non di centinaia di link nella navigazione. Prendi ad esempio un sito come sony.com, o anche questo sito. Questi siti hanno esigenze di navigazione che vanno ben al di là di ciò che è possibile con una semplice tabstrip. Per questo motivo mi sembra che i navicons e i menu fuori schermo siano qui per rimanere. Dobbiamo semplicemente essere consapevoli dei loro limiti, potenziali problemi e così via. E, naturalmente, tieni sempre presente l'utilizzo: è un'app mobile o un sito web mobile / responsive. Perché non sono la stessa cosa.
Il sito web dell'agenzia di design Long Story Short è un bell'esempio di come sfruttare il navicon in modo significativo e limitato. Questo sito utilizza il navicon per nascondere l'intera gamma di opzioni di navigazione. Lo fa su entrambe le versioni mobile e desktop del sito. L'uso dei navicons sul desktop è in realtà una tendenza secondaria qui. Ciò che rende questo sito un ottimo esempio dell'approccio è che gli elementi più importanti della navigazione appaiono al di fuori del menu . La home page è un portale per le tre sezioni più importanti del sito. In questo modo il menu nascosto non è la navigazione primaria, ma piuttosto secondaria che riempie gli spazi vuoti.
Il sito di Squarespace è un altro esempio di come utilizzare in modo efficace i menu nascosti. Su questo sito le opzioni di tour e login sono sempre visibili. Mentre circa 23 opzioni di menu in totale sono contenute nel menu a tendina. Sinceramente, l'uso di menu nascosti per consentire il posizionamento delle opzioni di navigazione più importanti è a dir poco geniale. Ho attraversato una fase in cui ero davvero in difficoltà sull'uso dei navicons sul desktop; sembrava un uso mancato della tecnica. Tuttavia, dopo aver visto come i siti lo utilizzano per guidare gli utenti verso gli elementi più critici, non posso fare a meno di amarlo.
Infine, se ti stai lamentando dell'uso dei navicons, o dei menu nascosti non prendi la parola di nessuno per questo. Invece, fai i tuoi test di usabilità per vedere se funziona per il tuo sito. Una buona regola empirica è evitare il dibattito, e andare invece a fare i test.
La seconda tendenza che vorrei osservare è l'uso dei menu di navigazione a schermo intero. Questi menu sono in genere attivati da un pulsante o collegamento di qualche tipo; abbastanza spesso un navicon. La differenza qui è che invece di un piccolo pannello che scorre, la navigazione occupa l'intero schermo. Sul cellulare questo sembra normale, ma sul desktop questo è in realtà un approccio nuovo e interessante.
La navigazione su questo sito è davvero interessante in quanto la sovrapposizione di navigazione offre un sacco di colpi nel menu. Qui hanno le opzioni di menu previste, ma dal momento che è a schermo intero hanno anche spazio per un modulo di contatto completo, informazioni di contatto, link ai social media, un post sul blog recente e un invito all'azione di primo piano.
È interessante considerare che un utente che lancia un menu in qualsiasi momento sta cercando una direzione. Questo lo rende un'ottima opportunità per guidarli verso ciò che vuoi che facciano. In questo caso, vogliono che l'utente si metta in contatto o visiti il loro planner di progetto.
In questo esempio vediamo anche il pattern al lavoro, ma in un modo molto più minimalista. Invece di utilizzare opzioni extra, hanno scelto semplicemente di presentare un elenco molto sintetico delle opzioni di navigazione. Inoltre ottengono punti bonus per l'animazione del navicon in una "x" per chiudere il menu.
Infine, voglio prendere in considerazione il menu a tendina super dimensionato o mega. L'uso di sistemi di menu di grandi dimensioni non è una novità. Quello che trovo interessante è il contenuto inserito al loro interno. Nella mia valutazione delle cose i designer hanno davvero messo questo nuovo spazio al lavoro in modo potente.
Il sito Web Lowes dimostra perfettamente quello che ho in mente. Qui puoi vedere che il sistema di menu è diventato un luogo per i contenuti. Questo contenuto può essere utilizzato per indirizzare il flusso di utenti attraverso il sito. Soprattutto può guidarli verso i contenuti più importanti. La domanda diventa, qual è il contenuto più importante? Forse sono gli articoli più redditizi nel tuo negozio. E in questo modo la navigazione agisce come un venditore che spinge i prodotti più redditizi. O forse è usato per guidare gli utenti verso gli oggetti più popolari.
Un altro sito che utilizza questa opzione in un modo leggermente diverso è il sito web New Balance. Qui i primi tre elenchi a discesa sono di grandi dimensioni, ma sono essenzialmente elenchi di collegamenti. Tuttavia, l'ultima opzione per la creazione di scarpe personalizzate produce il menu a discesa mostrato sopra. Questa opzione di menu è un singolo link. Mi piace che abbiano colto l'opportunità per trasformare questo singolo oggetto in un'introduzione davvero avvincente al contenuto dietro il link.
Queste tre tendenze, sebbene possiamo discuterle separatamente, hanno molti tratti in comune. Tra questi, il principale è il modo in cui la navigazione è cambiata nel corso degli anni. I menu a discesa erano generalmente un elenco organizzato di collegamenti. Per la maggior parte erano piuttosto neutrali in quanto tutte le cose erano presentate allo stesso modo. Ora scopriamo che i sistemi di navigazione sono un modo fondamentale per aiutare gli utenti a raggiungere gli obiettivi desiderabili.
Per me la sfida è chiara. Che dovremmo elevare il nostro modo di pensare alla navigazione e abbracciare davvero l'influenza che ha sull'esperienza nell'uso dei siti web che creiamo. Troppo spesso trovo che la navigazione sia un po 'ripensata. In effetti, dovrebbe essere tra gli elementi più criticamente considerati e raffinati nel design.