Een gemiddelde organisatie genereert ontzettend veel gegevens. Data waarvan je je misschien niet eens bewust bent. Datavisualisatie maakt die data bruikbaar en stelt ons in staat om beslissingen te nemen. In dit blog laten we je zien welke stappen er nodig zijn om data te vertalen naar een begrijpelijk beeld.

Grote hoeveelheden data zijn moeilijk te bevatten. Veel datasets bevatten enorme hoeveelheden waardevolle data. De visualisatie van data helpt beleidsmakers om beslissingen te nemen. Een helder beeld legt bijvoorbeeld verbanden bloot en maakt het makkelijker om actie te ondernemen. Maar hoe geef je je data nou op zo’n manier vorm dat de visualisatie van data helpt bij het nemen van beslissingen?

Waarom is datavisualisatie een hot topic?

Onderzoek wijst uit dat mensen ongeveer 20% van wat ze lezen kunnen onthouden. Als je diezelfde informatie omzet in beeld dan neemt de capaciteit om informatie op te slaan enorm toe, tot wel 80%. Datavisualisatie zorgt daarmee dus voor efficiëntie in de overdracht van informatie. Zeker in een situatie waarin mensen veel informatie tot zich moeten nemen, bijvoorbeeld in het politieke speelveld, landelijke zorg of de procestechniek.

Tegelijkertijd vergroot visuele communicatie het begrip, zeker wanneer data abstract is. Een beeld zegt meer dan 1000 woorden wordt wel eens gezegd. Feit is dat ons brein in staat is om in milliseconden een beeld te begrijpen. Het stelt ons in staat om verbanden te leggen, of – in geval van data design – om consequenties te doorzien en een voorspelling te doen over de toekomst.

Het besluitvormingstraject naar de visualisatie van data

Je verwacht misschien dat het traject begint bij de data en de manieren waarop je die kunt benaderen om tot de juiste vorm te komen. Maar het echte beginpunt is veel eerder: bij de besluitvorming omtrent de visualisatie van data.

Allereerst heeft elke data een bron. En uiteindelijk is iemand eigenaar van die databron. De vraag is welk belang die persoon of organisatie heeft om de data ter beschikking te stellen. Het prijsgeven van data kan een bezwaar zijn, zeker wanneer intellectueel eigendom of dataveiligheid belangrijke kwesties zijn. En wanneer de eigenaar de kwaliteit van de data niet kan garanderen dan kunnen fouten en aannames in de data tot afbreukrisico voor de eigenaar leiden. Het is goed om daarover van tevoren afspraken te maken.

Het is dus verstandig om van tevoren de kwaliteit van de data te analyseren. De kwaliteit van data heeft namelijk invloed op de manier waarop je de data presenteert. Een voorbeeld: stel je een dataset voor waarin veel onzekerheden verborgen zitten, bijvoorbeeld doordat er aannames gedaan zijn of er slechts een kleine populatie beschikbaar is. Als je die data uiteindelijk gedetailleerd en concreet visualiseert, dan ontstaat er een mismatch tussen de zekerheid die de gevisualiseerd wordt en de betrouwbaarheid van data. De kans is aanwezig dat besluiten worden genomen op basis van onnauwkeurige informatie. De kwaliteit van data is dus altijd een factor die je mee moet nemen in de besluitvorming.

Uitgangspunten voor de visualisatie van data

Er zijn honderden manieren om data in een grafiek weer te geven. Er is ook niet één methode de juiste. Als ontwerper ben je op zoek naar de manier om de gebruiker inzicht te geven. De vraag is natuurlijk: inzicht waarín! Om met de Amerikaanse statisticus Edward Tufte te spreken: “de lakmoesproef van design is hoe goed het ontwerp ondersteunt in het begrip van inhoud, niet hoe fraai die inhoud wordt weergegeven”.

De sleutel zit ‘m in het leren kennen van je doelgroep. Om een beeld te vormen van de situaties waarin de datavisualisatie een rol van betekenis speelt moet je antwoorden zien te vinden op vragen als:

• Wie gaat de datavisualisatie gebruiken?
• In welke scenario’s draagt de datavisualisatie bij tot besluitvorming?
• Welke beslissing wil ik dat mijn doelgroep kan maken?
• En in welke omstandigheden vindt die beslissing plaats? Bijvoorbeeld onder hoge druk, of in een situatie met veel belanghebbenden?
• Welke acties wil ik mogelijk maken?

Welke keuzes maak je in data design?

Met de antwoorden op deze vragen ben je beter in staat om keuzes te maken in je data design. Een keuze is bijvoorbeeld welke gegevensdichtheid je nodig hebt om de vragen van je doelgroep te beantwoorden. Hoe hoger de dichtheid, hoe gedetailleerder het inzicht, maar hoe meer moeite het ook kost om een beeld te vormen. Het streven is te allen tijde om je ontwerp helder te houden.

Een tweede keuze is het kleurgebruik: met kleur kun je de focus leggen op dat wat belangrijk is. Alarmkleuren wanneer waarden een drempel overstijgen bijvoorbeeld, of kleurgebruik om de snelheid van fluctuaties weer te geven (een veelgebruikte methode in medische datavisualisaties). Daarnaast kan kleur worden ingezet als extra dimensie in een grafiek. Zo kun je kleur in een spreidingsdiagram (scatter chart) bijvoorbeeld gebruiken om je datapunten te categoriseren.

En een laatste keuze is de interactiviteit: wil je je doelgroep in staat stellen om de visualisatie te configureren? Eén van de mogelijkheden is bijvoorbeeld om bij gesegmenteerde data de details van een bepaald segment uit te lichten. Of om de mogelijkheid te geven om in te zoomen op een bepaald moment in een tijdlijn. Ook hier zijn de scenario’s waarin de datavisualisatie gebruikt wordt leidend: de vragen zijn leidend in de keuzes voor interactiviteit.

It’s not how much information there is, but rather how effectively it is arranged.

Edward R. Tufte, emeritus hoogleraar politieke wetenschappen, statistiek en informatica aan de Yale University

De meest gebruikte visualisaties op een rij

Afhankelijk van je doel heb je de keuze uit een hele reeks basisvisualisaties. We kennen ze allemaal wel: tijdlijnen, staafdiagrammen, cirkeldiagrammen, enzovoorts. De verschillen tussen die diagrammen zijn vrij helder. Toch worden er vaak onlogische keuzes gemaakt. Er zijn verschillende strategieën om tot een heldere data design te komen en het gaat te ver om die hier te bespreken. Maar de benadering van de Amerikaanse professor Dr. Andrew Abela geeft handige aanknopingspunten om tot een duidelijke datavisualisatie te komen. In zijn model vallen de volgende vier vraagstukken te onderscheiden:

Model van Dr. Andrew Abela – Extremepresentation.com

1. Een vergelijking tussen verschillende datasets of over het verloop in de tijd

Bij dit soort vraagstukken wil je vooral de verhoudingen kunnen zien. Staafdiagrammen en liggen voor de hand omdat je daarbij in een oogopslag een vergelijking kunt maken. Speelt tijd een rol, dan is een lijndiagram vaak een betere optie omdat datapunten daarbij met elkaar verbonden zijn en de verhoudingen nog makkelijker zichtbaar worden. In financiële vraagstukken zien we daarnaast vaak het kaarsdiagram, die het koersverloop aangeeft met daarbij de uitersten op een koersdag.

2. De verdeling tussen verschillende categorieën

Gaat de vraag van je doelgroep over de verdeling van data, bijvoorbeeld over de verdeling van aantallen over het verloop van tijd? In dat geval zijn er maar enkele basisdiagrammen die uitkomst bieden. Het lijndiagram en het staafdiagram bijvoorbeeld, waarbij het lijndiagram meestal wordt ingezet wanneer je meer datapunten hebt. Een spreidingsdiagram is ook een geschikte data design om verdeling weer te geven.

3. De relatie tussen 2 of meer factoren

Als je met meerdere dimensies werkt en de relatie tussen die dimensies wilt weten dan zijn het spreidingsdiagram (puntgrafiek), het radardiagram en het bellendiagram goede oplossingen. Radardiagrammen zie je bijvoorbeeld veel in persoonlijkheids- of talentenonderzoeken waarin je gescoord wordt op verschillende onderdelen. Spreidingsdiagrammen gebruik je vooral wanneer je veel datapunten hebt. En heb je een kleinere hoeveelheid datapunten, dan kun je een eventuele derde dimensie kwijt in de grootte van cirkels in het bellendiagram.

4. Samenstelling van de dataset

Wanneer je dataset verschillende segmenten bevat en je benieuwd bent naar aantallen en verhoudingen tussen die segmenten, dan wil je de focus juist op die segmenten leggen in plaats van op de totalen. Daar zijn gestapelde staafdiagrammen en meervoudige lijndiagrammen zeer geschikt voor. Bij statische data, zoals de samenstelling van nationaliteiten op een universiteit, bieden cirkeldiagrammen een eenvoudige oplossing. Is de data dynamisch, wanneer je bijvoorbeeld de ontwikkeling van nationaliteiten in het verloop van de jaren wilt zien, dan heb je een extra dimensie nodig en zijn vormen als een gestapeld staafdiagram of een meervoudig lijndiagram geschikt.

Aan de slag met datavisualisatie

Ik hoop dat je een inkijkje hebt gekregen in de factoren die van belang zijn om tot een goede datavisualisatie te komen. In het proces zijn vaak verschillende actoren betrokken: beleidsmakers, beslissers, en technici bijvoorbeeld. Betrek deze stakeholders vroeg in het proces om tot concrete uitgangspunten te komen voor een datavisualisatie die in de informatiebehoefte van de doelgroep voorziet. Het is de rol van de ontwerper om deze uitgangspunten te vertalen in een leesbare en consistente data design, waarbij de helderheid en consistentie van de presentatie nooit uit het oog mogen worden verloren.

Meer weten over onze benadering van datavraagstukken? We helpen je graag op weg. Neem vrijblijvend contact met ons op en we laten je zien welke strategieën je kunt hanteren.

In mijn vorige blog over cocreatie deelden we de stappen die we nemen in projecten waarin we de doelgroep laten participeren in het ontwerpproces. In het tweede deel nemen we de volgende stappen: het stimuleren van creativiteit en resultaatgericht werken.

In een cocreatie team streef je natuurlijk naar een dynamiek waarin de kennis en praktijkervaring van het team vertaald wordt naar vooruitstrevende nieuwe ideeën. In het eerste deel van dit blog beschreven we hoe je als facilitator van het cocreatie proces een gemeenschappelijk perspectief creëert en hoe je het team inspireert om realistisch maar ambitieus vooruit te denken. Zodra het team weet wat het wil bereiken kan het echte werk beginnen.

Innovatie start met vrij denken: het genereren van ideeën zonder te ver vooruit te lopen op consequenties. De interactie met naasten helpt om een dynamiek te bewerkstelligen waarin nieuwe ideeën ontstaan: samen ontwerpen leidt tot innovatievere concepten.

Stap 3 / Samen ontwerpen

Papier en potlood gereed? Tekenen maar! Was het maar zo eenvoudig! Om daadwerkelijk het team in de ontwerpmodus te krijgen moet je het ontwerpproces een beetje begeleiden. Gelukkig zijn daar allerlei methoden voor. Hieronder laten we je zien welke ingrediënten je tot je beschikking hebt.

Brainstormen

Brainstorm-technieken zoals brainwriting en mindmapping bevorderen het denkproces. Mindmapping helpt ons bijvoorbeeld om nieuwe verbanden te leggen en stelt ons in staat om een probleem diepgaander te doorgronden. Vaak is dat een individueel proces, maar in een co-creatie sessie wil je natuurlijk meer dynamiek! Begin bijvoorbeeld eens met een sessie waarin iedereen mag roepen waar hij aan denkt bij de uitdaging die er ligt: emoties, doelen, omgeving, verlangens… Hang al die begrippen op het bord en maak daarna de stap om die begrippen simpelweg visueel te organiseren. Het resultaat is een gezamenlijk gezamenlijk ontstane mindmap van de situatie.

