Home » De top van Bob » Design » Tutorial » Usability » Usability tips – zo bouw je een gebruiksvriendelijke website

Usability tips – zo bouw je een gebruiksvriendelijke website

Mijn eerste SEO tip in het artikel van vorige maand was “maak websites voor bezoekers,  niet voor zoekmachines”. SEO is immers slechts een middel om bezoekers naar je website te krijgen. Goed nieuws echter: een gebruiksvriendelijke website is vaak ook een zoekmachinevriendelijke website! In dit artikel lees je hoe je een gebruiksvriendelijke website bouwt.

Inhoudsopgave van dit artikel

Usability tip 1 : Stel je bezoeker centraal en identificeer de toptaken
Usability tip 2 : Een scanbare website zorgt dat je bezoeker direct weet wat hij kan verwachten
Usability tip 3 : De onderdelen van een goede header
Usability tip 4 : De navigatie moet duidelijk en beschrijvend zijn
Usability tip 5 : De homepage moet focussen op de toptaken
Usability tip 6 : Maak content overzichtelijk en to the point
Usability tip 7 : Zorg voor een goede zoekfunctie
Usability tip 8 : Gebruik responsive webdesign voor tablets en smartphones
Usability tip 9 : Houd je aan standaarden
Usability tip 10 : Test je website
Usability tip 11 : Stop met het pesten van je bezoekers!

Usability tip 1 : Stel je bezoeker centraal en identificeer de toptaken

Een website maak je dus niet voor zoekmachines, maar óók niet voor jezelf. En ook niet voor de directeur, de marketingmanager of de werknemers van de organisatie. Nee, een website maak je voor je bezoekers! En dingen als een missie, visie, nieuws over je bedrijf, de structuur van je organisatie enzovoorts interesseren je bezoeker niet. Er is maar 1 ding belangrijk:

Je bezoeker heeft een probleem en zoekt een oplossing

Een bezoeker komt altijd met een bepaald doel naar je website: hij zoekt informatie (contactgegevens, openingstijden, productinformatie, prijzen) of wil iets doen (een bestelling plaatsen, een spelletje spelen). Met andere woorden: hij heeft een probleem en zoekt een oplossing. Enkele voorbeelden:

  • Het probleem: Iemand wil een nieuwe tv maar weet niet wat dat kost.
    De oplossing: Hij vind een webshop met prijzen van tv’s.
  • Het probleem: Iemand wil weten wanneer een bepaalde winkel open is.
    De oplossing: Hij vind de openingstijden op de website van de winkel.
  • Het probleem : Iemand wil een nieuwe website.
    De oplossing: Hij huurt mij in om een nieuwe website voor hem te bouwen ;-).
  • Het probleem: Iemand verveelt zich.
    De oplossing: Hij vind een website waarop hij spelletjes kan spelen.

Inventariseer de toptaken

Voordat je kunt beginnen met het optimaliseren van je website zal je moeten weten met welke doelen bezoekers naar jouw website komen; welke problemen kun jij voor hen oplossen? De belangrijkste doelen noemen we toptaken.

Jij moet ervoor zorgen dat je bezoeker zijn doel zo gemakkelijk mogelijk kan bereiken.

De titel van Steve Krugs usability bijbel is “Don’t make me think!”. Dat ene zinnetje is de basis van usability; zorg ervoor dat je bezoeker niet na hoeft te denken. Alles moet dus volledig vanzelfsprekend zijn en werken zoals je bezoeker verwacht.

Wat je moet weten over je bezoekers

Niet iedere bezoeker heeft hetzelfde doel maar sommige dingen gelden eigenlijk voor vrijwel alle internetgebruikers:

  • Je bezoeker komt altijd met een bepaald doel naar je website : hij heeft een probleem en zoekt een oplossing
  • Je bezoeker scant webpagina’s op zoek naar een oplossing of iets dat hem dichter bij die oplossing brengt
  • Je bezoeker heeft vaak haast en dus weinig geduld
  • Je bezoeker twijfelt, het is jouw taak deze twijfels weg te nemen
  • Als je twijfels niet wegneemt of je bezoeker frustreert klikt hij je website weg

Informatie over het bedrijf hoort op de “over ons” pagina (en ook alleen daar)

Pas als je de bezoeker overtuigd hebt dat jij zijn probleem kan oplossen wil hij misschien wat meer weten over jou of je organisatie. Die informatie moet dus wel op je website staan, maar dan wel in een apart gedeelte van de website dat bereikbaar is via een simpel “over ons” linkje in het menu of de utilities (zie tip 4: navigatie).

Als je een écht goede website hebt zal die “over ons” pagina echter niet vaak bezocht worden. Een bezoeker wil vaak alleen meer weten over de organisatie achter de website als hij twijfelt, en een echt goede website heeft die twijfels al weggenomen. Denk maar eens na: hoe vaak lees jij de “over ons” pagina van een webshop voordat je iets bestelt? Waarschijnlijk vrijwel nooit…

Usability tip 2 : Een scanbare website zorgt dat je bezoeker direct weet wat hij kan verwachten

Slecht nieuws: je zorgvuldig geschreven teksten worden veel minder gelezen dan je zou willen. Bezoekers lezen namelijk meestal geen complete pagina’s, ze scannen deze alleen. Ze zijn immers met een bepaald doel op je website: je bezoeker heeft een probleem en zoekt een oplossing. Hij wil in eerste instantie alleen weten of jij die oplossing wellicht kan bieden en is op zoek naar aanwijzingen die dat bevestigen.

