De leercurve van een developer: focus op doelgroep, niet op code

Mijn moeder, jouw vriend, de buurjongen, je klasgenoot, de kassière, oom agent en de inwoners van Gouda. Allen maken ze deel uit van het publiek waarvoor we websites bouwen. En dat vergeten we wel eens als programmeur. Daarom heb ik een switch gemaakt: ik word interaction engineer!

Als interaction engineer zorg je voor vriendelijke websites. Belangrijk is dat je daarbij niet vanuit de techniek of code denkt, maar vanuit de mensen. Want daar gaat het om! Interaction engineer word je niet zomaar. Er is nogal wat theorie voor nodig om al je keuzes te kunnen maken en verklaren. Gelukkig zijn er een hoop goede boeken en artikelen over geschreven. En, er lopen al een paar interaction engineers bij ons over de vloer. Maar met een hoop theorie en een paar slimme mensen alleen kom je er niet. De handen moeten wapperen: aan de slag! Daarom ben ik met een klein project begonnen.

Het projectje

Het idee was om een bestaande homepage te verbeteren. Ik heb voor de website van een goed doel gekozen. Gewoon op eigen initiatief. Overigens ook met het idee dat er misschien nog wel waardevolle tips uitkwamen voor hen. Het doel van mijn project? Ervoor zorgen dat er een website staat waar mensen de weg kunnen vinden; die makkelijk leesbaar en overzichtelijk is en die mensen gewoon blij maakt.

Stap voor stap

Gedurende het proces heb ik een aantal boeken en artikelen gelezen die invloed hadden op het proces. Don’t make me think, Seductive interaction design en De middelen van overtuiging zijn hier voorbeelden van. Het redesignproces heb ik verder redelijk systematisch laten verlopen:

1. Bekijken wat beter of anders kan
2. Prototype maken
3. Prototype toetsen bij mensen (liefst eindgebruikers)
4. Feedback omzetten naar actiepunten
5. Ga verder bij stap 1

Vooral van stap 3, mijn werk toetsen bij mensen, heb ik een hoop geleerd. De meeste mensen hebben namelijk helemaal geen weet van al die leuke theorieën die ik heb toegepast. Die zien gewoon een homepage. En ze geven complimenten én kritiek. Beiden erg belangrijk.

Gewoon beginnen

Met de theorie die ik op dit punt inmiddels kende, ben ik gewoon aan de slag gegaan. Ik heb kleine snelle verbeteringen aangebracht. Zo kun je zien wat snelle verbeteringen met het huidige ontwerp kunnen doen. Voorbeelden hiervan waren:

• Een zoekbox voorzien van de tekst ‘zoek’ in plaats van ‘ok’;
• Indeling van de content logischer ordenen;
• Bekijken of alle informatie per se op de homepage moet;
• Alles beter leesbaar maken;
• Een duidelijke call-to-action knop maken.

De kunst van het overtuigen

De site heeft een grote knop ‘DONEER HIER’. Maar stel: iemand is nog niet overtuigd genoeg om die knop in te drukken, dan zal de knop nog steeds niet ingedrukt worden. Hoe groot de knop ook is, men moet eerst overtuigd worden. Hier kwamen de intrinsieke overtuigingsmiddelen van Aristoteles om de hoek kijken. Ik heb gebruik gemaakt van ethos: de gebruiker overtuigen door het laten zien van quotes van bekende Nederlanders. Verder heb ik geprobeerd een rustigere sfeer te creëren door veel rood weg te nemen uit de pagina. Dat rood een huisstijlkleur is, wil niet zeggen dat het overal terug moet komen.

Focus en wireframing

