Maak van je software geen horrorfilm: eenvoudig gebruikersinzicht met kwalitatieve metrics
Gebruikers die jouw dienst even stressvol vinden als een horrorfilm is hoogstwaarschijnlijk het laatste wat je wil. Onderstaande illustratie uit een onderzoek beschrijft precies dat. Er is aangetoond dat de hoeveelheid stress die gebruikers ervaren bij het gebruik van te trage (mobiele) applicaties ongeveer gelijk staat aan het kijken van een horrorfilm.
Dit voorbeeld laat zien dat juist techneuten even goed invloed uitoefenen op de gebruikerservaring. Door de performance te verbeteren kun je het gebruik dus een stuk aangenamer maken. Naast vlotte databases en snel geladen schermen, kun je ook op andere manieren de gebruikerservaring beïnvloeden. En je hoeft geen doorgewinterde UX-designer of onderzoeker te zijn om dat te doen. In april dit jaar was er in het CineMec Ede alweer het derde, en uitverkochte, Luminis DevCon event plaats. Tijdens deze conferentie heb ik verteld hoe je inzicht kan krijgen in het gebruik van je dienst door een gebruiker. In het verlengde van deze presentatie ga ik hier iets verder in op het online meten van gedrag. Enkele inzichten zijn snel en eenvoudig te verkrijgen en er zijn tools zijn die daarbij helpen. Zo kan jij ook beter begrijpen waaróm gebruikers iets (niet) doen. Ik ga vooral in op de praktische toepassing van deze tooling en biedt wat aanknopingspunten die helpen om zelf een basic analyse te kunnen doen en nuttige inzichten te vergaren. Mijn presentatie kun je trouwens hier terug kijken.
Meten is weten
Eerst nog kort iets over het meten. Dit is grofweg op te delen in kwantitatief en kwalitatief. Heel plat gezegd; kwantitatief gaat over de wat-vraag. Wat gebeurt er en hoe vaak? Bijvoorbeeld: een specifieke pagina heeft een hoge bounce rate. Oftewel , die pagina is vaak het eindstation van een bezoek. Dit kun je achterhalen door een web analytics tool als Google Analytics, de meest bekende. Kwalitatief daarentegen gaat over het waarom van dit gedrag. Wat maakt dat die pagina vaak het eindstation is van bezoekers? Om hier antwoorden op te kunnen geven heb je dus een kwalitatieve metrics tool nodig. Hieronder geef ik een voorbeeld van een dergelijke tool en enkele meet methodes die hier in naar voren komen.
Het meetinstrument: Hotjar
Om iets te meten heb je een meetinstrument nodig. Nu zijn er naast de web analytics tools in software land steeds meer diensten die kwalitatieve data vastleggen. Om er maar een aantal te noemen: Visual Website Optimizer, ABTasty, EyeQuant, Hotjar, Crazy Egg, Usabilla en Fibeo. De tool die ik hiervoor gebruik is Hotjar. Het fijne van deze toepassing is dat het niet alleen heatmaps van klik- en scroll gedrag maakt maar daarnaast ook inzicht biedt door formulier analyse en schermopnames. Daarnaast kun je ook eenvoudig polls en surveys inrichten en directe feedback vragen met Incoming, dat nog in beta is. Er zit veel functionaliteit in voor weinig geld. De betaalde versies zijn vergeleken met andere tools zeker niet duur. Tools zoals Crazy Egg richten zich vaak maar op 1 methode voor een hogere prijs. Er zijn wel kritische noten te vinden over de datakwalitateit vergeleken met web analytics tools. Daarnaast is het koppelen met tools als Google Analytics niet bepaald plug and play, terwijl daar juist de kracht zit. Hotjar is ook laagdrempelig omdat het een gratis Basic account biedt waarmee je zo goed als alle functionaliteit tot je beschikking hebt. De beperking zit hem in het verkeer: de ‘sample rate’ is gelimiteerd op 2000 pageviews per dag, dus het aantal pageviews waarop de data gebaseerd wordt. En voor recordings is 100 de bovengrens. Toch voldoende om al iets te gaan meten. Het opzetten van een account en project is snel gedaan. Een keer registreren, wat basisgegevens van je website invoeren en een stukje script plaatsen. Deels afhankelijk van op welk platform je website draait.
Je kunt overigens meerdere websites onderbrengen in 1 account, die dan elk een eigen tracking ID hebben. Vervolgens check je via de portal of je code werkt en kun je aan de slag. Verder spreekt deze tool voor een groot deel voor zich. Er is voor Hotjar uitgebreide documentatie aanwezig. Hieronder ga ik met name in op de methodes zelf en hoe je hier bevindingen uit kan halen voor het verbeteren van je service.
Heatmaps
Heatmaps zijn een visualisatie van interactie zoals klikken en muisbewegingen in een webpagina of een applicatie. Vaak aangeduid met een kleurverloop van blauw naar rood dat weinig en veel representeert. Dit kunnen muis click- of muis move-maps zijn, een registratie van respectievelijk kliks en muisbewegingen. Maar ook scroll maps.
In Hotjar kun je heatmaps aanzetten op specifieke pagina’s en deze laten stoppen als een limiet is bereikt. Bijvoorbeeld na 1000 geregistreerde views. Als je de heatmaps eenmaal binnen hebt: hoe moet je deze nu interpreteren? Wat zeggen die vlekken nou? Doorgaans zijn er een aantal patronen die te herkennen zijn:
- Iets is klikbaar maar er wordt niet op geklikt. Als je knoppen of elementen hebt die niet aangeklikt worden kan aan heel veel zaken liggen en is afhankelijk van de context: worden juist andere zaken veel aangeklikt? Ziet het er niet klikbaar uit? Een trend die al een tijdje loopt is dat knoppen nogal plat worden vormgegeven met een outline border. Ziet er heel stijlvol uit maar grote kans dat men dit niet ziet als een knop. Is je huisstijl voornamelijk rood / wit? Vermijd die kleuren voor je belangrijke interacties, pak de meest contrasterende kleur want die valt meer op. Dit zijn in de praktijk bewezen conventies.
- Iets is niet klikbaar maar men klikt er wel degelijk op. Soms wordt iets vormgegeven alsof het een klikbaar element is omdat het onbedoeld op een button lijkt bijvoorbeeld. Je ziet in heatmaps terug dat deze elementen aangeklikt worden, echter zit er geen functionaliteit achter. Zorg ervoor dat deze vorm aangepast wordt om onnodig klikken en daarmee frustratie te voorkomen. Aan de andere kant: je kunt het juist wel functioneel maken door er interactie aan te koppelen. Zo zag ik op onze DevCon pagina een klein aantal clicks op een animerend muis icoontje dat aangeeft dat men kan scrollen voor meer inhoud. Klikken doet echter niks. Je zou hier dus een scroll anker van kunnen maken. Ander voorbeeld: bij iets als een artikel overzicht verwacht men vaak dat zowel titel, afbeelding en soms een paar regels tekst als geheel een klikbare link is naar het volledige item. Beperk daarom niet de interactie tot een titel en ‘lees meer’ link alleen. Dit is allemaal context afhankelijk natuurlijk en des te belangrijker om dit te meten en toetsen.
Scrollmaps
Een scrollmap laat zien tot waar op een pagina er wordt gescrold. In Hotjar is dit weergegeven door een kleurverloop en percentages. Ook is te zien waar gemiddeld genomen de vouw van een pagina zit. Overigens, dat ‘above the fold’ de belangrijkste elementen horen te staan is inmiddels achterhaald.
Voor een lange onepager is het soms lastig een scrollmap te genereren als de navigatie met ankers werkt. Immers werken de links in de navigatie als nieuwe paginas terwijl je in feite naar beneden scrollt. Als men niet ver genoeg de pagina door scrollt kan dat een paar dingen betekenen:
- Men haakt af op de inhoud: deze is niet relevant of er staat te veel tekst. Het helpt om dit te dubbelchecken met recordings die je kunt maken. Die licht ik verderop toe. Of richt hiervoor een gerichte poll in op die pagina die op een laagdrempelige manier feedback kan geven. Houd dit kort en simpel voor de gebruiker.
- Men kan ten onrechte denken dat het einde van de pagina is bereikt. Er is te veel witruime of men heeft geen visuele indicatie van de verdere aanwezige inhoud. Er zijn tegenwoordig veel pagina’s te zien die royaal van witruimte zijn voorzien maar dat kan dus nadelig werken.
- De opbouw van een item wordt onderbroken door iets wat er niet mee te maken heeft. Bijvoorbeeld een advertentieblok dat over de hele breedte van een blogitem doorloopt.
Formulier analyse
Je kunt ook formulieren analyseren door bij te houden hoe deze afgerond worden. Door een visualisatie kun je zien op welke plekken in een formulier gebruikers afhaken.
Wat je hier onder andere uit kan halen:
- Het is te lang, als je veel velden hebt en je gestaag afhakers ziet, is het wellicht nodig groeperingen toe te passen. Knip het formulier op in een aantal (visueel) logische stappen. Dat maakt de drempel voor een gebruiker een stuk lager.
- Een veld is te complex om in te vullen. Het is niet helder wat er verwacht wordt in te vullen, of je bent juist te strikt over de juiste notatie. Denk aan datum notaties, postcodes en de ergste: verplichte informatie vragen van gebruikers die ze niet paraat hebben of doorgaans niet graag geven.
Screen Recordings
Om concrete voorbeelden van interactie te zien kun je in Hotjar schermopnames bekijken van bezoekers. Dit zijn geanonimiseerde screen recordings van interactie die je redelijk goed kunt filteren op pagina’s, devices, browsers, duur enzovoort. Je kunt deze ook annoteren. Het voelt wel een beetje voyeuristisch als je dit bekijkt. Wel goed om in de instellingen keystroke data uit te zetten, anders leg je vast wat gebruikers daadwerkelijk invoeren. Een valkuil van een screenrecording is dat het nogal aan interpretatie onderhevig is. Soms zijn er lange pauzes zonder interactie te zien. Bedenk maar eens wat het zou kunnen betekenen: is deze persoon op het scherm aan het lezen, iets in een ander scherm aan het doen of even naar de wc? Je ziet veel gebeuren in recordings maar oordeel niet te snel over de intenties van de gebruiker.
Whitepaper Design Sprint
Compleze uitdagingen oplossen met Design Sprints Download de gratis whitepaper. Slim samenwerken is nodig om te innoveren. Een Design Sprint is een bewezen agile werkmethode om samen met je team snel en efficiënt de juiste keuzes te maken. Met als...
Native toepassingen
De tool en methodes zoals hierboven beschreven richten zich vooral op websites. Er zijn steeds meer services die ook in staat zijn soortgelijke metingen op native applicaties te doen. AB Tasty is al eens genoemd, verder zijn er diensten als App see en UXcam die dit kunnen. Zelf heb ik met de native metrics iets minder ervaring, maar in feite blijven de methodieken staan. Succes met inzichten vergaren! Headerfoto door: Caroline Methot on Unsplash