Scannen doe je zelf waarschijnlijk ook als je een krant leest, of een nieuwssite als nu.nl. Je scant eerst de voorpagina op zoek naar interessante koppen. Vervolgens lees je een stukje van het artikel, en als je dat interessant vind lees je pas de rest. Of misschien lees je de voorpagina überhaupt niet en blader je meteen door naar de sportsectie.

Dat doen de bezoekers van je website dus ook: ze bekijken alleen de informatie die hen interesseert. Jouw taak is ervoor te zorgen dat ze die informatie zo snel en gemakkelijk mogelijk kunnen vinden.

Het F patroon : dit zijn de belangrijkste onderdelen van je website

usability tips : volg het F-patroon voor een scanbare websiteUit diverse onderzoeken komt naar voren dat bezoekers websites scannen in een F patroon. Op bovenstaande afbeelding heb ik dat F patroon geprojecteerd op dit artikel. Zoals je ziet zijn dit de onderdelen die het meeste aandacht krijgen:

  • Het logo en de slogan : op welke site ben ik en wat kan ik hier vinden
  • Het navigatiemenu : wat zijn de belangrijkste secties of categorieën op deze site
  • De paginatitel : waar gaat deze pagina over in enkele woorden
  • De tussenkopjes : waar gaat deze paragraaf over in enkele woorden

Verder verhogen opsommingslijstjes en dikgedrukte of schuingedrukte woorden de scanbaarheid van een pagina.

Als je bezoeker iets heeft gevonden wat hem interessant lijkt gaat hij de tekst die daarbij hoort scannen. Hij leest dan de eerste paar woorden van de eerste paar regels om te bepalen of dit de informatie is die hij zoekt. Zorg er dus voor dat de belangrijkste tekst zover mogelijk bovenaan en vooraan staat op je pagina.

De onderdelen die het meeste aandacht krijgen zijn dus blijkbaar elementen die je bezoeker belangrijk vind. In de rest van dit artikel lees je hoe je deze onderdelen zo gebruiksvriendelijk mogelijk maakt.

De call to action knop

Op een scanbare website bevat iedere pagina een call to action knop: een duidelijke knop die de bezoeker naar de volgende stap brengt. Op de productpagina van een webwinkel is dit bijvoorbeeld de “in winkelwagen” knop, op de site van een hotel of restaurant is het de “reserveer nu” knop en op de site van een dienstverlener is het de “vraag offerte aan” knop.

Deze knop moet er direct uitspringen, zodat het voor de bezoeker direct duidelijk is wat er van hem verwacht wordt; hier moet ik op klikken voor de volgende stap in het proces. Bij de webwinkel zie je op de winkelwagen pagina dus een duidelijke knop met “naar de kassa”, en als je de noodzakelijke gegevens hebt ingevuld staat daar een knop met “afrekenen”, “bestelling plaatsen” of iets dergelijks.

De tekst moet altijd aanzetten om iets te doen (“vraag offerte aan”, “bestelling plaatsen”) en niets aan duidelijkheid te wensen overlaten.

Usability tip 3 : De onderdelen van een goede header

Je kunt maar één keer een eerste indruk maken, die kan dus beter goed zijn. Je hebt slechts enkele seconden om je bezoeker te overtuigen, als dat niet lukt klikt hij door naar de volgende site.

Je logo en slogan zijn de belangrijkste onderdelen van je header

De belangrijkste onderdelen van je header zijn je logo en slogan. Het logo vertelt de bezoeker op welke site hij is, de slogan vertelt in enkele (6 tot 8) woorden wat er op de site te vinden is. In mijn geval vertelt het logo je dat je op de site van Bob de webbouwer bent, en de slogan vertelt je dat ik websites bouw en verbeter.

Het logo en de slogan staan op elke pagina, en altijd op dezelfde plaats (linksboven is het meest gebruikelijk). Dit zorgt voor herkenbaarheid en het geeft de bezoeker een bevestiging dat hij nog steeds op jouw website is. Daarnaast komt natuurlijk niet iedere bezoeker op de homepage binnen.

De homepage is echter wel de belangrijkste pagina op je website, die vrijwel iedere bezoeker bekijkt. Ook als een bezoeker “verdwaalt” op je website probeert hij vaak vanaf de homepage de weg alsnog te vinden. Zorg er daarom voor dat een klik op het logo de bezoeker altijd naar de homepage brengt.

Vermeld je USP’s in de header

Omdat die header zo goed bekeken wordt en, als het goed is, op iedere pagina hetzelfde is vormt deze ook een prima plek om je USP’s te vermelden. Een USP is een Unique Selling Point, iets dat jij beter doet dan iemand anders dus. Heb jij bijvoorbeeld een laagste prijs garantie? Heeft een klant die voor 22.00 bestelt zijn bestelling de volgende dag al in huis? Vermeld het in de header!

Andere onderdelen die in de header thuishoren

Ook bepaalde belangrijke onderdelen, zoals een zoekfunctie, winkelmandje en login mogelijkheid, zijn vaak in de header terug te vinden. Met name rechtsboven is een vaak gebruikte plek voor dat soort zaken. Persoonlijk plaats ik ook regelmatig een telefoonnummer en e-mail adres in de header.

Ook vind je hier regelmatig de utilities terug, meer daarover lees je bij het onderdeel “navigatie”.

Maak je header niet te hoog

Je bezoeker is op zoek naar een oplossing voor zijn probleem. Die enorme foto in je header zorgt ervoor dat je inhoud naar beneden wordt gedrukt, waardoor de bezoeker niet direct ziet of jij die oplossing kan bieden. En aangezien je bezoeker weinig geduld heeft gaat hij echt niet steeds naar beneden scrollen, hij klikt gewoon op de “back” knop van zijn browser en gaat naar de website van je concurrent.

