Verbeter jouw website-usability met de wimpertest

Natuurlijk ben jij blij met jouw website. En je krijgt van vrienden, familie en bekenden allemaal complimentjes dat je website zo mooi is. Daar kleeft alleen wel een nadeel aan: ‘mooi’ zegt helemaal niets over de gebruiksvriendelijkheid, oftewel de usability. Terwijl juist dat essentieel is voor een website, zeker als je je geld verdient met je website. Verbeter daarom de usability van je website en begin met de wimpertest.

Wat is usability?

Usability is de gebruikersvriendelijkheid van je website, Daarbij draait het om hoe duidelijk je website is voor een bezoeker, zowel in wie je bent en wat je doet als in hoe makkelijk het is om te doen wat ze komen doen. Daar komt een behoorlijk aantal factoren bij kijken, zoals:

• Ontwerp (design)
• Gebruikersinterface (User Interface of UI)
• Gebruikerservaring (User Experience of UX)
• Content
• Font

We lopen deze onderdelen hieronder kort door met de website-usability in ons achterhoofd. Maar eerst waarom die website-usability zo belangrijk is.

Waarom je de usability van je website moet verbeteren

Eigenlijk reken ik erop dat ik je niet hoef uit te leggen waarom je de usability van je website moet verbeteren, maar toch. Een website met goede website-usability levert klanten op. Meer klanten, omdat bezoekers makkelijker hun weg vinden, je website prettig in gebruik vinden en daarom makkelijker, sneller en met meer plezier bij je kopen. Wees eerlijk: wanneer was de laatste keer dat jij kocht op een webshop die verschrikkelijk onhandig werkte voor jou?

En die aankopen gaan natuurlijk niet alleen op voor webshops. Ook websites van dienstverleners horen het de bezoeker zo makkelijk mogelijk te maken. Zoals Tonny Loorbach van IMU zo mooi zegt: “Een verwarde geest koopt niet.” Als jij geen wijs uit een website wordt, te veel moeite moet doen om je doel te bereiken en het dus verwarrend wordt, haak je af. Weg (potentiële) klant.

De onderdelen van website-usability

Hiervoor kwam een aantal onderdelen van website-usability voorbij. Daar gaan we even op inzoomen. Voor de goede orde: ik heb niet de illusie dat deze lijst compleet is en ben niet de expert op gebied van website-usability. Het gaat er in dit geval vooral om dat je een beeld krijgt van hoe het werkt en wat jij kan doen om jouw website op dit gebied te verbeteren. Al is het maar op een paar punten. Iedere verbetering kan zomaar zorgen voor meer omzet.

Ontwerp: meer dan alleen “mooi”

Veel mensen denken dat je een mooie website moet hebben. Maar wat is mooi? Dat is heel persoonlijk, dus is het niet eens meetbaar. Een professionele uitstraling lijkt me al beter, maar ook dat is subjectief. Het belangrijkste is en blijft dat het ontwerp voor duidelijkheid moet zorgen:

• Waar ben ik en is dit waar ik verwacht te zijn?
• Is het duidelijk wat ik hier kan vinden?
• Kan ik makkelijk daar komen waar ik wil zijn?

Als je hier al vanaf het begin rekening mee houdt bij het ontwerp van je website, kun je heel veel fratsen achterwege laten en maak je je website veel eenvoudiger. Wat naar mijn mening de professionaliteit alleen maar ten goede komt. En dan denk je niet eens aan een slider op je website. Het design hoort UI (gebruikersinterface) en UX (gebruikerservaring) samen te brengen en daarbij ten dienste te staan van de content op de website. Ja echt.

Gebruikersinterface: wat is dat precies?

De gebruikersinterface (UI) is eigenlijk het grotere geheel waar het design onder valt. De UI zorgt voor gebruikersgemak: hoe makkelijk vind ik wat ik zoek, hoe snel kan ik de actie uitvoeren die ik nu wil uitvoeren? UI is niet alleen belangrijk bij websites, alles wat je ontwerpt voor gebruik door mensen draait om UI. Denk maar aan apparaten en software die je gebruikt, zodra jij je gaat ergeren aan het gebruik omdat het niet logisch is voor jou of niet gebruikersvriendelijk is, heeft dat vrijwel altijd met de gebruikersinterface te maken.

Voorbeeld: pop-ups

Een mooi voorbeeld om het nog wat duidelijker te maken. Op websites, maar ook als advertenties in bijvoorbeeld (online) games, kom je nog weleens pop-ups tegen. Wanneer je die wilt sluiten, ga je standaard naar de rechterbovenhoek toch? Daar hoort een kruisje te staan om het venster te sluiten. Soms staat dat kruisje heel sneaky op een andere plek of is er geen kruisje en moet je iets anders doen om het venster te sluiten. Hoogst irritant en hoewel ze het misschien met een reden doen, het voldoet niet aan de gangbare standaarden, wat de gebruikerservaring niet ten goede komt en zelfs voor een negatieve beleving zorgt. Dat kruisje rechts bovenin is onderdeel van de UI.