Vergeet de gebruiker niet! Voor dit punt heb ik vier persona’s tot leven geroepen. Vier fictieve personen uit de doelgroep, die mij gaan helpen bepaalde keuzes makkelijker te maken. Het liefst ontstaan deze persona’s natuurlijk na goed onderzoek van de doelgroep. Maar dat stukje heb ik voor nu even overgeslagen. Aan de hand van deze vier persona’s heb ik besloten de focus van de homepage te leggen op informatievoorziening en doneren. Zo blijft de homepage overzichtelijk. En ik ben aan de slag gegaan met wireframes: lekker schuiven met verschillende onderdelen. Wat is een logische plaats? Is het niet teveel tekst hier? Is alles in balans? Kunnen je ogen nog soepel over de pagina glijden?

Een functionele footer

De footer is een prima plek voor content waarvan je wilt dat deze zichtbaar is op alle pagina’s. In eerste instantie had ik hier het laatste nieuws en de nieuwsbrief-signup geplaatst. Zo werd ook nog eens het onderscheid tussen hoofdzaak en bijzaak duidelijker.

Tijd voor tweaking

Alles leek de juiste plek te hebben. Tijd om het geheel een wat meer gefinished gevoel te geven. Schaduwen voegde ik toe om diepte te creëren en daarmee ook onderscheid. Lettertype en -grootte werden netjes en consequent toegepast. Een terugkomend feedbackpuntje was dat de kleur rood weinig aanwezig was. Dat begreep ik. Dus die kleur heb ik geprobeerd weer subtiel terug te laten komen, zonder het geheel daarbij alarmerend over te laten komen.

Anders nog iets?

Een gebruiker bekijkt de homepage van boven naar beneden. Maar stel: onderaan de pagina aangekomen, heeft hij nog niet kunnen vinden waar hij naar op zoek was. Hier komt de footer goed van pas. Hierin heb ik dus de volledige navigatie geplaatst plus het eerste niveau van de subnavigatie. Dat vergemakkelijkt wellicht de zoektocht.

En toen was er HTML

Op dit punt in het proces was een punt bereikt, waarbij er bij de tests alleen nog kleine verbeterpuntjes uitkwamen. Vormgevingsdingetjes, een kleurtje hier of daar. Het werd dus tijd om deze versie om te zetten naar html, zodat ook de interactie met de verschillende elementen ervaren konden worden. Eén daarvan was het doneerelement. Hoe hoger het bedrag is dat de bezoeker invult, hoe meer smileys erbij komen: een feedbackloop. De reacties hierop waren erg positief. “Doordat ik bij €55 een extra smiley kreeg, zou ik €5 meer gedoneerd hebben dan anders.” Het werkt! En dat kan je alleen testen met een werkende homepage.

Herfocussen

Html: check. Interactie: check. “Zet nu je bril eens af? Noem de dingen eens die je aandacht trekken. Is dat wat je verwachtte?”. En dan valt ineens op dat er een aantal zaken zijn die aandacht trekken, maar waarvan het in eerste instantie niet nodig is. En de introductietekst, ik zou ‘m niet lezen omdat hij veel te lang is. Toch nog het een en ander aangepast dus, om het gewenste resultaat te bereiken.

Resultaat

Het resultaat, dat kun je hier zien. Mijn doel? Een duidelijke, overzichtelijke en rustige homepage. Heb ik dat doel behaald? Ik denk het wel. Natuurlijk kan ik nog wel even verder met dit project. A/b testing, interviews met de werkelijke doelgroep, werkelijke wensen van het goede doel erin verwerken, noem maar op. Maar het is tijd voor een nieuw project. Dit is leuk!

Wat ik geleerd heb?

Naast veel theorie heb ik van dit project geleerd:

• Trots opzij te zetten om zo gemakkelijker met kritiek om te gaan;
• Mensen aan te kijken in de eerste paar seconden dat ze de website zien. Zien waar ze kijken, zien wat hun uitdrukking is, zegt zoveel over het ontwerp;
• Hoe onvoorspelbaar mensen soms zijn;
• Dat men graag kritiek geeft en snel bereid is om je te helpen, omdat ze zien dat je graag iets wilt verbeteren.

Dit artikel is, op verzoek van het goede doel in kwestie, geanonimiseerd.