Usability tip 4 : De navigatie moet duidelijk en beschrijvend zijn

Usability tips : de onderdelen van de navigatieDe navigatie moet de volgende vragen beantwoorden:

  • Waar ben ik (op welke website, en waar op die website)
  • Waar gaat deze pagina over
  • Wat is er nog meer te vinden op deze website
  • Waar ben ik al geweest (bezochte links)
  • Hoe kom ik op de homepage

Zoals je inmiddels weet komt een bezoeker altijd met een bepaald doel op je website. De navigatie moet ervoor zorgen dat je bezoeker zo snel en gemakkelijk mogelijk vindt waarnaar hij op zoek is. Een goede navigatiestructuur is daarbij onmisbaar.

Het navigatiemenu

Als we het hebben over navigatie denken we vaak alleen aan het navigatiemenu. Dat is niet correct: het logo, de slogan, de paginatitel, de tussenkoppen enzovoorts maken ook allemaal deel uit van de navigatie. Het navigatiemenu is echter wel een zeer belangrijk onderdeel. Voor alle duidelijkheid: we hebben het hier over het hoofdmenu van de site, het primaire menu dat op iedere pagina aanwezig is dus.

Een gebruiksvriendelijk navigatiemenu:

  • Bestaat uit 5 tot 9 items
  • Begint met “home” en eindigt met “contact”
  • Bevat de belangrijkste secties of categorieën
  • De menu items hebben een korte (bij voorkeur 1 woord), beschrijvende naam

Hoe bepaal je de belangrijkste secties en categorieën

Home en contact zijn min of meer verplicht, dat verwachten bezoekers nu eenmaal. Je houdt dus nog maximaal 7 menu items over. Maar welke onderdelen van je site horen daar thuis?

screenshot-caAls het goed is heb je de eerder besproken toptaken in beeld gebracht en weet je dus waarnaar de meeste bezoekers van je website op zoek zijn. Meestal zijn dat de belangrijkste producten of diensten van je organisatie.

Als we bijvoorbeeld naar een groot warenhuis als C&A kijken zullen de meeste bezoekers op zoek zijn naar dameskleding, dus dat zetten ze als eerste in het navigatiemenu. Herenkleding wordt blijkbaar een stuk minder verkocht want dat staat pas achteraan in het menu, na de baby en kinderkleding.

Gebruik concrete namen in je navigatiemenu

Gebruik concrete, duidelijke namen in het navigatiemenu. Dus niet “onze producten” of “diensten”, maar “dameskleding” of “laat Bob je website bouwen”. Eén van de taken van het navigatiemenu is immers vertellen wat er te vinden is op de website, dat moet in één oogopslag duidelijk zijn.

Subcategorieën horen in een submenu thuis

Hoe concreet je in het navigatiemenu moet zijn is afhankelijk van hoe groot je website of organisatie is. Ik bied maar 2 diensten aan, websites bouwen en websites verbeteren, en ben dus zo klaar. C&A heeft echter honderden subcategorieën; alleen al onder dameskleding vallen jurken, shirts & tops, schoenen, lingerie enzovoorts.

Als je al die losse onderdelen in het hoofdmenu moet zetten wordt het veel te onoverzichtelijk, dus C&A heeft in het hoofdmenu alleen “dames” staan. Pas als je besloten hebt dat je dameskleding wilt krijg je alle subcategorieën die daaronder vallen te zien. Overigens zou de term “dameskleding” beter zijn, C&A verkoopt immers geen dames voor zover ik weet, maar bij zo’n bekende winkel mag je ervan uitgaan dat mensen weten dat er kleding verkocht wordt 😉

De subcategorieën verschijnen aan de linkerzijde als je op de hoofdcategorie klikt, wat een prima plek is voor een submenu. Submenu’s worden ook vaak onder het hoofdmenu geplaatst, maar in dat geval dient het wel duidelijk te zijn bij welk hoofdmenu item het submenu hoort.

Je menu indelen met behulp van cardsorting

Als je een grotere website hebt kan het soms best lastig zijn om tot een goede indeling te komen. Voor jurkjes en topjes is het gemakkelijk, iedereen weet dat dit onder dameskleding valt. Maar hoe zit het met schoenen? Die zijn er immers ook voor heren en kinderen. Verdienen die geen eigen menu item? C&A heeft ervoor gekozen schoenen als subcategorie te nemen, maar bij Zalando hebben schoenen wel een eigen plekje in het hoofdmenu. Logisch, want Zalando is bekend geworden als schoenenwinkel en veel bezoekers zullen dus op zoek zijn naar schoenen.

Een bekende methode om tot een goede menu indeling te komen is cardsorting. Dat werkt als volgt:

  • Je schrijft elk onderdeel van de website op een post-it. Elke categorie, subcategorie, pagina enzovoorts komt op zijn eigen post-it.
  • Vervolgens leg je de post-its die bij elkaar horen in groepjes. De jurkjes, topjes, lingerie en dameskleding vormen bijvoorbeeld zo’n groepje.
  • Daarna ga je elk groepje een titel geven. Die titel kan dus al op één van de post-its staan; in bovenstaand voorbeeld is “dameskleding” natuurlijk de titel. Maar bij een groepje met “geschiedenis van ons bedrijf”, “vacatures” en “team” heb je geen duidelijke titelkandidaat en moet je dus een titel verzinnen. In dit geval zou “over ons” een prima titel zijn.
  • Probeer nu het aantal groepjes terug te brengen naar het eerder genoemde maximum van 7.
  • Ten slotte leg je de groepjes in de juiste volgorde. De toptaken komen vooraan, daar zijn je bezoekers immers naar op zoek. Dat zijn dus meestal je belangrijkste producten en diensten. De dingen die het probleem van je bezoeker oplossen dus. Pas daarna komen zaken als “referenties”, “offerte aanvragen”, “portfolio” enzovoorts. De laatste items in het menu zijn meestal “over ons”, “nieuws” en uiteraard “contact”.