Gebruikerservaring: een groter geheel en toch…

De gebruikerservaring is eigenlijk een groter geheel waar bijvoorbeeld de UI weer onder valt. Webcreationz heeft hier een mooie uitleg over geschreven. Deze gebruikerservaring is een belangrijk onderdeel van website-usability, denk hierbij aan:

1. Hoe makkelijk navigeer ik door jouw website?
2. Is alles klikbaar wat ik verwacht dat klikbaar is?
3. Zie ik direct de content die ik verwacht te zien?
4. Kan ik makkelijk de actie uitvoeren die ik wil?
5. Laadt je website snel genoeg?

Je snapt vast wel hoe deze elementen allemaal hun invloed hebben op het prettige gebruik van een website. Je zult vast ook al zien dat een groot aantal onderdelen van de website-usability elkaar overlappen of anders wel heel veel met elkaar te maken hebben.

Toen ik voor dit artikel op zoek was naar een artikel over lettertypes, vond ik deze pagina, als mooi voorbeeld van punt 2:

Is het duidelijk wat het onderwerp van deze pagina is? Helpt dit jou als je binnenkomt op deze pagina om iets over lettertypes te lezen? Er lijkt hier te zijn gekozen voor ‘mooi’, met een bijna beeldvullende afbeelding. Zit jij daar op te wachten als jij iets wilt lezen over lettertypes?

Content: zowel onderschat als overschat

Zoals Karl Gilis van AG Consult zegt: “If you don’t care about copy, you’re a decorator, not a designer”.

#CONTENT: "If you don't care about copy, you're a decorator, not a designer." –@AGConsult #gms17 #WORD 😆 pic.twitter.com/Kjo2mwNTCX

— Angie Schottmuller (@aschottmuller) August 31, 2017

Zonder woorden overtuig je mensen niet zomaar. Je bezoeker wil meer weten, heeft twijfels die je moet wegnemen voor deze bij je koopt. Beeld is belangrijk, maar geeft geen antwoord op alle vragen. Met tekst overtuig je bewezen beter dan met je design. Ook weer zoals Karl Gilis al zei, dit keer in een van de online cursussen van AG Consult:

Laten we het beeldmateriaal niet vergeten. Een website hoort de uitstraling te hebben die bij jouw bedrijf past. Daar horen foto’s bij. Mensen uit je team? Een prima idee. Verkoop je producten, zorg dan voor foto’s van je producten waar je bezoeker iets aan heeft. Ben je dienstverlener, dan zijn bijvoorbeeld sfeerfoto’s van je dienstverlening een prima keuze.

Video’s, gebruik je ze wel of niet?

Video’s zijn zeker prima content, zolang ze je bezoeker maar helpen en dus niet alleen een verkooppraatje van jouw organisatie zijn. En heb je het over usability, dan zijn dit belangrijke overwegingen voor video’s op je website:

1. Achtergrondvideo’s zijn altijd een slecht idee, ze zorgen voor afleiding en helpen je bezoeker niet haar/zijn doel te bereiken
2. Laat video’s niet automatisch afspelen, je bezoeker wil zelf bepalen of die deze video wil zien, jij toch ook?
3. Maak de voorbeeldweergave niet zo groot dat het (zo goed) als beeldvullend is, zodat je bezoeker kan zien dat er nog wat onder staat

Ga vooral ook uit van wat je zelf prettig vindt op de website van een ander. Dat is vaak een heel ander uitgangspunt dan uitgaan van wat jij je bezoeker wilt vertellen op jouw website.

Overschat zei je toch?

Oh ja, content hoort gewoon in dienst van je bezoeker te staan. Teksten hoeven niet lang, maar ook niet per se kort. Geef de informatie die je bezoeker nodig heeft en gebruik daarvoor zoveel woorden als je nodig hebt, maar maak het ook weer niet overbodig lang. Soms is weinig tekst prima, zoals bij een leasemaatschappij die prima kan scoren op merk+model+lease terwijl er echt niet veel tekst over de auto’s op de pagina staat. En video’s worden wat mij betreft vaak overschat, omdat daarbij te vaak de bezoeker niet centraal staat en het dus geen functie heeft.

We kunnen er nog lang over doorgaan, het is wel duidelijk dat je content ook essentieel is voor de website-usability.

Font: maakt het verschil

