Gelukkig nieuwjaar voor al onze lezers! Vandaag bekijken we drie belangrijke navigatietrends die 2015 zullen domineren.
Je zou kunnen denken dat we elke mogelijke variant van de navigatie op het web hebben verkend, en toch zien we een voortdurende verkenning binnen deze zeer specifieke niche. Het is echt verbazingwekkend hoeveel variaties in het ontwerp kunnen worden toegepast op een eenvoudige lijst met koppelingen.
Hier wil ik drie populaire trends op het gebied van navigatie bespreken: eerst hoe het gebruik van het navicon (of hamburgersymbool) aan het veranderen is, ten tweede een nieuwe benadering met menu's op volledig scherm en tot slot wat ik beschouw als de perfectie van het megaluzemenu. Laten we duiken en deze benaderingen aan het werk zien.
Facebook krijgt erkenning voor het populariseren van het gebruik van navicons om navigatie-opties buiten beeld of van canvas te verbergen. Met de geboorte van responsief webontwerp was de webontwerpcommunity wanhopig op zoek naar een oplossing voor navigatie. Alles inpakken in een navigatiepaneel dat niet op canvas staat en binnenkomt bij het selecteren van het navicon was een aantrekkelijke oplossing. Het lijkt erop dat de gemeenschap er als een ietwat gemakkelijke oplossing aan vastliep die het leven veel gemakkelijker leek te maken voor de ontwerper en de ontwikkelaar. Als gevolg hiervan is het navicon een go-to-optie geworden voor mobiele apps en websites.
Recent is het navicon echter aangevallen. In veel van deze debatten lijkt het erop dat een cruciaal detail is weggelaten. De industrie voor mobiele apps verplaatst zich gemakkelijk van de schermnavigatie af ten gunste van de schermopties. Dit komt omdat de trend is gericht op gerichte, single-purpose apps. Dit maakt de wijziging redelijker. In tegenstelling, zelfs een kleine website kan worden verpakt met tientallen, zo niet honderden links in de navigatie. Neem bijvoorbeeld een site zoals sony.com, of zelfs deze site. Deze sites hebben navigatiebehoeften die veel verder gaan dan wat mogelijk is met een eenvoudige tabstrip. Om deze reden lijkt het mij dat navicons en menu's op het scherm moeten blijven. We moeten ons eenvoudig bewust zijn van hun beperkingen, potentiële problemen enzovoort. En houd natuurlijk altijd het gebruik in de gaten: is het een mobiele app of een mobiele / responsieve website. Omdat ze niet hetzelfde zijn.
De website voor ontwerpbureau Long Story Short is een mooi voorbeeld van hoe je het navicon op een zinvolle en beperkte manier kunt gebruiken. Deze site maakt gebruik van het navicon om alle navigatiemogelijkheden te verbergen. Het doet dit op zowel de mobiele als de desktopversie van de site. Het gebruik van navicons op de desktop is hier eigenlijk een hele subtrend. Wat deze site tot een goed voorbeeld van de aanpak maakt, is dat de meest kritische elementen van navigatie buiten het menu worden weergegeven . De startpagina is een portal naar de drie belangrijkste secties van de site. Op deze manier is het verborgen menu niet de primaire navigatie, maar eerder een tweede dat de lege plekken opvult.
De Squarespace-site is een ander mooi voorbeeld van hoe je effectief verborgen menu's kunt gebruiken. Op deze site zijn de tour- en login-opties altijd zichtbaar. Terwijl ongeveer 23 menu-opties in totaal zijn opgenomen in het uitschuifmenu. Eerlijk gezegd is het gebruik van verborgen menu's om de belangrijkste navigatie-opties centraal te stellen, niets minder dan briljant. Ik ging door een fase waarin ik echt op het gebruik van Navicons op de desktop zat; het leek een misser van de techniek te zijn. Maar nadat ik heb gezien hoe sites het gebruiken om gebruikers naar de meest kritieke elementen te leiden, kan ik het niet helpen, maar er dol op zijn.
Tot slot, als je verdriet krijgt over het gebruik van navicons, of verborgen menu's geen woord van de rekening nemen. Voer in plaats daarvan uw eigen gebruikerstests uit om te zien of deze voor uw site werken. Een goede vuistregel is om discussies te vermijden en in plaats daarvan te gaan testen.
De tweede trend die ik zou willen bekijken, is het gebruik van navigatiemenu's op volledig scherm. Deze menu's worden meestal geactiveerd door een knop of een koppeling van een bepaald type; vrij vaak een navicon. Het verschil is dat in plaats van een klein paneel dat naar buiten schuift, de navigatie het volledige scherm overneemt. Op mobiel voelt dit normaal, maar op de desktop is dit eigenlijk een nieuwe en interessante benadering.
De navigatie op deze site is echt interessant omdat de navigatie-overlay veel punch in het menu verpakt. Hier hebben ze de verwachte menu-opties, maar omdat het op volledig scherm is, hebben ze ook ruimte voor een volledig contactformulier, contactinformatie, links naar sociale media, een recente blogpost en een prominente call-to-action.
Het is interessant om te bedenken dat een gebruiker die op elk gewenst moment een menu opent, op zoek is naar richting. Dit maakt het een uitgelezen mogelijkheid om hen te sturen naar wat je wilt dat ze doen. In dit geval willen ze dat de gebruiker contact opneemt met de projectplanner.
In dit voorbeeld zien we ook het patroon aan het werk, maar op een veel minimalistischer manier. In plaats van extra opties in te pakken, hebben ze ervoor gekozen om eenvoudig een zeer beknopte lijst met navigatiemogelijkheden te presenteren. Bovendien krijgen ze bonuspunten voor het animeren van het navicon in een "x" om het menu te sluiten.
Ten slotte wil ik het supergrote of mega vervolgkeuzemenu bekijken. Het gebruik van supergrote menusystemen is niets nieuws. Wat ik wel interessant vind, is de inhoud die erin zit. In mijn beoordeling van dingen hebben ontwerpers deze nieuwe ruimte echt op krachtige manieren ingezet.
De website van Lowes laat perfect zien wat ik in gedachten heb. Hier kunt u zien dat het menusysteem een locatie voor inhoud is geworden. Deze inhoud kan worden gebruikt om de stroom gebruikers door de site te leiden. Het belangrijkste is dat het hen naar de belangrijkste inhoud kan drijven. De vraag wordt, wat is de belangrijkste inhoud? Misschien zijn het de meest winstgevende items in uw winkel. En op deze manier fungeert de navigatie als een verkoper die de meest winstgevende producten pusht. Of misschien wordt het gebruikt om gebruikers naar de populairste items te leiden.
Een andere site die deze optie op een iets andere manier gebruikt, is de website New Balance. Hier zijn de eerste drie dropdowns groot van aard, maar zijn in wezen lijsten van links. De laatste optie voor het maken van aangepaste schoenen produceert echter de vervolgkeuzelijst hierboven. Deze menuoptie is een enkele link. Ik vind het geweldig dat ze van de gelegenheid gebruik hebben gemaakt om van dit ene item een echt boeiende intro te maken voor de inhoud achter de link.
Deze drie trends, hoewel we ze afzonderlijk kunnen bespreken, hebben veel gemeenschappelijke kenmerken. Het belangrijkste hiervan is hoe navigatie door de jaren heen is veranderd. Dropdown-menu's waren over het algemeen een georganiseerde lijst met links. Voor het grootste deel waren ze enigszins neutraal in dat alle dingen gelijk werden gepresenteerd. Nu ontdekken we dat navigatiesystemen een belangrijke manier zijn om gebruikers te helpen bij het bereiken van gewenste doelen.
Voor mij is de uitdaging duidelijk. Dat we ons denken over navigatie moeten verheffen en echt de invloed moeten omarmen die het heeft op de ervaring van het gebruik van de websites die we maken. Al te vaak merk ik dat navigatie een beetje een bijzaak is. In feite behoort het een van de meest kritisch overwogen en verfijnde elementen in het ontwerp te zijn.