Brainstormen via een virtuele mindmap

Brainwriting is ook een goede start van het ontwerpproces: het is een methode waarbij teamleden individueel of in groepsverband alle ideeën opschrijven die er bij ze opkomen. Vaak wordt dat gedaan in de vorm waarbij verschillende teamleden geeltjes op een muur plakken en die geeltjes vervolgens gezamenlijk worden besproken. Nadeel van die methode is dat teamleden elkaar beïnvloeden: ze nemen al snel elkaars ideeën over.

Bij een brainstorm streef je natuurlijk naar een goede balans tussen individualiteit en de gezamenlijkheid waarmee je samen de richting bepaalt. Als facilitator kun je hierin sturen. Brainwriting kun je bijvoorbeeld doen als een interactieve sessie waarbij iedereen direct zijn of haar ideeën etaleert, maar je kunt ook de ruimte bieden om eerst individueel ideeën te verzamelen en deze pas daarna met elkaar te delen. Zo zorg je ervoor dat beïnvloeding beperkt blijft en er ruimte is voor verschillende perspectieven en voor de meer introverte deelnemers aan de sessie.

Beginnen met ontwerpen

Elke ontwerper heeft wel eens last van wat we het ‘blank canvas syndrome’ noemen: het witte, lege vel papier waar de eerste streep nog op moet worden gezet. De onbeperkte mogelijkheden zorgen voor een blokkade. Beginnen is voor elke ontwerper lastig omdat je nog niks hebt om je ontwerp aan te relateren. Doorwerken op een bestaande situatie is veel eenvoudiger.

Bij cocreatie heb je natuurlijk te maken met ongeoefende ontwerpers die nóg meer last hebben van dit blank canvas syndrome. Tel daarbij op dat ongeoefende ontwerpers nog wel eens bang zijn dat ze helemaal niet kunnen tekenen en je snapt dat ze snel geblokkeerd raken. Later in dit blog lees je over de middelen die je hebt om de angst om iets verkeerd te doen te verlagen en de creativiteit te bevorderen. Maar eerst laten we je zien hoe wij onze ontwerppartners in de praktijk een handje helpen.

Cocreatie met een design kit

Dat doen we door te werken met een design kit: een set aan (papieren) interface-blokken waarmee de ontwerper op een heel laagdrempelige manier zijn gedachten kan visualiseren. Menu’s, tabellen, widgets, formulier-elementen, buttons, ze zitten allemaal schematisch in de design kit. Het plaatsen van deze elementen op een canvas is een makkelijkere eerste stap om tot een schermindeling te komen: ten eerste heb je een beperkte set aan vooraf gedefinieerde mogelijkheden, wat het kiezen makkelijker maakt. En daarnaast zijn de interface-elementen eenvoudig te verplaatsen, wat het ontwerpproces heel flexibel maakt. Ideeën kunnen snel gevisualiseerd en geëvalueerd worden. De barrière om iets ‘verkeerd’ te doen is hiermee weggenomen.

Werken met een cocreatie design kit

Hoe gaat dit in zijn werk? Allereerst beschrijf je een scenario, met een duidelijke situatieschets, het doel dat de persona wil bereiken, en een beschrijving van waar die persona in het proces staat. Maak het niet te groot: hoe concreter de situatie hoe beter. Probeer vooral geen allesomvattend voorbeeld te schetsen, want hoe specifieker de situatie hoe beter de oplossing. Vervolgens open je de dialoog met het cocreatie team: wat heeft de gebruiker nodig en welke middelen zou je hem kunnen aanreiken om zijn doel te bereiken? De uitkomsten van die dialoog vormen het startpunt van het daadwerkelijke ontwerp.

Soms zitten er grote verschillen in het vermogen van teamleden om de vertaalslag te maken van praktijksituatie tot (digitale) oplossing: de een gaat direct aan de slag, de ander wil eerst het speelveld overzien voordat hij een start kan maken. Laat dat vooral begaan: de voortgang van de één is weer inspiratie voor de ander. Vaak werkt het goed om in koppels te werken, want het verwoorden van wat je wilt ontwerpen helpt bij het visualiseren. En mocht er nou echt geen dynamiek ontstaan (wat zelden voorkomt), schroom dan niet om naast iemand te gaan zitten: zolang het teamlid in control is over het ontwerp kun je hem prima begeleiden in zijn denkproces!

Met elkaar in gesprek

De gemaakte ontwerpen zijn het perfecte middel om de dialoog tussen de verschillende stakeholders te voeren. In dit stadium zien we vaak dat ideeën elkaar in hoog tempo opvolgen. Het simpele feit dat ideeën wel genoeg vorm hebben gekregen maar nog niet in steen gebeiteld zijn zorgt voor creatieve invalshoeken. Allemaal input voor de volgende stappen: uitwerking van concepten, visualisatie, en prototyping.

Vaak zit er een natuurlijk einde aan het schetsstadium: de gesprekken over de gemaakte ontwerpen geven een beeld van de behoeften en zienswijzen van klanten, maar de schetsen zijn te abstract om de effectiviteit van de beoogde oplossing te kunnen inschatten. Een verder uitgewerkt detailontwerp helpt om te reflecteren op de geschetste oplossingen.

Cocreatie: het managen van creativiteit

Je wilt natuurlijk de meest creatieve ideeën als uitkomst van je cocreatie sessies. Als facilitator kun je deze creativiteit op allerlei manieren managen. Eerder noemden we al de invloed van restricties: anders dan dat je zou denken stimuleer je de creativiteit door de keuzemogelijkheden te beperken. Neem bijvoorbeeld de haiku: een gedicht waarvan de vorm dicteert dat het slechts drie regels lang mag zijn, met een beperkt aantal lettergrepen (meestal de eerste zin 5, de tweede 7 en de derde weer 5). Talloze dichters hebben hierin een vorm gevonden voor hun uitdrukkingskracht.

mijn oude dagboek –
tussen de regels
een ander verhaal
   – Ria Giskes (haiku van het jaar 2020)

Veiligheid: basisvoorwaarde om anders te denken

Een ander aspect dat je kunt managen is veiligheid: veiligheid is basisvoorwaarde 1 voor de ontwikkeling van creativiteit. Creativiteit gaat gepaard met fouten maken. Om tot nieuwe denksporen te komen moet het mogelijk zijn om hersenkronkels te maken die niet voor de hand liggen. Dat betekent dat er ook ruimte moet zijn voor gedachten die eigenlijk kant noch wal raken. Sterker nog: deze ‘fouten’ zijn essentieel voor een vrij denkproces. Stimuleer dus om fouten te maken! Nodig uit om alle associaties die je team maakt te omarmen. En grijp duidelijk maar vriendelijk in zodra teamleden elkaars gedachten of ideeën teveel bekritiseren.

Mistakes aren’t a necessary evil. They aren’t evil at all. They are an inevitable consequence of doing something new.

Ed Catmull, President van Walt Disney Animation Studios en auteur van Creativity, inc.

Lateraal denken in cocreatie

Over denksporen gesproken: je kunt creativiteit ook stimuleren door ‘anders denken’ te stimuleren. Het benaderen van een probleem vanuit een ongebruikelijke invalshoek wordt lateraal denken genoemd. Het bekende ‘Omdenken’, van grondlegger Berthold Gunster, is een voorbeeld van lateraal denken: draai het probleem om en benader het probleem andersom. Stel dat je continu in discussie raakt met een collega, en dat hindert jullie samenwerking, dan kun je proberen uit te vinden wat er in jullie dynamiek misgaat. Maar je zou ook kunnen bedenken wat je zou moeten doen om nóg meer in discussie te raken. Misschien geeft dat wel nieuwe inzichten!

Andere vormen van lateraal denken zijn het verzinnen van analogieën, het maken van associaties, of het werken met het systeem van de zes ‘denkhoeden’ van Edward de Bono. Allemaal manieren om het rationele, concrete en lineaire denken te doorbreken en de creativiteit aan te spreken!

Gebruik tijd als catalysator

‘Onder druk wordt alles vloeibaar’ zeggen ze toch? Daar zit een kern van waarheid is, zeker als het gaat om creativiteit. Of het nou om denkprocessen gaat of om ontwerpprocessen: in het begin doen de details er niet toe. Het gaat om het idee, om de grote lijn, de details komen later wel! Zo houd je de energie erin om verschillende oplossingen te bedenken. Elke perfectionist zal het herkennen: de focus op details kost tijd weerhoudt je ervan om een idee ook weer makkelijk los te laten.

Dus hoe zorg je ervoor dat je de energie hoog houdt? Tijdsdruk! Ik ben zelf bijvoorbeeld fan van Crazy Eights: een snelle ontwerpoefening waarin je in 8 minuten 8 verschillende ideeën visualiseert! Deelnemers hebben simpelweg niet de tijd om een idee te verwerpen of om zich zorgen te maken over details. Dikke kans dat enkele concepten bruikbare invalshoeken bevatten!

Stap 4 / Resultaten verwerken

Als het goed is heb je in dit stadium een reeks ontwerp-oplossingen in handen. Bij de analyse van de opgeleverde schetsen valt vaak een rode draad te ontdekken: in de informatie die gebruikers nodig hebben, in hun beleving of de werkwijze die ze gewoon zijn. De laatste stap in het cocreatie proces is om de resultaten te evalueren, en een vertaling te maken naar een professioneel uitgewerkt concept dat inspireert en enthousiasmeert.

Een recent cocreatie-traject voor een organisatie in de gezondheidszorg leverde bijvoorbeeld een paar bruikbare oplossingsrichtingen op om het werk te organiseren. Zowel managers als teams op de werkvloer hadden bijgedragen aan de cocreatie sessies. Wat bleek? De concept-oplossingen van de managers en de teams liepen helemaal niet zo ver uiteen, maar verschilden wél op een paar essentiële punten in de manier waarop naar de hoeveelheid werk werd gekeken. De teams hadden behoefte aan meer inzicht in de details bijvoorbeeld. In de gezamenlijke evaluatie vormden de concepten de basis voor de discussie over hoe werkzaamheden werden georganiseerd.

Van concept tot prototype: breng het concept tot leven!

Ook al kan een concept fantastisch innovatief zijn, het moet natuurlijk wel verkocht worden aan de beslissers! Tijd om de vertaalslag te maken naar iets tastbaars. Dit is het moment om professionele ontwerpers te laten doen waar ze het beste in zijn: het tot leven brengen van een abstract concept. Dat kan in vele vormen. Afhankelijk van het concept en van de beschikbare tijd kies je het beste middel:

• Een storyboard of film om de toehoorder mee te nemen in de situatieschets,
• Een paper prototype, ofwel een in papier uitgewerkt concept waarmee je in een vroeg stadium feedback kunt ophalen bij gebruikers,
• Een 3D-geprinte mock-up indien het om een tastbare innovatie gaat
• Een interactief doorklikbaar prototype als virtuele demo

Virtueel prototype in Figma: de blauwe lijnen zijn verbindingen tussen interface-elementen

Met een goed uitgewerkt prototype krijg je de handen veel sneller op elkaar. Allereerst overtuigt een prototype de beslissers dat een idee realistisch is. Het geeft het gevoel dat de belangrijkste stap al gezet is. Harvard professor Teresa Amabile deed lang onderzoek naar hoe mensen betekenis vinden in hun werk. De belangrijkste uitkomst van dit onderzoek was het gevoel van dagelijkse vooruitgang: deze vooruitgang geeft ons een gevoel van nut, van het bereiken van resultaat. Een prototype geeft deze betekenis!

No prototype, no meeting

Dennis Boyle, oprichter van ontwerpbureau IDEO