Utilities mogen ook buiten het hoofdmenu

Met utilities (in het Nederlands ook wel servicepagina’s genoemd) bedoelen we alle zaken die niet tot de toptaken behoren. De dingen die niet direct bijdragen aan de oplossing van het probleem van je bezoeker dus. Hieronder vallen dingen als “contact”, “over ons”, “nieuws”, “vacatures”, “inloggen”, “FAQ’s”, “voorwaarden” enzovoorts. Deze utilities hoeven niet perse in het hoofdmenu te staan; je vind ze ook regelmatig rechts bovenin de header. Houdt het echter overzichtelijk: beperk het aantal utilities in de header tot maximaal 5.

Heb je meer utilities? Werk dan weer met submenu’s (vacatures en nieuws kunnen bijvoorbeeld prima onder het kopje “over ons” vallen) of zet minder belangrijke utilities in de footer. Belangrijke utilities voor bezoekers, zoals contact en inloggen, mogen echter nooit naar de footer verplaatst worden.

Je bezoeker heeft een probleem en zoekt een oplossing

Het is maar dat je het niet vergeet. Alleen de onderdelen die de bezoeker helpen bij het vinden van een oplossing voor zijn probleem horen in het menu thuis. Informatie over jou of je organisatie stop je netjes weg in een “over ons” link, ergens achteraan in het menu (alleen als daar nog plaats voor is) of in de utilities.

U bent hier : zo voorkom je dat je bezoeker verdwaalt

Usability tips : een duidelijke "u bent hier" indicatorEen belangrijke taak van de navigatie is de bezoeker vertellen waar hij is. De volgende onderdelen van je navigatie zorgen ervoor dat je bezoeker niet verdwaalt:

  • Het logo en de slogan : op welke site ben ik en wat kan ik hier vinden
  • Het navigatiemenu : wat zijn de belangrijkste secties of categorieën op deze site
  • Het huidige menu item: dit krijgt een andere opmaak dan de andere menu items (zie Bobs blog in mijn menu)
  • De breadcrumbs: zie hieronder
  • De paginatitel : waar gaat deze pagina over in enkele woorden

Is het je opgevallen dat de meeste van deze punten ook al genoemd werden bij het F-patroon van tip 2? Juist…

U was hier : geef bezochte links een afwijkende opmaak

Met bovenstaande tips weet je bezoeker altijd precies waar hij is. Maar hij wil ook graag weten waar hij al is geweest, zodat hij niet steeds op dezelfde pagina terecht komt. Want je weet het: je bezoeker heeft haast en als je hem (te veel) frustreert klikt hij je website weg.

Breadcrumbs

SEO tips : breadcrumbsBij grotere websites is het verstandig breadcrumbs te gebruiken. Breadcrumbs zijn de (meestal wat kleinere) linkjes bovenaan een pagina zoals op de afbeelding hiernaast. Dit zijn linkjes naar alle pagina’s die de gebruiker tegenkomt op weg naar de huidige pagina, als men vanaf de homepage naar de huidige pagina zou gaan.

Het eerste linkje is altijd “home”, eventueel gevolgd door één of meerdere rubriek(en) of categorie(en) en als laatste de titel van de huidige pagina. De titel van de huidige pagina is overigens geen link en vaak dikgedrukt.

Met breadcrumbs zien bezoekers waar in de site ze zich precies bevinden, en kunnen ze gemakkelijk navigeren naar de bovenliggende pagina’s in de sitestructuur (bijvoorbeeld de verzamelpagina met alle artikelen of producten in een bepaalde categorie).

Praktijkvoorbeeld van een goede navigatie : Zalando.nl

Usability tips : de utilities van ZalandoOp de afbeelding hiernaast zie je de website van Zalando, één van de betere websites als het over usability gaat. Zalando heeft een duidelijk hoofdmenu dat bestaat uit 8 menu items met hun belangrijkste producten en onderdelen (outlet is bijvoorbeeld geen product, maar wel iets waar veel bezoekers naar op zoek zijn).

Als je met de muis over zo’n menu item gaat krijg je alle subcategorieën te zien, en als je erop klikt verschijnt er een submenu aan de linkerzijde. De pagina’s na de homepage zijn daarnaast voorzien van breadcrumbs en de huidige pagina in het (sub)menu is voorzien van een afwijkende opmaak. Helemaal goed!

De utilities (inloggen, mijn verlanglijstje, cadeaubon, nieuwsbrief, klantenservice) staan bij Zalando rechtsboven in de header, een logische plek.
Daarnaast gebruikt Zalando de header voor de USP’s, de winkelwagen en de zoekfunctie. Alle punten uit tip 3 zijn hier dus perfect toegepast.

Boven het hoofdmenu heeft Zalando nog een extra menu, namelijk dames, heren en kinderen. Als je één van deze drie selecteert krijg je nog steeds hetzelfde hoofdmenu, maar in de submenu’s zie je nu alleen nog de producten die relevant zijn voor die doelgroep. Prima dus!

