Intuïtief, gebruiksvriendelijk en effectief

Website navigatie is cruciaal voor de gebruikerservaring (UX). Het bepaalt of bezoekers snel en eenvoudig de informatie kunnen vinden die ze zoeken of dat ze juist snel afhaken. De navigatie van een website bestaat uit verschillende User Interface (UI) elementen, zoals menu’s, links, breadcrumbs en accordeons. Als UX Designer is aan jou de taak om een navigatiestructuur te ontwerpen die intuïtief, gebruiksvriendelijk en effectief is.

 

De optimale navigatiestructuur

Het ontwerpen van een optimale navigatiestructuur is geen eenvoudige klus. Er zijn veel valkuilen waar je als UX Designer in terecht kan komen. Een veelgemaakte fout is het creëren van een te complexe navigatiestructuur. Dat kan gebruikers overweldigen en verwarren, waardoor ze afhaken. Termen die binnen een bedrijf of organisatie logisch klinken, kunnen voor buitenstaanders onbegrijpelijk zijn. Dit kan leiden tot frustratie bij gebruikers die niet weten waar ze moeten zoeken naar de informatie die ze nodig hebben.

Door de juiste termen te gebruiken in je navigatiemenu, kan je duidelijk communiceren wat je bedrijf doet en welke producten of diensten je aanbiedt. Algemene termen als ‘onze diensten’ of ‘over ons’ geven weinig informatie aan de gebruiker. In plaats daarvan is het beter om concrete termen te gebruiken die direct de kern van je aanbod beschrijven. Zo kan een webwinkel voor schoenen in plaats van de term ‘onze producten’ beter de termen ‘damesschoenen’, ‘herenschoenen’ en ‘kinderschoenen’ direct in de navigatie tonen.

Daarnaast is het belangrijk om rekening te houden met de verwachtingen van gebruikers. Vaak wordt de navigatie bedacht vanuit de ogen van de organisatie. Designers luisteren vaak goed naar het bedrijf, maar niet naar de gebruikers van de website. Mensen zoeken naar informatie op basis van hun eigen mentale model. Dit betekent dat het belangrijk is om te analyseren hoe gebruikers naar informatie zoeken en de navigatiestructuur hierop af te stemmen.

 

Definieer de informatie-architectuur (IA)

De informatie-architectuur (IA) is een schema van alle pagina’s van een website of app en de relatie ertussen. Het schema wordt ook wel een sitemap of website structuur genoemd. De IA en het navigatie ontwerp worden vaak door elkaar gehaald. Natuurlijk is er een verband, want de informatie-architectuur bepaalt het ontwerp van de navigatie. Bepaal eerst de IA voordat je de navigatie gaat ontwerpen.

Een goed doordachte informatie-architectuur is gebaseerd op goed onderzoek. De eerste stap is om de doelgroep te begrijpen. Wie zijn het? Wat zijn hun behoeften en verwachtingen? Wat zoeken ze op de website? Door middel van user research met interviews, enquêtes en observaties kan je waardevolle inzichten verzamelen over het gedrag en de motivaties van de gebruikers.

 

De Card Sorting Test

Na het onderzoek dat je vastlegt in een UX strategie, maak je een lijst met pagina’s waarvan je vindt dat die nodig zijn voor de website of app. De namen van de pagina’s schrijf je op een kaartje. De stapel kaarten geef je aan een deelnemer. Vervolgens vraag je de deelnemers om de kaarten te groeperen op basis van hoe zij denken dat de informatie op de website het meest logisch is. Deze onderzoeksmethode noemen we de Card Sorting Test.

De test doe je met minimaal vijf deelnemers en je maakt steeds een foto van de gelegde structuur. De resultaten van de Card Sorting Test geven je waardevolle inzichten in hoe gebruikers de website structureren en hoe je de navigatie daarop kan afstemmen. De bevindingen leg je vast in een schema en dat wordt de sitemap/ website structuur. Gebruik hiervoor een ontwerpprogramma als FigJam.

 

Tree Testing

Wat je na de Card Sorting Test nog niet hebt ontdekt, is of de gebruiker de content kan vinden die op de website of in de app staat. De gebruiker ziet namelijk alle kaartjes met pagina’s en gaat deze zelf clusteren, maar als je de navigatie hebt ontworpen en gebouwd, dan blijken de gebruikers de content via de menu items toch niet altijd direct te kunnen vinden. Daarom moet je aanvullend onderzoek doen om definitieve beslissingen te nemen over de navigatiestructuur.

In een digitale tool bouw je de navigatie die je voor ogen hebt. Dat kan je in Figma doen en vervolgens kan je de navigatie testen met een aantal gebruikers, maar het kan ook sneller door gebruik te maken van de online Tree Testing tool van UXtweak. UXtweak biedt naast de Tree Testing tool nog veel meer interessante UX Research tools aan. In de online tool van UXtweak bouw je de navigatie. Vervolgens maak je een aantal taken die de deelnemers kunnen doen. De link van de test deel je vervolgens met 30 tot 50 mensen. De deelnemers gaan via de link naar de test en daar worden ze gevraagd om jouw opgezette taken te doen.

Hieronder zie je voorbeelden van de Tree Testing tool van UXtweak:

 

Op de resultatenpagina van UXtweak zie je hoe lang de deelnemers er over deden en of ze de informatie konden vinden via de navigatie. De tijd die de deelnemers nodig hebben om de taken uit te voeren en het aantal fouten dat ze maken, geven je inzicht in de effectiviteit van de navigatiestructuur.

Na het analyseren van de onderzoeksresultaten kan je beginnen met het ontwerpen van de navigatiestructuur. Hierbij maak je gebruik van wireframes en prototypes om verschillende opties te visualiseren en testen.

 

Meer leren over navigatie ontwerp?

Wil je alles weten over gebruiksvriendelijke navigatiestructuren om een optimale gebruikersbeleving te kunnen ontwerpen? Bekijk dan het programma van de geaccrediteerde post-hbo UX Design Master. Oriënteer jij je liever op UX Design tijdens een tweedaagse training? Volg dan de Training UX Design.