Bovendien kun je een prototype makkelijk door een klantpanel laten testen om de eerste feedback op te halen. Is die positief, dan kun je dat oordeel meteen inbrengen in de presentatie aan het management. Als het concept daadwerkelijk uit de koker van de eindgebruiker komt en de eerste gebruikerstests het bewijs leveren dat het concept werkt, dan vormen tijd en geld vaak nog de enige restricties. Kortom: hoe concreter de resultaten, hoe lager de risico’s worden ingeschat en hoe hoger de bereidheid tot investeren!

Als laatste voedt een prototype de belevingswereld van de toehoorder. Als een verfrissende blik op de toekomst. Hij ziet nieuwe kansen ontstaan, wordt enthousiast over de mogelijkheden die de nieuwe insteek biedt. Dergelijke conceptuele buy-in van een beslisser helpt enorm in het beslissingsproces.

Het vervolg: neem je cocreatie team mee gedurende de realisatie

In voorgaande stappen beschreven we belangrijke factoren die je in je rol als facilitator kunt stimuleren om de effectiviteit en het succes van het cocreatie-proces te vergroten. Op een gegeven moment neemt een productieteam de realisatie van het concept over. Maar daarmee hoeft de rol van het cocreatie-team niet uitgespeeld te zijn.

Veel productieprocessen zijn tegenwoordig natuurlijk agile ingestoken: een iteratieve werkwijze waarbij tweewekelijks een functioneel deelresultaat wordt opgeleverd. Net als bij de user centered design methode kun je deze deelopleveringen gebruiken om feedback op te halen bij het team dat aan de wieg stond van het concept. Zij vormen als het ware het morele geweten achter de uitwerking van het concept: ze bewaken het idee, geven feedback, en dragen daarmee bij aan het voortschrijdend inzicht. Het loont dus om het teamwork vanuit de cocreatie sessies door te trekken naar productie.

Het cocreatie team kan zelfs een rol spelen als ambassadeur van het idee. Bij de ontwikkeling van een intern product (bijvoorbeeld een EPD) loont het bijvoorbeeld om ze te betrekken bij de ingebruikname van het product. Hun commitment op het idee neemt anderen mee in de wil om het product in gebruik te nemen. Want weerstand om te veranderen is er altijd, maar een stem vanuit de organisatie helpt om die weerstand te doorbreken.

Experimenteer, evalueer en leer

Ik hoop je te hebben meegenomen in de wereld van cocreatie. Wij doen dat in onze rol van software ontwikkelaars, maar cocreatie is natuurlijk in tal van situaties toepasbaar. Al deze informatie zou je echter best eens kunnen ontmoedigen om zelf met een team aan de slag te gaan. Toch wil ik je op het hart drukken dat je met deze kapstok van vier stappen én een hoop enthousiasme echt een heel eind zult komen. Experimenteer, evalueer en leer. Op naar een innovatieve toekomst!

Innovatie is het sleutelwoord voor succes in de huidige maatschappij. Organisaties zoeken naar een manier om zichzelf te onderscheiden, om nieuwe diensten op een andere manier aan te bieden. Om klanten beter van dienst te zijn, of om bestaande processen met nieuwe technologie in één klap naar de eisen van deze tijd te brengen.

In de komende blogs nemen we je mee in de wereld van co-creatie: samen met klanten, medewerkers, of andere stakeholders werken aan het ontwerp van een nieuw product of dienst. In dit eerste deel lees je waarom deze vorm van samenwerking steeds belangrijker wordt voor het succes van organisaties. En we maken een start met de stappen die je kunt nemen om co-creatie toe te passen.

Nieuwe mogelijkheden om je doelgroep te betrekken

Innovatie en technische vooruitgang worden van oudsher gedreven door Research & Development afdelingen van organisaties. Maar de veranderende verwachtingen van klanten en de snelheid waarmee start-ups markten bestormen vragen om een meer Agile en meer klantgerichte benadering voor de ontwikkeling van nieuwe diensten. Waar de klant vroeger vooral in uitgenodigd werd om de ideeën die de R&D afdeling had uitgewerkt te toetsen, biedt moderne technologie ons mogelijkheden om de klant op een veel laagdrempeligere manier in het ontwerptraject te betrekken. Crowdsourcing via sociale media en internetfora maken het bijvoorbeeld mogelijk om in alle fasen van een project – vanaf het eerste idee tot bij het testen van release candidates – samen te werken met de eindgebruiker.

Bij dergelijke traditionele vormen van co-creatie is het bedrijf de leidende partij: de R&D afdeling ontwerpt een oplossing, welke getoetst wordt door de doelgroep. Dat wordt anders wanneer het bedrijf zich opstelt als facilitator: het bedrijf levert de benodigde tools waarmee klanten hun eigen product of dienst kunnen samenstellen. Neem als voorbeeld LEGO, die het zijn grote schare fans mogelijk heeft gemaakt om zelf bouwpakketten te ontwerpen. De customer base creëert het product, en de beste ontwerpen worden door LEGO op de markt gebracht. Een typisch voorbeeld van omdenken!

Deze tijd vraagt om co-creatie

Klanten zijn de afgelopen 20 jaar steeds selectiever geworden in aankopen. Parallel aan deze toenemend kritische blik van consumenten volgen ontwikkelingen elkaar steeds sneller op. Om adaptiever te kunnen schakelen is er een trend ontstaan om in kleine teams te ontwerpen en sneller de markt op te kunnen. De traditionele top-down aanpak is steeds meer vervangen door een benadering waarin inbreng van individuen en expert-teams mede de koers bepalen.

Het belang van betrokkenheid van klanten en medewerkers wordt dus steeds groter. Organisaties willen hun klanten leren kennen en de overwegingen in het aankoopproces beter begrijpen. Gebruikersonderzoek en marktonderzoek worden opgevolgd door medewerking van klanten in het conceptstadium van dienst- of productontwikkeling. Deze vorm van samenwerking levert je op verschillende manieren voordelen op ten opzichte van de traditionele benadering:

• Samen ontwerpen stimuleert de dialoog en verlaagt drempels. Je komt snel tot de rationele en emotionele afwegingen die de klant heeft bij het gebruik van je dienst. Iedereen heeft zijn eigen denkbeelden en met de dialoog word je onderdeel van elkaars wereld. Meer inzicht in de beleving van de (interne) klant dus, leidend tot een hogere klanttevredenheid, of meer betrokkenheid van medewerkers.
• Je eigen aannames worden onderuitgehaald: met klanten aan tafel zullen eerdere veronderstellingen die je team heeft gedaan gecorrigeerd of in elk geval genuanceerd worden.
• Meer creativiteit, expertise en passie aan tafel. Co-creatie biedt kansen om spelenderwijs te leren. Het verhoogt inspiratie omdat je geprikkeld wordt door een ander idee.
• Het ontwerpproces wordt democratisch en transparant. In het kader van maatschappelijke innovatie zorgen deze kenmerken ervoor dat burgers of andere belanghebbenden minder weerstand ervaren tegen beoogde veranderingen.
• Co-creatie verhoogt de merkloyaliteit van klanten: online co-creëren helpt bijvoorbeeld om een community aan je te binden en kan daarmee een succesvolle lancering bespoedigen.
• Slimme inzet van co-creatie technieken maken het tot een voordelige keuze: een trouwe fanbase is blij om een bijdrage te mogen leveren.

Bouwblokken om het co-creatie team een handje te helpen

Co-creatie binnen je eigen organisatie

Genoeg redenen dus om zelf ook te starten met vormen van co-creatie. Maar waar begin je? Om je op weg te helpen beschrijven we de stappen die ons team hanteert:

1. De setting creëren: een co-creatie proces start altijd met het scheppen van gemeenschappelijke perspectieven over de bestaande en gewenste situatie. Het kaderen van doelstellingen is essentieel voor de voortgang in het co-creëren.
2. Inventariseren en inspireren: de huidige situatie is het startpunt om te dromen over de toekomst. Door vrij te denken stimuleer je idee-vorming.
3. Samen ontwerpen: het creatieve proces is een spel van vrijheid en restricties. Als facilitator begeleid je het ontwerpproces en ondersteun je de creativiteit van deelnemers.
4. Van ontwerp naar resultaat: de vertaalslag van idee tot oplossing vergt vakspecialistische kennis. In deze stap schets je een realistisch toekomstbeeld en werk je samen met het team aan een visie op het te ontwikkelen product of de nieuwe dienst.

Stap 1 / Starten met co-creatie: de setting creëren

Een co-creatie sessie is niet voor iedereen dagelijkse kost. Participanten kunnen een zekere schroom ervaren om hun ideeën op tafel te leggen. Wanneer je de doos met tekenmaterialen tevoorschijn haalt is er vrijwel altijd wel iemand die zegt “Ik kan helemaal niet tekenen hoor!”. Terwijl co-creëren natuurlijk helemaal niet gaat om gepolijste resultaten: het gaat om vrij denken, het delen van elkaars gedachtengoed, om het genereren van ideeën. Start de sessie dus met het stimuleren van de open blik en neem de eventuele zorgen over prestaties weg. Benadruk dat er geen ‘goed’ of ‘fout’ is, en dat ieders blik een verrijking is van het totaalbeeld.

Co-creatie vraagt om gedeelde kaders

Co-creatie vereist niet alleen een open dialoog waarin ruimte is voor verschillende denkbeelden, maar vraagt ook om een gemeenschappelijk beeld van de situatie, waarin de doelgroep, de probleemstelling, en de context gedefinieerd zijn. Het is dus zaak om gezamenlijke kaders op te stellen waarbinnen gewerkt wordt. Maar dat kaderen lukt niet wanneer de beleving van teamgenoten niet op elkaar aansluit. Onderlinge verschillen in denkbeelden kunnen verwarring veroorzaken over de doelen en de weg daarnaartoe. Een klassiek kip-ei-verhaal dus, precies de reden waarom het soms zo moeilijk is om kaders te stellen.

In veel gevallen worden vanuit de organisatie al enkele kaders meegegeven. In kosten, tijd of in de vorm van beoogde resultaten. Hoewel die kaders soms bedreigend of beperkend voelen, is het wel zaak om die kaders als team te evalueren. Doe je dat niet, dan stuit je later in het proces vaak op weerstand.

De kracht van verhalen

Een goede strategie om tot gemeenschappelijke kaders te komen is het vertellen van verhalen. Een verhaal geeft context aan een probleem en voedt daarmee de beleving van de toehoorder. Wanneer klanten deelnemen van de co-creatie dan kun je hen bijvoorbeeld uitnodigen om hun persoonlijke ervaringen te delen. Of je laat medewerkers hun werksituatie of zorgen met elkaar delen. Hoe persoonlijker het verhaal, hoe meer relevantie.

Verhalen kunnen ook worden gevonden buiten het team: bijvoorbeeld door de klachten te lezen die bij de klantenservice zijn binnengekomen. Of, meer conventioneel, door de vooraf verzamelde enquête-inzendingen te bestuderen. Dergelijke real-world ervaringen geven betekenis en urgentie aan het co-creatie traject en verhogen daarmee de toewijding van de participanten.

Technieken als storywriting en mindmapping lenen zich bij uitstek om ter ondersteuning van dit proces. Ze helpen situaties te beschrijven en geven context aan de verhalen. Dikwijls bevatten de gedeelde verhalen overeenkomsten, bijvoorbeeld een gezamenlijke norm of een gedeeld perspectief. Soms vallen verhalen ook te segmenteren op probleemstelling, of valt de doelgroep van een uitdaging te segmenteren in verschillende persona’s. Als facilitator kun je dergelijke verbanden zichtbaar maken.

