10 siti che eseguono la navigazione verticale a destra
La maggior parte dei menu di navigazione Web scorre in orizzontale sulla pagina. Questo deriva da una storia di monitor tradizionali che sono più ampi piuttosto che più alti.
Ma con così tanto spazio sullo schermo è ora possibile che i siti web usino invece i menu di navigazione verticale. E molti di loro sono fantastici.
Questi 10 esempi di menu verticali sono perfetti per studiare per lo stile di design unico e l'usabilità distinta.
1. Vivai Petersham
Sul Petersham Nurseries sito web troverai una navigazione verticale annidata. Questa tecnica non è qualcosa che troverai molto spesso ma funziona bene su questo sito.
Ogni collegamento nav principale utilizza un'icona in background per trasmettere visivamente i collegamenti. E i primi due collegamenti aprono sottomenu allineati accanto al menu principale. Questi prendono il posto di elenchi a discesa che si vedono in genere nei menu orizzontali.
Questo sito è reattivo quindi in dimensioni più piccole questi link scompaiono dietro un menu di hamburger. Ciò crea una ragionevole divisione tra gli utenti desktop con spazio sufficiente per i collegamenti verticali e gli utenti mobili che fanno meglio con una barra di navigazione orizzontale.
2. Ristorante Arbor
Un altro esempio davvero unico è Ristorante Arbor che ha un nav verticale pulito con molto spazio tra i collegamenti. Il contenuto viene visualizzato in un contenitore scorrevole che si allinea anche verticalmente accanto alla navigazione.
Questo stile di contenuti è piuttosto unico. La maggior parte dei siti nav verticali mantiene il contenuto allineato alla pagina principale, ma in questo caso è possibile mostrare / nascondere il contenuto con facilità. Aggiunge un certo tocco alla navigazione verticale che mantiene il flusso della pagina che scorre verso il basso con il contenuto.
3. Smokey Bones
Smokey Bones ha due cose da fare: cibo fantastico e un sito web killer.
Ogni pagina utilizza la lunga navigazione verticale fissata sul lato sinistro. Questo è un punto fermo per la maggior parte dei siti Web perché la maggior parte dei lettori occidentali consumano contenuti da sinistra a destra e l'angolo in alto a sinistra è il luogo tradizionale per un logo del sito.
Una caratteristica aggiunta che mi piace è il menu a tendina che elenca tutti i piatti del ristorante. Se fai clic sul link "menu" vedrai come funziona anche come un sottomenu aggiunto verticalmente. Sicuramente un'idea interessante che funziona bene per un piccolo ristorante.
4. Mammoth Media
Quando hai meno contenuti puoi farcela con più opzioni di navigazione insolite. Mammoth Media è un buon esempio che ha solo cinque pagine principali sul loro sito più un blog.
Un aspetto specifico di questa navigazione è la funzione a discesa nascosta. Se fai clic sul link "work", otterrai 2 link alternativi da cui puoi fare clic. Appaiono sotto il collegamento principale in modo che assumano il ruolo di un menu a discesa più piccolo.
Anche sul cellulare questa navigazione segue uno stile simile. È la prova che quando non si hanno troppi collegamenti si può davvero spingere la creatività.
5. Amazon
Tutti e la loro nonna sanno di Amazon. Il rivenditore online ha una selezione incredibile, ma ha anche un fantastico design dell'interfaccia utente collegamenti nav verticali sulle pagine di ricerca dei prodotti.
Amazon ha dozzine di categorie per ogni termine di ricerca. Ciò significa che hanno bisogno di un modo per presentare funzionalità di ricerca perfezionate senza sovraccaricare la pagina. Le navigazioni verticali hanno senso solo perché possono essere ripiegate lateralmente pur essendo completamente accessibili.
Se stai progettando un tipo simile di filtro, ti consiglio di studiare la strategia di Amazon. Hanno ottimizzato il loro sito senza limiti, quindi ci sono molte ragioni per credere che i loro collegamenti di ordinamento verticale funzionino bene.
6. Corum
Corum sito web ha un'altra navigazione verticale pulita, con funzionalità molto semplici. Collegamenti tutti maiuscoli, testo scuro, stili di hover chiari e un forte contrasto con la pagina principale.
Questo è uno degli aspetti più importanti quando si progetta la navigazione verticale. In genere si desidera creare una forte divisione tra la barra di navigazione verticale e il contenuto della pagina. In questo caso è fatto utilizzando un colore di sfondo più chiaro con il logo Corum nella parte superiore.
Inoltre, gli utenti mobili reattivi ricevono un menu a discesa che funziona bene come alternativa per schermi più lunghi di quelli più ampi.
7. Nua Bikes
Uno dei modi migliori per utilizzare una navigazione verticale è con un layout di una singola pagina. Siti informativi come Nua Bikes non sempre hanno bisogno di decine di pagine piene di contenuti.
Quindi con un menu di navigazione verticale è molto più semplice sfogliare i contenuti per capriccio usando le animazioni e le aree di pagina personalizzate. In questo caso il Nav di Nua Bikes si confonde nella pagina poiché è direttamente collegata a tutti i contenuti di quella pagina.
8. Michael Ngo
Un altro sito che segue la tendenza di navigazione verticale a pagina singola è Il portfolio di Michael Ngo .
Ha un'intestazione piuttosto accattivante che cattura immediatamente la tua attenzione e ti attira. Ma il contenuto è la parte più interessante dal momento che funziona attraverso 3 diversi link: casa, lavoro e contatto.
I collegamenti nav hanno anche i loro sottotitoli in modo che tu possa vedere cosa fanno anche a colpo d'occhio.
Una cosa da notare è come il nav rimane fisso mentre si scorre lungo la pagina. Ciò mantiene tutti i collegamenti accessibili da qualsiasi punto che è cruciale in un menu verticale più piccolo.
9. Medienstadt.koeln
Il sito tedesco Medienstadt.koeln ha un approccio abbastanza diverso alla navigazione verticale. La loro nav rimane nascosta dietro un menu di hamburger in ogni momento, ma copre l'intera altezza dello schermo.
Include anche più collegamenti oltre al tipico nav orizzontale superiore. Questo ha senso, ma può essere fonte di confusione per alcuni visitatori.
Quello che mi piace di più dello stile verticale è il modo in cui rimane nascosto anche sui desktop fino a quando non è necessario.
Concesso ci sono dibattiti su problemi di rilevabilità con menu hamburger. Ma penso che questa icona si stia rapidamente riconoscendo e questo design è un eccellente esempio di navigazione verticale nascosta in azione.
10. Il sistema Metrick
L'agenzia pubblicitaria Sistema Metrick mantiene la loro navigazione semplice e al punto. Segue lo stile verticale ma è anche molto diverso da tutti gli altri in questo post.
Mi piace il menu a discesa nascosto che mostra solo collegamenti extra quando si fa clic su un collegamento principale. Il loro collegamento "journal" è un buon esempio. I nuovi collegamenti compaiono lateralmente e scompaiono alla vista con un solo clic.
Gli utenti mobili ottengono un'esperienza simile, eccetto questi collegamenti di sotto-menu visualizzati sotto il collegamento principale. Ma questo nav è così piccolo che può funzionare praticamente per tutte le dimensioni dello schermo.
The Wrap Up
La navigazione verticale funziona meglio su siti che si basano su uno spazio aggiuntivo sullo schermo. Questi includono in genere siti di portfolio, ristoranti, piccole imprese e negozi di e-commerce.
Ma indipendentemente dal sito, puoi sempre provare ad aggiungere una navigazione verticale al tuo progetto. E spero che questi esempi possano farti iniziare con alcune grandi idee per il wireframing e il design di mockup.