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?
- 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. -
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…
- 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.
- 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)
- 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!
usarchy.com 
Ik ben toevallig op dit moment bezig met mijn navigatie. Heb mijn eerste ontwerp af maar ben niet helemaal tevreden. Het is nu een simpele dropdown menu met de son of suckerfish methode. Volledig CSS dus maar met een klein Javascriptje voor de IE6 gebruikers onder ons.
Het verhaal van de kopje ‘producten’ spreekt mij wel aan. Ik heb op dit moment namenlijk een kopje ‘producten’ maar op mijn homepage staan buttons rechtstreeks naar mijn producten. Wanneer ik al mijn producten in mijn menu stop wordt het een (in mijn situatie) een brede menu. Op dit moment is het een dropdown: Producten -> Product 1, Product 2. Ze hoeven dus niet eerst op Producten te klikken voordat ze het overzicht hebben van alle producten.
LikeLike
Dank voor je reactie, Eise. Is de site waar je het over hebt al ergens te zien? Ik zie op net-soft.nl nou net een mooie kop in de navigatie met “informatie” 🙂
LikeLike
Ja kijk voor de gein eens op http://www.net-soft.nl/new/ , het is nog in ontwikkeling dus het een en het ander zal niet werken. Af en toe bekijk ik eens wat blogs over usability en pas de tips dan toe.
kleine opmerking: de tijd van je reactie systeem staat nog in zomertijd.
LikeLike
Eise, leuk om te zien! Vind je navigatie inderdaad netjes zo. Maar lees dit eens door, met het oog op je producten op de homepage, ik zag ze namelijk de eerste seconden niet staan:
http://www.usarchy.com/2007/04/bannerblindheid/
LikeLike
Bedankt! Dat artikel over bannerblindheid had ik nog niet gelezen, ik zal eens kijken hoe ik de banners kan veranderen in de vormen die jij aangeeft in het artikel.
LikeLike
Ruben,
Goed artikel. Het blijft altijd een gevecht tussen de klant (die het altijd beter denkt te weten), de grafische jongens (het dient voornamelijk esthetisch verantwoord te zijn) en de techneuten (ik kan alles ajax, php, asp , java, .net, mysql, etc).
Terwijl de gebruiker in mijn ogen primair gericht is op een simpel en duidelijk antwoord op zijn vraag. Wat mij betreft is functionaliteit / usability het allerbelangrijkste onderdeel van een website. Dit geld niet alleen voor het (top)menu maar voor de gehele website ongeacht op welke doelgroep de website zich ook richt (b2c of b2b).
Het design van Google, Marktplaats, Nu.nl (toch redelijk grote jongens op internet) is niet voor niets vanaf de oprichting nauwelijks veranderd…
LikeLike
Een artikel naar mijn hart! Begin gewoon altijd vanuit de gebruiker omdat je op internet altijd moet voldoen aan de “gun”- factor.
LikeLike
Mooi Artikel, Ruben.
Ik heb net gisteren een nieuw design op mijn blog actief gezet die wel de nodige extra effectjes en dergelijke qua layout toevoegen. Oeps. 🙂
Toch heb ik ook de nodige aandacht aan usability geprobeerd te besteden en wil ik de site ook nog verder gaan uitbreiden om de navigatie en usability in het algemeen te verbeteren. Ik houd daarvoor je blog goed in de gaten. 😉
Ik ben benieuwd of jij grote nadelen in mijn nieuwe design ziet?
LikeLike
Elja, enige puntjes op navigatiegebied: het logo linkt niet naar de homepage, en ik mis een soort rubricering of tags om te kijken wat je allemaal voor content hebt. Maar ik vind dat voor een blog ook geen must, op Usarchy zien de categories en tags ook wat meer naar de achtergrond verdwenen.
Qua design mag het van mij allemaal wel wat minder hard: alles schreeuwt, waardoor veel wegvalt. Denk bijv aan vetgedrukte datum en auteur (die zijn niet zo belangrijk, waarom niet in kleinere en grijze print) en de felgroene achtergrond bij de sidebar (how about wit? :))
LikeLike
Bedankt voor je reactie en de tips, Ruben!
Het logo linkt overigens wel naar de homepage; http://www.photofacts.nl wordt altijd geredirect naar de /fotografie map. Maar ik snap de onduidelijkheid. Kan ik wel even aanpassen natuurlijk (al is dat dan weer een extra redirect).
Wat betreft het harde design; ik snap wat je bedoeld. Ik zal eens kijken of ik dat wat minder kan maken, zonder het design teveel te kort te doen. Een Rubricering is er ook, maar blijkbaar dus niet duidelijk genoeg. Al zie ik hierin niet zo’n verschil met Usarchy..
LikeLike
Helder en fijn overzicht. Groot struikelblok bij het ontwerpen van navigatie vind ik elke weer de keuze tussen wel of geen dropdown-menu. Met name omdat je moet kiezen of de menutitel zelf wel of niet klikbaar is. Zo ja, dan zul je daar een landingpage voor moeten maken, zo nee, vodloet het dan aan de verwachting van de gebruiker (en wánneer klapt het menu dan open, bij een klik, of bij een mouse-over)? Ruben, enig idee of daar getallen over zijn?
LikeLike
Het hele artikel over de kunst van navigatie is vanaf nu te lezen in Web Designer nummer 11. Tien pagina’s lang, dus nog veel meer leesvoer over navigatie dus.
Ruben, bedankt voor je uitstekende bijdrage!
LikeLike
Een tip voor iedere ontwerper: ga eens met een eindgebruiker om de tafel zitten (of een aantal). Kan een erg frisse kijk geven.
LikeLike
Leuk stuk in WebDesigner. Staan veel dingen in die eigenlijk iedereen wel weet, maar waar niemand aan denkt op het moment van het designen van een website. Dat heb ik vaak 😉
LikeLike
Ziet er veelbelovend uit! Goede tips! bedankt
LikeLike
Pingback: Hostingbedrijven.nl - webhostingtalk.nl
Pingback: Frankwatching’s nieuwe navigatie - Forward
Ik ben samen met mn broer bezig met het maken van een aantal sites, hij doet meer het programmeer gedeelte en ik het ontwerpgedeelte (waar alles komt te staan en hoe het eruit ziet dus).
Heb erg veel aan de tips van Ruben….nogmaals thnx!!!
LikeLike
@ Alicia
Beetje offtopic, sorry, maar op je website:
‘Maximaliseer uw resultaten’
Tja, pakkende tagline voor zo’n site! 🙂
ontopic:
“Denk niet dat je in een keer de perfecte navigatie kunt ontwikkelen”
dat is dan wel weer een geruststelling 🙂
Voor mijn nieuwe site heb ik bewust gekozen voor een rustig ontwerp met veel wit. Het spreekt mensen inderdaad aan, niet teveel tierelantijnen en gewoon to the point.
Wat ik me alleen afvraag, als je logo als een link naar je homepage is, heb je dan ook nog een ‘Home’ knop nodig? Ik heb het nu wel, maar wil er eigenlijk vanaf en die ruimte voor iets anders gebruiken. Tips, iemand?
LikeLike
Patty: ja, de Home knop hoort er nog wel bij want niet iedereen weet dat het logo een link is. Bovendien is het logo op sommige sites geen link waardoor mensen daar ook nog niet op durven vertrouwen.
Ook is de home knop nuttig om te laten zien dat je op home zit, als je er zit. Dan moet de knop geen link zijn natuurlijk, en er anders uitzien.
LikeLike
Ruben,
goede informatieve site heb je! Ook dit artikel is erg interessant. Op http://www.goodusability.co.uk/2008/12/expanding-navigation/ las ik onlangs ook nog en interessant artikel over navigatie.
Ik heb op mijn eigen site geprobeerd de navigatie duidelijk en simpel te houden door eigenlijk alle links vanaf iedere pagina direct toegankelijk te maken. Dus ook de subitems. Ik ben eigenlijk wel benieuwd wat je hier van vindt Ruben! Dus mocht je nog ergens een paar minuutjes over hebben 😉
LikeLike
Santhos: yep, heel netjes zo. Als je weinig sub-items hebt zou ik altijd zo’n vorm kiezen. En goed dat je nog steeds een pagina voor Diensten hebt gemaakt ook trouwens. Je lettertype mag van mij wel iets groter trouwens, wit op zwart is al iets slechter leesbaar en als het zo klein is zeker.
LikeLike
In sommige gevallen is het toch handig op een weblog: zo’n vakje dat je aan kunt vinken zodat je een mailtje krijgt als er een nieuwe reactie wordt geplaatst 😉
Maar dat terzijde. Bedankt voor je reactie! Ik zal eens kijken naar de lettergrootte. Krijgen we weer een design vs usability issue. Ik vind kleine letters altijd mooi subtiel en groot wat minder 🙂
LikeLike
Heb een vraag over menu’s/navigatie:
Ik wil voor een nieuwe website het hoofdmenu horizontaal bovenaan plaatsen. Met een mouse-over zie je de submenu’s tevoorschijn komen.
Als je vervolgens op een submenu hebt geklikt, is het dan noodzakelijk/wenselijk dat alle submenu’s ergens getoons worden aan de bezoeker?
Zeg maar zoals http://www.hema.nl het heeft gedaan.
Zo ja, wat is dan de beste plek voor de submenu’s?
Ze kunnen namelijk ook horizontaal weergegeven worden onder de hoofdmenu’s, zoals bijvoorbeeld bij KPN: http://www.kpn.com/internet/internetplusbellen.htm
Kan iemand mij hier meer over vertellen?
LikeLike
Erwin: ja, ik vind dat dat wel nodig is. Ik ben absoluut geen fan van dropdown menu’s though, ze zijn vaak verwarrend en je moet als bezoeker maar net weten dat er uberhaupt iets onder staat.
War je ze neerzet maakt wat mij betreft niet veel uit, maar het is wel goed om de relatie met het niveau erboven duidelijk te maken. Bij een 2e horizontale laag is dat makkelijker. Aan de andere kant heb je dan vaak minder plek om items toe te voegen.
Lees zeker ook Nielsen’s bevindingen en adviezen over mega dropowns, een populaire variant op simpele dropdowns.
http://www.useit.com/alertbox/mega-dropdown-menus.html
LikeLike
Verplicht leesvoer op dit vlak is, volgens mij althans, het boek Don’t make me think, van Steve Kruger.
LikeLike
Zo leuk, als je een bericht post wordt de favicon van je eigen site naast je naam geplaatst 🙂
Mijn eerste reactie was: He, ik wist niet dat ik een profiel met bijhorende avatar had op deze site 🙂
LikeLike
Er is naar mijn mening helemaal niks mis met een dropdownmenu. Wel het dropdownmenu zo snel mogelijk geladen worden. Menu’s die langere laadtijden nodig hebben dan de gebruiker nodig heeft om te focussen zijn funest voor de gebruikerservaring.
LikeLike