Vaak helpt het om de uitkomsten van deze brainstorm-sessies te visualiseren (of schematiseren) om het gemeenschappelijke beeld nog meer te prikkelen. Zo leidt uitwisseling van verhalen tot een gemeenschappelijke definitie van doelen en doelgroep en vormt zich het gemeenschappelijke kader waarbinnen het co-creatie proces zich kan ontplooien.

Tip: schrijf je doelgroep, de doelen en het proces op een groot vel papier en hang deze aan de muur. Ze zullen je in latere discussies helpen om de relevantie en prioriteit te bepalen.

Stap 2 / Inventariseren en inspireren

Nu je een gemeenschappelijk perspectief hebt op de uitdaging die voor je ligt kun je beginnen met het échte werk: oplossingsrichtingen verkennen, visievorming, en een strategie voor de toekomst. TODO: inspireren, dialoog. Zowel de huidige situatie als de ideale situatie zijn van belang. Denken, dromen en doen.

Denken: de realiteit

Het startpunt daarvan is een breakdown van de huidige situatie: analyse van het systeem waarbinnen een oplossing moet worden gevonden en een analyse van de huidige werkwijze. Allereerst het systeem: hiermee doelen we op het krachtenspel van factoren die het proces beïnvloeden. Een probleem staat nooit op zichzelf: het maakt deel uit van een systeem waarbinnen een oplossing moet worden gevonden. Het loont de moeite om de krachten binnen dit systeem te verkennen:

1. Omgeving: waar vindt de situatie plaats? Is de betrokkene bijvoorbeeld onderweg, of heeft hij bepaalde middelen tot zijn beschikking?
2. Actoren: wie maken onderdeel uit van de situatie, hoe ziet het krachtenveld eruit?
3. Markt en maatschappij: zijn er nog maatschappelijke factoren of trends die invloed hebben?
4. Organisatie: wat zijn de bestaande processen waarbinnen wordt gewerkt en in hoeverre zijn die in steen gebeiteld?

Aan de andere kant heb je het proces zelf: analyse van de huidige werkwijze geeft inzicht in de stappen waarop innovatie mogelijk is. In service design trajecten wordt dat veelal gedaan door middel van customer journey mapping: samen met de klant ontleed je een gebruikersscenario in gebeurtenissen. Daarbij breng je in kaart hoe de behoeften van de klant zich ontwikkelen, welke activiteiten de gebruiker ontplooit, en hoe de emotionele beleving zich gedurende de klantreis ontwikkelt.

Een dergelijk model helpt om te ontdekken hoe de klant de dienst beleeft en waar in dat proces de kansen zitten om te innoveren. De factoren die meespelen in het proces zijn tevens de knoppen waaraan je kunt draaien om veranderingen te bewerkstelligen. Zo ontstaan aanknopingspunten voor nieuwe ideeën.

Een voorbeeld van customer journey mapping. Bron

Dromen: alles kan, alles mag

“Tussen droom en daad staan wetten in de weg, en praktische bezwaren” schreef Willem Elsschot al. De realiteit kan een obstakel vormen om tot innovatieve ideeën te komen. Dus hoe kom je daar van los? Een fijne oefening is om wondervragen te stellen: stel dat alles mogelijk zou zijn, wat zou dan je ultieme doel zijn? Het stimuleert om vrij te denken, om los te komen van alle beperkingen. De realiteit doet er even niet toe, en daarmee ontstaat de ruimte om buiten de gebaande paden te treden en puur te focussen op datgene wat je in een ideale situatie zou willen bereiken.

Even hypothetisch: neem een museum die de doorstroming van bezoekers wil optimaliseren, maar dat niet ten koste wil laten gaan aan de ervaring van bezoekers. Wat nou als…

• … de bezoeker nooit meer het gevoel had te hoeven wachten?
• … de bezoeker een rondleiding op maat voorgeschoteld krijgt op basis van de drukte in de zalen?
• … de bezoeker weet waar het rustig is?
• … bezoekers beloond worden om op rustigere tijden te komen?
• … etc.

Stephen Covey beschreef in zijn boek The Seven Habits of Highly Effective People de gewoonte om te beginnen met het einde in gedachten: “Begin with the end in mind”. En dat is exact wat je met een dergelijke oefening bereikt: je zet een gezamenlijk stipje aan de horizon. En of dat stipje nou compleet realistisch is of niet dat maakt niet uit: het appelleert aan een bepaalde ambitie, aan een gevoel en geeft daarmee richting.

To begin with the end in mind means to start with a clear understanding of your destination.

Stephen Covey, auteur van “The Seven Habits of Highly Effective People”

Doen: bruggen bouwen van ambitie tot oplossing

Als je weet waar je heen wilt en weet wat de beperkingen daartoe zijn, wat kun je dan doen om een stap in de goede richting te maken? Zie daar de rol van een goede facilitator: als begeleider van het co-creatie proces probeer je een brug te slaan tussen de gedroomde ambities en de huidige situatie. De beste ideeën zijn vaak de ideeën die wel stretchen maar nog net behapbaar zijn. Ligt de ambitie te hoog, dan neem je het risico dat de energie wegvloeit. Ligt de lat te laag, dan inspireert dat het co-creatie team niet om daadwerkelijk iets te veranderen. Zoek dus naar het gouden middelpunt om de wereld een stukje mooier te maken!

Tip: vaak ontstaan er in deze fase al allerlei ideeën. Het is de truck om die enthousiast te ontvangen en tóch te parkeren voor later. Zorg ervoor dat individuen een open mindset houden en niet teveel aan hun eigen idee blijven plakken.

Uit de oefeningen van Denken en Dromen vallen succescriteria te destilleren die later in het traject gebruikt kunnen worden om concepten te toetsen. Deze succescriteria bevatten enerzijds praktische restricties voor bijvoorbeeld bestaande werkprocessen of eisen van de diverse belanghebbenden. En anderzijds criteria voor de droom die je wilt realiseren. Neem nog even het voorbeeld van het museum hierboven: een realistisch criterium (Denken) zou een beoogd bezoekersaantal kunnen zijn, of de maximale wachttijd. En een gedefinieerd doel voor je ambitie (Dromen) zou zijn dat bezoekers zich in de kunst ondergedompeld voelen zodra ze het museum binnenstappen.

Op naar de volgende stap

Kortom, een goede facilitator vat samen, brengt verbanden aan, en bewaakt de gemeenschappelijke doelstellingen. Hij enthousiasmeert het co-creatie team om ambities te verwezenlijken. Zo bevordert hij de voortgang in het proces en begeleidt hij het team langzaam naar de volgende stap: het ontwerpen van een innovatieve oplossing. Als het goed is staat het co-creatie team te popelen om aan de slag te gaan.

Wat is een logische opvolging van schermen in onze webshop? Moet deze knop groen of oranje om klanten over te halen iets te kopen? Het zijn zaken waar over nagedacht is in vrijwel elke grote website, webshop of app. Maar ook apparaten en machines waar mensen mee moeten werken, waar tenminste één knop op zit, hebben een goede uxer experience (UX) nodig. De psychologie als kracht in user experience moet problemen voorkomen; van gefrustreerde klanten tot letterlijk het einde van de wereld.

Het werkt niet? Ik zal het wel verkeerd doen..

Een goede gebruikerservaring wordt doorgevoerd tot in de kleinste details. Een kleine verandering in de homepage gaat bij grote bedrijven als Bol.com en Amazon om het verschil tussen winst en verlies. Vaak genoeg blijkt dat gebruikers een website snel verlaten als ze niet vinden wat ze zoeken. Foutmeldingen, cookiemeldingen en andere ‘afleiding’ zoals pop-ups helpen daar niet bij (maar soms wint de marketing het van de gebruikersvriendelijkheid).

We hebben allemaal wel eens met de handen in het haar gezeten bij het bedienen van een apparaat. We geven vaak onszelf de schuld; ik weet niet wat al die knoppen betekenen op mijn oven. Of: ik ga wel naar de balie voor een kaartje, want die ticketmachine doet niet wat ik wil. Beide apparaten hadden beter ontworpen kunnen worden door gedegen onderzoek te doen. Niemand wil op zoek naar de handleiding.

Zo is een goede gebruikerservaring essentieel voor grote bedrijven. Je wilt dat eindgebruikers lang gebruik maken van je app, website, apparaat of dienst. Bij een slechte ervaring denk je wel twee keer na voor je weer een telefoon van hetzelfde merk koopt.

Levensgevaarlijke software; wanneer de psychologie niet goed onderzocht wordt

Maar het gaat niet alleen om winst en behoud van je klandizie. Slechte UX kan het verschil betekenen tussen leven en dood. Wanneer de user experience van een bepaald scherm slecht doordacht is, kan dat enorme gevolgen hebben. Anders gezegd: het onderzoeken van de psychologie van user experience is onmisbaar. De gedachten en gedragingen van de eindgebruiker in kaart brengen kan met tools, zoals persona’s en usabilitytests. Het is een enorme verantwoordelijkheid, die softwarebedrijven zeer serieus moet nemen.

Eén van de bekendste voorbeelden van real-life problemen als gevolg van onbegrepen UX is een rakettest in Hawaii uit 2018. Een medewerker van de Hawaii Emergency Management Agency wilde een test uitvoeren om te kijken of een noodwaarschuwing voor een raket werkt. Hij moest kiezen uit twee opties in een dropdown: ‘Test missile alert’ en ‘Missile alert’. Hij koos de laatste optie, iets waarvan hij tot op de dag van vandaag spijt heeft. Duizenden mensen kregen een waarschuwing op hun telefoon dat er een raket naar het eiland onderweg was: “zoek dekking, blijf binnen”.

Een menselijke fout, maar begonnen bij een dropdown waarbij twee opties direct onder elkaar staan. De medewerker koos per ongeluk de verkeerde optie. De psychologie als kracht in user experience had hier beter toegepast kunnen worden. Twee opties in één element zo dicht bij elkaar, met twee heel verschillende gevolgen. In dit geval: totale paniek onder duizenden inwoners en toeristen en een urenlange disruptie van het eiland. Dit is niet alleen slechte UX, het zou verboden moeten worden.

Er zijn nog meer voorbeelden waarbij een gebrek aan onderzoek hoe gebruikers denken en handelen, levensgevaarlijk kan zijn.

• Het grootste nucleaire incident met een lekkende kernreactor in de VS is deels te wijten aan onduidelijke apparatuur, met ruim een miljard dollar aan schade.
• Designers van medische software zullen zorgvuldig om moeten gaan met meldingen, anders trekt de behandelend arts wellicht een verkeerde conclusie.
• Er zijn tientallen voorbeelden van ongelukkige designkeuzes in auto’s, die zelfs kunnen leiden tot de dood. Ford riep in 2015 ruim 13.000 auto’s terug, omdat de start/stop knop per ongeluk werd ingedrukt tijdens het rijden.

Het heeft te maken met onze steeds groter wordende afhankelijkheid van apparatuur en software. We kunnen zo vaak blind uitgaan van de werking van apparaten, dat we nog wel eens vergeten zelf na te denken. Eigenlijk leg je elke dag je leven in handen van user experience designers. Het is vaak een slecht idee als je als groot softwarebedrijf wilt besparen op UX. De psychologie achter user experience onderzoeken, kan letterlijk levens redden.

Gebruikers onderzoeken voor een (bijna) perfect resultaat

Het doel van je app(licatie), systeem of apparaat moet duidelijk zijn, voordat de user experience designer kan nadenken over de juiste oplossing. Maar kennis over de eindgebruiker is net zo belangrijk. Soms is de eindgebruiker duidelijk: medewerkers van een administratiekantoor zullen gaan werken met de nieuwe facturatiesoftware die wordt gebouwd. Soms is de groep gebruikers heel divers: iedereen kan een nieuwe televisie gebruiken. Wat moet die nieuwe Samsung televisie beter kunnen dan de vorige? Onderzoek de eindgebruiker! Welke klachten waren er? Welke kansen liggen er in de markt, wat doet de concurrentie nog niet? Maar ook: hóe navigeert de gebruiker door de schermen, kan de software beter?