Valt er dan helemaal niets te verbeteren aan Zalando.nl? Naar mijn mening niet veel, maar toch enkele puntjes:

  • Ik vind de menu items “fashion memo” en “premium” niet duidelijk genoeg. Zalando heeft echter veel terugkerende bezoekers en kan zich dat soort dingen waarschijnlijk wel veroorloven.
  • Ik zou het makkelijker maken om contact op te nemen. Nu is er alleen een piepklein linkje naar “klantenservice” in de utilities opgenomen, en pas in de footer (wat een heel eind scrollen is bij Zalando, zeker bij de subcategorie pagina’s) vind ik nog een linkje “contact”.

Usability tip 5 : De homepage moet focussen op de toptaken

De homepage is de meest bezochte pagina op je website. Hoewel Google tegenwoordig steeds meer bezoekers direct naar de juiste pagina op je website stuurt kijken de meeste bezoekers toch ook even op de homepage. De homepage is de hoofdingang en etalage van je website. De belangrijkste taak van de homepage is uitleggen wat er op de website te vinden is; als het goed is de oplossing voor het probleem van je bezoeker dus.

De belangrijkste onderdelen van een goede homepage zijn:

  • Het logo en de slogan : op welke site ben ik en wat kan ik hier vinden?
  • Het navigatiemenu : wat zijn de belangrijkste secties of categorieën op deze site?
  • De zoekfunctie : hoe kan ik zoeken op deze site?
  • De USP’s : waarom moet ik hier zijn en niet ergens anders?
  • De “welcome blurb” : vertel in enkele regels wie je bent en wat je doet (wat er op de site te vinden is dus, géén missie en visie!).
  • De toptaken : hier komt je bezoeker voor, dus hier moet vooral de focus op liggen.
  • Alles wat je verder onder de aandacht van je bezoekers wilt brengen : De etalage dus, waar je je belangrijkste producten en diensten etaleert, je aanbiedingen in de spotlight zet, je nieuwste artikelen presenteert enzovoorts.

Houd het overzichtelijk

Dat is dus een flinke waslijst. De eerste 4 punten vormen de basis van je website en dienen dus op iedere pagina aanwezig te zijn, maar met name het laatste punt zorgt vaak voor overvolle homepages. Zeker bij grotere organisaties wil iedereen een stukje over zijn product, dienst, afdeling of nieuwtje op de homepage.

Hier geldt weer regel nummer 1: stel je bezoeker centraal. Alle informatie die niet direct bijdraagt aan het oplossen van het probleem van je bezoeker (de toptaken dus) hoort niet op de homepage thuis. Ook dat stukje van de directeur niet.

Usability tip 6 : Maak content overzichtelijk en to the point

Met de content van een website bedoelen we vooral de tekst die erop staat, maar ook afbeeldingen, video’s enzovoorts vallen onder content.

Focus op 1 onderwerp per pagina

De homepage en navigatie moeten een overzicht bieden van de belangrijkste onderwerpen op de website, maar de rest van de pagina’s moeten zich focussen op slechts één onderwerp per pagina. Zo richt deze pagina zich volledig op het onderwerp usability, de pagina laat Bob je website bouwen bevat alleen informatie die relevant is voor mensen die een website door mij willen laten bouwen en de pagina Bob bellen of mailen bevat uitsluitend manieren om contact met mij op te nemen.

Korte en duidelijke teksten

Zoals je bij tip 2 hebt kunnen lezen worden teksten vrijwel nooit helemaal gelezen. Je bezoeker scant een tekst op zoek naar een oplossing voor zijn probleem of iets dat hem dichter bij die oplossing brengt. Alle andere informatie wordt genegeerd.

Usability expert Steve Krug adviseert dan ook je teksten zo kort mogelijk te houden. Hij zegt “schrap de helft van alle woorden in je tekst, en schrap vervolgens de helft van wat er nog over is”. Dat hoef je niet letterlijk te nemen, maar het is duidelijk dat je kritisch moet kijken naar je teksten. Elk woord dat geen waarde toevoegt kan weg.

Overbodige informatie wordt ook wel ruis genoemd omdat het de aandacht afleidt van de informatie die er echt toe doet (de informatie die van belang is voor de toptaak dus). Het verminderen van die ruis zorgt er dus voor dat je bezoeker zijn doel makkelijker kan bereiken.

Persoonlijk ben ik van mening dat écht goede content toch wel gelezen wordt, ook als het een flinke lap tekst is. Je bent dit (belachelijk lange) artikel immers ook nog steeds aan het lezen (waarvoor dank… en volhouden he, je bent al over de helft!) 😉

Visuele hiërarchie

Usability tips : visuele hierarchieDeze webpagina is echter wel goed scanbaar. Je hoeft niet perse het hele artikel te lezen; als je alleen iets wilt weten over de navigatie of over de content heb je dat zo gevonden. Dat komt omdat deze webpagina een duidelijke visuele hiërarchie heeft. Dat wil zeggen dat ik visuele elementen gebruik om duidelijk te maken welke onderdelen bij elkaar horen.

Om te beginnen is het navigatiemenu duidelijk te onderscheiden van de rest van de website. Dat komt omdat het een hele andere opmaak heeft dan de rest van de website, en het wordt gescheiden van de content door de “houten balk”. Onder het navigatiemenu vind je de paginatitel. Deze staat boven alle andere content en heeft het grootste formaat van alle tekst op de pagina.

