È finita l'era dei menù al passaggio del mouse? Potrebbe essere. Questo modello di progettazione non funziona per gli utenti di oggi. Il concetto è goffo e non sempre si traduce bene in schermi più piccoli.
Gli utenti vogliono i menu e le opzioni di navigazione che sono più facili da usare, semplici da comprendere e non offrono più opzioni di quante possano pensare in pochi secondi. I menu di navigazione dovrebbero essere indipendenti dal dispositivo e funzionare allo stesso modo, creando un'unica esperienza, su tutti i tipi di dispositivo. Quindi cosa puoi fare per dire addio a quei menù a tendina? Abbiamo cinque alternative.
1. Pannelli scorrevoli
Non importa quanto ti piaccia la tua pergamena, usare effetti di scorrimento come la parallasse o i pannelli per guidare gli utenti verso una parte diversa del sito è uno stile di navigazione efficace. Mentre molti di noi (incluso me stesso) hanno dato alla pergamena alcuni anni fa, lo schermo più piccolo ha aiutato gli schemi di scorrimento a riemergere come funzionalità altamente utilizzabile su tutti i tipi di dispositivi.
Gli utenti non hanno paura di spostarsi verso il basso nella pagina, in modo da non dover stipare ogni link o bit di informazioni su quella prima schermata. Utilizza HTML5 a tuo vantaggio e crea un sito che rende la navigazione parte di un'esperienza utente coinvolgente. (Così coinvolgente, infatti, che gli utenti potrebbero anche non riconoscere la navigazione per quello che è.)
Per farlo funzionare, devi fare molto di più che creare una lunga pagina con una serie di link. Il design deve venire con impatto. Indirizza gli utenti su ciò che stai facendo. Creare una separazione visiva con il colore tra gli schermi? e include ampie aree cliccabili che indicano agli utenti esattamente dove andranno dopo.
Se ritieni che alcuni utenti potrebbero aver bisogno di un menu più tradizionale in stile mappa del sito, prova a rimuoverlo nel footer. Finirai con un design più snello e continuerai a mantenere gli elementi collegabili in un'unica posizione per gli utenti della vecchia scuola.
2. Hamburger nascosti
Prima di saltare nel? Odio le icone degli hamburger? rant, pensaci per un momento. Piaccia o no, questo ha una piccola icona si è trasformato in un simbolo di un pop out, swing down o menu altrimenti nascosto. Gli utenti sembrano capirlo. E mentre molti designer sembrano detestarlo, probabilmente finirai per usarlo comunque.
Quindi smettila di combatterlo.
Piuttosto, lavora per sviluppare metodi migliori per incorporare l'icona nel tuo schema di navigazione generale. Sto scavando completamente icone di hamburger che si aprono in menu minimalisti a schermo intero in questo momento, come la Trivium Art History, sopra.
Il trucco qui è la semplicità. Il menu è in grassetto, offre agli utenti solo poche scelte ed è facile da usare su qualsiasi dispositivo. Chi ha bisogno di dozzine di opzioni di menu, comunque? Una parte significativa degli utenti atterrerà sul tuo sito web da un motore di ricerca su una pagina interna; il numero di utenti che digitano direttamente l'URL e quindi passa attraverso la navigazione sul sito si sta riducendo sempre.
3. Navigazione in stile scheda
Carte, carte e altre carte. Sembra che i progettisti (e gli utenti) ne abbiano abbastanza. Quindi, perché non rendere le carte la tua opzione di navigazione / menu preferita?
Inizia con un modello di scheda sulla home page che è un'esperienza a schermo intero. Ogni carta quindi porta gli utenti in una parte diversa del sito. L'idea è così semplice e intuitiva che ogni utente dovrebbe essere in grado di navigare nel flusso e trovare ciò che sta cercando con facilità.
Come bonus aggiuntivo, le carte reattive quindi? Cadono in posizione? sugli schermi dei dispositivi mobili in modo che l'esperienza sia simile su tutte le piattaforme. (Gli utenti ti ameranno per questo.)
Per mescolare il design, pensa al di fuori della scatola con l'interfaccia in stile carta. Mescola diversi stili di carte - testo, immagini, video - in modo che gli utenti siano attratti a guardare attraverso lo schermo e interagire con più elementi. Katvig, in alto, fa un buon lavoro di incorporare più stili di carte, colori e semplici animazioni per attirare l'attenzione su elementi specifici.
4. Menu appiccicosi
Semplice e utilizzabile. I menu permanenti sono un modo semplice per aiutare gli utenti a spostarsi attraverso il tuo sito. Crea una semplice struttura di menu con solo alcuni elementi importanti e assicurati che l'elemento appiccicoso trovi e si blocchi in una posizione specifica sullo schermo.
La maggior parte delle volte queste barre dei menu sono grandi e poi collassano in una versione più piccola della parte superiore dello schermo su ogni pagina. (È difficile diventare più user-friendly di questo.)
Il sito Bloomberg Mayors Challenge fa un ottimo lavoro con il suo menu appiccicoso. La posizione del menu si sposta da metà schermo alla parte superiore della home page (e su tutte le pagine di menu di primo livello), fornendo interesse visivo e attenzioni con tutte le altre pagine del sito. Inoltre, il menu offre alcune altre cose che gli utenti potrebbero desiderare, come le icone dei social media per un accesso rapido e un rapido selettore delle modifiche per la lingua.
Questa semplice soluzione è una delle cose più facili da usare che puoi fare. Questo è il motivo per cui i menu appiccicosi sono una caratteristica di vendita popolare per molti? temi del sito Web. (È piuttosto sorprendente che più siti non li usano).
5. Menu laterale verticale
È una caratteristica popolare per due dei siti più popolari al mondo - Twitter e Facebook - ma non molti altri siti Web sfruttano la navigazione del menu laterale verticale. Forse è ora di iniziare.
Entrambi i siti di social media inseriscono elementi importanti in elementi di navigazione paralleli. La sottile colonna verticale è ideale per contenere molte semplici informazioni di testo e rendere le cose facili da vedere a colpo d'occhio.
La scelta di un menu a sinistra o a destra dello schermo dipende da te. (Ci sono pro e contro con entrambe le opzioni.) Ci penserei in termini di come la navigazione funziona con altre immagini. Il resto del sito ha un tiro direzionale da una parte o dall'altra? Le immagini dominanti potrebbero portare l'utente a guardare la navigazione? Pensa agli elementi insieme in un modo ampio per creare pezzi che lavorino insieme per un tocco singolare e unificato.
5 fantastiche risorse
- Ebook su best practice per la progettazione dell'interfaccia utente Web
- Frammenti CSS: semplice navigazione orizzontale
- ? Dropdowns dovrebbe essere l'interfaccia utente di ultimo resort? e come creare forme migliori
- Esempi di navigazione reattiva NavNav
- ? 10 Modelli di menu HTML stupefacenti da scaricare?
Conclusione
I modelli di navigazione e gli stili di menu sono una parte in evoluzione del design del sito Web, ma molte delle tendenze sono più lente da sviluppare rispetto ad altri luoghi. Ciò potrebbe essere dovuto alla complessità nella progettazione di stili diversi per questo elemento essenziale o alla cautela dei progettisti che si trattengono per vedere quali risultati risultano più accettabili per gli utenti.
La lezione qui è questa: la navigazione semplice è migliore. Se usi elenchi ingombranti e schiaccianti, è tempo di cambiare. Fallo.