Als de ‘gemiddelde’ gebruiker een functie niet begrijpt, zul je dat als ontwikkelaar vrijwel nooit direct van hem te horen krijgen. Maar er is wel achter te komen. Met anonieme gebruikersstatistieken vanuit bestaande software is een schat aan informatie te verkrijgen. De ontwikkelaar bouwt functionaliteit in om op te slaan welke knoppen worden ingedrukt, als een logboek. Als veel mensen op een knop drukken die je als designer niet had voorzien, dan kan dat beter de volgende keer. Ontwikkelaars gebruiken psychologie als kracht in user experience onderzoeken ook op andere manieren:

• Het enquêteren van een specifieke doelgroep om hun behoeften te meten
• Het schrijven van persona’s, archetypen om te kunnen inschatten hoe gebruikers handelen
• Feedback zoeken of gericht vragen op sociale media
• Een selecte testgroep creëren, door een prototype te ontwikkelen en het gebruik ervan te analyseren
• Beoordelingen van de gebruikerservaring op een website of in een app uitvragen, door middel van korte vragenlijsten of reviews

Het hangt er natuurlijk sterk vanaf voor welke markt een product wordt ontworpen, voor welke doelgroep je een applicatie ontwikkelt. Vaak gaan er ook meerdere iteraties overheen alvorens een product goed wordt ontvangen. Er zijn talloze voorbeelden van websites, apparaten, maar ook bijvoorbeeld games die pas na meerdere updates als bruikbaar of acceptabel werden beschouwd.

Koop jij de eerste generatie Apple Watch of wacht je liever tot een latere, verbeterde versie? Het levert een belangrijk inzicht op voor ontwikkelaars: hoe goed je er ook over nadenkt, de eindgebruiker weet het altijd beter. Er is áltijd ruimte voor verbetering en daarmee is je soft- of hardware nooit af.

Psychologie als kracht in user experience designs

Behalve het onderzoeken van reacties op bestaande interfaces of prototypen, zal gebruikersonderzoek ook rekening moeten houden met een aantal andere zaken. Er is inmiddels veel literatuur geschreven over menselijk gedrag: hoe mensen denken en handelen bij bepaalde situaties. Een voorbeeld om dat uit te vinden is eye-tracking software. Door meerdere personen bij een website dezelfde opdracht te geven, kun je zo patronen in hun muis- en oogbewegingen ontdekken. Of een knop het beste links of rechts kan staan, is waardevolle informatie als je iets hebt te verkopen.

Er is een aantal interessante bevindingen te ontdekken in die onderzoeken naar de psychologie als kracht in user experience designs:

1. Bij elke keuze die wordt toegevoegd, kost het meer tijd om te kiezen. Ook bekend als Hick’s Law. Als je website-menu lijkt op een menu in een Chinees restaurant, dan wordt het tijd om je website te herindelen.
2. Objecten met een relatie moeten dichtbij elkaar te vinden zijn. De grootte en locatie van knoppen en navigatie bepalen de snelheid waarmee een gebruiker ze kan bereiken. De Wet van Fitts berekent die tijd. Het gaat bijvoorbeeld over een knop waarvan het klikgebied groter is dan de knop zelf. De gebruiker kan de knop dan gemakkelijker gebruiken.
3. Gebruikers weten vaak niet waaróm ze iets doen. Het blijkt uit onderzoeken waarbij mensen uit producten moeten kiezen. Psycholoog Timothy Wilson deed dat met vier paar sokken. Hij vroeg aan mensen welke de beste kwaliteit had. De meeste mensen (40%) koos voor D, terwijl alle sokken identiek waren. Bij de vraag waaróm men daarvoor koos, verzonnen mensen allerlei redenen.

Kortom, gebruikersonderzoek mag nooit alleen afgaan op interviews. Goede onderzoekers vragen niet, maar observeren. Wat mensen zeggen, verschilt nog wel eens met wat mensen doen.

De kracht van psychologie van UX als basis voor succes

Het zijn slechts enkele voorbeelden in de wereld van de psychologie achter menselijk gedrag. Onderzoeken en ervaring, maar ook fouten uit het verleden, kunnen goed ingezet worden om je applicatie overzichtelijker en handiger te maken.

Het levert meer conversie in je webshop op. Het zorgt voor meer tevreden klanten die volgende keer je product opnieuw kiezen. Het leidt tot blije werknemers, die hun werk efficiënter kunnen doen. De psychologie achter user experience is een onmisbare schakel bij het ontwerpen van hard- en software.

User experience (UX) is overal. Als je de weg moet vinden in een stad waar je nog nooit geweest bent. Wanneer je een magnetronmaaltijd wilt opwarmen. Als je een hotel wilt boeken. Of wanneer je snel informatie in een applicatie wilt vinden. Om een goede oplossing te vinden voor een UX-probleem, analyseren ontwerpers de eindgebruiker. Die psychologie achter user experience kan het verschil betekenen tussen winst en verlies.

Mensen lezen nauwelijks meer. De tijd is voorbij dat je met lange teksten kan uitleggen hoe een website of applicatie werkt. Dat is niet meer nodig; een steeds grotere groep mensen is goed bekend met navigeren op internet en in apps. Voor user experience designers is de vraag: hoe ontwerp ik een user interface (UI) die direct begrepen wordt? De designer onderzoekt de wensen en gedragingen van de doelgroep voor wie hij of zij een interface ontwikkelt. Het gaat bijvoorbeeld over:

• Heldere opvolging van schermen
• Logische en gemakkelijke navigatie
• Herkenbare interface-elementen

Netflix; voorbeeld van een succesvolle interface

Er zijn genoeg voorbeelden van succesvolle user interfaces. Netflix wordt dagelijks door miljoenen mensen gebruikt. De dienst heeft een interface die werkt. Dat kunnen we gerust stellen nadat het bedrijf veel geld stak in gebruikersonderzoeken. Wat levert nu echt het beste resultaat op? Het doel van de applicatie is snel vinden wat je zoekt. Én om je te verleiden om iets anders te kijken. De zoekfunctie levert altijd resultaat. Ook al is de film die je zoekt niet op Netflix te vinden. Dit doen ze door slim gebruik te maken van zoektermen van andere gebruikers. Maar ook op basis van relevantie, bijvoorbeeld je locatie. Je krijgt bij Netflix persoonlijke aanbevelingen op basis van je kijkhistorie. En pauzeer je in de app, dan kijk je direct verder op je televisie. De user interfaces van de verschillende applicaties van de dienst zijn consistent, herkenbaar.

Een app(araat) moet doen waar het voor bedoeld is

De wensen van de eindgebruiker kan worden beschreven in scenario’s of user stories. Daarin staat hoe de gebruiker omgaat met de applicatie. Dit is vaak een continu proces, want het kan altijd nóg beter. De psychologie achter user experience wordt door grote bedrijven vaak toegepast in updates van de software.

Als je user interface compleet over het hoofd wordt gezien, heb je het goed gedaan!

Uiteindelijk telt er maar één ding: de app, de website, de gameconsole of slimme thermometer moet doen wat het moet doen. Je opent Netflix en je wilt een serie kijken. Dus zonder lang te moeten zoeken, zonder (fout)meldingen. In een webshop wil je snel producten kunnen bestellen. Een vaatwasser moet de vaat schoonmaken. Als de eindgebruiker de UI direct gebruikt en begrijpt, dan is de missie van de designer geslaagd.

Verdiepen in de gedachten van de eindgebruiker: Human Computer Interaction

Het gaat bij user experience dus niet alleen over digitale interfaces. Het kunnen ook tastbare apparaten en machines zijn. Er moet worden nagedacht over het indelen van displays in auto’s, afstandsbedieningen en bedieningspanelen. Daarbij zijn herkenbaarheid en veiligheid essentieel. Om een goede interface te kunnen ontwerpen, verdiept de UX-designer zich in de eindgebruiker. Bijvoorbeeld met een prototype en gebruikerstests, om te kijken hoe de eindgebruiker zich gedraagt. Het onderzoeken van de psychologie achter de user experience levert meestal een betere gebruikerservaring op.

Met Human Computer Interaction (HCI) ontstond er in de jaren 70 de wens om computertechnologie te combineren met cognitieve wetenschap en ‘menselijke factoren’. Elke gebruiker is immers anders. De gedachte in de HCI community is dat een optimale koppeling tussen ‘man’ en ‘machine’ wordt gevonden. Met kennis van beperkingen van mensen met computertechnologie. Mensen kunnen bijvoorbeeld:

• Fouten maken
• Verkeerde beoordeling maken
• Vooroordelen hebben
• Kleurenblind of doof zijn, of anderszins een (audio)visuele beperking hebben
• Gelimiteerd zijn door tijd
• Slechts een aantal handelingen tegelijk doen
• Gemotiveerd moeten zijn
• Gevoelens hebben: ongeduldig, angstig, moe of irrationeel zijn
• En nog veel meer

Dit is waar een user experience designer op let

Er zijn honderden artikelen geschreven over de psychologie achter user experience. Het gaat dan over de gedragingen van mensen ten opzichte van software en hardware. Als je de lijst afzet tegen moderne (web)applicaties en interfaces, dan kun je komen tot een aantal sleutelelementen die een interface goed maken. Zoals:

• Snelheid: binnen zo weinig mogelijk handelingen het einddoel bereiken. Je zoekt een warme trui en wordt blij als de zoekfunctie van een kledingwebshop je een lijstje met truien in jouw maat geeft.
• Veiligheid: de gebruiker wil een beveiligde applicatie of veilig apparaat. Een handeling moet niet leiden tot problemen. Verwijdert dat prullenbakje mijn bestelling definitief en zonder waarschuwing?
• Prestatie en plezier: het gevoel geven iets te bereiken met het gebruiken van de software. De gebruiker heeft de controle. Bij het boeken van een treinreis wil je de terugreis niet opnieuw invullen als je de heenreis wijzigt. Heb je een sportieve sessie met een app gedaan, dan krijg je een vrolijke animatie als beloning.
• Persoonlijk en pro-actief: op basis van je voorkeuren of historie wordt aangeraden wat je het beste kunt doen. Bij Bol.com worden dagelijkse producten opnieuw aangeraden na een bepaalde periode. Bijvoorbeeld als je gekochte tandpasta op is.
• Duidelijkheid: zorg dat de werking van de functie overeenkomt met de verwachtingen van de gebruiker. Weet je wat er gebeurt als je op een rookmelder die rode knop indrukt?
• Herkenbaarheid: mensen zijn eerder geneigd een applicatie te begrijpen als deze conventies gebruikt die algemeen worden begrepen. Zo is een ander icoon verzinnen voor de aan/uit knop van een elektrische auto, een slecht idee.

Onderzoek de psychologie in user experience voor betere software

Pas deze lijst eens toe op huishoudelijke apparaten, veelgebruikte apps of websites. Je ziet dat interfaces al snel beter kunnen. Interfaces die gebruikers verder helpen, plezier laten hebben én consistent en efficiënt zijn, zorgen voor blije gebruikers. En dat leidt tot meer conversie op je website, of meer klanten voor je product.

De gebruikerservaring is dus alles in software. Of het nu een app, ticketmachine of auto is, gebruikers willen het efficiënt gebruiken. De developers, ontwerpers en marketingafdeling van dergelijke soft- en hardware, willen tevreden gebruikers. Met gedegen usability onderzoek en gebruikerstests, voorkom je veel ellende.

Bij Ambrero leggen we de nadruk op de user experience. Met ruim 15 jaar ervaring weten we goed hoe we het gedrag van eindgebruikers kunnen achterhalen. Zodat de applicaties die we maken, direct begrepen worden en snel vertrouwd raken. Met het in acht nemen van de psychologie achter de user experience, is je applicatie klaar voor de toekomst.