Daaronder vind je de inhoudsopgave. Deze heeft een duidelijke kop, en bovendien zijn de links ook duidelijk herkenbaar omdat ze een andere opmaak hebben dan de normale tekst. Het is ook duidelijk een apart blok in de content door de vele witruimte boven en onder de inhoudsopgave.

Datzelfde geldt voor de tips zelf. Iedere tip is voorzien van een duidelijke kop die vertelt waar die tip over gaat. Deze kop is groter dan de rest van de tekst (maar minder groot dan de paginatitel). Verder is ook hier veel witruimte tussen de verschillende tips gebruikt, en bovendien zijn de tips om en om voorzien van een andere achtergrondkleur wat de scanbaarheid enorm bevordert.

Elke tip bestaat weer uit meerdere subonderdelen, zoals het onderdeel “visuele hiërarchie” dat je nu aan het lezen bent. Ook deze subonderdelen hebben een eigen tussenkop, die weer kleiner is dan de koppen van de tips. Ook hebben deze een iets andere kleur dan de normale tekst zodat ze beter opvallen.

Contrast

Voor een prettig leesbare tekst is voldoende contrast van groot belang. Een zwarte tekst op een witte achtergrond geeft het meeste contrast en leest dus het prettigst. Een lichtgrijze tekst op een witte (of lichte) achtergrond is daarentegen erg moeilijk leesbaar, omdat er te weinig contrast is. Niet doen dus, hoe chique het er ook uit ziet.

Overigens geeft witte tekst op een zwarte achtergrond evenveel contrast als zwarte tekst op een witte achtergrond, maar mensen vinden dat over het algemeen een stuk minder prettig lezen. Om die reden adviseer ik je dan ook een lichte achtergrond voor je website te gebruiken, zeker als je veel tekst gebruikt.

Lettertype

Ook de keuze voor het lettertype bepaalt in grote mate hoe prettig een tekst te lezen is. Ik adviseer een algemeen geaccepteerd lettertype te gebruiken, zoals Arial, Helvetica, Verdana (wat ik zelf gebruik) of een ander web safe font. Als jij (of je klant) toch graag een wat minder gangbaar lettertype wil gebruiken kun je ook eens rondkijken bij Google Fonts, waar je inmiddels de keuze hebt uit meer dan 630 webvriendelijke lettertypes hebt. Kies in elk geval voor een schreefloos lettertype.

Daarnaast is het vanuit usability oogpunt aan te raden fonts niet in pixels maar in em of percentages te programmeren in de CSS zodat bezoekers zelf de lettergrootte kunnen beïnvloeden.

Afbeeldingen, video en andere media

Voor afbeeldingen, video en andere media gelden de volgende richtlijnen:

  • Geef de gebruiker altijd de controle en zorg dus voor bedieningsbuttons bij video, sliders enzovoorts
  • Video is prima, maar start deze niet automatisch bij het laden van de website (zeker niet met audio!)
  • Zorg voor een tekstalternatief voor alle media. De “alt” tag bij afbeeldingen dus, en bij videos het liefst een complete transcriptie zodat ik kan lezen wat er gezegd wordt als ik geen audio kan gebruiken. Ook goed voor je SEO trouwens!
  • Sliders zijn meestal niet gebruiksvriendelijk. Ze duwen de echte content (de tekst dus) naar beneden en er wordt zelden op geklikt.
  • Gebruik geen flash, smartphones en tablets ondersteunen het niet.
  • Gebruik icoontjes alleen als ze niets te raden overlaten. Dingen als een huisje voor home, een winkelwagen en een vergrootglas om te zoeken kun je dus wel met een gerust hart gebruiken.

Afbeeldingen en video zijn vaak onmisbaar op een website, en als je iets kunt verduidelijken door een afbeelding of video te gebruiken moet je dat zeker doen. Zorg bijvoorbeeld voor goede productfoto’s in een webshop, of laat zien hoe iets werkt in een video.

Gebruik afbeeldingen en andere media echter niet alleen ter decoratie. In dat geval leiden ze alleen maar af van de informatie die echt belangrijk is.

Usability tip 7 : Zorg voor een goede zoekfunctie

Natuurlijk moet het navigatiemenu logisch en duidelijk zijn, maar vooral op grotere websites prefereren veel mensen een zoekfunctie.

De meeste mensen gaan op een website hetzelfde te werk als in de supermarkt. Meestal probeer je eerst zelf te vinden wat je zoekt (middels de navigatie dus), maar als je het zelf niet kunt vinden zoek je een medewerker om het aan te vragen. De zoekfunctie is die medewerker.

Maar wat als die medewerker nu zegt “Phoe, dat weet ik ook niet te vinden” en je niet eens een alternatief aanbiedt? Dan ben je waarschijnlijk zo weg… dat is bij een website natuurlijk niet anders. Daarom enkele tips voor een gebruiksvriendelijke zoekfunctie:

  • Plaats de zoekfunctie rechtsboven (al zie je tegenwoordig ook vaak een groot zoekveld gecentreerd in of onder de header)
  • Gebruik een rechthoekig invoerveld met plaats voor 20 a 25 tekens, met daarnaast (aan de rechterzijde) een button met de tekst “zoek” of “zoeken”.
  • Geef in eerste instantie geen opties. Laat de zoekfunctie standaard de gehele website doorzoeken. Eventuele “geavanceerd zoeken” opties kun je op de pagina met zoekresultaten aanbieden.
  • Plaats op de resultatenpagina ook een linkje naar de sitemap, FAQ en contactmogelijkheden (dat soort dingen misstaan overigens ook niet op je 404 error pagina).
  • Gebruik indien mogelijk een intelligente zoekmachine die ook kan omgaan met spelfouten en synoniemen, resultaten sorteert op basis van relevantie en automatisch suggesties geeft.