Je zou kunnen stellen dat het font (lettertype en -grootte) onder het ontwerp valt, toch vind ik zelf het font een essentiële keuze die echt aandacht verdient. Een goed font is op alle schermen leesbaar en laadt snel. Heel bijzondere fonts zijn daarmee geen aanrader, omdat die apart ingeladen moeten worden. En vaak zijn die bijzondere fonts sierlijk, wat de leesbaarheid niet ten goede komt. Een aantal zaken die echt van belang zijn voor de (jaja) usability van fonts op je website:

• Kies een font dat makkelijk leest, over het algemeen lezen schreefloze fonts het makkelijkst
• Gebruik een lettergrootte die voor iedereen leesbaar is, meestal is dat 14 pixels of groter, afhankelijk van je font
• Maak er geen kakofonie aan lettertypes van, je website wordt er vreselijk onrustig van en je bezoeker moet telkens wennen aan een ander font

Dit zijn mijn 3 belangrijkste tips, er is nog veel meer over te vertellen. Meer weten over lettertypes en -groottes? Natascha Bauwens schreef er een heel helder artikel over.

Een van de belangrijkste usability-fouten: contrast

Hoewel contrast onderdeel is van het design, kan ik niet genoeg benadrukken hoe belangrijk dit onderdeel is. Ik vind het werkelijk niet te geloven hoe vaak ik websites tegenkom waarbij het contrast te wensen overlaat. Het artikel over usability en user experience van Webcreationz, waar ik al naar verwees, is daar een voorbeeld van. De oorspronkelijke tekst is grijs op een witte achtergrond:

Als je dat font dan zwart maakt, is het toch direct een stuk beter leesbaar?

Nu is dit nog niet eens het ergste dat ik tegenkom op websites. Soms zie ik grijze letters op een grijze achtergrond, of lichtgrijze letters op een witte achtergrond. Dat is nog lastiger om te lezen.

Ook belangrijk: houd rekening met teksten waarbij je foto’s als achtergrond gebruikt. Dat zien we bij dezelfde website die ik hierboven als voorbeeld gebruikte ook mis gaan:

Eerste stap naar website-usability: doe de wimpertest

Al lange tijd stel ik: doe de wimpertest. Die is behoorlijk makkelijk en kan iedereen doen: open je website en kijk met je ogen iets toegeknepen door je wimpers naar je website. Wat zie je? Is direct duidelijk wat je vindt op de website? Kijk maar eens naar mijn homepagina zoals die er dan (ongeveer) uitziet:

Je ziet dat de belangrijkste zaken nog steeds duidelijk zijn:

• Logo en bedrijfsnaam (hoewel de bedrijfsnaam misschien niet voor iedereen zo helder is)
• Tagline
• De belangrijkste diensten die ik aanbied

Natuurlijk mag jij kritisch zijn en vinden dat er nog wat beter kan (laat het me dan ook gerust weten), zelf ben ik er wel van overtuigd dat dit in basis prima is zo. Mijn homepagina doorstaat de wimpertest wel.

Komen we weer op diezelfde website. Dat blijkt bol te staan van de mooie voorbeelden over website-usability ;-) Doorstaat deze homepagina de wimpertest?

Wie zijn ze, wat doen ze, waar moet je naartoe om te vinden wat jij zoekt? Zelfs zonder wimpertest vind ik deze homepagina erg onduidelijk. de tekst in de header gaat over muismatten en deurmatten, dus je zou kunnen denken dat ze producten leveren. In het hoofdmenu staat niks over producten, enkel ‘Services’ en ‘Cases’, dus zijn ze kennelijk dienstverlener. Zeg het maar.

En snap jij wat die 3 puntjes in dat blauwe blokje daar doen? ;-)

Je hoeft niet eens zelf door je wimpers te kijken

Vlak na de publicatie van dit artikel lanceerde Google Chrome de mogelijkheid om webpagina’s te bekijken door de ogen van mensen met visuele beperkingen. Dat gaat zelfs verder dan de wimpertest en komt ten goede aan usability voor iedereen met een visuele beperking. Zo kun je ook zien hoe mensen met verschillende soorten kleurenblindheid je webpagina zullen zien. Addy Osmani legt het hier uit.

Verbeter je website-usability door in de schoenen van je klant te stappen

De wimpertest is een eerste aanzet om inzicht te krijgen in hoe duidelijk en hoe gebruikersvriendelijk jouw website is. De eerste stap om de website-usability te verbeteren. Dat doe je uiteindelijk door in de schoenen van je klant te stappen en met zijn/haar ogen jouw website door te lopen. Trek jij de website-usabilityschoenen van jouw klant vast aan?

Wat is jouw belangrijkste inzicht of eye-opener? Heb je vragen, opmerkingen of aanvullingen? Laat een reactie achter, ik ben heel benieuwd.