De user experience (UX) krijgt tijdens de ontwikkeling van innovatieve webapplicaties meer en meer aandacht. Wat houdt een goede gebruikerservaring eigenlijk in? Wat komt er bij kijken om dat te realiseren? Dit blog geeft antwoord op de vraag; Hoe draagt UX bij aan de ontwikkeling van innovatieve webapplicaties? En wat betekent dat voor jou.

Tegenwoordig is vrijwel elke applicatie die we dagelijks gebruiken, of het nu een app op je telefoon is of een e-mailprogramma online, gefocused op de eindgebruiker. Veel meer dan pakweg vijftien jaar geleden, toen applicaties vooral moesten wérken en niet zo zeer gebruiksvriendelijk waren. Vaak worden er door grote bedrijven gebruikersonderzoeken gedaan om er achter te komen welke aanpak het beste werkt voor een innovatieve webapplicatie.

De gebruiker centraal

Het begint vaak met een wens tot verbetering van de huidige werkwijze. Of een doel zoals het bereiken van meer betalende klanten of een hogere efficiëntie. Misschien werk je nu in eindeloze Excel-sheets, klagen je werknemers over te grote bestanden, langzame applicaties of een omslachtige manier van werken? Dat kan beter, zeker met de huidige technieken beschikbaar op het web.

Direct na die wens komt UX in beeld: hoe vertalen we deze gewenste verbeteringen tot een innovatieve webapplicatie waar gebruikers fijn mee werken? Kan het aantal stappen waarmee een doel wordt bereikt verminderd worden? De user experience is onmisbaar geworden in het ontwikkelproces. Usability staat voorop. De eindgebruiker is het middelpunt van dat ontwerpproces. Een goed beeld krijgen van die eindgebruiker is dan ook essentieel voor efficiënte en toekomstbestendige software.

Dat is niet alleen tegenwoordig de ‘standaard’ bij webapplicaties. Het is ook nodig om de eindgebruikers te overtuigen van de noodzaak tot vernieuwing.

Wat komt er kijken bij een user experience concept?

Gebaseerd op een functionele beschrijving (user stories in een agile traject) zal de UX-designer nadenken over een oplossing voor het probleem. Het moet een logische, overzichtelijke en innovatieve webapplicatie worden. Met de ervaring die de UX-designer heeft kan hij adviseren over de te nemen richting. Het gaat dan over:

• Opvolging van schermen: hoe komt de gebruiker snel waar hij wil zijn?
• Indeling van (hoofd)menu’s
• Plaatsing van informatie, navigatie en interactieve onderdelen op het scherm

Een voorbeeld van een wireframe (klik om een animatie te zien van het interactieve prototype)

Daarom is het van belang dat er de tijd wordt genomen voor een ontwerpproces, zodat UX kan bijdragen in de ontwikkeling van je applicatie. Dat zijn in het kort de volgende stappen:

1. Wireframes De UX-designer ontwerpt enkele draadmodellen (wireframes) om de werking van de applicatie uit te leggen. In een agile project zoals wij werken bij Ambrero gaat dat vaak per sprint: een aantal user stories worden enkele weken vóór de start van de sprint uitgewerkt tot een user experience concept.
2. Interactief prototype De UX-designer presenteert de draadmodellen in een interactief prototype, door de knoppen en menu’s klikbaar te maken. Zo lijkt het alsof je door de applicatie navigeert. Je krijgt een gevoel bij de te ontwikkelen applicatie.
3. Feedback verwerken De productowner geeft feedback. Is de informatie helder genoeg? Worden alle technische vereisten meegenomen in het voorstel?
4. Implementatie De definitieve wireframes vormen de basis voor de applicatie. Met enkele schermen is de logica en indeling voor een programmeur al duidelijk en kan hij of zij aan de slag.

In een later stadium wordt een user interface design (UI) of huisstijl ontworpen, zoals een bepaling voor typografie en grafisch ontwerp. In elke iteratie (sprint) van een agile project zal UX bijdragen om de richting te bepalen.

Wat heb je aan user experience in innovatieve webapplicaties?

Je ziet het: je hebt snel resultaat. Een helder én werkend prototype kun je al na enkele weken testen. De UX-designer werkt veel samen met de productowner van een project. Een agile werkproces met UX als steunpilaar is efficiënt en helder voor iedereen die met die nieuwe applicatie te maken heeft. De productowner houdt met zo’n UX-concept de vinger aan de pols:

• Je bent elke iteratie op de hoogte van de voortgang;
• Er kan direct worden bijgestuurd in overleg met de UX-designer;
• De productowner wint advies in op basis van de ervaring die de UX-designer heeft;
• Hij kan aan belanghebbenden, zoals eindgebruikers, visueel uitleggen wat er gebouwd gaat worden;
• Er is een referentie om later te kijken of aan de vraag is voldaan: meer zekerheid;

De applicatie gaat leven in de organisatie – die betrokkenheid van eindgebruikers is fijn. Want hoewel processen omslachtig of vervelend kunnen zijn, het is wel dagelijkse kost voor je werknemers. Zij zullen moeten wennen aan nieuwe software. Wat kan die nieuwe applicatie bijdragen aan de productiviteit? We geloven dat wanneer je gebruikers in een vroeg stadium meeneemt in het ontwikkelproces, ze eerder geneigd zijn af te stappen van hun bestaande werkwijze. En belangrijker nog: gebruikers hebben een onmisbare bijdrage in de ontwikkeling.

Innovatieve webapplicaties, klaar voor de toekomst

UX kan dus sterk bijdragen aan een vloeiende ontwikkeling, helderheid bij de eindgebruikers scheppen en je als productowner meer controle geven. Meer grip, meer helderheid, dus meer zekerheid. Een moderne, vernieuwende oplossing waar je jaren mee vooruit kunt. Uiteindelijk zorgt een goed UX-ontwerpproces voor een toekomstbestendige, innovatieve webapplicatie waar fijn mee te werken is. Dat levert blije werknemers, tijdwinst en meer productiviteit op.

Om onze applicaties zo gebruiksvriendelijk mogelijk te maken is de input van medewerkers natuurlijk essentieel. Zij moeten immers met de nieuwe software aan de slag. De software moet hen ondersteunen in hun werk, ongeacht hun rol. Deze input verzamelen kan via een gebruikersonderzoek. Hoe eerder je deze verzamelt, hoe minder kans op onverwachte – en ongewenste – wijzigingen later in het proces. Er zijn drie fases waarin we de gebruiker kunnen betrekken.

Conceptingfase: productvisie en strategie centraal

In de conceptingfase weten we wat de basisfunctionaliteit is, maar nog niet hoe we dit gaan uitvoeren. In deze fase staat de productvisie en de strategie waarmee die visie gerealiseerd wordt centraal. De productvisie gaat bijvoorbeeld over de marktbenadering, het interactief concept en de manier waarop de software binnen het bestaande applicatielandschap wordt geïntegreerd. Ook ontwikkelen we een strategisch plan waarmee we die productvisie realiseren: de juiste aanpak, functionele prioriteiten en technische randvoorwaarden.

Samen met een groep gebruikers krijgen we de eisen waaraan de applicatie moet voldoen helder. Als het moeilijk is om gebruikersgroepen bijeen te brengen, gebruiken we online enquêtes. Vaak werken we met design sprints; zo schetsen we in een week tijd een bepaalde oplossing en leggen die voor aan de gebruikers. Door dat een aantal keer te doen komen we heel snel tot een concept.

Een andere techniek die we in kunnen zetten is card sorting. Hierbij plaatsen deelnemers kaartjes – die elk een bepaald informatietype of functionaliteit representeren – hiërarchisch op een groot vel. Vaak zien we dan dat iedereen dat op een andere manier doet. Perspectief op informatie kan per gebruiker verschillen en dat is belangrijk om mee te nemen bij de ontwikkeling. De inzichten die zo’n kwalitatief onderzoek oplevert gebruiken we om tot een goed interactief concept te komen.

Implementatiefase: blijf de gebruiker betrekken

In de implementatiefase is het belangrijk de gebruikers te blijven betrekken. Niet alleen door demonstraties te geven, maar juist ook door prototypes in te zetten voor vroegtijdig gebruikersonderzoek. We geven de medewerkers dan een duidelijke opdracht en volgen hun bewegingen en acties via een schermopname. We vragen hen om hardop na te denken bij het uitvoeren van de opdracht. Zo krijgen we een goede indruk over hoe de applicatie aansluit bij de denkpatronen en werkwijze van de gebruiker.

Door agile te werken verwerken we onze waarnemingen snel. Zo draagt het gebruikersonderzoek bij aan de verbetering van de applicatie. En door de gebruiker te blijven betrekken verhoog je de acceptatie bij ingebruikname.

Optimalisatiefase: toetsen en oppoetsen

Is de applicatie eenmaal in gebruik, kom je in de optimalisatiefase. Hierin toetsen we de aannames die we tijdens de implementatiefase hebben gedaan. Via verschillende vormen van usability testing toetsen we of de applicatie begrepen wordt. Schermopnames brengen oneffenheden in het gebruik van de applicatie aan het licht. En met A/B-tests testen we welke variant van een functionaliteit of lay-out prettiger werkt.

Omdat organisaties en situaties veranderen voeren we bij veel van onze klanten een jaarlijks gebruikerstevredenheidsonderzoek uit. Hierin testen we of de software nog steeds aansluit bij de behoefte. Kleine aanpassingen in de werking van de applicatie kunnen een groot effect hebben. Zo houden we je medewerkers blij!

Vrijheid in volgorde van werken bij VUmc

Het is altijd goed de gebruiker zo vroeg mogelijk in het proces te betrekken. Toch loopt het weleens anders. Zo maakten we een internationale begrotingstool voor het VUmc. De volgorde waarin dit proces doorlopen werd, leek zo voor de hand liggend dat we hebben besloten eerst een minimal viable product te maken. Werken vanuit zo’n eerste versie van de applicatie kan een heel kostenefficiënte manier zijn om tot je eindproduct te komen.

In dit geval bleek echter tijdens het gebruikersonderzoek dat de manier van werken van de ene gebruiker compleet tegengesteld was aan die van de ander. We hebben toen de applicatie zo geherstructureerd dat de medewerkers veel vrijer zijn in volgorde van werken. Dit bewijst dat gebruikersonderzoek is alle drie de fases het beste en meest gebruikersvriendelijke resultaat geeft.

Nieuwsgierig naar gebruikersonderzoek?

Eén van onze speerpunten is dat onze software prettig werkt voor de uiteindelijke gebruiker. We vertalen de soms complexe informatiestromen en werkprocessen in een gebruiksvriendelijke applicatie waarin de gebruiker plezierig werkt. Mensen moeten hun manier van werken niet aanpassen aan de software, maar juist andersom: uiteindelijk levert de efficiëntere werkwijze tijdswinst. Maar hoe kom je nou tot software die perfect aansluit bij de gebruiker? Het antwoord op die vraag is even simpel als veelomvattend: door de gebruiker centraal te stellen. User Centered Design noemen we dat.

User Centered Design (gebruikersgericht ontwerpen) is een manier van ontwikkelen waarin de toekomstige gebruiker direct betrokken wordt bij de totstandkoming van software. De term werd voor het eerst gebruikt door Donald Norman, een van de pioniers op het gebied van ‘Human Computer Interaction’ (HCI). In het boek ‘The Design of Everyday Things‘ vatte Norman zijn theorieën samen in zes basisprincipes:

1. Wees consistent en gebruik conventies: mensen leren door patronen te ontdekken. Consistentie is essentieel om gebruikers inzicht te geven in de werking van de software.
2. Zorg dat de opties zichtbaar zijn: gebruikers scannen binnen een paar seconden het scherm. Direct zichtbare knoppen helpen de gebruiker om wegwijs te raken.
3. Geef feedback: een correcte actie moet altijd een reactie veroorzaken. Door een visuele, tactiele, of auditieve reactie te geven weet de gebruiker dat hij op de goede weg is.
4. Leg de juiste beperkingen op: gebruikers moeten ook weten wat niet de bedoeling is. Een beperking in software kan op semantisch niveau ingebouwd worden (bijvoorbeeld door het verwijderen van gegevens te verhinderen wanneer die gegevens in gebruik zijn), of op logisch niveau (wanneer het systeem een natuurlijke volgorde afdwingt).
5. Gebruik visuele hints: met een goed gekozen uitstraling kun je de gebruiker een idee geven van hoe dat object kan worden gebruikt. De kennis die de gebruiker in het verleden heeft opgedaan kun je gebruiken om de werking duidelijk te maken. Bijna iedereen is bijvoorbeeld geneigd om op blauwe, onderstreepte tekst te klikken.
6. Leg relaties tussen interactive elementen en hun werking: door op een natuurlijke manier verbanden te leggen tussen het element en de gerelateerde actie, wordt de werking duidelijker. Elementen die aan elkaar gerelateerd zijn staan bijvoorbeeld logisch bij elkaar, of hebben dezelfde uitstraling.

Hoewel Donald Norman zijn ideeën over user centered design al in 1988 beschreef, zijn deze basisprincipes nog steeds van toepassing. Het zijn de bouwstenen voor het bereiken van een gebruiksvriendelijk ontwerp. De opbouw van de layout en de presentatie van de interactieve elementen zijn daarbij middelen om de gebruiker wegwijs te maken binnen het systeem.

Aansluiten bij de verwachtingen van de gebruiker

In ons werk als softwarebouwer zijn wij dagelijks bezig om complexe handelingen te vertalen naar eenvoudige virtuele processen. Wij komen vaak in omgevingen die we niet kennen, en moeten software ontwikkelen voor bedrijfstakken waar we geen kennis van hebben. Die kennis is echter essentieel voor een makkelijke transitie naar het nieuwe softwaresysteem. Daarom is het zinnig om zo veel mogelijk te weten komen over de beoogde gebruikersgroepen en hun werkwijzen.

Traditioneel gezien beperkte deze inventarisatie zich tot interviews en vragenlijsten. De uiteindelijke gebruiker kreeg een passieve rol toebedeeld. Hoewel deze middelen nog steeds grote waarde hebben, zijn interviews en vragenlijsten meer van toepassing voorafgaand aan de ontwikkeling dan dat ze helpen om bij te sturen gedurende de bouw.

In het User Centered Design proces wordt de gebruiker ook actief betrokken bij de ontwikkeling van de software. De feedback van de gebruiker wordt gedurende de ontwikkeling gebruikt om nieuwe inzichten op te doen. Met die nieuwe inzichten wordt het mogelijk om vroegtijdig bij te sturen. Er zijn diverse werkvormen geschikt om de gebruiker te betrekken. Hieronder noemen we enkele technieken die enorm kunnen helpen om software te ontwikkelen die aansluit bij de wensen van de gebruiker:

1. Rollenspellen, simulaties en het doorlopen van scenario’s: deze werkvormen vinden vaak weg van de werkplek plaats en zijn bij uitstek geschikt om een eerste idee te krijgen van de werkwijze van de gebruiker.
2. Observatie: deze vorm kan zowel voorafgaand aan de ontwikkeling als achteraf van betekenis zijn. In verhouding tot bij mondelinge of tekstuele interviews, heeft emotie een veel minder prominente rol bij observatie. Observaties voorafgaand aan de ontwikkeling geven de ontwikkelaar een goed beeld van de dagelijkse werkzaamheden van de gebruiker: je ziet de beperkingen die de huidige werkwijze met zich meebrengt. Achteraf, wanneer de software in gebruik wordt genomen, kan observatie nieuwe verbeterpunten blootleggen.
3. Het gebruik van een focusgroep: software heeft in potentie honderden, vaak zelfs vele duizenden gebruikers. Het is onmogelijk om al deze gebruikers te betrekken bij de ontwikkeling. Daarom werken we vaak met focusgroepen (ook wel ‘expert groepen’ genoemd). In de focusgroep zitten afgevaardigden van de verschillende typen eindgebruikers. De inzet van een focusgroep helpt om de juiste koers te bepalen.
4. Expert reviews: elke organisatie kent experts, vaak mensen die de verantwoording dragen over een afdeling. Bij iteratieve ontwikkeling kunnen deze experts de nieuw ontwikkelde functionaliteit in een vroeg stadium beoordelen. Zo krijg je als ontwikkelaar de belangrijkste feedback zonder dat de software al in gebruik is genomen door een grote groep mensen.
5. Gebruikerstesten: bij gebruikerstesten krijgt de gebruiker een aantal opdrachten. Zijn handelingen worden op afstand gemonitord en geanalyseerd. Gebruikerstesten kunnen 1-op-1 worden uitgevoerd, maar het is ook mogelijk om geautomatiseerd het gebruik te monitoren.

In de praktijk kies je vaak enkele van deze technieken om de gebruiker te betrekken. Het levert dikwijls ideeën op waar je als externe ontwikkelaar nooit bij had stilgestaan.

User centered design; conclusie

Software die aansluit bij de verwachtingen bij de verwachtingen van de eindgebruiker ontstaat niet zomaar. Je moet in de huid kruipen van de gebruiker om tot gebruiksvriendelijke software te komen. Het gebruik van visuele middelen en conventies zorgt voor een intuïtieve gebruikerservaring. Door de eindgebruiker centraal te stellen in het ontwerpproces en hem te laten meedenken bij de totstandkoming van de nieuwe software, kom je bovendien tot software die het werkproces optimaal ondersteunt. Bovendien maakt het de ingebruikname van de nieuwe software een stuk eenvoudiger.

Er is geen interface die zonder UX design kan. User experience design is de manier om behoeften van gebruikers om te zetten naar een werkbaar scherm, voor computer, smartphone of waar dan ook. Belangrijk als je geld wilt verdienen met je website, als je iets te vertellen hebt, je werknemers efficiënt wilt laten werken en wilt zorgen dat bedrijfsprocessen worden vergemakkelijkt. Maar wat komt er bij kijken?

Hier bij Ambrero kijken we altijd eerst naar de wensen van de klant. Wat is het eerste idee, wat is het uiteindelijke doel? Soms is er veel (offline) data beschikbaar, die in kaart moet worden gebracht. Hoe kunnen we deze gegevens gebruiken voor schermen? Hoe ontsluit je deze informatie en hoe maak je dit inzichtelijk en doorzoekbaar? UX design bestaat uit het vatten van deze wensen (soms geschreven in user stories) in begrijpelijke schermen. Als UX designer begin je na het in kaart brengen van de gegevens met het uitdenken van een flowchart: op welke manier komt de gebruiker bij de gewenste data? Dit leidt tot enkele onderdelen in de applicatie of website, die logisch aanvoelen en snel te vinden zijn, maar altijd met de eindgebruiker centraal. Sommige applicaties hebben te maken met verschillende typen gebruikers. Het is belangrijk dat je daarmee rekening houdt, want niet iedereen mag of kan alle data zien.

Een voorbeeld ter illustratie

Als voorbeeld kunnen we een applicatie nemen waar leerlingen van een middelbare school hun cijfers van vakken kunnen inzien. We hebben in deze fictieve software te maken met drie verschillende doelgroepen. Ten eerste de leerlingen, die graag hun resultaten snel moeten kunnen vinden. Daarnaast de docenten, die de resultaten eenvoudig moeten kunnen invoeren en groepen leerlingen kunnen indelen. En de applicatiebeheerders, die bijvoorbeeld docenten kunnen uitnodigen en onderhoud aan het systeem kunnen plegen. Logische sectie voor zo’n applicatie zouden kunnen zijn:

• een overzicht van vakken en resultaten voor de leerling
• een pagina met groepen en leerlingen, behorende bij de docent
• schermen voor de docent om snel veel resultaten en leerlingen te kunnen invoeren
• een scherm om docenten te kunnen toevoegen voor de beheerder

Met deze secties zijn we er natuurlijk nog niet. Je kunt je voorstellen dat een docent alleen zijn eigen groepen mag inzien, dus krijg je een rechtenstructuur die alleen bepaalde data ophaalt voor specifieke gebruikers. Daarnaast moeten alle doelgroepen nog kunnen in- en uitloggen (inclusief een ‘wachtwoord vergeten’ functionaliteit) en zouden meldingen dat er nieuwe cijfers zijn toegevoegd erg handig zijn, bijvoorbeeld per e-mail. Je ziet dat een eenvoudige wens, leerlingen moeten hun resultaten kunnen inzien, al snel leidt tot veel onderdelen binnen een applicatie, die snel complex kunnen worden. Dit is natuurlijk helemaal afhankelijk van de gewenste diepgang en hoeveelheid data. Vaak worden deze verschillende onderdelen daarom beschreven volgens de Agile methode in user stories: hapklare stukken functionaliteit, die individueel worden uitgedacht en uitgetekend. Daarna kan het ontwikkelteam met behulp van de wireframes een goede inschatting maken van de hoeveelheid werk om de applicatie daadwerkelijk te bouwen.

Wireframes zeggen meer dan 1000 woorden

Een van de user stories zou kunnen zijn: “Als leerling wil ik graag snel een overzicht van mijn resultaten zien”. Met behulp van de beschreven gegevens in de story, kan er een wireframe worden gemaakt. Er is bijvoorbeeld beschreven dat vakken in semesters zijn ingedeeld, er zowel proefwerken als examens zijn en dat bepaalde resultaten zwaarder kunnen wegen dan andere. Dit soort gegevens neemt de UX designer in nauw overleg met de klant mee tijdens het uittekenen van het wireframe. Het is een draadmodel van een scherm dat klaar is om gebouwd te worden, zelfs wanneer er nog niet ingelogd kan worden of er een menu is. Alleen de benodigde onderdelen worden getekend – de rest komt later, wanneer er meer wensen duidelijk zijn en andere stories in behandeling worden genomen. Een wireframe is ideaal voor gerichte feedback van de klant, die daarmee continu de controle houdt over zijn project.

UX design is in feite het oplossen van problemen – in het invoeren en ontsluiten van gegevens, met behulp van de elementen die daarvoor beschikbaar zijn. We tekenen de locatie van gegevens, knoppen, opties en formulieren uit, zodat het team weet wat er gebouwd gaat worden. Na enkele (of tientallen!) schetsen, werkt de UX designer met behulp van tools als Axure of het online UXPin een aantal wireframes uit. Een goed middel om de klant en, na goedkeuring, het ontwikkelteam te laten zien wat we van plan zijn om te bouwen.

Een voorbeeld van een wireframe voor Rodeo. Vaak worden alleen grijstinten gebruikt, zodat de aandacht uitgaat naar de plaatsing en functionaliteit van onderdelen. Dit scherm verbeeldt het toevoegen van uren in de applicatie.

In het functioneel ontwerp, het uittekenen van wireframes met wellicht enkele annotaties, wordt de vorm van de applicatie al heel goed duidelijk. We zien waar het menu komt, welke onderdelen daar in staan en hoe de schermen zijn opgebouwd. Met een wireframe geef je ook gebruikersinteractie aan: wat gebeurt er als je op een knop klikt of met je muis op een regel gaat staan? De opvolging van schermen is hier heel belangrijk en kunnen zelfs als opmaat dienen naar een interactief prototype van de applicatie. Daarmee kan de opdrachtgever van begin tot eind door de applicatie klikken, zonder dat er een regel code is geschreven. Daarmee komt de software al in een vroeg stadium van het project tot leven! Sommige projecten lenen zich er zelfs voor om gebouwd te worden op een ‘draadmodel-manier’. Zonder grafische schil is de applicatie dan te gebruiken. Het design, dat meestal na het functioneel ontwerp komt, wordt dan pas na ontwikkeling toegepast.