Dat laatste is vaak wat lastiger. Zo sorteert de standaard zoekfunctie van WordPress sinds kort de resultaten wel op relevantie, maar spelfouten, synoniemen en suggesties kun je wel vergeten.

Google biedt met aangepast zoeken (een Google zoekmachine die alleen jouw eigen site doorzoekt) een mooi alternatief, maar toont wel advertenties naast de zoekresultaten. Kan best leuk zijn aangezien je er zelf ook nog wat aan kunt verdienen middels Adsense, maar het laatste wat je wilt is een advertentie van je concurrent naast de zoekresultaten op je eigen site natuurlijk. Die advertenties kunnen ook uitgeschakeld worden, maar dat kost je wel minstens 100 dollar per jaar.

Usability tip 8 : Gebruik responsive webdesign voor tablets en smartphones

Mobiel internet wordt steeds sneller en smartphones en tablets worden steeds beter, goedkoper en populairder. De kans dat je website op een tablet of smartphone bekeken wordt is dan ook steeds groter; volgens Statcounter werden websites het afgelopen jaar in 16% van de gevallen op een mobiele telefoon bekeken en in 12% van de gevallen op een tablet. 28% van alle bezoekers bekijkt je website dus niet op een normale computer!

Als je een gebruiksvriendelijke website wilt maken moet je er dus voor zorgen dat je website er ook op tablets en smartphones goed uitziet. Dé manier om dat te bereiken is responsive webdesign, een techniek waarmee je website zich automatisch aanpast aan het apparaat waarop hij bekeken wordt. Bekijk deze website maar eens op een tablet of smartphone om te zien hoe dat werkt.

Alles over de techniek, breaking points enzovoorts lees je in mijn artikel over responsive webdesign.

Usability tip 9 : Houd je aan standaarden

Responsive webdesign was nog niet zo heel lang geleden een trend, maar tegenwoordig is het echt de standaard. Zo zijn er behoorlijk wat standaarden op webdesign gebied; dingen waarvan je bezoekers verwachten dat ze op een bepaalde plek staan of op een bepaalde manier werken.

Ooit waren dit ook trends: een grote speler introduceerde het en vervolgens gingen heel veel webdesigners dat kopiëren. Dat deden ze omdat het goed werkt, waarom zou je immers het wiel opnieuw uitvinden. Op een gegeven moment hebben bezoekers het zo vaak gezien dat ze het op iedere website verwachten, en dan wordt het dus een standaard.

Ik heb hieronder een aantal van die standaarden op een rijtje gezet:

  • Het logo staat linksboven en als ik daarop klik ga ik terug naar de homepage
  • De zoekfunctie staat rechtsboven en bestaat uit een rechthoekig vak met daarnaast een “zoeken” button
  • Het navigatiemenu staat bovenaan onder de header of aan de linkerzijde (met name submenu’s staan vaak links)
  • De paginatitel staat bovenaan de pagina in een groot lettertype
  • Onderstreepte tekst is een hyperlink waarop ik kan klikken
  • Interne links (naar een andere pagina op de huidige website) openen in hetzelfde tabblad, externe links openen in een nieuw tabblad
  • Bij een webshop heb je een winkelwagen of winkelmandje, dat rechts bovenin staat
  • Ook een login mogelijkheid staat rechts bovenin
  • Als ik op een icoontje met 3 streepjes onder elkaar klik opent het menu (al is het aan te raden het woordje “menu” ernaast te zetten)

Vanzelfsprekend is dit lijstje lang niet compleet, dus vul het gerust aan in de reacties onderaan de pagina!

Usability tip 10 : Test je website

Als je zelf een website ontwerpt (of laat ontwerpen) ben je daar zo mee bezig dat je blik nogal vertroebeld kan raken. Misschien vind jij dat iets heel logisch werkt, maar vind iemand die nog nooit op jouw website geweest is dat ook? Daar kom je maar op 1 manier achter: test het!

Bij grotere websites worden regelmatig usability tests uitgevoerd door professionele bureaus, maar die grote websites hebben over het algemeen ook een groter budget. Gelukkig kun je een eenvoudige usability test ook heel gemakkelijk zelf uitvoeren.

Test je website in alle populaire browsers en resoluties

Lang niet iedereen heeft dezelfde browser als jij, en ook lang niet iedereen bekijkt je website op dezelfde resolutie. Test je website dus uitgebreid in alle populaire browsers en resoluties (vergeet tablets en smartphones niet!).

Op Statcounter vind je altijd welke browsers en resoluties het meest populair zijn, zodat je weet waar je rekening mee dient te houden, en op deze site kun je je website testen op tal van smartphones en tablets. Je moet wel even een account aanmaken, maar dat is gelukkig gratis.

De kofferbaktest van Steve Krug

Usability expert Steve Krug beschrijft in zijn boek “Don’t make me think!” de kofferbaktest. Hierbij moet je jezelf voorstellen dat je geblinddoekt in een kofferbak gegooid wordt en naar een willekeurige plek in je website gereden wordt. Als de blinddoek af gaat moet je binnen enkele seconden de volgende vragen kunnen beantwoorden:

  • Welke site is dit? (het logo en eventueel de slogan zouden dit duidelijk moeten maken)
  • Wat is de titel van deze pagina? (de bezoeker moet dus direct weten wat de paginatitel is)
  • Wat zijn de belangrijkste secties of categorieën op deze site? (het navigatiemenu geeft hier antwoord op)
  • Wat zijn mijn opties op deze pagina of in deze sectie? (de secundaire navigatie, filters enzovoorts)
  • Waar ben ik ten opzichte van de rest van de site? (u bent hier indicatoren)
  • Hoe kan ik zoeken? (waar is de zoekfunctie en hoe werkt deze)

