De vergeten kunst van websitenavigatie

Het elfde nummer van het magazine Web Designer staat in het teken van de “vergeten kunst van websitenavigatie”. Redacteur Edwin Toonen vroeg me om een bijdrage in de vorm van een interview, om ook de usability nerds een stem te geven in het blad.

Door mijn allesverslindende startup kom ik de laatste tijd amper aan bloggen toe, en ik vroeg me al af of dat een structureel probleem werd. Toen ik na anderhalve week uitstellen eindelijk mijn tanden zette in Edwin’s vragen bleek dat dat net het duwtje was dat ik nodig had om mijn usability gevoel te spuien. Ik beloof tot half november nog even niets over mijn blogtempo, maar je kunt wel alvast met me in discussie over mijn agressieve kijk op website navigatie.

Er wordt usability-experts wel eens verweten dat als het aan hen lag er alleen maar lelijke sites zouden zijn. Denk je dat usability design in de weg zit?

Nee, design staat in dienst van usability dus dat is per definitie onmogelijk. Gebuikers zien design in mijn ervaring heel anders dan vormgevers en opdrachtgevers. Wat “wij” als “mooi”, “hip” en “elegant” design bestempelen, zien gebruikers van websites niet. Ik heb vaak gezien dat een (zelfs in mijn ogen) sterk verbeterde vormgeving bij gebruikers precies hetzelfde cijfer opleverde in een enquete met de vraag “welk cijfer geeft u de vormgeving?”.

Van nog beter design word je niet gelukkig, maar van slechter design wel ongelukkig Dat wil niet zeggen dat design niet belangrijk is: integendeel! Het is net als met geld: van meer geld word je niet gelukkig, maar van te weinig geld word je wel ongelukkig. Als design dus niet goed genoeg is, niet duidelijk genoeg of niet passend bij de doelgroep, kan dat een reden zijn om af te haken in de eerste seconden. Mensen bepalen namelijk in minder dan een paar seconden of ze op een site blijven of niet, en design speelt daarin natuurlijk een belangrijke rol.

Hoe creatief kun je zijn met websitenavigatie?

Net zo creatief als met bijvoorbeeld boeknavigatie. Een boek heeft een kaft en een rug met daarop de titel en de auteur. Verder een inhoudsopgave, bladzijdenummers in een hoek en soms een register achterin. Dat is niet voor niets zo, je ziet dan ook weinig boeken waar van dat stramien wordt afgeweken.

Als webdesigner is het wat mij betreft een doodzonde om af te wijken van navigatie conventies zoals een simpele tekstuele navigatie aan de linker-, rechter- of bovenkant van de pagina en een zoekmogelijkheid rechtsbovenin. En denk aan het logo dat een link naar de homepage is…

Tegenwoordig is “undesign” een hippe term om te omschrijven dat juist het simpelste design het beste werkt. Dus: minder kaders, vlakken, 3D effecten, schaduwtjes, kleuren en tierlantijnen op je webpagina’s. En liever meer witruimte, grote letters en simpelheid: dan vinden bezoekers sneller hun weg.

Wat moet je absoluut vermijden bij het ontwikkelen van sitenavigatie?

Mystery meat! Dat is navigatie waarbij je niet weet wat er gebeurt als je erop klikt. Bijvoorbeeld doordat je alleen maar op plaatjes of iconen kunt klikken. Zie hier enkele voorbeelden van mystery meat , of zoek in Google gewoon op “mystery meat navigation”. Als een gebruiker niet weet wat er achter een link zit (of nog erger: hij weet niet eens dat iets een link is!), zal hij er niet op klikken. En dan heb je als webdesigner dus gefaald, hoe leuk of mooi je navigatie ook is…

Probeer verder te voorkomen dat je nietszeggende labels gebruikt zoals “Algemeen” of “Informatie”. Dan weet de gebruiker natuurlijk niet wat daarachter staat. Eigenlijk geldt dat ook al voor “Diensten” en “Producten”, laat liever direct zien wat je in huis hebt in plaats van de gebruiker te dwingen eerst te klikken voordat hij weet wat er te vinden is…

Hebben de huidige ontwerptrends, zoals het toenemende gebruik van Flash en AJAX, invloed op de manier waarop navigatie ingezet wordt?

Navigatie design pattern bij Yahoo!

Uiteraard, zoals elke nieuwe technologie worden Javascript en Flash te pas en te onpas ingezet. Belangrijkste No-Go is het gebruik van deze technieken voor gewone navigatie zoals uitklapmenu’s. Zoekmachines kunnen niet met Javascript en Flash omgaan, en zullen de navigatie daarom negeren. Met als gevolg dat de site niet in Google te vinden is.