Met goed UX design zal de docent straks veel minder tijd kwijt zijn met het invoeren van cijfers voor al zijn leerlingen. En zal de beheerder met een druk op de knop meerdere docenten kunnen uitnodigen om te werken met het systeem. En leerlingen? Die zitten minder lang in spanning voordat ze het cijfer van die belangrijke wiskundetoets weten. Want dit systeem is wel heel makkelijk in gebruik!

In het begin van het internettijdperk was het al een hele prestatie als je een eigen webpagina had. En ook toen al moest je opvallen door met een creatieve website te komen. Met scriptjes om een klok op je website te tonen, of letters die het beeld in kwamen vliegen. Geluidjes, later JAVA-applets of Flash-animaties. Grote bedrijven kwamen met innovatieve en dure Flash-websites, waar je mond van openviel. De tijden zijn veranderd.

Als je nu animaties op je website wilt, om je verhaal te vertellen, om de website er net iets krachtiger uit te laten zien of om interactieve elementen aan te duiden, dan grijp je niet meer naar Flash. Afgezien van de ondersteuning onder desktop-browsers, wil je niet dat iemand die je website met een smartphone bezoekt, je pagina niet kan laden, of door z’n maandbundel heen is omdat de pagina een aantal MB groot is. Flash is dood. Zelfs de enige uiting die nog actief gebruik maakt van deze techniek, advertentiebanners op internet, wordt veelal geblokkeerd door een van de vele Adblocker-applicaties. Nee, dan moet je als creatief webbureau, adverteerder of bedrijf echt op zoek naar alternatieven.

Animaties zijn daarentegen helemaal in. Vooral animaties die op alle platformen, van desktop tot tablet en smartphone, snel en helder ogen. Met Javascript is dat dankzij een aantal uitgebreide scripts te bereiken en lijkt de enige limiet je fantasie. In de vorige artikelen zagen we al dat graphics te creëren zijn met code. SVG laat toe dit soort innovatieve animaties te maken, zonder dat het veel rekenkracht of dataverkeer kost, omdat de browser geen afbeelding, maar tekst inleest om de animatie te realiseren.

Kies je script

Javascript en SVG passen goed bij elkaar. Animeren met native SVG code, zoals in het vorige artikel, wordt al snel complex en bovendien onleesbaar. Wanneer je bijvoorbeeld een SVG pad wilt laten animeren naar een andere vorm, dan kun je al snel verdwaald raken in de grote hoeveelheid code die daarvoor nodig is. Met libraries als SnapSVG, Velocity en Bonsai, animeer je veelal CSS-attributen en kun je animaties ook eenvoudig aaneenrijgen. Je moet daarbij onderscheid maken tussen libraries die SVG’s kunnen manipuleren of SVG’s kunnen maken. Soms is beide mogelijk, maar een aantal libraries beperkt zich tot enkele functionaliteiten, zoals het animeren van lijnen (<path>-elementen) in Walkway.js of Vivus. Veel libraries zijn geschikt voor manipulatie van allerlei soorten HTML-elementen – niet alleen SVG, zoals het populaire Velocity.js. Het is even zoeken naar de juiste bibliotheek voor jouw project: wil je een complete set aan vormgegeven elementen zoals grafieken en loading-bars, wil je een enkele animatie realiseren, of wil je alle controle hebben? Let daarbij ook op de licentie (mag je een bibliotheek in een commercieel project gebruiken?) en kosten: de SVG-uitbreiding van het geweldige GSAP (MorphSVG) is bijvoorbeeld een betaalde bibliotheek. Met de browser-ondersteuning zit het meestal wel goed: juist veel Javascript-bibliotheken zullen veelvoorkomende problemen in oudere browsers, zoals Internet Explorer 10 en lager, opvangen. Toch is het natuurlijk goed om in elke browser te testen.

Ben je gewend om te animeren met jQuery, dan zullen veel Javascript-libraries niet veel moeilijkheden opleveren. Omdat dit artikel vooral gaat over animeren met SVG’s, zullen we in dit artikel ingaan op één library: BonsaiJS. Deze zeer complete aanvulling op Javascript, kan SVG’s zowel creëren als manipuleren en wordt ondersteund door alle grote browsers (IE9 en hoger). Daarnaast heeft de website een heldere documentatie. Wil je andere elementen kunnen manipuleren, dan zijn jQuery, Velocity, GSAP of TweenJS goede alternatieven. Om specifiek SVG’s te kunnen animeren zijn SnapSVG en SVGjs goede keuzes.

Elementen tekenen en animeren: een geanimeerde kroon!

Laten we beginnen met Bonsai. Het is bijna Koningsdag, dus tekenen we een kroon die we daarna voorzien van een eenvoudige animatie. We hebben gezien hoe SVG’s werken en hoe deze te animeren zijn. De Bonsai-library laat toe elementen te tekenen en te manipuleren en wordt ondersteund door alle grote browsers (voor Internet Explorer geldt versie 9 en hoger). Bonsai ondersteunt afbeeldingen, video’s en lettertypen, path morphing (<path> in SVG), keyframe-animaties en time-based animaties. Om de library aan je pagina toe te voegen kun je de volgende code gebruiken of download de laatste versie via Github.

<script src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script>

Maak daarnaast een nieuw Javascript-bestand aan. Met de volgende code wordt het Javascript-bestand ingeladen voor gebruik in Bonsai. We definiëren de URL naar de animatie, de grootte en het element waar de animatie ingeladen moet worden.

<div id="kroon"></div>
<script type="text/javascript">
   bonsai.run(document.getElementById('kroon'), {
      url: 'animatie.js',
      width: 200,
      height: 200
   });
</script>

In animatie.js gaan we de animatie creëren. Om te kijken hoe verschillende vormen werken, kun je het volgende stukje code in het bestand plaatsen. Het resultaat zie je hiernaast.

var square = new Rect(0, 0, 100, 100);
square.addTo(stage);
square.fill('#96be28');

Je ziet dat het toevoegen van een eenvoudige vorm, met een stukje gemakkelijk te begrijpen code gaat. In de variabele square wordt een SVG gemaakt van 100×100 pixels en toegevoegd aan de stage, die we eerder hebben gedefinieerd met bonsai.run. Daarnaast wordt het vlak gevuld met een kleur. Je kunt spelen met de volgende varianten om andere vormen te maken:

• new Rect(x, y, width, height, [cornerRadius])
• new Arc(centerX, centerY, radius, startAngle, endAngle, isAntiClockwise)
• new Circle(centerX, centerY, radius)
• new Ellipse(centerX, centerY, radiusX, radiusY)
• new Polygon(centerX, centerY, radius, sides)
• new Star(centerX, centerY, radius, rays, factor)

Met een stukje extra code laten het vierkant veranderen van vorm, positie en kleur. Je kunt een hele reeks aan eigenschappen animeren. Je ziet dat de animatie start na 1,5 seconde (1500ms) en 6 seconden duurt. Vernieuw de pagina om de animatie te zien.

var square = new Rect(0, 0, 100, 100);
square.addTo(stage);
square.fill('#96be28');
square.animate('6s', {
   x: 200,
   scaleY: 0.5,
   scaleX: 0.5,
   fillColor: 'orange'
}, {
   delay: '1500ms'
})

De elementen die we zagen in het SVG artikel krijg je zo eenvoudig op het scherm. Voor onze kroon verwijderen we de code in animatie.js weer en voegen het volgende

path

new Path()
.moveTo(10, 40)
.lineTo(20,55)
.lineTo(30,35)
.lineTo(40,55)
.lineTo(50,20)
.lineTo(60,55)
.lineTo(70,35)
.lineTo(80,55)
.lineTo(90,40)
.lineTo(85,80)
.lineTo(15,80)
.closePath()
.fill('orange')
.addTo(stage);
new Rect(15, 83, 70, 8)
.fill('orange')
.addTo(stage);
var circle1 = new Circle(10, 40, 5).fill('orange').addTo(stage);
var circle2 = new Circle(30, 30, 5).fill('orange').addTo(stage);
var circle3 = new Circle(50, 20, 5).fill('orange').addTo(stage);
var circle4 = new Circle(70, 30, 5).fill('orange').addTo(stage);
var circle5 = new Circle(90, 40, 5).fill('orange').addTo(stage);

Lees meer over Paths in de documentatie van Bonsai. Zoals je in het vorige artikel zag wordt op de ‘SVG-manier’ een lijn getekend en vervolgens gevuld met de kleur oranje. We voegen ook een extra <rect> toe aan de pagina voor de onderkant van de kroon en vijf cirkels op de juiste positie voor aan de top. Die onderdelen kunnen we nu animeren! Vernieuw de pagina met sneltoets F5 om de animatie te zien.

new Path()
.moveTo(10, 40)
.lineTo(20,55)
.lineTo(30,35)
.lineTo(40,55)
.lineTo(50,20)
.lineTo(60,55)
.lineTo(70,35)
.lineTo(80,55)
.lineTo(90,40)
.lineTo(85,80)
.lineTo(15,80)
.closePath()
.fill('white')
.addTo(stage)
.attr('y',40)
.animate('500ms', {y: 0, fillColor: 'orange'}, { delay: '1s' });

		new Rect(15, 100, 70, 8)
.fill('white')
.addTo(stage)
.animate('500ms', {y: 83, fillColor: 'orange'}, { delay: '1200ms' });

		var circle1 = new Circle(10, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 40, fillColor: '#da5c25'}, { delay: '1400ms' });
var circle2 = new Circle(30, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 30, fillColor: '#da5c25'}, { delay: '1500ms' });
var circle3 = new Circle(50, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 20, fillColor: '#da5c25'}, { delay: '1600ms' });
var circle4 = new Circle(70, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 30, fillColor: '#da5c25'}, { delay: '1700ms' });
var circle5 = new Circle(90, 0, 5).fill('#FFFFFF').addTo(stage).animate('650ms', {y: 40, fillColor: '#da5c25'}, { delay: '1800ms' });

In de bovenstaande code is aan elk element een animatie toegevoegd volgens de volgende structuur:

.animate(<speed>,{<elements>},{<properties>});

path

delay

Een mooie toevoeging in Bonsai is de zogenaamde Keyframe-animatie. Met

new KeyframeAnimation()

Voor onze kroon maken we de illusie van glinsteringen op de onderrand door sterren in- en uit te laden faden. Voeg de volgende code toe aan de code die we al hadden in

animatie.js

var centerX = 20;
for (i = 0; i < 4; i++) {
		  var ster = new Star(centerX, 87, 2,5,3).fill('#FFFFFF').addTo(stage);
			   centerX += 20;
			   new KeyframeAnimation(Math.random(2)+1+"s", {
			     '0%': { opacity: 0 },
			     '50%': { opacity: 1 },
			     '100%': { opacity: 0 }
			  }, {
			     repeat: 'Infinity',
			     delay: '2000ms'
			  }).play(ster);
		 }

	

Je ziet dat er vier sterren worden toegevoegd met

new Star()

Math.random(2)+1+"s"

repeat: 'Infinity'

Meer leren!

Met een beetje creativiteit kun je met Bonsai en andere Javascript-bibliotheken een geanimeerd logo, stijlvolle knoppen of zelfs een hele digitale wenskaart in elkaar programmeren. En dat allemaal zonder een afbeelding te gebruiken. Het resultaat van de animatie is zoals bij alle SVG's enkel wat code, waardoor dit soort animaties snel inlaadt, op zowel desktop als mobiele websites en applicaties. Wil je verder met Bonsai, neem dan rustig de documentatie door. Bekijk ook vooral een van deze voorbeelden op de website van Bonsai.

Dit was het laatste artikel in de reeks over SVG: een introductie, vormen en animaties in SVG code en animaties met Javascript.