Filter
ChatGPT Navigatie: dit leer je van de Frankwatching-site [8 tips]
De navigatie is van essentieel belang voor een website. Het is de gids voor je bezoekers, maar tegelijkertijd ook het gezicht en de identiteit van jouw site. Bij Frankwatching werkten we de afgelopen maanden aan een nieuwe navigatie. Deze 8 lessen hebben we geleerd.
Een navigatie heeft twee doelen voor bezoekers. Allereerst moet een bezoeker zo snel mogelijk kunnen navigeren door je site. Dit valt of staat met een logische en intuïtieve structuur. Als een gebruiker iets zoekt, moet hij kunnen beredeneren waar hij dat item kan vinden.
Het tweede doel is dat de gebruiker snel kan zien waar de site over gaat. De navigatie geeft verduidelijking: ‘waar ben ik nou eigenlijk terechtgekomen?’. Dit geldt vooral voor bezoekers uit Google: zij willen weten met wie ze te maken hebben. Het is van belang dat zij de context begrijpen en misschien wel terug willen komen.
Het probleem: een onduidelijke navigatie
Onze navigatie had een probleem. Eigenlijk al vanaf dag één kwam naar voren dat hij vrij onduidelijk was. We hadden twee subnavigaties, terwijl bezoekers niet zagen wat het verschil hiertussen was. Daarnaast had de navigatie vrij veel afbeeldingen, in een balk die (door een bug) niet automatisch inklapte. Daardoor werd deze balk ervaren als reclame. Sommige bezoekers wisten zelfs niet eens dat het onze navigatie was! Al dit soort feedback kregen we binnen via onze feedbackwidget. Het was duidelijk: daar moest iets aan gedaan worden.
Oude navigatie van Frankwatching
UX-analist Simon Koelewijn begon met het inventariseren van zowel de wensen van het team, als de links die in de navigatie zouden moeten staan. Want nog een puntje: eigenlijk was er in de oude navigatie te weinig ruimte om al onze producten kwijt te kunnen (bijvoorbeeld ons aanbod aan trainingen en webinars).
1. Zet niet te veel items onder elkaar
Tegelijkertijd wil je ook niet té veel links in een navigatie kwijt. Het zit namelijk zo: mensen onthouden ongeveer 7 items (plus of min 2) per lijstje. Denk maar eens aan een boodschappenlijstje. Dit heet de Miller’s Law. Een gevolg daarvan is ook dat lijstjes met ongeveer 7 items overzichtelijk en scanbaar zijn (niet geheel toevallig bevat dit artikel 8 tips). Daarom koos Simon voor een uitklapmenu met meerdere lijstjes, die zijn gegroepeerd tot een logisch geheel.
Nog steeds past niet álles. Zo hebben we veel meer trainingen dan we kwijt kunnen in de navigatie. Als oplossing hiervoor zijn we nog meer met landingspagina’s gaan werken, waarop trainingen gegroepeerd staan.
2. Wees uniform & consistent
Een vaste bezoeker heeft een bepaalde verwachting bij jouw website. De navigatie moet daarop aansluiten. Dat betekent dat je menu’s voor verschillende onderdelen er hetzelfde uit moeten zien. Kijk maar eens bij ons naar ‘Blog’ en ‘Jobs’, de eerste twee items van de navigatie. Artikelen en vacatures zijn twee heel verschillende producten, maar het menu ziet er vergelijkbaar uit. Een andere indeling per onderdeel schept al snel verwarring.
3. Gebruik je interne zoekopdrachten
Het is een inkoppertje, maar wel een belangrijke: de interne zoekopdrachten op je site geven aan waar je bezoekers naar op zoek zijn. Ze kunnen dit kennelijk niet gemakkelijk vinden. Nu hebben de meeste zoektermen op Frankwatching betrekking op marketingtermen en -ontwikkelingen. De enige in de top 50 die op een pagina van Frankwatching slaat, is ‘nieuwsbrief’. Een reden voor ons om de nieuwsbrief een prominente plek in de navigatie te geven.
4. Teksten werken beter dan iconen
We leven in een visuele wereld, dus waarom geen visuele navigatie? Wij hebben daar duidelijk niet voor gekozen. De mogelijkheid om je in te schrijven op de nieuwsbrief staat in een button op de navigatie. Die button bestaat alleen uit tekst, omdat tekst beter werkt dan iconen. Dat wil zeggen: als een icoon niet 100% duidelijk is, werkt het averechts. In dat geval kun je beter (ook) tekst gebruiken. Om dezelfde reden heeft onze mobiele navigatie niet alleen een hamburgericoontje, maar ook het woord ‘menu’.
5. Volg de ontwikkelingen, maar kies wat past
Online blijft altijd in ontwikkeling. Daarom is het goed om deze ontwikkelingen op de voet te volgen. Wat betreft navigaties zijn de megamenu’s al een aantal jaren erg populair: menu’s die heel veel lijstjes bevatten als je ze uitklapt. Volgens Simon zijn die verschuivingen op mobiel nog wat duidelijker dan op desktop. Zo ziet hij, voornamelijk bij apps, de knoppenbalk (tabbar) aan de onderkant weer terugkomen. Neem het voorbeeld van Spotify.
Toch zul je niet alle nieuwste ontwikkelingen terugzien op Frankwatching. Het is ontzettend belangrijk om te kijken naar wat passend is voor jouw site. Afhankelijk van de content en hoe die gestructureerd is (welke boom je ervan kunt maken), kun je keuzes maken. Wij hebben daarom geen tabbar, omdat het heel lastig is om daar al onze content in kwijt te kunnen.
6. Bedien ál je doelgroepen
Frankwatching heeft behalve ‘gewone’ bezoekers ook een grote groep aan auteurs, die de site ook bezoeken als ze een artikel willen indienen. In feite zijn dit twee verschillende doelgroepen, met dus ook verschillende behoeftes.
In de vorige navigatie was niet in de behoefte van auteurs voorzien. In de nieuwe navigatie kunnen auteurs gemakkelijk een nieuw artikel insturen. En herkent de site je eenmaal als auteur (als je ingelogd bent), dan toont de navigatie meer relevante links voor jou.
7. Test zo vroeg mogelijk
Testen kost tijd. En het kan best lastig zijn om een goede afspiegeling van je doelgroep te vinden. Maar je kunt het ook laagdrempeliger aanpakken. Vraag je vrienden of collega’s om de navigatie te testen. Je kunt ze kleine, gerichte opdrachten geven. Hiermee komen echt grote usability-problemen wel naar boven.
Door mensen met een andere blik naar je navigatie te laten kijken, ontdek je dingen die je zelf niet had gezien. Het verschil tussen een goede en slechte(re) navigatie zit vaak in de details. Als goed werkt, merk je het niet. Werkt het niet: dan merk je het zeker. Denk maar aan animaties die niet vloeiend werken.
Mockup-test van de mobiele navigatie
Testen met prototype
Test daarom zo vroeg mogelijk, en bouw hiervoor zo snel mogelijk een prototype. Want als je met een platte tekening test, mis je cruciale dingen. Een navigatie heeft bijna geen zin als de animaties niet kloppen, of als een menu niet inklapt of uitklapt wanneer het moet. Een belangrijke les die we hebben geleerd van de vorige navigatie. Wij hebben onze inhouse developer Danny de Haan, die gelukkig erg van het animeren is. Werkt er binnen jouw organisatie geen developer? Zorg dat de lijntjes met je webbureau zo kort mogelijk zijn.
Overigens levert het testen je natuurlijk ook inhoudelijke informatie op. Zo stond het insturen van een artikel onder ‘Blog’, maar dachten de testers het te kunnen vinden onder ‘Over’. Wat voor de een als logisch voelt, blijkt dat voor de ander niet te zijn. Zo zie je maar.
8. Kies je dubbele of enkele functies?
Zijn dubbele functies van een link not done? Of werkt het prima? Onderzoekers zijn er nog niet helemaal uit.
Dit was ons probleem: als je over een item (bijvoorbeeld ‘Blog’) hovert met je muis, klapt het menu uit. Een deel van de bezoekers snapt daarom niet dat je óók kunt klikken op ‘Blog’. Dan ga je naar de homepage. Om dat op te lossen, hebben we een extra link naar het overzicht toegevoegd (‘Alle artikelen’). In de mobiele navigatie krijg je de overzichtspagina door te klikken, maar zie je naast de link de mogelijkheid tot het uitklappen.
Bonus: meet je navigatie goed door
Als de navigatie live staat, ben je er nog niet. Dit is geen learning die we tijdens het proces hebben opgedaan, maar het is wel erg belangrijk. Zorg dat je navigatie goed wordt doorgemeten in Google Analytics (wij doen dat met Google Tag Manager). Kijk naar de interactie en het gebruik ervan, en kijk vooral ook wat er afwijkt van wat je had verwacht. Wees niet bang om wijzigingen door te voeren.
Het zou standaard in je werkwijze moeten zitten om de navigatie te evalueren – zowel met analytics als met feedback van je gebruikers. Wij vatten dat in de teamoverleggen van de verschillende afdelingen. Blijkt dan dat een bepaald onderwerp of onderdeel erg populair is? Misschien moet het dan wel een prominentere plek krijgen.
Heb jij aanvullingen op deze tips? We zijn benieuwd! En wat vind je van onze nieuwe navigatie? Ook dat horen we graag.
Over de auteurs