Deze test kun je zelf doen, maar je kunt natuurlijk ook familie, vrienden en zelfs klanten vragen deze test uit te voeren. Als zij deze vragen niet binnen enkele seconden kunnen beantwoorden is er iets mis met je design.

Doe het zelf usability test

Bij een echte usability test geeft degene die de test afneemt een gebruiker een opdracht en observeert vervolgens hoe die gebruiker de opdracht probeert uit te voeren.

Zo zou ik een gebruiker kunnen vragen “wat kost het om een website door mij te laten bouwen?”. Vervolgens observeer ik wat die gebruiker doet en tegen welke obstakels hij aanloopt. Ik vraag hem daarbij hardop te denken. Ik maak notities of, beter nog, plaats een videocamera om alles op te nemen.

Dit kun je natuurlijk ook zelf doen. Het is natuurlijk het beste als je testpersonen hebt die daadwerkelijk tot je doelgroep behoren, maar ook in dit geval volstaan familie, vrienden en kennissen prima als proefpersonen. Houd er rekening mee dat je ze niet mag helpen; als ze een vraag stellen zeg je gewoon iets in de trant van “wat zou je zelf doen”. Het gaat er juist om dat je ziet of ze de opdracht zelfstandig kunnen volbrengen en hoe gemakkelijk dat gaat.

Dit soort tests moet je regelmatig doen, zeker na een grote wijziging. Met 3 tot 5 proefpersonen haal je de meeste belangrijke knelpunten er wel uit. Natuurlijk gebruik je voor iedere keer dat je test andere proefpersonen.

Stop met het pesten van je bezoekers!

Ik ben natuurlijk ook gewoon een internetgebruiker, net als jij en de bezoekers waar we onze websites voor maken. Dit zijn gewoon een paar dingen waar ik me persoonlijk aan erger (en ik ben ongetwijfeld niet de enige):

  • CAPTCHA. Ik kom ze zeer regelmatig tegen; onleesbare CAPTCHA codes waarbij ik 10 tekens moet zien te ontcijferen om contact op te MOGEN nemen met een organisatie…
  • Niet klikbare e-mail adressen. Ken je ze? De info (apestaartje) website punt nl? Maak je e-mail adres gewoon klikbaar en zorg voor een goede spamfilter.
  • Te strenge validatie. Als ik een telefoonnummer wil invoeren als (010) 123 456 7 moet ik dat lekker zelf weten, dan hoef ik geen eigenwijze website die mij vertelt dat het telefoonnummer niet klopt omdat de website alleen 0101234567 accepteert. Overigens heb ik het zelf al meer dan eens meegemaakt dat mensen meerdere telefoonnummers of e-mail adressen in dat veld willen invoeren.
  • Incomplete contactpagina’s. Alleen een contactformulier terwijl ik hier ook een e-mail adres, een telefoonnummer en eventueel een bezoekadres verwacht.
  • Onderdelen die niet werken. Het komt regelmatig voor dat dingen niet naar behoren werken, bijvoorbeeld buttons die niet werken in Internet Explorer. Daarom is testen zo belangrijk; als iets niet (fatsoenlijk) werkt raak ik gefrustreerd en klik ik je website weg.

Waar erger jij je aan? Laat het weten in de reacties onderaan deze pagina!

Laat Bob jouw website gebruiksvriendelijker maken!

Bestel Bobs website review en laat Bob je website beoordelen op meer dan 200 punten. Vervolgens ontvang je een duidelijk rapport met tal van tips om je website te verbeteren; niet alleen over usability, maar ook over SEO, conversie optimalisatie enzovoorts!

Wil je liever dat Bob de (belangrijkste) verbeteringen aan je website direct doorvoert? Dat kan natuurlijk ook!

Vraag direct een vrijblijvende offerte aan!
 

Boeken en links

Wil je meer weten over usability? De onderstaande titels zijn zeer de moeite waard!

Steve Krug - Don't make me thinkSteve Krug – Don’t make me think

Deze naam heb je al vaker voorbij zien komen in dit artikel. Dat is niet zonder reden, Steve Krug is namelijk een zeer bekende en gerespecteerde usability expert en zijn (Engelstalige) boek “Don’t make me think” staat bekend als dé Usability bijbel. Dit artikel behandelt de belangrijkste punten uit dat boek, maar uiteraard is het boek zelf veel uitgebreider en dus zeker nog de moeite waard.

Bestel dit boek bij Bol.com  |  Download dit boek als ebook bij Bol.com

Peter Kassenaar - Handboek UsabilityPeter Kassenaar- Handboek Usability

Dit boek vertelt in grote lijnen hetzelfde als “Don’t make me think”, maar dan op een prettig gestructureerde wijze en in het Nederlands. Het boek bevat na elk hoofdstuk een samenvatting en oefeningen om te kijken of je de stof beheerst.

Bestel dit boek bij Bol.com

Interessante links

Andere artikelen over dit onderwerp op Bobs blog

Over Bob de webbouwer

Bob de webbouwer inhuren

Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een workshop over dit onderwerp te verzorgen.

Hulp nodig? Vraag direct een vrijblijvende offerte aan!

Vragen, opmerkingen of aanvullingen? Laat gerust een reactie achter!

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *