UX is zo ontzettend breed; iedereen heeft er een mening over. Hoe weet je dan wie je moet geloven en wat nou echt waar is? Dat is precies waar dit hoofdstuk over gaat.
We stappen even van het stappen-plan af en gaan het in de breedste zin van het woord het over UX en hoe het invloed op websites heeft hebben. Zie dit hoofdstuk dus ook als checklist waar je doorheen kunt gaan voor je website.
De komende maanden zal ik deze pagina ook verder aanvullen met de kennis die ik opdoe ‘on the job’. Hou ‘m dus in de gaten.
Verreweg het belangrijkste onderdeel van UX is hoe een gebruiker zich voelt. Of beter gezegd; hoe jij een gebruiker zich laat voelen.
Hoe je gebruiker dat ervaart (UX) heeft direct effect op je imago, hoe je gebruikers over je praten, je conversie en daarmee je succes als bedrijf. Daarom gaan we zorgen dat het gevoel van je gebruikers gaat passen bij jouw doelen.
Dat begint met energie en de ‘reservetank’ van je gebruikers.
Een gebruiker heeft een bepaalde hoeveelheid energie. Elke interactie met jouw website snoept wat van die energie af tot een gebruik of zijn doel haalt of het zat is en weer vertrekt.
Hoe snel dat gaat (en hoeveel energie een gebruiker als startpunt heeft), ligt aan meerdere aan UX-gerelateerde zaken.
Daarnaast spelen andere factoren waar je minder grip op hebt. De JTBD die een gebruiker via jouw website wil volbrengen kan gevoelig liggen. Denk bijvoorbeeld aan financiële of medische zaken. Of iets wat voor spanning thuis zorgt.
Alles wat je een bezoeker bewust of onbewust vraagt te doen, draagt bij aan hoe uitdagend je website ervaren wordt. Dit alles kost je bezoeker hiervoor benoemde energie. De officiele term hiervoor is ‘cognitive load’.
(quote) De hoeveelheid mentale inspanning die je als bezoeker nodig hebt om informatie te verwerken en een taak uit te voeren.
Dit is ook waar de titel van het legendarische UX-boek ‘Don’t Make Me Think’ op slaat. Als jij als bezoeker van een website na moet denken over wat je voor je ziet, is de strijd vaak al verloren.
(screenshot van Leadsie pricing)
De bovenstaande afbeelding is een mooi voorbeeld van hoe het niet moet.
Dit is een ‘pricing’ pagina voor een software product waar je qua prijs kunt wisselen tussen een maandelijks en jaarlijks abonnement. Om bezoekers te motiveren voor de jaarlijkse deal te gaan, staat onder de knop een tekst die zegt dat je een jaarlijkse hoeveelheid credits en nog twee maanden krijgt.
Tegelijkertijd krijg je ook 12 maanden toegang voor de prijs van 10 maanden. Daardoor kom je als bezoeker al gauw in een rekensom terecht. 12 maanden min twee betalen maar wel twee weer erbij bovenop het jaar… je komt er waarschijnlijk wel uit, maar het kost je meer energie dan nodig is.
Een beter alternatief is om te zeggen dat je ‘twee maanden gratis’ krijgt. Dat is duidelijk en je focust op het cadeautje. Stukken beter!
Fit en uitgerust bij het doel aangekomen
bovenstaande tekst en dan over doelen behalven; mogelijk via berg beklimmen als metafoor
Je hebt niet volledig de controle over het bovenstaande. Maar wel over de layout. En die speelt een enorme rol rondom de energie en uitdaging die een bezoeker voelt wanneer hij je website bezoekt.
In dit onderdeel van het hoofdstuk gaan we dieper in op terugkerende layout-elementen en hoe ze werken.
(quote) Als ik maar één ding zou mogen verbeteren aan een website, dan zou dat 100% de layout zijn.
De ‘hero’ is letterlijk de held van je pagina; het laat in één oogopslag zien waar een product of dienst om draait en verdient alle ruimte. Een goede hero section bestaat in de meeste gevallen uit het volgende:
Dan nu het grid; iets wat boven pagina’s en componenten zit omdat het in principe voor je hele website geldt. Het is hoe je de componenten en content over een pagina verdeelt.
Normaal gesproken wordt een pagina door componenten opgebouwd van boven naar beneden. Dit is je grid in de meest simpele vorm. Binnen een component kun je qua grid (letterlijk) veel meer kanten op.
(video)
Je kunt er zoveel kanten mee op dat een video hier veel praktischer is. In de bovenstaande video heb ik het onder andere over (Shopify-)webshops, product-pagina’s en andere voorbeelden waar een goed grid enorm belangrijk is.
Een logisch vervolg op het grid is responsive design. Responsiveness gaat over hoe het ontwerp van een website reageert (‘response’) op verschillende schermformaten. Dit is vooral belangrijk op mobiel aangezien een steeds groter aantal mensen mobiel dingen uitzoekt en aanschaft.
Qua responsive design is op mobiel het grid de grootste klant om op te letten. Waar je op desktop voor veel secties een breed grid gebruikt, ga je op mobiel in haast elk geval naar een grid van één kolom. Daarnaast worden teksten kleiner op mobiel. Ik laat beiden zien in de onderstaande video.
(video)
Tot nu toe hebben we het gehad over hoe componenten en secties zich tot elkaar verhouden in bijvoorbeeld een grid. We hebben het dan over een aantal componenten in een rij of boven elkaar, maar nog niet over afstanden en wat als eerste komt; zowel binnen een component als tussen componenten onderling.
Dat komt nu met ruimte en hierarchie. Ruimte in website-termen noemen we ‘margin’ en padding’.
(quote) Margin is de ruimte buiten een object en padding is de ruimte binnen een object.
Eén van de belangrijkste zaken van ruimte is consistentie. Binnen design gebruiken we daarvoor een systeem in achtvoud (8, 16, 24, etc). Grote CSS-frameworks maken hier gebruik van, dus jezelf dit ook aanwennen gaat je veel helpen.
De regel is dat grote componenten meer ruimte tussen elkaar hebben dan kleine onderdelen binnen componenten.
Je kunt bijvoorbeeld 160px margin aanhouden tussen je ‘over ons’ en ‘kaartje kopen’ secties, maar binnen die secties 40px tussen de onderdelen van die secties. De teksten binnen een onderdeel zitten dan weer 16px uit elkaar.
Je werkt van groot naar klein. Belangrijke onderdelen maak je groter met veel ruimte om zich heen terwijl minder belangrijke onderdelen kleiner worden en dichter bij elkaar staan.
Meer uitleg hieronder.
(video)
En dan nu nog even de regels rondom tekst. Belangrijk qua UX, want het is nog steeds een groot onderdeel van je website.
We beginnen met het lettertype. In principe heb je de keuze uit een schreef en een schreefloze letter.
(afbeelding schreef(loos))
Beiden zijn in principe goed; ze hebben hun eigen voor- en nadelen. Een schreef-letter staat bijvoorbeeld heel chique, maar is qua leesbaarheid wat uitdagender dan een schreefloze letter. Die laatste heeft het eerder genoemde andersom.
Je kunt een schreefletter haast altijd gebruiken als koptekst. Voor broodteksten (alineas en ‘echte’ content) ligt dit gevoeliger. Beperk je tot één lettertype per soort.
Deze lettertypes plaats je in een bepaalde lettergrootte op je website. Ga voor broodteksten niet onder de 16px. Veel websites hebben hier tegenwoordig zelfs 18px of 20px voor als richtlijn.
Kopteksten worden op websites aangeduid met H1 tot en met H6. Deze zijn boven de H4 groter dan het formaat van je broodtekst.
En dan als laatste nog even de regelafstand en zinslengte. Broodtekst heeft een grotere regelafstand dan koptekst; denk hierbij aan 150% voor de eerste en 110% aan de laatste. Het zorgt voor leesbare broodtekst en een koptekst die niet te overweldigend is doordat het iets dichter bij elkaar staat.
Qua zinslengte is de ‘best practice’ om rond de 75 leestekens per zin uit te komen. Ik pixels zit dat rond de 800px (afhankelijk van je formaat lettertype).
Langer zorgt ervoor dat de lezer zijn ‘ankerpunt’ aan het begin van de zin kan verliezen terwijl een te korte regelafstand zorgt dat de lezer duizelig wordt van het heen-en-weer lezen.
Dus, samenvattend en als check voor je website, ga uit van ongeveer het volgende:
Valkuilen
Het bovenstaande zijn UX-gerelateerde zaken die je beter wel kunt doen. Na ruim tien jaar in het vak heb ik het één en ander gezien aan valkuilen op het vlak van UX. Deze kun je, en dit is weer een open deur, beter voorkomen.
Als bedrijfseigenaar ben je trots op je product, je diensten en je website. Vaak wil je daarom heel veel vertellen en laten zien. Of je wil al dat wat ik net noemde enorm uitbreiden. Probeer dat te weerstaan.
Het is veel beter om in een paar dingen heel erg goed te zijn dan dat je alles probeert aan te pakken.
Dit uit zich vaak op een landingspagina waar je elke feature van je product of dienst wilt noemen. Voor de hoofdpunten is dit prima, maar blijf weg van al die kleinigheidjes die je ook nog aanbiedt. Het is overweldigend.
Deze is erg belangrijk voor bedrijven met een digitaal product of webwinkel. Als een bezoeker qua customer journey in de ‘koop’-fase zit, hoef je niet nog eens alle voordelen van je product of dienst op te noemen. Je bezoeker is al overtuigd van je aanbod.
Dit heb ik vaak gezien bij Shopify-winkels en SaaS-onboardings waar een gebruiker tijdens het afrekenen en inloggen nog allerlei marketingteksten te zien krijgt. Dit leidt alleen maar af van de jobs-to-be-done en is slecht voor je conversie.
Je mag niet meer dan drie keer klikken! Gebruikers houden niet van scrollen! Echt van die UX wijsheden die je op een cursus uit de jaren 90 leert.
Het is absoluut niet meer van deze tijd. Ondanks dat kom ik regelmatig collega’s, klanten en stakeholders tegen die zich hier enorm aan vasthouden. Niet doen!
Om de twee bovenstaande mythes te ontkrachten; mensen zijn tegenwoordig gewend te scrollen. We doen niet anders op social media. Laat dat je dus vooral niet tegenhouden.
En qua clicks heb ik liever dat je elke click zo eenvoudig mogelijk maakt. Het is als een berg opfietsen. Ik heb liever dat de trappers meerdere keren licht rondgaan dan een paar keer zwaar.
Ik wil het hoofdstuk afsluiten met UX theorie die ik niet elders kwijt kan. Het zijn onderdelen van het vak waar ik regelmatig mee in aanraking kom en waarvan ik zeker weet dat het jou ook gaat helpen met je website.
Mensen verwachten (bewust of onbewust) iets als ze ergens op klikken. Als jouw knop bijvoorbeeld het label ‘in winkelmandje’ heeft, mag je verwachten dat je een item in je winkelmandje stopt wanneer je er op klikt. Als dat ook echt gebeurt, ben je als websitebezoeker blij.
Maar als iets onverwachts gebeurt, zorgt dat voor teleurstelling en een flinke cognitive load. Dat laatste gebeurt omdat je mensen uit hun automatische piloot trekt. Met een beetje mazzel herstellen ze en blijven ze op je website, maar in de meeste gevallen verlaten ze je website. Niet goed voor je conversie!
Je kunt veel van deze ellende voorkomen door zo goed mogelijk voor te sorteren op wat je van een bezoeker verwacht. Laat het hun weten en wees duidelijk.
Een klassieke UX regel die nog wel bestaat is dat bezoekers geneigd zijn te vertrekken naarmate het langer duurt voordat je website geladen is. Zie hier een paar tips wat betreft de snelheid van je website.
Dit hoofdstuk werkt het beste als checklist wanneer de eerdere hoofdstukken afgerond zijn en je jobs-to-be-done duidelijk zijn. Sterker nog; ze zouden nog beter werken wanneer je je ontwerp al het staan.
Neem dus ook je tijd om deze pagina door te nemen; kom af en toe nog eens terug voor een ‘hoe zat dit ook alweer’ momentje. En zodra je dat hebt gedaan, gaan we verder haar het hoofdstuk… ‘bouwen’!
Vragen? Of iets onduidelijk? Laat het weten! Ik help je graag verder. Dat maakt deze training daarnaast ook weer beter.
Hallo! Ik ben een (freelance) senior UX designer. Meer weten? Lees hieronder verder.