Gelukkig worden deze technieken ook goed ingezet ter verbetering van navigatie. Met name bij “unobtrusive” gebruik van Javascript kan een kleine animatie de gebruikerservaring verbeteren door bijvoorbeeld beter aan te sluiten bij de echte wereld. Yahoo! heeft veel voorbeelden hiervan in hun geweldige Design Pattern Library.
In het algemeen wordt Javascript te vaak gebruikt op plekken waar simpele CSS ook genoeg was geweest, wees daar dus beducht op en zoek altijd eerst naar een CSS oplossing!

Denk niet te snel dat deze trends invloed hebben op hoe gebruikers met navigatie omgaan. Gebruikers veranderen langzamer dan internet technieken. Bovendien moet je in de meeste gevallen ook nog uitgaan van de “traagste” gebruikers, dus ga er gerust vanuit dat je 3 jaar terug moet denken om de juiste technieken te kiezen.

Heb je tips die ontwerpers kunnen hanteren bij het ontwikkelen van bruikbare en conversiegerichte navigatie?

1. Gebruik card sorting om te achterhalen hoe gebruikers over je content denken. Je geeft ze bijvoorbeeld een aantal kaartjes met daarop alle onderdelen van je website en laat hen die kaartjes groeperen. Let daarbij vooral op de overwegingen, en minder op het uiteindelijke resultaat. Je wilt leren wat er in het hoofd van je gebruiker gebeurt op het moment dat hij een label ziet, en daar kun je in het maken van je navigatie op inspelen.
   Ook merk je bij dit soort sessies goed waar de problemen met navigatie zullen komen: dingen die op 2 of meer plekken kunnen thuishoren. Als je die opschrijft, kun je zorgen dat je in je ontwerp (en in de uiteindelijke content) goede gerelateerde links opneemt op de plekken waar dat kennelijk nodig is.
2. 

   Google Analytics site search rapportage

   De beste inspiratiebron voor welke labels je in je navigatie moet gebruiken, is je interne zoekmachine. Met bijvoorbeeld Google Analytics kun je precies zien welke zoekwoorden mensen gebruiken op je website (in het rapport “In-site search”). Dan weet je dus welke dingen ze kennelijk niet snel genoeg in je navigatie zagen…

3. Doe niet te creatief en kijk naar je concurrenten die succesvol zijn. Begin liever met een goed gejat onderwerp, dan zelf iets nieuws slechts te bedenken. Probeer op basis van iets dat al bestaat iets nog beters te ontwikkelen door naar je gebruikers te luisteren en te testen en optimaliseren.
4. Vergeet niet dat navigatie minder gebruikt wordt dan links in de content. Zorg dus dat je bezoekers in het content gedeelte ook kunnen navigeren, dat doen ze namelijk liever dan op de navigatie te klikken. Uit onderzoek van Jakob Nielsen blijkt dat 43% van de klikken in de content valt, tegenover 18% bovenaan de pagina, 18% links, 15% rechts en 6% onderaan (bron: Prioritizing Web Usability - Nielsen & Loranger)
5. Denk niet dat je in een keer de perfecte navigatie kunt ontwikkelen. Laat in je ontwerpen ruimte voor verdere ontwikkeling door de inhoudelijk verantwoordelijke van de website. Die zal constant de navigatie moeten kunnen veranderen als voortschrijdend inzicht dat nodig maakt.

Kun je voorbeelden geven van sites waarvan je vindt dat ze ergens heel goed in zijn?

Delicious is erg goed in het gebruik van design zonder dat het in de weg staat van de content. De site heeft extreem veel user generated content, maar toch is het met slechts enkele kleuren overzichtelijk te noemen. Sowieso is Yahoo! (denk aan Flickr) erg goed op dit vlak.

Verder vind ik bijvoorbeeld de New York Times online erg knap: ook extreem veel content maar door de typografie en consistentie toch een bruikbare website. In Nederland vind ik het recente redesign van Parool.nl heel goed.
Ik vind de sites van Coolblue (van pdashop.nl en een tiental andere websites) erg goed in hoe ze met navigatie omgaan. Je kunt overal alternatieven en andere gerelateerde producten vinden, voor elk product is er een speciale accessoire pagina en overal zijn reviews aan toe te voegen, aan alles is gedacht. Een genot om te winkelen en een stuk beter van bijvoorbeeld BOL.com die toch een stuk meer resources hebben.

Nog andere tips voor webdesigner magazine?

Ik hoor graag wat jullie vinden van de tips die ik geef. En ik kan me voorstellen dat je zelf ook wel wat tips hebt voor beginnende en gevorderde webdesigners die het magazine lezen… Kom maar op!