10 sites die verticale navigatie goed doen
De meeste webnavigatiemenu's lopen horizontaal over de pagina. Dit komt voort uit een geschiedenis van traditionele monitoren die breder dan groter zijn.
Maar met zoveel schermruimte is het nu mogelijk voor websites om in plaats daarvan verticale navigatiemenu's te gebruiken. En veel van hen zien er fantastisch uit.
Deze 10 voorbeelden van verticale menu's zijn perfect om te studeren voor de unieke ontwerpstijl en onderscheidende bruikbaarheid.
1. Petersham Nurseries
Op de Petersham Nurseries website vindt u een geneste verticale navigatie. Deze techniek is niet iets dat je heel vaak zult vinden, maar het werkt goed op deze site.
Elke hoofdnavigatie-link gebruikt een pictogram op de achtergrond om de links visueel over te brengen. En de eerste twee koppelingen openen submenu's die naast het primaire menu zijn uitgelijnd. Deze nemen de plaats in van vervolgkeuzemenu's die u doorgaans in horizontale menu's ziet.
Deze site is responsief, dus bij kleinere maten verdwijnen deze links achter een hamburgermenu. Dit creëert een redelijke scheidslijn tussen desktopgebruikers met voldoende ruimte voor verticale links en mobiele gebruikers die het beter doen met een horizontale navigatiebalk.
2. Arbor Restaurant
Een ander zeer uniek voorbeeld is Arbor Restaurant welke een zuivere verticale nav heeft met veel ruimte tussen links. De inhoud wordt weergegeven in een glijdende container die ook verticaal uitgelijnd naast de navigatie.
Deze inhoudstijl is behoorlijk uniek. De meeste verticale nav-sites behouden hun inhoud op één lijn met de hoofdpagina, maar in dit geval kunt u de inhoud eenvoudig weergeven / verbergen. Het voegt een zekere flair toe aan de verticale navigatie, waardoor het momentum van de pagina meegaat met de inhoud.
3. Smokey Bones
Smokey Bones heeft twee dingen die ervoor gaan: geweldig eten en een geweldige website.
Elke pagina gebruikt de lange verticale navigatie aan de linkerkant. Dit is een nietje voor de meeste websites, omdat de meeste westerse lezers content van links naar rechts gebruiken en de linkerbovenhoek de traditionele plaats is voor een sitelogo.
Een toegevoegde functie die ik leuk vind, is het menu-uitklapmenu met alle gerechten van het restaurant. Als u op de koppeling "menu" klikt, ziet u hoe dit ook werkt als een verticaal toegevoegd submenu. Absoluut een cool idee dat goed werkt voor een kleine restaurantsite.
4. Mammoth Media
Als u minder inhoud heeft, kunt u wegkomen met meer off-set navigatiekeuzes. Mammoth Media is een goed voorbeeld met slechts vijf hoofdpagina's op hun site plus een blog.
Een specifiek facet van deze navigatie is de verborgen vervolgkeuzefunctie. Als u op de link "werk" klikt, krijgt u 2 alternatieve links waarop u kunt klikken. Ze worden onder de hoofdkoppeling weergegeven, zodat ze de rol van een kleinere vervolgkeuzelijst hebben.
Zelfs op mobiele apparaten heeft deze navigatie een vergelijkbare stijl. Het is het bewijs dat wanneer je niet te veel links hebt, je echt creativiteit kunt pushen.
5. Amazon
Iedereen en hun oma weten van Amazon. De online winkel heeft een geweldige selectie, maar ze hebben ook een fantastische UI-design met verticale nav-links op productzoekpagina's.
Amazon heeft tientallen categorieën voor elke zoekterm. Dit betekent dat ze een manier nodig hebben om verfijnde zoekfuncties te presenteren zonder de pagina te overbevolken. Verticale navigatie is gewoon logisch omdat ze weg kunnen klappen terwijl ze nog steeds volledig toegankelijk zijn.
Als je een vergelijkbaar soort filternavigatie aan het ontwerpen bent, raad ik zeker aan de strategie van Amazon te bestuderen. Ze hebben hun site tot een absoluut einde gebracht, dus er is voldoende reden om aan te nemen dat hun verticale sorteerkoppelingen goed werken.
6. Corum
Corum's website heeft nog een schone verticale navigatie, met zeer eenvoudige functies. All-caps links, donkere tekst, duidelijke hover-stijlen en een sterk contrast tegen de hoofdpagina.
Dit is een van de grootste aspecten bij het ontwerpen van verticale navigatie. U wilt meestal een sterke scheiding maken tussen de verticale navigatiebalk en de pagina-inhoud. In dit geval is het gedaan met een lichtere achtergrondkleur met het Corum-logo bovenaan.
En gebruikers die reageren op mobiele apparaten krijgen in plaats daarvan een vervolgkeuzemenu dat goed werkt als alternatief voor schermen die langer zijn dan breder.
7. Nua Bikes
Een van de beste manieren om een verticale navigatie te gebruiken, is met een lay-out van één pagina. Informatieve sites zoals Nua Bikes heb niet altijd tientallen pagina's vol met inhoud nodig.
Dus met een verticaal nav-menu is het veel gemakkelijker om met animaties en aangepaste paginagebieden op een bevlogen manier door de inhoud te bladeren. In dit geval past de Nua Bikes-nav op de pagina, omdat deze rechtstreeks is gekoppeld aan alle inhoud op die pagina.
8. Michael Ngo
Een andere site die de verticale trend met één pagina volgt, is Michael Ngo's portfolio .
Het heeft een behoorlijk boeiende afbeelding van de kop die meteen je aandacht trekt en je naar binnen trekt. Maar de inhoud is het interessantste deel omdat het allemaal werkt via 3 verschillende links: thuis, werk en contact.
De nav-links hebben ook hun eigen ondertitels, zodat u kunt zien wat ze doen, zelfs in één oogopslag.
Een ding om op te merken is hoe de nav vast blijft tijdens het scrollen langs de pagina. Hierdoor blijven alle links toegankelijk vanaf elk punt dat cruciaal is in een kleiner verticaal menu.
9. Medienstadt.koeln
De Duitse site Medienstadt.koeln heeft een heel andere kijk op verticale navigatie. Hun navigatiesysteem blijft te allen tijde verborgen achter een hamburgermenu, maar het beslaat nog steeds de volledige hoogte van het scherm.
Het bevat ook meer links dan alleen de typische top horizontale nav. Dit is logisch maar kan voor sommige bezoekers verwarrend zijn.
Wat ik het leukst vind aan de verticale stijl, is hoe het zelfs op desktops weggestopt blijft tot het nodig is.
Toegegeven, er zijn debatten over ontdekkingsproblemen met hamburgermenu's. Maar ik denk dat dit pictogram snel wordt herkend en dit ontwerp is een uitstekend voorbeeld van een verborgen verticale navigatie in actie.
10. Het Metrick-systeem
Het reclamebureau Metrick System houdt hun navigatie eenvoudig en to the point. Het volgt de verticale stijl, maar het is ook veel anders dan alle anderen in deze post.
Ik hou van de verborgen vervolgkeuzelijst die alleen extra links toont wanneer op een primaire link wordt geklikt. Hun "dagboek" -link is een goed voorbeeld. Nieuwe links verschijnen aan de zijkant en verdwijnen met één klik in beeld.
Mobiele gebruikers krijgen een vergelijkbare ervaring, behalve dat deze submenu-links onder de hoofdkoppeling verschijnen. Maar deze nav is zo klein dat hij voor vrijwel elke schermgrootte kan werken.
The Wrap Up
Verticale navigatie werkt het beste op sites die afhankelijk zijn van extra schermruimte. Deze omvatten meestal portfoliosites, restaurants, kleine bedrijven en e-commerce winkels.
Maar ongeacht de site kunt u altijd proberen om een verticale navigatie toe te voegen aan uw ontwerp. En ik hoop dat deze voorbeelden u op weg helpen met enkele geweldige ideeën voor wireframing en mockup-ontwerp.