Navigatie menu TalentExcellence
Navigatie menu TalentExcellence
Gemakkelijk navigeren met nieuwe structuur
Context
TalentExcellence is een HR software platform met een enorm aantal pagina’s en functionaliteiten. Door de grootte van het platform en de hoeveelheid pagina's was de bestaande navigatiestructuur niet meer voldoende. Met ongeveer 150 pagina's verdeeld over 10 hoofdcategorieën was het menu met twee niveaus te beperkt om pagina's logisch en overzichtelijk te groeperen. Vier niveaus zou gebruikers juist te diep de structuur in sturen, waardoor navigeren onnodig omslachtig wordt. Daarom is gekozen het menu te herorganiseren tot een drie niveau structuur. Op het eerste niveau staan 10 hoofdcategorieën, met daaronder gemiddeld 5 subcategorieën en ongeveer 3 pagina's per subcategorie. Deze is voorafgaand aan deze opdracht getest en gevalideerd.
Deze nieuwe structuur gaf de mogelijkheid om het navigatiemenu opnieuw te ontwerpen. Het doel was om een navigatiepatroon te ontwikkelen dat zowel efficiënt werkt voor dagelijks gebruik en voor iemand die het af en toe gebruikt.
Context
TalentExcellence is een HR software platform met een enorm aantal pagina’s en functionaliteiten. Door de grootte van het platform en de hoeveelheid pagina's was de bestaande navigatiestructuur niet meer voldoende. Met ongeveer 150 pagina's verdeeld over 10 hoofdcategorieën was het menu met twee niveaus te beperkt om pagina's logisch en overzichtelijk te groeperen. Vier niveaus zou gebruikers juist te diep de structuur in sturen, waardoor navigeren onnodig omslachtig wordt. Daarom is gekozen het menu te herorganiseren tot een drie niveau structuur. Op het eerste niveau staan 10 hoofdcategorieën, met daaronder gemiddeld 5 subcategorieën en ongeveer 3 pagina's per subcategorie. Deze is voorafgaand aan deze opdracht getest en gevalideerd.
Deze nieuwe structuur gaf de mogelijkheid om het navigatiemenu opnieuw te ontwerpen. Het doel was om een navigatiepatroon te ontwikkelen dat zowel efficiënt werkt voor dagelijks gebruik en voor iemand die het af en toe gebruikt.
Overview
Ik heb het navigatiemenu opnieuw ontworpen voor een efficiënter en overzichtelijker gebruik, met de nieuwe drie-niveaustructuur als uitgangspunt. Het systeem wordt intern en door klanten gebruikt, waardoor er twee doelgroepen zijn: de power user en de beginner/minder frequente gebruiker.
Overview
Ik heb het navigatiemenu opnieuw ontworpen voor een efficiënter en overzichtelijker gebruik, met de nieuwe drie-niveaustructuur als uitgangspunt. Het systeem wordt intern en door klanten gebruikt, waardoor er twee doelgroepen zijn: de power user en de beginner/minder frequente gebruiker.
Challenge
Het doel van deze opdracht was om een navigatiestructuur te ontwerpen waarmee gebruikers snel door een platform van ongeveer 150 pagina's kunnen navigeren. Hierbij moest de navigatie zowel efficiënt zijn voor ervaren gebruikers als overzichtelijk blijven voor gebruikers die minder bekend zijn met het platform.
Daarnaast moest de gebruiker eenvoudig tussen pagina's binnen hetzelfde niveau kunnen wisselen, zonder een stap terug te doen in de structuur. Tegelijkertijd moesten gebruikers snel kunnen schakelen naar pagina’s in andere niveaus.
Het uiteindelijke ontwerp moest daarom een balans vinden tussen snelheid, overzicht en schaalbaarheid binnen een navigatiestructuur van drie niveaus.
Challenge
Het doel van deze opdracht was om een navigatiestructuur te ontwerpen waarmee gebruikers snel door een platform van ongeveer 150 pagina's kunnen navigeren. Hierbij moest de navigatie zowel efficiënt zijn voor ervaren gebruikers als overzichtelijk blijven voor gebruikers die minder bekend zijn met het platform.
Daarnaast moest de gebruiker eenvoudig tussen pagina's binnen hetzelfde niveau kunnen wisselen, zonder een stap terug te doen in de structuur. Tegelijkertijd moesten gebruikers snel kunnen schakelen naar pagina’s in andere niveaus.
Het uiteindelijke ontwerp moest daarom een balans vinden tussen snelheid, overzicht en schaalbaarheid binnen een navigatiestructuur van drie niveaus.
Proces
Voordat ik ben begonnen met schetsen heb ik een competitor analysis gedaan en gekeken naar andere complexe systemen zoals Jira, HubSpot, Shopify, Wordpress. Daarnaast heb ik onderzoeken gezocht over 3 level navigatie, The Fastest Navigation Layout for a Three-Level Menu van UX Movement is hierin een goede. Dit onderzoek kijkt naar de snelheid van gebruikers bij verschillende layouts van een 3 level menu. Hieruit blijkt:
Een verticale lijst links is vaak sneller scanbaar dan een horizontale lijst bovenin.
Hiërarchie werkt beter wanneer niveau 1 duidelijk gescheiden is van niveau 2 en 3.
Gebruikers raken minder snel gedesoriënteerd wanneer gerelateerde niveaus dicht bij elkaar staan.
Voor complexe desktopapplicaties is een linker navigatie de standaard.
Vanuit daar heb ik zo veel mogelijk ideeën geschetst van mogelijke navigatiemenu's. Per idee heb ik berekend hoe er genavigeerd wordt tussen de verschillende niveaus: het aantal clicks en tijd dat nodig is en de afstand die de cursor moet afleggen.
Dit heeft geleid tot een combinatie van een miller column en mega menu: niveau 2 en 3 blijven samen open tijdens het gebruik, terwijl niveau 1 altijd zichtbaar blijft voor snel schakelen. Zo zijn alle drie de niveaus tegelijk zichtbaar zonder schermruimte te verliezen. Deze heb ik uitgewerkt in een prototype om te testen met beide doelgroepen. Bij beginners heb ik gekeken of het menu niet te onoverzichtelijk is, goed te scannen is, pagina's vindbaar zijn en het menu te verkennen is. Bij power users komt daar het criterium bij: is het menu snel te navigeren.
Feedback
Bij alle testen heb ik vijf beginners en vijf power users vier navigatietaken gegeven. Hierbij keek ik naar taakvoltooiing, navigatietijd en momenten van twijfel.
Na het testen met beide doelgroepen kwamen drie problemen naar boven.
Bij beginners was niet duidelijk dat de niveau 1 icons onafhankelijk zijn van het geopende menu, wat voor verwarring zorgde.
Bij power users was het niet meteen duidelijk dat niveau 1 klikbaar blijft wanneer er een item is geopend. Zodra dit duidelijk was, werkte het menu soepel en gingen ze weinig terug naar het basismenu.
Bij beide groepen was het onduidelijk dat een niveau 2 item zonder niveau 3 eronder wel klikbaar is. Pas na uitproberen kwamen ze hier achter.
Iteratie twee
Deze feedback heb ik meegenomen naar de volgende iteratie. De achtergrondkleur van de iconbar blijft gelijk zodat deze niet inactief op de achtergrond lijkt wanneer het menu is geopend. Een scheidende border maakt duidelijk waar de iconbar eindigt en het geopende menu begint. Tot slot heeft elk klikbaar item nu een hover state, zowel niveau 3 items als niveau 2 items zonder onderliggende pagina's.
Feedback ronde twee
Na de tweede ronde testen lijken de eerste problemen opgelost te zijn. Wel is er enige twijfel over de betekenis van het gehighlighte icoon in het hoofdmenu. Het kan in een oogopslag de huidige pagina betekenen, of het geopende menu.
Iteratie drie
Hier heb ik 3 varianten van getest. Een variant waarbij de huidige pagina in primaire kleur wordt weergegeven, een waarbij de de border van het menu ook om de icon op het hoofdmenu loopt, en een variant waarbij alleen het icoon van de huidige pagina gehighlight wordt.
Resultaat
Uit de test is versie 2 het beste naar voren gekomen, zonder andere problemen. Het uiteindelijke ontwerp maakt alle drie navigatieniveaus gelijktijdig zichtbaar, zonder extra schermruimte op te eisen. Beginners kunnen de hiërarchie eenvoudig verkennen, terwijl power users snel tussen niveaus kunnen schakelen zonder terug te keren naar het hoofdmenu.
Proces
Voordat ik ben begonnen met schetsen heb ik een competitor analysis gedaan en gekeken naar andere complexe systemen zoals Jira, HubSpot, Shopify, Wordpress. Daarnaast heb ik onderzoeken gezocht over 3 level navigatie, The Fastest Navigation Layout for a Three-Level Menu van UX Movement is hierin een goede. Dit onderzoek kijkt naar de snelheid van gebruikers bij verschillende layouts van een 3 level menu. Hieruit blijkt:
Een verticale lijst links is vaak sneller scanbaar dan een horizontale lijst bovenin.
Hiërarchie werkt beter wanneer niveau 1 duidelijk gescheiden is van niveau 2 en 3.
Gebruikers raken minder snel gedesoriënteerd wanneer gerelateerde niveaus dicht bij elkaar staan.
Voor complexe desktopapplicaties is een linker navigatie de standaard.
Vanuit daar heb ik zo veel mogelijk ideeën geschetst van mogelijke navigatiemenu's. Per idee heb ik berekend hoe er genavigeerd wordt tussen de verschillende niveaus: het aantal clicks en tijd dat nodig is en de afstand die de cursor moet afleggen.
Dit heeft geleid tot een combinatie van een miller column en mega menu: niveau 2 en 3 blijven samen open tijdens het gebruik, terwijl niveau 1 altijd zichtbaar blijft voor snel schakelen. Zo zijn alle drie de niveaus tegelijk zichtbaar zonder schermruimte te verliezen. Deze heb ik uitgewerkt in een prototype om te testen met beide doelgroepen. Bij beginners heb ik gekeken of het menu niet te onoverzichtelijk is, goed te scannen is, pagina's vindbaar zijn en het menu te verkennen is. Bij power users komt daar het criterium bij: is het menu snel te navigeren.
Feedback
Bij alle testen heb ik vijf beginners en vijf power users vier navigatietaken gegeven. Hierbij keek ik naar taakvoltooiing, navigatietijd en momenten van twijfel.
Na het testen met beide doelgroepen kwamen drie problemen naar boven.
Bij beginners was niet duidelijk dat de niveau 1 icons onafhankelijk zijn van het geopende menu, wat voor verwarring zorgde.
Bij power users was het niet meteen duidelijk dat niveau 1 klikbaar blijft wanneer er een item is geopend. Zodra dit duidelijk was, werkte het menu soepel en gingen ze weinig terug naar het basismenu.
Bij beide groepen was het onduidelijk dat een niveau 2 item zonder niveau 3 eronder wel klikbaar is. Pas na uitproberen kwamen ze hier achter.
Iteratie twee
Deze feedback heb ik meegenomen naar de volgende iteratie. De achtergrondkleur van de iconbar blijft gelijk zodat deze niet inactief op de achtergrond lijkt wanneer het menu is geopend. Een scheidende border maakt duidelijk waar de iconbar eindigt en het geopende menu begint. Tot slot heeft elk klikbaar item nu een hover state, zowel niveau 3 items als niveau 2 items zonder onderliggende pagina's.
Feedback ronde twee
Na de tweede ronde testen lijken de eerste problemen opgelost te zijn. Wel is er enige twijfel over de betekenis van het gehighlighte icoon in het hoofdmenu. Het kan in een oogopslag de huidige pagina betekenen, of het geopende menu.
Iteratie drie
Hier heb ik 3 varianten van getest. Een variant waarbij de huidige pagina in primaire kleur wordt weergegeven, een waarbij de de border van het menu ook om de icon op het hoofdmenu loopt, en een variant waarbij alleen het icoon van de huidige pagina gehighlight wordt.
Resultaat
Uit de test is versie 2 het beste naar voren gekomen, zonder andere problemen. Het uiteindelijke ontwerp maakt alle drie navigatieniveaus gelijktijdig zichtbaar, zonder extra schermruimte op te eisen. Beginners kunnen de hiërarchie eenvoudig verkennen, terwijl power users snel tussen niveaus kunnen schakelen zonder terug te keren naar het hoofdmenu.