3 Essentiële regels voor effectief navigatieontwerp
Het ontwerpen van uw website-navigatie is als het leggen van de basis voor uw huis. Als u uw fundament niet goed plant, kan uw gebouw instorten, ongeacht hoe mooi het eruit ziet. Als u wilt profiteren van de beste verkopen of conversies die mogelijk zijn vanaf uw site, moet u tijd besteden aan het plannen van hoe uw publiek zal omgaan met uw inhoud en de meest intuïtieve manier van organiseren en representeren.
Onthoud altijd dat als je dit onderdeel fout hebt, je het risico loopt een groot deel van je publiek te vervreemden.
Wat is navigatie?
Er is meer dan één manier om naar navigatie te kijken. Je zou kunnen zeggen dat het een centraal element op je website is dat je klanten toestaat om te vinden wat ze zoeken zonder verwarring of onnodige klikken. Evenzo zou u kunnen beweren dat het een manier is om uw klanten voorzichtig naar de belangrijkste informatie op uw site te leiden, om verkoop of vragen te genereren.
De kans is groot, het is beide.
Navigatieontwerp is zoals vele andere dingen in ontwerp: er is geen universeel overeengekomen "juiste manier" om het te doen. Elke website presenteert zijn eigen uitdagingen, die op verschillende manieren kunnen worden benaderd. Het goede nieuws is dat er manieren zijn om te denken over en het organiseren van inhoud die het risico van mislukken minimaliseren.
70percentpure's site heeft een eenvoudige navigatie die zowel verticaal als horizontaal is.
1) Finaliseer eerst je IA
Het plannen van de inhoud voor een grote website is een essentiële taak die moet worden voltooid voordat u uw navigatie ontwerpt. Anderszins bekend als IA (Information Architecture) is dit overzicht, begrip en manipulatie van uw inhoud de ruggengraat van de bruikbaarheid van uw website. Het ontwerpen van uw navigatie voordat u - of in plaats van - uw IA op de juiste manier ontwerpt, zou hetzelfde zijn als het maken van een boekenindex voordat u de pagina's invoert. Geen goed idee.
Een natuurlijk vermogen om het grote geheel te zien, helpt bij het werken aan IA. Wat nog belangrijker is, is dat u de inhoud vanuit het perspectief van een gebruiker kunt zien. Soms betekent dit dat we ingaan tegen de manier waarop de klant zijn inhoud categoriseert - dus bereid je voor op verzet als dat het geval is.
Hier zijn een paar dingen die je jezelf kunt vragen om je schema voor te bereiden en dit te verantwoorden aan de klant:
- Welke pagina's zijn nodig voor deze site?
- Heeft elke pagina een doel binnen het bredere schema en wordt de inhoud opgedeeld in verstandige, herkenbare brokken?
- Welke vergoedingen moet worden gemaakt voor het toevoegen van inhoud in de toekomst?
- Met welke gebruikersgroepen werkt u? (bijv. ingelogd / afmelden, abonnementsvormen, adverteerders, etc.)
- Wat is het primaire doel voor elk type gebruiker?
Het beantwoorden van al het bovenstaande en het begrijpen hoe uw inhoud zich verhoudt tot uw gebruikers is van fundamenteel belang voor een goed navigatieontwerp.
2) KUS: Houd het eenvoudig, soms
Iedereen die ooit een website heeft gebruikt, kan het waarschijnlijk eens zijn: een navigatiegebied moet zo eenvoudig mogelijk zijn. Het overweldigen van de gebruiker met keuzes en het verdringen van de navigatie met tekst is een slecht idee en zal de algehele bruikbaarheid van uw website ernstig belemmeren.
De eenvoudige navigatie van Bloomberg logenstraft de complexiteit van informatie op hun site.
En toch kan eenvoud bedrieglijk zijn. Graaf dieper en je zult ontdekken dat wat eigenlijk heel complex is slim is verpakt op een manier die eenvoudig aanvoelt. Dit is IA in actie.
Neem bijvoorbeeld de startpagina van Microsoft. Hun hoofdnavigatie heeft slechts vier items, wat bijlange na niet genoeg lijkt, gezien hun assortiment. Maar de vervolgkeuzelijsten zijn heel slim opgedeeld in secties en zo gepresenteerd dat je snel en eenvoudig kunt vinden wat je zoekt.
Subpagina's zijn minisites, volgens hetzelfde navigatieformaat. Het menu voelt en gedraagt zich hetzelfde, maar past zich aan om meer details te bieden naarmate je dieper op de site komt.
Het is gemakkelijk te gebruiken, voorspelbaar en consistent. Gezien hun assortiment, en het aantal pagina's op hun website, is dit geen sinecure en het is duidelijk het resultaat van vele uren van iteratieve ontwikkeling. Het voelt niet alleen als een van hun producten, wat de bezoeker geruststelt, maar het organiseert de inhoud op een manier die goed is voor zowel de klant als Microsoft zelf.
3) Kies de oriëntatie zorgvuldig
Gezien het feit dat een computerscherm traditioneel wordt gebruikt in een liggend formaat, heeft horizontale navigatie veel zin. Zo veel van de tijd voelt het gewoon meer in balans, minder opdringerig en gemakkelijk te plaatsen vanuit een ontwerpperspectief.
Oculus, makers van VR-headsets zouden dom zijn als ze niet met een horizontaal menu over hun virtuele landschappen zouden praten. Het heeft niet alleen een mooie metafoor, maar stelt de gebruiker ook in staat om dieper in zijn inhoud te duiken door naar beneden te scrollen op de pagina.
Horizontale menu's voegen echter geen waarde toe in elke context. Daarom ziet u veel verticale navigatie, met name in e-commerce. Het bevat echo's van de gekleurde tabbladen die u helpen producten in een fysieke catalogus te vinden, en vermijdt een overvolle horizontale balk met te veel tekst en te veel opties.
Een goede verticale navigatie is geen eenvoudige taak, vooral als je veel producten hebt. Daarom vind ik deze van Jack Jones leuk.
De pictogrammen naast de tekst ondersteunen de leesbaarheid. De eenvoudige vormen zijn verrassend communicatief en helpen om het vaargebied gefocust en opgeruimd te houden. Klik op een categorie en het menu wordt uitgevouwen om subopties te onthullen, opnieuw op een manier die erg gemakkelijk is voor het oog.
Een meer ongewoon gebruik van het verticale menu is te vinden op de site van Squarepusher. Hier wordt de navigatie gebruikt als een tabblad, naast de hoofdinhoud, die de gebruiker eenvoudig kan doorbladeren en doorklikken. Het is een veel meer lineaire benadering en weerspiegelt de sequentiële aard van een Squarepusher-nummer.
De regels zijn aan het veranderen
Zoals met alle dingen op het web, brengen nieuwe technieken, technologieën, apparaten en trends hun eigen uitdagingen en innovaties op tafel. Responsief webontwerp betekent dat een traditionele horizontale navigatie nu ook een verticale navigatie is (op kleinere schermen). Parallax-technieken zien navigatiegebieden wegebben en vloeien als het tij, afhankelijk van waar je bent op de pagina.
Er is geen enkele manier om de perfecte site nav te maken. Maar een iteratieve benadering van ontwerpen en testen, bij voorkeur met toegang tot de statistieken van uw site en conversiegegevens, levert waarschijnlijk de beste resultaten op.
Als motor voor uw website moet uw navigatie voorspelbaar, eenvoudig, consistent en goed geplaatst zijn.