Reader_Gebruikersinteractie_20240905.pdf

Reader Gebruikersinteractie Inhoudsopgave 1 Week 1....................................................................................................................... 3 1.1 Human Centered design......................................................................................

Reader Gebruikersinteractie Inhoudsopgave 1 Week 1....................................................................................................................... 3 1.1 Human Centered design................................................................................... 3 1.2 Kernprincipes van HCD..................................................................................... 7 1.3 Mindmap maken............................................................................................. 10 1.4 User persona................................................................................................... 14 1.5 Customer Journey........................................................................................... 19 1.6 Gesprekstechnieken........................................................................................ 20 1.7 Storytelling....................................................................................................... 23 2 Week 2..................................................................................................................... 25 2.1 Ontwerpprincipes Ontwerpmodellen 5 lagen van ontwerp........................... 25 2.2 Brainstorming.................................................................................................. 25 2.3 Wireflows......................................................................................................... 28 2.4 Wireframing..................................................................................................... 29 2.5 Ethiek in design............................................................................................... 33 2.6 WCAG............................................................................................................... 47 3 Week 3..................................................................................................................... 52 3.1 Usability........................................................................................................... 52 3.2 Usability testing............................................................................................... 55 3.3 User stories..................................................................................................... 57 3.4 Reflecteren...................................................................................................... 61 2 1 Week 1 Welkom bij week 1! Deze week ga je aan de slag met hoe je producten maakt die prettig zijn voor de mensen die ze gebruiken. Dit heet Human-Centered Design, ofwel ontwerpen waarbij de gebruiker centraal staat. Omdat ontwerpen iets creatiefs is, ga je beginnen met het maken van een mindmap. Een mindmap is een grote tekening waarop alle ideeën over een onderwerp gezet worden. Op deze manier wordt inzichtelijk gemaakt hoe alles met elkaar samenhangt. De mindmap helpt bij het maken van User Persona’s. User Persona’s zijn verzonnen personen die je helpen te bedenken voor wie je iets maakt. Verder ga je aan de slag met een Customer Journey. Een Customer Journey is een verhaal over hoe iemand ons product vindt en gebruikt, van begin tot eind. Om te begrijpen hoe de Customer Journey in elkaar zit zul je in gesprek moeten gaan met de gebruikers. Daarom ga je ook aan de slag met het oefenen van gesprekstechnieken. Je zult immers goede vragen moeten stellen en echt luisteren, zodat je goed begrijpt wat mensen nodig hebben en leuk vinden. Laten we beginnen! 1.1 Human Centered design Human Centered Design (HCD) is een ontwerpfilosofie die mensen/gebruikers centraal stelt bij het oplossen van problemen. Deze manier van werken zorgt ervoor dat wat je maakt heel goed past bij wat mensen nodig hebben en willen. Zo vinden ze het echt fijn om te gebruiken (ISO 9241). HCD vindt zijn oorsprong in diverse disciplines. Denk hierbij aan ergonomie, psychologie en industrieel ontwerp. Daarna heeft het zich ontwikkeld tot een multidisciplinaire aanpak die in vele sectoren wordt toegepast, van IT en digitale media tot productontwerp en stedelijke planning. Het kernidee van HCD is om in elke fase van het ontwerpproces rekening te houden met de wensen, pijnpunten en voorkeuren van gebruikers. Hiervoor vraag je voortdurend feedback en integreer je de feedback in je product. Doordat de oplossingen vanuit het perspectief van de gebruiker worden ontworpen zijn ze niet alleen effectiever, maar leiden ze ook tot grotere tevredenheid en betrokkenheid van de bezoekers. Hierdoor leveren ze potentieel meer winst op, doordat bezoekers vaker terugkomen. Daarnaast voelen gebruikers zich meer betrokken bij het ontwikkelingsproces. Hierdoor zijn ze geneigd het eindproduct meer te waarderen en te gebruiken. 1.1.1 Human centered design framework Human Centered Design framework is het overkoepelende raamwerk van processen dat een brede reeks praktijken integreert rond het begrijpen van de behoeften, wensen en beperkingen van eindgebruikers. 3 Dit framework kan de strategische besluitvorming verbeteren en de effectiviteit van individuele programma's en diensten vergroten. Binnen het HCD-framework spelen verschillende methodes en benaderingen een sleutelrol. Denk hierbij aan User Interface (UI) Design, User Experience (UX) Design, Experience Design, Service Design, Design Thinking en Systems Thinking. Alle deze elementen dragen bij aan het realiseren van een goed en prettig ontwerp. Figuur 1: Human Centered Design De verschillende onderdelen van het HCD framework worden in de volgende subparagrafen verder uitgelegd. 1.1.2 Human centered design (HCD) versus User centered design (UCD) Human-Centered Design (HCD) en User-Centered Design (UCD) zijn beide ontwerpmethodes die de mens centraal stellen. Maar ze hebben elk een andere aanpak en focus. Human centered design (HCD) kijkt naar de mens in de breedste zin van het woord. Het gaat niet alleen om de directe gebruikers van een product of dienst, maar ook om iedereen die indirect beïnvloed kan worden door het ontwerp. Denk hierbij bijvoorbeeld aan de impact op de gemeenschap en het milieu. Het doel van HCD is om oplossingen te ontwikkelen die nuttig en bruikbaar zijn, maar ook een positieve invloed hebben op de gehele mensheid en de omgeving. User centered design (UCD) daarentegen focust specifiek op de gebruikers van het product of de dienst. UCD streeft ernaar om het product zo gebruiksvriendelijk mogelijk te maken, met de nadruk op het voldoen aan de behoeften en het verbeteren van de ervaring van de eindgebruiker. Het proces is voornamelijk gericht op het 4 onderzoeken van gebruikersbehoeften, het ontwerpen, testen en evalueren vanuit het perspectief van de gebruiker. 1.1.3 User Interface Design (UI Design) Bij User Interface (UI) Design wordt gefocust op de productinterface. De buitenkant. Het gaat hierbij om het ontwerpen van een duidelijke, begrijpelijke en esthetisch aantrekkelijke interface. Deze interface moet de interactie tussen de gebruiker en het product of de dienst faciliteren. Daarom houdt UI Design zich bezig met elementen zoals knoppen, iconen, kleuren, typografie, en lay-out. Door een goed design onstaat er een intuïtieve en aangename gebruikerservaring. 1.1.4 User Experience (UX) Design User Experience (UX) Design omvat het ontwerpen van de gehele ervaring die een gebruiker heeft met een product of dienst. Dus vanaf het eerste gebruik tot aan langdurig gebruik. UX Design houdt rekening met elk aspect van de gebruikersinteractie. Denk hierbij aan het gebruiksgemak, toegankelijkheid, performance en hoe een gebruiker zich voelt, zowel tijdens als na het gebruik van het product. Het doel van UX Design is om producten te creëren die niet alleen bruikbaar en nuttig zijn, maar ook plezierig in het gebruik. De vijf lagen van UX design, Figuur 2: The Elements of User Experience – Jesse James Garrett (2002) ontwikkeld door Jesse James Garrett, zijn een framework om het gebruikerservaringsontwerp te structureren. Ze helpen ontwerpers bij het begrijpen van hoe gebruikers interactie hebben met websites of applicaties. 1. Strategielaag: Deze laag gaat over de doelen en behoeften. Wat wil de gebruiker bereiken en wat wil het bedrijf bereiken met het product? Het is belangrijk om deze doelen duidelijk te hebben voordat je verder gaat met ontwerpen. 2. Omvanglaag: In deze laag worden de functies en inhoud bepaald die nodig zijn om de strategische doelen te bereiken. Wat voor soort inhoud gaat er op de website of in de app komen? Welke functionaliteiten moeten er worden ingebouwd om de gebruiker zijn of haar doelen te laten bereiken? 5  3. Structuurlaag: Nu begin je met het organiseren van de inhoud en functionaliteiten. Hoe wordt de informatie gestructureerd en hoe navigeert een gebruiker door de website of app? Hier worden beslissingen genomen over hoe alles samenwerkt en hoe gebruikers de informatie vinden die ze nodig hebben. 4. Vormgevingslaag: Deze laag gaat over het visuele ontwerp en de interactie. Hoe ziet alles eruit? Denk aan kleuren, lettertypes, en de algehele stijl. Ook wordt hier gedacht aan het interactieontwerp, zoals wat er gebeurt als je ergens op klikt of hoe de overgangen tussen verschillende schermen zijn. 5. Presentatielaag: De laatste laag gaat over hoe de uiteindelijke gebruikersinterface wordt gepresenteerd. Het ontwerp wordt omgezet in front- end code die bepaalt hoe de interface eruitziet en reageert op de gebruiker. Dit is wat de gebruiker uiteindelijk ziet en gebruikt. De verschillende lagen bouwen op elkaar voort. Beginnend bij de meest abstracte doelen en behoeften, tot aan de concrete uitwerking in de presentatie. Elk niveau heeft zijn eigen focus en draagt bij aan een coherente (samenhangende) gebruikerservaring. 1.1.5 Experience Design Experience Design gaat verder. Het gaat voorbij aan de digitale interfaces en omvat de algehele ervaring die een gebruiker heeft met een merk, product of dienst. Het kan elementen omvatten zoals fysieke interacties, de omgeving waarin een dienst wordt ervaren en zelfs de klantenservice. Experience Design streeft naar het creëren van coherente, positieve ervaringen die de gebruiker op een emotioneel niveau aanspreken en loyaliteit en tevredenheid opbouwen. 1.1.6 Service Design Service Design richt zich op het ontwerpen en verbeteren van de volledige service en de interacties tussen serviceproviders en klanten. Service Design houdt rekening met alle touchpoints die een gebruiker heeft met een dienst. Het kijkt ook naar hoe deze touchpoints samenwerken om een naadloze, efficiënte en plezierige service-ervaring te bieden. Service Design gebruikt vaak methoden zoals journey mapping en service blueprints om het volledige serviceproces in kaart te brengen en te optimaliseren. 6 1.1.7 Design Thinking Design Thinking is een benadering die gebruikt wordt om complexe problemen op te lossen met een focus op de eindgebruiker. Het is een iteratief (herhalend) proces dat empathie voor de gebruiker, creativiteit in het genereren van inzichten en oplossingen, maar ook de rationaliteit in het analyseren en passen van oplossingen omvat. Design Thinking omvat fasen zoals empathiseren, definiëren, ideeën genereren, prototypen maken en testen. Design Thinking wordt gekenmerkt door een open houding voor het verkennen van diverse oplossingen. 1.1.8 Systems Thinking Systems Thinking is een manier van kijken naar complexe systemen en problemen. Bij Systems Thinking ligt de nadruk op het geheel, de onderlinge relaties en de dynamiek binnen het systeem. In de context van Human Centered Design helpt Systems Thinking ontwerpers te begrijpen hoe een product of dienst functioneert binnen de bredere context. Het stimuleert een brede overall kijk op ontwerpuitdagingen, waarbij rekening wordt gehouden met de langetermijneffecten en de interacties tussen verschillende systeemonderdelen. 1.2 Kernprincipes van HCD Human Centered Design is gebaseerd op een aantal kernprincipes die ervoor zorgen dat de ontworpen producten en diensten niet alleen voldoen aan de eisen van de gebruikers, maar ook een positieve impact hebben op hun leven. Mensen centraal (People centered): Dit principe benadrukt dat het ontwerpproces moet draaien om de mensen die je wilt helpen. Dit betekent dat je diep moet graven in de behoeften, wensen en leef- omstandigheden van de gebruikers en de bredere gemeenschap. Je luistert naar hen en maakt hen actief deel van het ontwerpproces, zodat de oplossingen die je creëert echt relevant en waardevol voor hen zijn. Los het juiste probleem op (Solve the right problem): Voordat je oplossingen gaat bedenken, is het cruciaal om zeker te weten dat je het juiste probleem aanpakt. Dit houdt in dat je onderzoekt en bevestigt wat de kern van het probleem is door observatie, gesprekken en analyse. Vaak is het eerste geïdentificeerde probleem slechts een symptoom van een dieperliggend issue. Het is belangrijk om dat fundamentele probleem te identificeren om effectieve oplossingen te ontwikkelen. 7  Alles is een systeem (Everything is a system): Dit principe herinnert ons eraan dat alles met elkaar verbonden is. Een verandering in één deel van een systeem kan onverwachte gevolgen hebben in andere delen. Bij HCD kijk je naar hoe individuen, gemeenschappen, en hun omgevingen elkaar beïnvloeden en hoe een product of dienst binnen dit grotere geheel functioneert. Het doel is om te begrijpen hoe alle elementen samenwerken en hoe jouw ontwerp zich daarin kan integreren. Kleine en simpele interventies (Small & simple interventions): Dit principe gaat uit van het idee dat kleine, goed doordachte veranderingen vaak effectiever zijn dan grote, complexe interventies. Eenvoudige oplossingen zijn gemakkelijker te begrijpen, te gebruiken en te implementeren. Bovendien zijn ze vaak gemakkelijker aan te passen en te onderhouden, wat leidt tot een duurzamere impact. Figuur 3:HCD principes 1.2.1 Het Proces van HCD Het HCD-proces bestaat doorgaans uit drie hoofdfasen: Inspiratie & begrip: Hierbij ligt de focus op het begrijpen van de gebruikers en hun context door onderzoek en empathie. Ideevorming & conceptualisatie: tijdens de ideevormingsfase worden op basis van deze inzichten ideeën en concepten gegenereerd. Implementatie & lancering: in de implementatiefase worden de meest veelbelovende ideeën ontwikkeld tot concrete oplossingen en prototypes, die vervolgens worden getest en verfijnd in samenwerking met de eindgebruikers. 8 Figuur 4: https://medium.com/juanpacheco/ideo-human-centered-design-hcd-design-process-a27eae26e3da Fase 1: Inspiratie en Begrip - Gebruikersanalyse In deze fase ligt de nadruk op gebruikersanalyse, wat essentieel is om de basis te leggen voor empathische ontwerpoplossingen. Dit begint met het identificeren en begrijpen van de gebruikersgroepen door middel van onderzoeksmethoden zoals: Persona-ontwikkeling: Hier creëer je archetypische gebruikers gebaseerd op gebruikersgegevens om de ontwerpbeslissingen te sturen. Empathisch onderzoek: Door te observeren en interactie met echte gebruikers, krijgt het ontwerpteam inzicht in de emoties, motivaties en het gedrag van de gebruikers. Contextuele interviews: Deze interviews worden uitgevoerd in de omgeving waar gebruikers met het product of de dienst zullen interageren, waardoor het ontwerpteam kan begrijpen hoe de gebruikers leven en werken. Fase 2: Ideevorming en Conceptualisatie - Ontwerpen De ideevormingsfase draait om het ontwikkelen van creatieve en innovatieve oplossingen gebaseerd op inzichten uit de eerste fase. Belangrijke activiteiten omvatten: Ideegeneratie: Met technieken, zoals brainstormen en workshops, worden zoveel mogelijk ideeën gegenereerd, die kunnen worden gefilterd en verfijnd. Prototyping: Snelle en iteratieve (herhalende) prototyping helpt bij het visualiseren en testen van ideeën. Hierdoor kan het team leren en verfijnen op basis van concrete ontwerpen. 9  Ontwerpiteratie: Terwijl het team prototypes ontwikkelt, worden deze voortdurend getest en verfijnd om ervoor te zorgen dat ze in lijn zijn met gebruikersbehoeften en -doelen. Fase 3: Implementatie en Lancering - Usability Tijdens de implementatiefase wordt het ontwerp geoptimaliseerd en voorbereid voor lancering. De belangrijkste activiteiten tijdens deze fase zijn: Usability Testing: Hier wordt het ontwerp getest met echte gebruikers om de bruikbaarheid en de gebruikerservaring te evalueren en te verbeteren. Pilottests: Door het product of de dienst in een gecontroleerde omgeving of met een klein gebruikerssegment uit te rollen, kan het team waardevolle feedback verzamelen en de oplossing verfijnen. Feedbackloops: Na de lancering blijft het verzamelen van gebruikersfeedback essentieel voor voortdurende verbetering. De sleutel tot een succesvol HCD-proces is het handhaven van een voortdurende dialoog tussen deze drie fasen. Hiermee wordt bedoelt dat de informatie die vrijkomt tijdens usability tests in fase drie kunnen bijvoorbeeld leiden tot nieuwe inzichten die teruggevoerd worden naar de inspiratiefase. Dit cyclische proces zorgt ervoor dat het ontwerpteam een steeds dieper inzicht krijgt in de gebruikers en hun behoeften. Dit leidt ertoe dat de producten en diensten steeds beter zijn afgestemd op de mens en het gebruik. 1.2.2 Toepassing in de Praktijk In de IT-sector wordt HCD bijvoorbeeld gebruikt bij het ontwerpen van software, websites en mobiele applicaties. Hierbij is een diep begrip van de gebruiker essentieel voor het creëren van intuïtieve en gebruiksvriendelijke interfaces. Maar HCD wordt ook gebruikt in de productontwikkeling en dienstverlening. Zelfs in stedelijke en ruimtelijke planning speelt HCD een cruciale rol in het ontwikkelen van oplossingen die aansluiten bij de werkelijke behoeften en wensen van mensen. 1.3 Mindmap maken Mindmapping is een visuele techniek die helpt bij het structureren, analyseren en genereren van ideeën rond een centraal concept of thema. Deze methode wordt veel gebruikt in diverse disciplines, waaronder Human-Centered Design (HCD), om complexe informatie op een intuïtieve en creatieve manier te organiseren en te begrijpen. 10 Een mindmap start meestal met een centraal idee of vraagstuk waaromheen gerelateerde ideeën, taken, concepten of woorden worden gegroepeerd. Deze elementen worden met elkaar verbonden door lijnen of pijlen, die de relaties en verbanden tussen de verschillende onderdelen aanduiden. Figuur 5: Bron: https://www.mindmapping.com/nl/mind-map In de context van HCD, dat zich dus richt op het ontwerpen van systemen, producten en diensten met een sterke nadruk op de behoeften, wensen en beperkingen van de eindgebruikers, speelt mindmapping een cruciale rol bij gebruikersanalyse. Aangezien je bij de gebruikersanalyse binnen het HCD-proces onderzoekt wie de gebruikers zijn, wat hun behoeften zijn, hoe ze huidige systemen of producten gebruiken en welke uitdagingen ze tegenkomen. Dit begrip van de gebruiker is essentieel om oplossingen te ontwerpen die echt waardevol en bruikbaar zijn voor hen. De link tussen mindmapping en gebruikersanalyse in HCD kan als volgt worden geïllustreerd: Organisatie van Gebruikersinformatie: Mindmaps bieden een gestructureerde manier om de verzamelde informatie over gebruikers tijdens onderzoeksfasen te organiseren. Dit kan informatie zijn uit interviews, enquêtes, observaties, en meer. Identificatie van Patronen en Verbanden: Door gebruikersgegevens visueel te maken, kunnen ontwerpers patronen, trends en relaties ontdekken die niet direct duidelijk zijn in lineaire of tekstgebaseerde gegevens. Dit kan bijvoorbeeld inzicht bieden in hoe verschillende gebruikersgroepen met een product omgaan of welke gemeenschappelijke behoeften er zijn. 11  Bevordering van Creatief Denken: Mindmapping stimuleert divergent (uiteenlopend, breder) denken, wat essentieel is in de identificatie-fase van HCD. Het helpt teams om buiten de gebaande paden te denken en innovatieve oplossingen te bedenken die recht doen aan de complexiteit van gebruikersbehoeften. Communicatie en Samenwerking: Een mindmap kan dienen als een effectief communicatiemiddel binnen multidisciplinaire teams. Het visualiseert de kernpunten en inzichten uit de gebruikersanalyse op een manier die gemakkelijk te begrijpen is voor mensen met verschillende achtergronden. Prioritering van Ontwerpbeslissingen: Door de relaties en het belang van verschillende gebruikersbehoeften en -problemen te visualiseren, kunnen teams prioriteiten stellen in hun ontwerpbeslissingen. Dit zorgt ervoor dat de meest kritieke aspecten van de gebruikerservaring worden aangepakt. In de HCD-context fungeert mindmapping dus als een veelzijdig hulpmiddel dat niet alleen helpt bij het begrijpen en analyseren van gebruikers, maar ook de basis legt voor creatieve oplossingen die aansluiten bij hun werkelijke behoeften. Figuur 6: Mindmap. Bron: https://www.schrijven-bij-de-overheid.nl/hoe-maak-je-een-mindmap/ 1.3.1 Stappenplan mindmap maken In deze subparagraaf ga je kijken naar de verschillende stappen die je doorloopt om een goede mindmap te maken waar je nuttige informatie uit kunt halen. Stap 1: Bepaal het Kernonderwerp Het proces van mindmapping begint met de selectie van een centraal thema, dat als het ware het hart van je mindmap vormt. 12 Dit thema kan variëren van een persoonlijk doel tot een professioneel project of zelfs een concept dat je wilt verkennen. Noteer dit kernonderwerp in het midden van je canvas, of dit nu een fysiek vel papier is of een digitale interface. Het gekozen kernonderwerp dient als fundament en vertrekpunt voor alle verdere ideeën en concepten die je gaat toevoegen. Het functioneert als het verbindende element van je mindmap. Stap 2: Integreer Sleutelconcepten Als het kernthema vastgesteld is, is de volgende stap het toevoegen van sleutelconcepten die direct gerelateerd zijn aan je centrale thema. Deze concepten vormen de belangrijkste pijlers van je mindmap en worden verbonden met het kernthema door middel van lijnen of takken. Het is cruciaal om deze sleutelconcepten zo concreet en gericht mogelijk te formuleren. Dit draagt bij aan een helder en gefocust denkproces. Stap 3: Detailleer met Subconcepten Elk van de sleutelconcepten kan verder worden ontleed in subconcepten of specifieke actiepunten. Dit is het moment om de diepte in te gaan en elk aspect van je sleutelconcepten uit te werken met gedetailleerde informatie, ideeën of taken. Deze fase biedt de mogelijkheid om een rijke en omvangrijke laag van specifieke details toe te voegen aan je mindmap, wat het een krachtige tool maakt voor analyse en planning. Stap 4: Verrijk met Kleur en Beeld Breng je mindmap tot leven door het gebruik van kleuren en beeldmateriaal. Dit verhoogt niet alleen de visuele aantrekkelijkheid, maar bevordert ook het dat je na langere tijd nog je nog meer kunt herinneren en begrip. Het toepassen van kleurcoderingen voor verschillende categorieën of thema’s binnen je mindmap helpt bij het snel identificeren en groeperen van gerelateerde concepten. Beeldmateriaal, zoals iconen of illustraties, kan complexe ideeën op een eenvoudige en begrijpelijke manier overbrengen. Stap 5: Leg Verbindingen Tijdens het ontwikkelen van je mindmap kun je onderlinge relaties tussen diverse concepten en subconcepten opmerken. Maak deze connecties zichtbaar door lijnen of pijlen te trekken die deze elementen met elkaar verbinden. Deze verbindingen zijn essentieel voor het begrijpen van het totaalbeeld, het genereren van nieuwe inzichten, en het vinden van innovatieve oplossingen voor vraagstukken of uitdagingen. Stap 6: Evalueren en Verfijnen Na de eerste opzet is het belangrijk om je mindmap kritisch te evalueren en waar nodig aan te passen. Deze revisiefase is cruciaal om ervoor te zorgen dat je 13 mindmap nog aansluit bij je gedachten en ideeën. Pas aan, voeg toe, of verwijder elementen om de helderheid en bruikbaarheid van je mindmap te maximaliseren. Stap 7: Implementeer je Mindmap Met je voltooide mindmap bij de hand is het nu tijd om deze actief te gaan gebruiken. Een goed opgestelde mindmap is een dynamische tool die je helpt om je denken te structureren, je productiviteit te verhogen, en je doelen effectiever te bereiken. Zorg ervoor dat je je mindmap regelmatig raadpleegt en bijwerkt om het een relevant en actueel hulpmiddel in je persoonlijke of professionele toolkit te laten blijven. Bron: https://www.youtube.com/watch?v=oQpf-2KsCw0 1.4 User persona User persona's zijn fictieve, maar gedetailleerde representaties van de ideale gebruikers of klantsegmenten voor een bepaald product, dienst of systeem. Deze persona's worden gecreëerd op basis van gebruikersonderzoek en gegevensanalyse. Ze zijn een essentieel onderdeel van het ontwerpproces, met name binnen Human- Centered Design (HCD). Het doel van een user persona is om ontwerpers, ontwikkelaars en stakeholders een duidelijk beeld te geven van de gebruikers voor wie ze ontwerpen. Hierdoor kunnen producten en diensten beter worden afgestemd op de behoeften, wensen en gedragingen van de eindgebruiker. Een typische user persona omvat: Demografische Informatie: Leeftijd, geslacht, locatie, opleidingsniveau, en beroep geven een basiscontext over wie de persona is. 14  Achtergrond: De professionele achtergrond, persoonlijke geschiedenis, en levensstijl van de persona bieden dieper inzicht in hun dagelijks leven en routines. Doelen en Motivaties: Wat wil de persona bereiken? Waarom zijn deze doelen belangrijk voor hen? Dit helpt om de intrinsieke en extrinsieke motivaties te begrijpen. Uitdagingen en Pijnpunten: De problemen, frustraties en obstakels die de persona ondervindt bij het bereiken van hun doelen of in hun dagelijkse taken. Gedrag en Voorkeuren: Hoe de persona technologie gebruikt, hun voorkeur voor bepaalde producten of diensten, en hun gedragingen in verschillende situaties. Scenario’s en Gebruikscases: Specifieke situaties of taken waarin de persona interactie heeft met het product of de dienst, die illustreren hoe en wanneer ze het zouden gebruiken. Figuur 7: Voorbeeld van een User persona Bron: https://www.justinmind.com/blog/user-persona-templates/ Types van personas: Volgens Olsen zijn er 7 types van personas: Focaal (Primair): Deze persona's vertegenwoordigen de hoofdgebruikers van een product of dienst. Ze zijn van cruciaal belang voor het succes en de ontwerpprioriteiten, aangezien hun behoeften en doelen direct invloed hebben op de kernfuncties en functionaliteit. 15  Secundair: Deze groep omvat gebruikers die belangrijk zijn maar niet als primair worden beschouwd. Hun behoeften worden bevredigd na de primaire gebruikers, en hoewel ze invloed hebben op het ontwerp, zijn ze niet kritiek voor de basisfunctionaliteit. Onbelangrijk: Gebruikers in deze categorie hebben een lage prioriteit. Hun behoeften en wensen kunnen worden overwogen, maar ze zullen het ontwerp- of besluitvormingsproces niet sterk beïnvloeden. Betrokken: Dit zijn individuen of groepen die op de een of andere manier betrokken zijn bij het gebruik of de impact van het product, maar die niet direct gebruikers zijn. Voorbeelden kunnen familieleden van de gebruiker of teamleden die het product ondersteunen, omvatten. Uitzonderlijk: Deze categorie omvat gebruikers die zo zeldzaam of ongebruikelijk zijn dat het ontwerpen voor hun specifieke behoeften niet gerechtvaardigd is. Het kunnen edge cases zijn die buiten de normale gebruiksscenario's vallen. Belanghebbenden: Dit zijn personen of entiteiten die een belang hebben bij het succes van het product, zoals betalers, sponsoren, of leidinggevenden. Ze gebruiken het product misschien niet zelf, maar hun eisen en verwachtingen moeten worden overwogen. Het is belangrijk om op te merken dat de specifieke interpretatie van deze categorieën kan variëren afhankelijk van de context en het specifieke ontwerpproces. Alan Cooper introduceerde het concept van "persona's" als een hulpmiddel om softwareontwerpers te helpen zich beter te concentreren op de gebruikers van hun producten. Cooper's benadering van persona's legt sterk de nadruk op het creëren van gedetailleerde, fictieve karakters om de verschillende gebruikers van een systeem of product te vertegenwoordigen. Volgens Cooper zijn er twee types, primaire en secundaire. Primaire Persona's De primaire persona, of de "focale" gebruiker, vertegenwoordigt de hoofdgebruiker van het product of systeem. Het ontwerp richt zich primair op het voldoen aan de behoeften en doelen van deze gebruiker. Wanneer er conflicten zijn in gebruikersbehoeften of -doelen, krijgen de behoeften van de primaire persona voorrang. Deze persona's hebben de meest kritieke en invloedrijke set van behoeften omdat, als het product of systeem niet werkt voor de primaire persona, het als mislukt wordt beschouwd voor het beoogde doel. Secundaire Persona's Secundaire persona's zijn gebruikers die ook belangrijk zijn, maar wiens behoeften en doelen niet zo kritiek zijn als die van de primaire persona. Het ontwerp van het product of systeem probeert ook tegemoet te komen aan de behoeften van 16 secundaire persona's, maar niet ten koste van de primaire persona. Secundaire persona's kunnen verschillen van de primaire door hun doelen, taken of door de context waarin zij het product gebruiken. Hoewel hun behoeften belangrijk zijn, zijn ze niet essentieel voor het kernsucces van het product. De kunst van het gebruik van persona's in het ontwerpproces ligt in het balanceren van de behoeften van primaire en secundaire persona's, samen met eventuele aanvullende persona's. Het is belangrijk om persona's te baseren op grondig gebruikersonderzoek om ervoor te zorgen dat ze een nauwkeurige weerspiegeling zijn van de werkelijke gebruikers van het product. 1.4.1 Stereotype vs Archetype persona Bij het ontwerpen van user persona's wordt vaak onderscheid gemaakt tussen stereotype persona's en archetype persona's. Dit onderscheid is cruciaal omdat het de manier waarop we gebruikers begrijpen en hoe we oplossingen voor hen ontwerpen, beïnvloedt. Stereotype Persona Een stereotype persona is gebaseerd op algemene aannames en oppervlakkige karakteristieken die vaak worden toegeschreven aan een bepaalde groep mensen. Deze persona's zijn meestal minder effectief omdat ze niet zijn gebaseerd op diepgaand onderzoek of echte gebruikersgegevens. Ze kunnen voortkomen uit culturele, sociale of industrie-specifieke stereotypes en hebben de neiging om bepaalde vooroordelen of clichés te versterken. Bijvoorbeeld, het stereotype dat "ouderen niet goed zijn met technologie" kan leiden tot een ontwerp dat niet voldoet aan de werkelijke behoeften van oudere gebruikers. Een video dat oa waarschuwt voor het gebruik van steriotypes: https://youtu.be/GNvLpfXCge8 Archetype Persona Een archetype persona, aan de andere kant, is een meer genuanceerd en op onderzoek gebaseerde representatie die gemeenschappelijke patronen in gedrag, doelen, en motivaties van echte gebruikers weerspiegelt. Deze persona's zijn gebaseerd op grondig gebruikersonderzoek en data-analyse en streven ernaar de essentie van een bepaalde gebruikersgroep vast te leggen. Archetypes gaan over gemeenschappelijke menselijke ervaringen en kenmerken die over verschillende individuen heen consistent zijn, waardoor ze een krachtig hulpmiddel zijn voor empathisch ontwerp. Ze helpen ontwerpers om dieper in te gaan op de 'waarom' achter gebruikersgedrag, wat leidt tot meer relevante en effectieve oplossingen. 17 Vergelijking en Implicaties voor Ontwerp Grondslag: Stereotypes zijn vaak gebaseerd op oppervlakkige of vooroordeelvolle aannames, terwijl archetypes zijn geworteld in uitgebreid onderzoek en analyse van echte gebruikersgedragingen en -motivaties. Gebruik in Ontwerp: Het gebruik van stereotype persona's kan leiden tot ontwerpbeslissingen die bepaalde gebruikersgroepen uitsluiten of verkeerd bedienen, terwijl archetype persona's een meer inclusief en empathisch ontwerpproces ondersteunen. Flexibiliteit: Archetype persona's bieden meer flexibiliteit in het ontwerpproces omdat ze de onderliggende motivaties en behoeften van gebruikers benadrukken, wat kan leiden tot innovatieve oplossingen die breed toepasbaar zijn. Figuur 8: Tweede voorbeeld user persona 18 Figuur 9: Derde voorbeeld user persona Je kunt hier meer voorbeelden vinden: https://www.justinmind.com/blog/user-persona- templates/ 1.5 Customer Journey Met de customer journey wordt de reis bedoeld die de klant bijvoorbeeld aflegt om tot aankoop van een bepaald product of dienst te komen (wanneer je een commerciële bril op hebt). Dit kun je visueel weergeven. Als je dat doet, krijg je inzicht in hoe je de beleving van je klant kunt verbeteren. In de visuele weergave leg je alle contactmomenten vast die de potentiële klant heeft met jouw organisatie. De reis van de klant begint bij de oriëntatie van jouw klant en eindigt pas na de aankoop. Doordat je inzicht krijgt in deze reis kun je onderzoeken hoe je waardevolle klantrelaties houdt. Het verhaal van de klant (per persona) vertel je in afgekaderde hoofdstukken. Deze hoofdstukken zijn de verschillende fasen waarin de verschillende activiteiten beschreven worden. Door dit in kaart te brengen wordt duidelijk hoe de gebruiker zich voelt tijdens deze verschillende activiteiten. Denk hierbij aan de emoties en ervaringen van de klant. Hieronder staan de verschillende fases die een klant doorloopt bij het koopproces: 1. Bewustwordingsfase (Awareness): de klant komt voor het eerst in contact met jouw product, service of merk (bijvoorbeeld door reclamezuilen, online advertenties, social media). 19  2. Overweging (Consideration): De klant vergelijkt jouw merk met andere merken om de beste match te vinden. 3. Aankoopfase (Purchase): De klant heeft gekozen voor jouw merk en gaat over tot aankoop. Het is nu van belang dat de klant gemakkelijk kan betalen. Dus zorg ervoordat de klant niet afhaakt in het proces. 4. Herhalingsaankoop (Retention): Deze fase richt zich op de sevice die geboden wordt na aankoop, dus de verzending en retour. (Bijvoorbeeld het aanbieden van gratis retour sturen). 5. Loyaliteitsfase (Loyalty): In deze fase is het doel dat jouw klant ambassadeur wordt voor jouw merk. Je moet een langdurige klantrelatie opbouwen zodat je klant terugkeert naar jouw merk en anderen erover vertelt. Je kijkt bij het maken naar wat de gebruiker doet in elke fase: Welke taken worden uitgevoerd? Wat denkt en voelt de gebruiker? Waar is de gebruiker? Welke devices gebruikt hij? Is hij alleen of zijn er nog meer mensen bij? En tot slot kijk je naar welke inzichten je hebt gekregen door dit in kaart te brengen. Figuur 10: Bron: https://www.motivaction.nl/actualiteiten/nieuwsberichten/6-gouden-regels-voor-customer- journey-mapping 1.6 Gesprekstechnieken Voor een designer is het van belang dat hij goed kan luisteren. Maar met alleen goed luisteren ben je er niet. Het is ook van groot belang dat je de juiste vragen stelt en 20 empathie toont. Daarom gaan we in deze paragraaf in op enkele belangrijke basis gesprekstechnieken. Als eerste gaan we kijken naar de gesprekstechniek LSD. LSD staat voor luisteren; samenvatten; doorvragen. Luisteren is meer dan horen. Met luisteren wordt bedoeld dat je begrijpt wat de ander zegt. Om te kijken of het echt goed begrepen hebt herhaal je in je eigen woorden, wat jij denkt dat ander bedoelde. Hierdoor weet je of jij het echt begrepen hebt. Daarbij helpt doorvragen om zaken nog duidelijker te krijgen. Het is namelijk niet de bedoeling dat je zelf dingen in gaat vullen. Dan krijg je soms hele bijzondere dingen. Figuur 11: Bron: https://langmetkrul.wordpress.com/tag/communicatie/ Luisteren doe je niet alleen met je oren. Luisteren doen we zowel non-verbaal als verbaal. Non verbaal doen we met behulp van gezichtsuitdrukkingen, oogcontact, lichaamstaal en aanmoedigende gebaren. Verbaal doen we door de ander aan te moedigen om door te gaan, stiltes te laten vallen of door vragen te stellen. Samenvatten is niet het herhalen van wat de ander net zei. Je vat samen door de hoofdpunten uit het verhaal van de ander weer te geven. Dit doe je in je eigen woorden. Je kunt hiermee de ander laten merken dat je echt luistert. Maar ook zorgt dit moment ervoor dat je de ander stimuleert om de gedachten en gevoelens verder te onderzoeken. Daarbij krijg je gelijk feedback zodat je weet of je het goed begrepen hebt en kun je tijdens het samenvatten het gesprek ordenen. Zorg dat de ander altijd de gelegenheid krijgt om aan te geen of hij het eens is met jouw samenvatting. 21 Daarnaast zorgt de samenvatting ervoor dat je nadenkt of het verhaal bruikbaar, volledig, relevant of duidelijk is. Als dat niet het geval is zul je dus door moeten vragen. Bij het doorvragen kun je een vraag herhalen of verduidelijken. Vraag ook eens ongericht door? (Hoe bedoel je?) Of juist gericht? (Hoe kwam dat? Waarom denk je dat? En toen?) Of vraag om een concreet voorbeeld. Bij het stellen van vragen kun je onderscheid maken tussen open en gesloten vragen. Bij open vragen liggen de antwoordmogelijkheden niet van tevoren vast. Open vragen beginnen altijd met een vraagwoord. Bijvoorbeeld met wie, wat, welke, hoe. Het mooie van open vragen stellen is dat je hierdoor soms informatie krijgt die je niet van tevoren zelf had bedacht. Open vragen leveren de meeste informatie op. Figuur 12: Open vragen starten met een vraagwoord Bij gesloten vragen begint de zin altijd met een persoonsvorm en niet met een vraagwoord. Bij een gesloten vraag zijn er altijd maar een paar antwoordmogelijkheden. Denk hierbij aan ja/nee vragen, maar ook vragen als: ‘Wilt u thee of koffie?’ is een vorm van een gesloten vraag. Tijdens een gesprek is het van belang dat je empathie toont. Empathie is de vaardigheid om je in te leven in de gevoelens en situatie van de ander. Door je in te leven in de ander kun je de emoties van de ander beter aanvoelen en begrijpen. Dit zorgt ervoor dat de (non) verbale communicatie beter verloopt. Niet alleen mensen kunnen empathie tonen. Ook bij dieren zien we dit terug. Denk bijvoorbeeld maar aan een huisdier dat je komt troosten als je verdrietig bent. Empathisch luisteren betekent dat je de gevoelens die achter woorden schuilgaan terugkoppelt aan de ander. Je laat hierbij je eigen oordeel of inbreng achterwege. Dit zorgt ervoor dat de ander zich veilig en begrepen voelt. Soms is dit best lastig, omdat je echt tot de kern van de emoties van de ander moet gaan. 22 1.7 Storytelling De Kracht van Storytelling in Gebruikerservaring In de wereld van gebruikerservaring (UX) speelt storytelling een steeds grotere rol. Storytelling, het gebruik van verhalende technieken om de interactie met een product of dienst te verrijken, helpt gebruikers niet alleen om beter met een interface om te gaan, maar creëert ook een emotionele connectie die hen langer betrokken houdt. Maar wat houdt storytelling in de context van gebruikerservaring precies in, en waarom is het zo effectief? Storytelling in UX kan worden gezien als een manier om complexe informatie toegankelijk en aantrekkelijk te maken. Door verhalende elementen toe te voegen, zoals personages, scenario’s of zelfs een metafoor, wordt het makkelijker om de gebruiker door een interface te leiden. Denk bijvoorbeeld aan een onboardingproces bij een nieuwe app. Door dit proces in te richten als een verhaal waarin de gebruiker een duidelijke reis doorloopt, met een begin, midden en einde, wordt niet alleen de informatie helderder, maar voelt de gebruiker zich ook meer verbonden met het product. Een goed opgebouwd verhaal bevat altijd een duidelijke structuur. Deze structuur helpt gebruikers om de volgorde van gebeurtenissen of stappen te begrijpen, net zoals een traditionele verhaallijn dat zou doen in een film of boek. De gebruiker weet waar hij aan toe is, wat het uiteindelijke doel is en welke stappen nodig zijn om dat doel te bereiken. Deze voorspelbaarheid geeft de gebruiker controle en vertrouwen in de interface. Belangrijk bij het toepassen van storytelling in een interface is om altijd rekening te houden met de behoeften van de gebruiker. Storytelling is niet alleen een creatieve toevoeging, maar moet functioneel zijn en de gebruikerservaring verbeteren. Het verhaal dat je vertelt, moet aansluiten bij de verwachtingen van de gebruiker. Bijvoorbeeld, wanneer je een product of dienst voor een jong publiek ontwikkelt, moet het verhaal dynamisch en spannend zijn, terwijl een meer zakelijke doelgroep eerder waarde hecht aan eenvoud en efficiëntie. Een van de meest krachtige technieken binnen storytelling is personificatie. Dit houdt in dat het product of merk menselijke eigenschappen krijgt, wat zorgt voor een diepere connectie met de gebruiker. Een product dat "spreekt" en inspeelt op de emoties van de gebruiker, maakt de ervaring persoonlijker en memorabeler. Denk bijvoorbeeld aan hoe veel digitale assistenten zoals Siri of Alexa werken: ze geven een stem en een karakter aan een product, waardoor de interactie intuïtiever en aangenamer aanvoelt. Een ander essentieel onderdeel van storytelling in UX is het gebruik van conflict. Net als in traditionele verhalen, zorgt conflict in UX voor spanning en betrokkenheid. Dit conflict kan bijvoorbeeld een probleem zijn dat de gebruiker tegenkomt en dat door het product wordt opgelost. Door een oplossing te bieden, creëert het verhaal een gevoel van voldoening en succes bij de gebruiker, wat zijn ervaring met het product positief beïnvloedt. 23 Visuele elementen spelen ook een cruciale rol in storytelling. Ze ondersteunen en versterken het verhaal door belangrijke informatie visueel duidelijk te maken, zonder dat de gebruiker veel tekst hoeft te lezen. Denk aan iconen, grafieken of zelfs subtiele animaties die het verhaal vertellen terwijl de gebruiker door de interface navigeert. Visuals kunnen vaak in één oogopslag overbrengen wat een paragraaf aan tekst nodig heeft om uit te leggen, en zorgen daarmee voor een efficiënte en prettige ervaring. Een van de belangrijkste factoren in effectieve storytelling is consistentie. Net zoals in een boek of film waarin personages en verhaallijnen coherent blijven, moet de interface in zijn geheel consistent zijn. Inconsistentie kan gebruikers in de war brengen of zelfs frustreren. Door een uniforme stijl en verhaallijn aan te houden, voelt de ervaring vloeiender en logischer aan. Dit zorgt voor vertrouwen en maakt de interface intuïtiever. Echter, er schuilt ook een valkuil in het gebruik van storytelling. Een veelvoorkomend probleem is dat het verhaal de hoofdboodschap van de interface kan overschaduwen. Wanneer een verhaal te complex of te verhalend is, kan het de gebruiker afleiden van het daadwerkelijke doel: het efficiënt gebruiken van het product. Daarom is het cruciaal om de balans te bewaren en ervoor te zorgen dat storytelling ondersteunend is aan de kernfunctie van de interface, en niet de aandacht ervan afleidt. Kortom, storytelling is een krachtig hulpmiddel in het ontwerpen van gebruikerservaringen. Het maakt informatie toegankelijker, creëert emotionele betrokkenheid, en verbetert de algehele ervaring door gebruikers op een natuurlijke manier door een interface te leiden. Door de juiste technieken toe te passen en altijd de gebruiker centraal te stellen, kun je met storytelling niet alleen een prettige, maar ook een effectieve gebruikerservaring creëren. 24 2 Week 2 2.1 Ontwerpprincipes Ontwerpmodellen 5 lagen van ontwerp Het ontwerpproces gaat in verschillende stappen of lagen. Natuurlijk wil je graag zo snel mogelijk aan de slag met ontwerpen, maar voordat je tot een goed ontwerp kunt komen zul je moeten nadenken over verschillende zaken. Bij het bouwen van een huis begin je ook met de fundering, pas daarna plaats je de muren, deuren en ramen. Het interieur is pas als laatste aan de beurt. Bij UX Design start je ook met de fundering en werk je daarna stap voor stap naar de Layout zelf toe. De eerste laag (fundering) is de meest abstracte laag. In de daarop volgende stappen of lagen wordt het steeds concreter. Uiteindelijk zal deze manier van werken het snelst resultaat opleveren omdat je niet steeds terug moet naar de vorige stap(pen) doordat je al nagedacht hebt over de basis en die gewoon goed is. De volgende stappen moet je bij het ontwerpen doorlopen: 1. Strategie (Strategy): Alles begint bij de strategie. Als je niet weet wat je wilt bereiken, hoe je dat wilt doen of voor wie het bedoeld is kom je nergens. Dus vraag jezelf af wat de toegevoegde waarde is voor de klant. 2. Het concept/idee (Scope): Als je weet wat de toegevoegde waarde is kun je bepalen welke functionaliteiten er nodig zijn om dit te realiseren. Het concept is medium onafhankelijk. Je kunt jezelf afvragen wat de functionele requirements zijn (wat doet het product)? En wat de content requirements (welke informatie is van waarde? Denk hierbij bijvoorbeeld aan tekst, afbeeldingen, video’s). 3. Structuur (Structure): Functionaliteiten en features zijn aan elkaar verbonden. Samen vormen ze de indeling van je website. Zorg dat de indeling op een intuïtieve manier aan elkaar verbonden is. 4. Skelet (Skeleton): Het skelet is het schermontwerp. Welke knoppen heb je nodig voor jouw ontwerp? Denk hierbij aan interface, navigatie en informatie. 5. Lay-out (Surface): Als laatste stel je jezelf de vraag hoe de knoppen en de andere onderdelen van de website eruit moeten komen te zien. Nu pas gaat het echt over de voorkant. Maar nog steeds gaat het hier niet om mooi, maar om een effectief design. 2.2 Brainstorming Om tot een goed idee te komen is het van belang om te brainstormen. Brainstormen is een vorm van creativiteit. Maar wat is creativiteit nou eigenlijk? Albert Einstein verwoordde het als volgt: ‘Creativity is seeing what everyone else has seen and thinking what no one else has.’ 25 Brainstormen is iets wat je niet alleen doet. Bij voorkeur ga je met een gemengde groep deelnemers aan de slag. Een groep van vier tot twaalf deelnemers blijkt het best te werken. De samenstelling van deze groep is erg belangrijk. Ongeveer een derde deel moeten specialisten zijn met betrekking tot het onderwerp. Een derde deel generalisten en een derde deel de zogenaamde wilde ganzen. Dit zijn creatievelingen die weinig van het onderwerp afweten. Een andere manier om naar de samenstelling van de groep te kijken is om een mix te maken van denkers, makers en doeners. Eigenlijk maakt het niet zoveel uit als de groep maar gemêleerd is. Maar de belangrijkste regel tijdens een brainstormsessie is dat iedereen tijdens het brainstormen gelijk is. Brainstormen bestaat eigenlijk uit twee fasen: divergeren en convergeren. Figuur 13: Divergeren en convergeren. De twee fasen van brainstorming. 1. Divergeren Tijdens het divergeren ga je voor kwantiteit. De hoeveelheid. Hoe meer hoe beter. Het gaat om breed denken, zoveel mogelijk ideeën verzamelen. Je mag meeliften op de ideeën van de ander. Denk in beeld en tekst (en geluid). De ene persoon is immers een beelddenker terwijl de ander meer taalgeörienteerd is. Benut elkaars kwaliteiten. Figuur 14: divergeren in beeld Alle ideeën zijn goed en er wordt geen oordeel over geveld. Laat je oordeel dus weg. (Dus zinnen als ‘dat is toch 26 niet haalbaar’ of ‘dat hebben we al eens gedaan’ bewaar je tot de convergerende fase). Nee is het verboden woord in deze fase, net als ‘ja, maar…’ De divergerende fase vindt meestal plaats in stilte. Voor deze fase zijn verschillende technieken ontwikkeld. Denk hierbij aan Superkrachten, Mindmappen, Teleprot, Gedaantewissel, Advocaat van de duivel. Even googlen levert vele technieken op. 2. Convergeren De tweede fase bij de brainstorm is convergeren. Uit de vele ideeën ga je op zoek naar het beste idee. Bij dit kiezen moet er wel geoordeeld worden. Maar je moet ervoor uitkijken dat je niet puur een beoordelingsfase van het convergeren maakt. Het gaat erop dat de ideeën eerst goed verkend, verdiept, gecombineerd en geconcretiseerd worden. Pas daarna kun je goed kiezen. Goede ideeën bevinden zich meestal niet in het midden bij de meest logische en voor de hand liggende ideeën, maar in de buitencategorie. Goede ideeën worden begrepen en onthouden, hebben impact, maar vooral: ze zijn simpel, onverwacht, concreet, geloofwaardig, emotioneel en vertellen vaak een verhaal. Het selecteren van de ideeën kan met verschillende technieken gebeuren. Soms is het handig om er meerdere achter elkaar te gebruiken. Denk hierbij bijvoorbeeld aan de COCDbox. www.cocd.org Deze methode ordent de ideeën naar drie categorieën. (NOW) Blauw idee: gemakkelijk uit te voeren, weinig risico’s, hoge aanvaardbaarheid (WOW) Rood idee: doorbraakidee, uitvoerbaar, innovatief, opwindend. (HOW) Geel idee: idee voor de toekomst, droom, uitdaging, heel ongewoon. Figuur 15: COCD box (www.cocd.org) 27 Daarna kun je de overgebleven ideeën bijvoorbeeld nog met behulp van een evaluatiematrix met criteria verder wegen zodat duidelijk wordt welk idee het best scoort. Ook kun je gebruik maken van de PPZO-methode (Positief, Potentie, Zorg, Ombuigen) zodat je nog beter de ideeën kunt analyseren. Je loopt hiervoor de volgende stappen: Positief: Beschrijf waarom het een goed idee is. Wat is er positief aan en op welke manier is het origineel en innovatief? Potentie: Beschrijf wat er met dit idee bereikt kan worden. Welke spin-off kan het hebben? Wat kan er in de toekomst tot stand komen? Zorg: Beschrijf wat de nadelen zijn aan het idee. Welke aspecten van het idee baren zorgen? Wat kan er fout gaan? Ombuigen: Bedenk op welke manier elk genoemd nadeel omgebogen kan worden. Wat zijn de voordelen van dat nadeel? Hoe kunnen de nadelen en de risico’s zo klein mogelijk worden? Natuurlijk kun je de keuze ook op andere manieren doen, bijvoorbeeld via de dotmocracy-methode. Elke deelnemer krijgt een aantal stickers, waarbij elke sticker voor 1 stem staat. Elke deelnemer plakt de stickers bij zijn/haar favoriete ideeën. Je mag ook meerdere stickers bij een idee plakken. De ideeën met de meeste stickers worden geselecteerd. 2.3 Wireflows Een huis bouw je op basis van een plan. Je kunt je inbeelden dat het overslaan van het plan, desastreuse gevolgen zal hebben. Bepaalde elementen in een huis worden vergeten of in het ergste geval valt het huis ineen. Het bouwen van een nieuw platform gaat gepaard met het uittekenen van een bouwplan, zijnde wireframes. Hoe beter de wireframes, hoe efficiënter je website gebouwd wordt en hoe succesvoller ze achteraf zal zijn. Een wireflow is een eenvoudige schematische voorstelling van de structuur van de webside of applicatie. De wireflow laat zien hoe de opbouw is en hoe alles met elkaar verbonden is. Een wireflow geeft de user flow van de ene pagina (of scherm) naar de 28 andere pagina (of scherm) aan. Dit is vooral handig voor toepassingen waar interactie tussen de gebruiker en de toepassing zeer complex of belangrijk is. De ene keer worden wireflows eerst ontwikkeld en daarna wireframes. De andere keer wordt ervoor gekozen om eerst wireframes en pas daarna wireflows te maken. Figuur 16: https://www.nngroup.com/articles/wireflows/ 2.4 Wireframing Een wireframe is het skelet van de app; het is een schets van hoe de app eruit gaat zien zonder alle details in te vullen. Een lay-out op paginaniveau. Een wireframe kan op een simpele manier worden gemaakt door het design uit te schetsen op papier waar weinig opmeringen en commentaar bij staat (low-fidelity). Maar het kan ook worden gedaan met designsoftware zoals bijvoorbeeld Figma of Adobe XD met meer detail (high-fidelity). Met behulp van high-fidelity wireframes krijg je een goed beeld hoe het uiteindelijke design eruit komt te zien. Een wireframe wordt gemaakt zodat je een beeld krijgt waar alle elementen komen te staan. Het gaat bij een wireframe om de structuur. Verder is het ook mogelijk om in een wireframe beschrijvingen en titels te plaatsen zodat je goed kunt zien of alle op de juiste plek komt te staan. 29 Figuur 17: Bron: https://boagworld.com/season/lean-ux/episode/create-wireframes/ 2.4.1 6 stappen om een wireframe te maken Bij het maken van een wireframe worden verschillende stappen doorlopen. Deze systematische manier van werken zorgt ervoor dat je niets vergeet. Stap 1 Doe onderzoek Onthoud: UX-design is een proces, en wireframing is niet de eerste stap. Voordat je een pen en papier oppakt, moet je de eerste twee stappen hebben voltooid: namelijk het begrijpen van je doelgroep door middel van gebruikersonderzoek, het gedetailleerd beschrijven van vereisten, het creëren van gebruikerspersona's en het definiëren van gebruiksscenario's. Dit moet worden aangevuld met concurrentie- en marktonderzoek. Wees niet bang om buiten je domein te onderzoeken als je een nieuwe functie ontwerpt. Introduceer je tracking en datavisualisatie als onderdeel van je logistieke dienst? Bekijk dan fitness- of voedingsapps op Dribbble of Behance voor inspiratie. Creativiteit ontstaat vaak waar verschillende vakgebieden elkaar kruisen. Geïntreseerd in extra informatie? Kijk eens op de volgende sites: www.dribble.com of www.behance.net 30 Stap 2 Bereid je onderzoek voor als snelle referentie Je kunt je voorstellen hoeveel kwantitatieve en kwalitatieve gegevens die verschillende scenario’s zullen opleveren. Dat moet je in gedachten houden bij het uitwerken van je wireframes. Als gewone sterveling is het moeilijk om alles te onthouden en te reproduceren, dus ik raad aan een spiekbriefje te maken met je bedrijfs- en gebruikersdoelen (je vereisten), je persona's, gebruiksscenario's, en misschien enkele herinneringen aan de leukste functies die je bij je concurrenten bent tegengekomen. Enkele belangrijke citaten van je doelgroep kunnen ook helpen je aandacht op de gebruikerservaring te richten—vergeet nooit dat dat is wat je ontwerpt! Stap 3 Zorg ervoor dat je de gebruikersstroom in kaart hebt gebracht (e.g wireflows) Je wireframes zullen snel rommelig worden als je geen idee hebt hoeveel schermen je moet maken en welke stroom je verwacht dat de gebruiker volgt. Het is belangrijk om een waterdicht concept te hebben van waar je gebruikers vandaan komen (bijvoorbeeld welk marketingkanaal en welke boodschap) en waar je wilt dat ze uiteindelijk terechtkomen. Stap 4 Schetsen, niet tekenen. Ontwerpen, niet illustreren Je kunt nu wat lijnen op je frame zetten. Onthoud: je schetst en vertegenwoordigt functies en formaten, niet illustreren in zeer gedetailleerd. Er is niets erger dan een leeg stuk papier, dus je moet snel je ideeën opschrijven - dat is de noodzaak voor stap drie. Denk niet aan esthetiek, denk niet aan kleuren - de UI-ontwerper kan dat later doen. En als je de enige ontwerper bent bij je startende bedrijf... nou, doe het dan later. Een goede, dikke markerpen (zoals een Sharpie) is een handig hulpmiddel in deze fase van wireframing. Waarom? Omdat het je ervan weerhoudt om jezelf te verdrinken in details. Je richt je op het afbakenen van de functionele blokken die het skelet van je ontwerp vormen. Stel jezelf de volgende vragen tijdens het schetsen: Hoe kun je de inhoud organiseren om de doelen van je gebruikers te ondersteunen? Welke informatie moet het meest prominent zijn? Waar moet je belangrijkste boodschap komen? Wat moet de gebruiker als eerste zien bij het openen van de pagina? Wat verwacht de gebruiker te zien op bepaalde delen van de pagina? Welke knoppen of aanraakpunten heeft de gebruiker nodig om de gewenste acties uit te voeren? Zodra je een paar variaties van je eerste schermen hebt, wil je misschien een beetje samenwerken met een mede-student. Wat betekent dat? Simpel. Breng je wireframes van het papier naar een whiteboard en speel ermee. Vraag jezelf en elkaar; "Creëren we iets bruikbaars dat voldoet aan de behoeften van ons publiek?" 31 Stap 5 Voeg wat details toe en begin met testen Je hebt een stroom en je schermen, en je hebt je ideeën bevestigd met goed geïnformeerde collega's. Nu is het tijd om enkele informatie details toe te voegen om je wireframe voor te bereiden op de upgrade naar prototype-modus. Voeg details toe op een manier zoals je een scherm of een boekpagina natuurlijk zou verwerken: dus van boven naar beneden en van links naar rechts. Onthoud: je wireframe is het skelet van je site. Je voegt nog niet de inhoud en tekst toe, deze elementen zijn de ligamenten en pezen die vorm en functionaliteit verbinden. Denk aan het volgende: Gebruiksgemak, zoals navigatie bovenaan naast je logo, een zoekvak rechtsboven, enzovoort. Eenvoudige, instructieve bewoordingen voor bijvoorbeeld calls-to-action. Vertrouwenselementen: wat heb je nodig om vertrouwen op te bouwen bij je klanten en waar plaats je deze elementen het beste? Tooltips om functies aan te geven die in een prototype overgang kunnen worden opgenomen. Zodra je dit allemaal hebt gedaan, ben je klaar voor je eerste gebruikerstests. In deze fase kunnen je gebruikers je medestudenten zijn. Een van de voordelen van een wireframe is dat het dient als een gemeenschappelijke taal tussen ontwerpers, stakeholders en ontwikkelaars. In week 3 ga je hiermee verder aan de slag. Stap 6 Begin met het omzetten van je wireframes in prototypes Zodra je de feedback van je eerste prototype hebt gedocumenteerd en verwerkt, kun je beginnen met het ontwikkelen van je high-fidelity prototypes. Figuur 18: Bron: https://www.youtube.com/watch?v=qpH7-KFWZRI 32 2.5 Ethiek in design Ethiek in design verwijst naar het verantwoord en bewust omgaan met de impact die ontwerpkeuzes kunnen hebben op gebruikers en de samenleving. Het idee is dat ontwerpers verantwoordelijkheid dragen voor hoe hun producten gebruikt worden en welke effecten ze kunnen hebben. Een specifiek voorbeeld van onethisch design zijn de zogenaamde 'dark patterns'. Dit zijn ontwerpkeuzes die opzettelijk gemaakt zijn om gebruikers dingen te laten doen die ze eigenlijk niet willen doen. Denk hierbij aan trucs in websites die je bijvoorbeeld meer laten kopen of je abonneren op nieuwsbrieven zonder dat je dit echt wilt. Het kan ook gaan om moeilijk te vinden afmeldopties voor abonnementen of verwarring creëren om gebruikers te misleiden. De reden dat ethiek zo belangrijk is in design, is omdat design krachtig is. Het kan gedrag sturen, meningen vormen en zelfs de cultuur beïnvloeden. Daarom is het belangrijk dat ontwerpers nadenken over de langetermijngevolgen van hun ontwerpkeuzes, niet alleen voor individuele gebruikers maar ook voor de maatschappij als geheel. Het doel is om producten te maken die eerlijk, transparant en bevorderlijk zijn voor welzijn. 2.5.1 Wat zijn Dark patterns Misleidende patronen (ook bekend als "dark patterns") zijn trucjes die gebruikt worden op websites en in apps die je dingen laten doen die je niet van plan was, zoals iets kopen of je ergens voor inschrijven. Bijvoorbeeld: Misleidende formuleringen Stiekem toevoegen Belemmering Op de volgende pagina’s vind je een aantal dark patterns met voorbeelden. 33 Voorkoming van vergelijking Definitie Voorbeeld Wanneer een gebruiker een aankoopbeslissing In dit voorbeeld maakt T-Mobile het moeilijk voor maakt, zal deze vaak proberen de prijs af te gebruikers om prijzen en plannen te vergelijken. Functies wegen tegen de functies en hun persoonlijke zijn op iets verschillende manieren gebundeld in elk van behoeften. Bij het vergelijken van producten kan de plannen, waardoor gebruikers wat complexe evaluatie men proberen dit voor elk product te doen voordat en hoofdrekenen moeten doen om de verschillen af te men een beslissing neemt. Als deze wegen. Belastingen en toeslagen zijn bij twee van de evaluatieactiviteit te moeilijk wordt, kunnen planprijzen inbegrepen, maar niet bij het derde. Omdat de gebruikers opgeven en een overhaaste beslissing belastingen en toeslagen niet worden getoond voor het nemen. Het misleidende patroon van derde plan, kan de gebruiker niet afleiden of het een vergelijkingspreventie maakt misbruik van dit betere waarde heeft of niet. Talrijke details over de gedrag door de vergelijking zo moeilijk mogelijk te plannen worden niet op deze pagina getoond, wat vereist maken. Wanneer een gebruiker moeite heeft, zijn dat de gebruiker meerdere keren moet klikken om ze meer vatbaar voor cognitieve vooroordelen "volledige plangegevens te bekijken" voor elk plan. zoals sociale bewijskracht, autoriteitsbias of het Verborgen onderaan deze pagina staat een link die zegt standaardeffect. Dit stelt de aanbieder in staat om "Goedkoopste plan". In tegenstelling tot de andere hen naar een beslissing te sturen die meer plannen wordt geen prijs of informatie getoond. De inkomsten genereert, maar misschien niet in het gebruiker moet erop klikken. Dit opent een lightbox-modal beste belang van de gebruiker is. in een andere stijl, waardoor de gebruiker de prijs en belangrijke functies moet onthouden voordat hij terugkeert naar de vorige pagina. Over het algemeen kan het zijn dat de gebruiker niet de moeite neemt om alle inspanningen te leveren die nodig zijn om de twee goedkopere plannen te identificeren en te begrijpen, en ze kunnen uiteindelijk kiezen voor een van de twee duurdere plannen, wat extra inkomsten oplevert voor het bedrijf, ook al is dat misschien niet in hun beste belang. 34 Bevestigingsschaamte Definitie Voorbeeld Bevestigingsschaamte werkt door De eCommerce website mimedic.com verkoopt oncomfortabele emoties zoals schuld of EHBO-pakketten en medische benodigdheden. In schaamte te triggeren om de besluitvorming 2018 gebruikte Mymedic het misleidende patroon van gebruikers te beïnvloeden. van bevestigingsschaamte. Websites of apps die dit misleidende patroon Bij het vragen om toestemming voor het gebruiken, presenteren vaak opt-out knoplabels verzenden van notificaties door zijn website, werd die op een denigrerende of kleinerende manier het label van de opt-out link gepresenteerd als zijn geformuleerd, waardoor gebruikers zich "Nee, ik wil niet in leven blijven" of "Nee, ik bloed slecht voelen over het kiezen om niet deel te liever dood". nemen aan de aangeboden service of functie. Dit is vooral problematisch gezien zijn Door in te spelen op de emoties en het doelklanten mensen zijn die waarschijnlijk worden zelfbeeld van gebruikers, streeft blootgesteld aan het trauma van ongelukken en bevestigingsschaamte ernaar de kans te dood in hun werk (Bron: Per Axbom, 2021). vergroten dat gebruikers toegeven aan de gewenste actie, uiteindelijk ten gunste van de serviceprovider. 35 Verhulde advertenties Definitie Voorbeeld Het misleidende patroon van verhulde Softpedia, een populaire website voor het advertenties werkt door opzettelijk de lijn downloaden van software, gebruikt vaak verhulde tussen daadwerkelijke inhoud en reclame te advertenties op hun downloadpagina's om de vervagen, wat verwarring bij gebruikers advertentie-inkomsten te verhogen. veroorzaakt. Hun aanpak omvat het tonen van advertenties met Deze advertenties zijn vaak ontworpen om te een prominente downloadknop die sterk lijkt op de lijken op interface-elementen, gerelateerde daadwerkelijke downloadknop voor de gewenste artikelen of andere inhoud die gebruikers software. mogelijk interessant vinden, waardoor de Dit leidt ertoe dat gebruikers per ongeluk op de kans groter wordt dat gebruikers erop advertentie klikken, denkend dat ze de software aan klikken. het downloaden zijn. Hierdoor kunnen website-eigenaren meer inkomsten genereren uit advertentie- impressies en kunnen adverteerders profiteren van verhoogde doorklikratio's die kunnen resulteren in meer verkopen. 36 Nep schaarste Definitie Voorbeeld Nep-schaarste werkt door een kunstmatig De Shopify-app “Sales & Stock Counter” is gevoel van beperkte beschikbaarheid rond een gemaakt door een bedrijf genaamd HeyMerch. product of dienst te creëren, waardoor Het maakt het gemakkelijk voor winkeliers om gebruikers snel handelen uit angst om iets mis nepberichten over lage voorraad te tonen, zoals te lopen. te zien is op de eerste afbeelding (zie het rode Dit wordt bereikt door misleidende berichten te omlijnde gebied). tonen over lage voorraadniveaus of hoge vraag. In het promotiemateriaal bieden ze een Door in te spelen op de cognitieve bias van handleiding aan die uitlegt hoe dit te doen (zie schaarste, maakt dit misleidende patroon de tweede afbeelding). misbruik van de natuurlijke neiging van De winkelier kan opties selecteren die ervoor gebruikers om meer waarde toe te kennen aan zorgen dat het nep lage voorraadtellers en items die zeldzaam of exclusief lijken, waardoor nepverkoopcijfers toont. ze haastige aankoopbeslissingen maken zonder hun opties volledig te evalueren. 37 Nep sociale bewijskracht Definitie Voorbeeld Het misleidende patroon van nep sociale Beeketing is een marketingautomatiseringsbedrijf bewijskracht creëert een illusie van dat softwareplugins maakt voor eCommerce- populariteit en geloofwaardigheid door winkels. gebruikers te presenteren met vervalste of Een van hun producten heet "Sales Pop". Dit overdreven goedkeuringen, zoals recensies, veroorzaakt een activiteitsberichtoverlay op het getuigenissen of activiteitsberichten. scherm met beweringen zoals "9 klanten hebben Deze manipulatie maakt misbruik van de item x samen met item y gekocht" of "Alycia in San cognitieve bias van sociale bewijskracht, Francisco heeft zojuist item x 4 minuten geleden waarbij individuen geneigd zijn zich te gekocht", zoals je kunt zien in de eerste afbeelding conformeren aan het gedrag van anderen. hieronder. Het is een kortere weg die mensen in staat In de documentatie van Sales Pop bieden ze een stelt het harde werk van het uitvoeren van handleiding aan die uitlegt hoe het product te een kritische evaluatie van hun eigen te gebruiken om een overtuigend nep- vermijden. schaarstepatroon te creëren. Door het misleidende patroon van nep sociale bewijskracht te gebruiken, kunnen aanbieders gebruikers misleiden om een aankoop te doen of met hun aanbiedingen te interageren. 38 Nep-dringendheid Definitie Voorbeeld Wanneer een gebruiker onder tijdsdruk wordt De Shopify-app "Hurrify" is gemaakt door een bedrijf gezet, kan hij de getoonde informatie minder genaamd Twozillas. kritisch evalueren omdat hij minder tijd heeft Het kan worden gebruikt om verschillende nep- en mogelijk angst of stress ervaart. dringende berichten te creëren, waaronder een nep Aanbieders kunnen dit in hun voordeel afteltimer. gebruiken om hen aan te zetten tot het In de eerste afbeelding kun je zien wat een voltooien van een actie die mogelijk niet gebruiker typisch ziet op een site die de Hurrify helemaal in het belang van de gebruiker is. afteltimer gebruikt. Het is zeer opvallend, geanimeerd en beweert dat de uitverkoop eindigt zodra de timer op nul staat. Echter, de beheerinterface voor verkopers (tweede afbeelding) heeft een standaardconfiguratie om "de campagne opnieuw te starten" wat betekent dat de teller simpelweg opnieuw begint als deze nul bereikt. Update april 2023: Hurrify lijkt verbannen te zijn van de Shopify app store. 39 Geforceerde actie Definitie Voorbeeld Geforceerde actie houdt in dat een aanbieder In 2015 gebruikte LinkedIn geforceerde actie als gebruikers iets aanbiedt wat ze willen, maar onderdeel van hun registratieproces op de website. vereist dat ze iets terugdoen. In een van de stappen kregen gebruikers een Dit kan gecombineerd worden met andere onschuldig ogende pagina te zien met de titel misleidende patronen zoals stiekem "Begin door je e-mailadres toe te voegen". Hieronder toevoegen (zodat gebruikers het niet was een tekstveld voor hun e-mailadres en een merken) of misleidende formuleringen (om prominente "Doorgaan" knop. Dit leek verplicht, en de actie aantrekkelijker te laten lijken dan gebruikers voelden waarschijnlijk dat het deze is). onschuldig was, aangezien bijna alle websites een Soms wordt een optionele actie e-mailadres vereisen tijdens de registratie. Echter, gepresenteerd als een geforceerde actie, de ware functie hiervan was om toegang te krijgen door gebruik te maken van visuele tot de inbox van de gebruiker en alle e-mailadressen interferentie of misleidende formuleringen. In te extraheren die het kon vinden. Hoewel de pagina interfaces voor cookie-toestemming wordt een beschrijving van deze functie gaf, was de tekst geforceerde actie soms uitgevoerd door grijs op een blauwe achtergrond, wat het relatief middel van "gebundelde toestemming". laag contrast en moeilijk te merken maakte, en de Dit houdt in dat meerdere overeenkomsten tekstuele inhoud gaf de consequenties niet duidelijk worden gecombineerd in één actie, en het aan. Hoewel de gebruiker het verzoek om door te moeilijk of onmogelijk is voor een gebruiker gaan kon afwijzen, was dit ook onduidelijk. De link om selectief toestemming te verlenen. "sla deze stap over" was relatief klein en moeilijk op te merken, gepositioneerd rechtsonder. Dan Schlosser geeft verdere details in zijn artikel Linkedin Dark Patterns. 40 Moeilijk op te zeggen Definitie Voorbeeld Moeilijk op te zeggen (ook bekend als "Roach The New York Times maakte het eenvoudig om Motel") is een misleidend patroon waarbij het je te abonneren, maar moeilijk om op te zeggen, eenvoudig is om je aan te melden voor een zoals gebruikers hebben gemeld dat ze verplicht dienst of abonnement, maar zeer moeilijk om waren om de klantenservice te bellen om op te het op te zeggen. zeggen, lang in de wacht te staan, of Dit omvat typisch het verbergen van de doorgestuurd te worden naar andere opzegoptie, vereisen dat gebruikers de webpagina's zonder te kunnen opzeggen. klantenservice bellen om op te zeggen, en het Dit leidt ertoe dat gebruikers betalen voor een maken van het opzegproces overmatig complex dienst die ze niet langer willen of nodig hebben. en tijdrovend. In één test duurde het ongeveer 8 minuten Dit kan ervoor zorgen dat gebruikers stoppen gesprek met een klantenservicemedewerker om met proberen op te zeggen en blijven betalen succesvol een abonnement op te zeggen. voor de dienst voor een langere periode. Daarentegen duurt het aanmaken van een nieuw abonnement slechts enkele seconden. Bron: https://twitter.com/darkpatterns/status/147952 8080737808392?lang=en-GB 41 Verborgen kosten Definitie Voorbeeld Verborgen kosten houden in dat bijkomende Ticketverkoper Stubhub gebruikte verborgen kosten kosten, toeslagen of uitgaven worden verhuld om inkomsten te genereren. of weggelaten totdat de gebruiker al ver in Hun methode was om een lage prijs te adverteren, het aankoop- of aanmeldproces is. gebruikers door een langdurige reeks stappen te Op dat moment heeft de gebruiker al tijd en leiden, en dan vlak voor de betaling een uiteindelijk moeite geïnvesteerd in de transactie en is hij hogere prijs te onthullen. waarschijnlijker geneigd om toch door te Op dat punt had de gebruiker al tijd en energie gaan ondanks de onverwachte kosten. besteed, dus moesten ze de tijd en energiekosten afwegen van het proberen een goedkopere prijs elders te vinden (en het risico van falen) tegenover het gewoon betalen. Dit wordt gedetailleerd beschreven in het onderzoekspaper 'Price Salience and Product Choice' (Blake et al., 2021), waarin wordt gemeld dat gebruikers die de tickettoeslagen niet van tevoren te zien kregen ongeveer 21% meer geld uitgaven en 14,1% meer geneigd waren om een aankoop te voltooien. 42 Nagging (Zaniken) Definitie Voorbeeld Zaniken is een vorm van vijandige uitputting van In 2018 drong Instagram agressief aan bij hulpbronnen. gebruikers om meldingen aan te zetten, en Elke keer dat een app of een website de gebruiker herhaalde dit regelmatig gedurende een onderbreekt met een verzoek om iets te doen, put periode van maanden. dit de tijd en aandacht van de gebruiker uit. Gebruikers konden het verzoek niet volledig Dit is als een belasting die de aanbieder oplegt aan afwijzen – hun enige optie om te weigeren gebruikers die niet willen voldoen aan de wensen was "Niet nu", wat het zaniken liet doorgaan. van de aanbieder. Hoewel de kosten niet financieel zijn, telt het op en wordt uiteindelijk niet onbelangrijk. Op dit punt kan de gebruiker besluiten dat het kosteneffectiever is om gewoon toe te geven en akkoord te gaan met wat de aanbieder vraagt, zelfs als het tegen hun beste belangen in gaat. 43 Belemmering Definitie Voorbeeld Belemmering is een type misleidend patroon Facebook gebruikte een belemmeringstechniek dat opzettelijk obstakels of door het eenvoudig te maken om in te stemmen met wegversperringen creëert op het pad van de privacy-schendende instellingen, maar moeilijk om gebruiker, waardoor het moeilijker wordt ze af te wijzen. voor hen om een gewenste taak te voltooien De interface van Facebook had een knop om met of een bepaalde actie te ondernemen. slechts één klik te "accepteren en doorgaan", maar Het wordt gebruikt om gebruikers uit te om de instellingen af te wijzen, moest de gebruiker putten en het op te geven, wanneer hun een onduidelijke knop klikken en een schakelaar doelen in strijd zijn met de inkomsten- of naar links omzetten. groeidoelstellingen van het bedrijf. Dit maakte het verwarrend voor gebruikers, en ze Soms wordt het ook gebruikt om gebruikers konden niet zeker zijn of ze hun privacy succesvol voor te bereiden op een grotere misleiding. hadden beschermd. (Bron afbeelding: Noorse Wanneer gebruikers gefrustreerd of Consumentenraad, 2018) vermoeid zijn, worden ze vatbaarder voor manipulatie. 44 Voorselectie Definitie Voorbeeld Voorselectie maakt gebruik van de cognitieve bias van het In 2021 gebruikte de standaardeffect – een psychologisch fenomeen waarbij mensen campagne van Trump dit de neiging hebben om te gaan met de optie die al voor hen is misleidende patroon op gekozen, zelfs als er andere keuzes beschikbaar zijn. beroemde wijze. Aanbieders weten dit en gebruiken het vaak om consumenten te Een vooraf geselecteerd benutten. Een gangbare aanpak is het tonen van een vooraf selectievakje voor "Maak dit aangevinkt selectievakje, hoewel er verschillende andere een maandelijkse manieren zijn om dit te doen, waaronder het plaatsen van artikelen terugkerende donatie" was in de winkelwagen van de gebruiker, of het vooraf selecteren van opgenomen, waardoor veel items in een reeks stappen. donateurs onbedoeld in Er zijn veel redenen waarom dit een krachtig misleidend patroon terugkerende betalingen is. Ten eerste is er simpelweg de kwestie van bewustzijn - werden gelokt. gebruikers moeten het opmerken, lezen en uitzoeken wat het Later in de campagne voegden allemaal betekent. Als de gebruiker dat niet doet, zullen ze er ze een tweede vooraf volledig onbewust van voorbij scrollen. Er kunnen andere geselecteerd selectievakje toe cognitieve vooroordelen worden gebruikt in dit misleidende dat gebruikers in een extra patroon. donatie lokte. Er werden Bijvoorbeeld, de inhoud kan zo geschreven zijn dat het de talrijke misleidende patronen gebruiker het gevoel geeft dat mensen zoals zij de standaard gebruikt in de Trump- zouden accepteren, dus zouden zij dat ook moeten doen (doelend campagne, gedocumenteerd op het vooroordeel van sociale bewijskracht). Als alternatief kan door Shane Goldmacher in de de inhoud een autoriteitsfiguur gebruiken om gebruikers onder New York Times. druk te zetten om de standaard te accepteren (doelend op het autoriteitsbias). 45 Visuele interferentie Definitie Voorbeeld Er zijn talloze manieren om met het In 2019 voegde Tesla een e-commercefunctie toe aan visuele ontwerp van een pagina te hun mobiele app, waarmee Tesla-autobezitters interfereren om informatie te verbergen, upgrades voor hun voertuigen konden kopen, zoals een te verduisteren of te vermommen. automatische piloot die "Volledig Zelfrijdende" Visuele waarneming kan worden capaciteiten voor $4.000 zou ontgrendelen. gemanipuleerd door gebruik te maken van Sommige klanten kochten dit per ongeluk en waren kleine tekst met een laag contrast. woedend toen ze ontdekten dat Tesla weigerde een Begrip kan worden gemanipuleerd door terugbetaling te verstrekken. een chaotische of overweldigende Bekende auteur Nassim Nicholas Taleb klaagde op interface te creëren. Twitter: "Ik heb onbedoeld op de koopknop gedrukt De verwachtingen van gebruikers kunnen terwijl de app in mijn zak zat". worden geschonden door belangrijke Verborgen op het aankoopscherm was wat kleine tekst informatie op een stijl of locatie te met een laag contrast die stelde "upgrades kunnen niet plaatsen die ze niet zouden verwachten. worden terugbetaald". Deze tekst had het laagste contrast op de pagina en was moeilijk te zien (Bron afbeelding: Reddit, 2019). 46 2.6 WCAG Als een organisatie een website heeft, moet de website toegankelijk zijn voor mensen met een beperking. Ethisch gezien heb je de verantwoordelijkheid om zoveel mogelijk gebruikers van dienst te zijn – en er is geen goede reden om een aanzienlijk deel van je publiek te negeren. Dat geldt voor alle publieke en private websites, of die nu van een bedrijf, school, overheidsinstelling of een andere instelling zijn. Volgens de Wereldgezondheidsorganisatie (WHO) leven er wereldwijd meer dan 1 miljard mensen met minstens één beperking. In Nederland hebben 2 miljoen mensen met een beperking. Ze hebben bijvoorbeeld een visuele of gehoorbeperking, of psychische problemen, of een lichamelijke of verstandelijke beperking. Het doel van digitale toegankelijkheid is om een betere ervaring te bieden aan zoveel mogelijk mensen. Dit omvat mensen met een breed scala aan beperkingen, zoals: Doven en slechthorenden Mensen met een verminderd gezichtsvermogen Mensen met cognitieve beperkingen of aandoeningen Mensen met lichamelijke beperkingen Mensen met verstandelijke beperkingen Gelukkig zijn er gestandaardiseerde richtlijnen voor webtoegankelijkheid ontwikkeld. De Web Content Accessibility Guidelines (WCAG) zijn gepubliceerd door het World Wide Web Consortium (W3C). De W3C is een internationale organisatie die ook standaarden maakt voor HTML- en CSS-programmeertalen. Door de WCAG-richtlijnen te volgen kun je meer mensen bereiken en kun je beter voldoen aan de Wet gelijke behandeling handicap of chronische ziekte (Wgbh/cz), de Europese toegankelijkheidswet (European Accessibility Act of EU-richtlijn 2019/882) en andere geldende wetgeving. Sinds 2019 geldt er een wettelijke verplichting voor overheids- en semi- overheidsinstellingen om drempelvrije toegang te bieden tot hun websites. In Nederland bepaalt de Wet gelijke behandeling handicap of chronische ziekte (Wgbh/cz) die inging op 1 januari 2020 dat onderscheid verboden is bij het aanbieden van of verlenen van toegang tot goederen of diensten. Met andere woorden: diensten moeten voor iedereen even toegankelijk zijn. Vanaf 28 juni 2025 gaat de European Accessibility Act (Europese toegankelijkheidswet) formeel in. De European Accessibility Act is internationale wetgeving op het gebied van digitale toegankelijkheid die veel breder van toepassing zal zijn dan de huidige wetgevingen. Dit betekent dat alle openbare websites en onder andere e-commerce-bedrijven (websites en webshops) digitaal toegankelijk moeten zijn. Ook nu al is er wetgeving van kracht. WCAG-webrichtlijnen definiëren hoe webinhoud toegankelijker kan worden voor mensen met een beperking. WCAG is de enige wereldwijd erkende richtlijn voor digitale toegankelijkheid. Bovengenoemde wetten zijn gestoeld op WCAG ook al 47 verwijzen zij er niet rechtstreeks naar. Door je website, dienst of product WCAG conform te maken, voldoe je ook aan de geldende wetgeving. WCAG bestaat uit succescriteria die toetsbaar zijn geformuleerd en zo gebruikt kunnen worden om content te toetsen op digitale toegankelijkheid. De richtlijnen zijn zo ontworpen dat ze gebruikt kunnen worden voor het toetsen van vrijwel alle soorten online content, inclusief mobiele apps en online documenten (zoals Adobe pdf’s). De succescriteria zijn onderverdeeld in drie conformiteitsniveaus, varierend van Level A tot en met level AAA. Level AAA bevat de strengste eisen. De vier basisprincipes van toegankelijkheid: De inhoud moet waarneembaar, bedienbaar, begrijpelijk en robuust zijn. 1. Waarneembaar: “Informatie en componenten van de gebruikersinterface moeten toonbaar zijn aan gebruikers op voor hen waarneembare wijze.” Dit betekent dat je content moet aanbieden zodat het kan worden waargenomen met verschillende types van zintuiglijke waarneming. Als je website bijvoorbeeld een video bevat zal het alleen waarneembaar zijn voor mensen met auditieve beperking als je ondertiteling toevoegt en voor mensen met een visuele beperking moet je juist audiodescriptie toevoegen om de video voor hen waarneembaar te maken. 2. Bedienbaar: “Componenten van de gebruikersinterface en navigatie moeten bedienbaar zijn.” Mensen moeten je website kunnen bedienen, ongeacht de methode die ze daarvoor kiezen. Veel mensen met een visuele beperking gebruiken bijvoorbeeld een toetsenbord om op internet te surfen (ze gebruiken geen muis). Als je website niet toegankelijk is voor gebruikers die met een toetsenbord moeten navigeren (het bedienen van een muis vereist visuele vaardigheden), is hij niet bruikbaar voor die gebruikers. Je website vereist een interactie die zij niet kunnen uitvoeren. 3. Begrijpelijk: “Informatie en de bediening van de gebruikersinterface moeten begrijpelijk zijn.” Stel dat je website wel toegankelijk is met een toetsenbord, maar dat gebruikers dankzij een JavaScript op de Enter-toets moeten drukken in plaats van op de Tab-toets om naar beneden te scrollen. Dat is niet goed voor de toegankelijkheid, want het is niet wat gebruikers verwachten. Als je de gebruiker geen duidelijke instructies geeft, begrijpen zij niet hoe zij de interface moeten bedienen. In het beste geval zal je website mensen die afhankelijk zijn van toetsenbordnavigatie frustreren; in het slechtste geval kunnen zij pas de controle over hun computer terugkrijgen als ze het juiste commando hebben geraden. 48  4. Robuust: “Content moet voldoende robuust zijn om betrouwbaar geïnterpreteerd te kunnen worden door een breed scala van user agents, met inbegrip van hulptechnologieën.” Ondersteunende technologieën (assistive technology, AT) zijn apparaten en softwareapplicaties die mensen met een beperking in staat stellen of het hen gemakkelijker maken gebruik te maken van het internet. Een bekend voorbeeld is de schermlezer, die alle tekst op het scherm converteert naar menselijke spraak met behulp van tekst-naar- spraaktechnologie (TTS) – en dat is slechts één voorbeeld van de vele use cases van TTS. Content is robuust als de juiste code en markup wordt gebruikt voor een juiste interpretatie door de diverse ondersteunende technologieën die de inhoud moeten kunnen interpreteren of omzetten. Een juist gebruik van semantische HTML en WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is bijvoorbeeld belangrijk om content in een andere opmaak te kunnen omzetten of correct te kunnen voorlezen zodat je een betere ervaring voor gebruikers met visuele beperkingen. Er is ook een goede kans dat je site dan goed werkt voor mensen die andere soorten AT gebruiken, waaronder technologieën die nog niet algemeen beschikbaar zijn. De beste manier om te zorgen voor een WCAG-conforme website of app, is regelmatig naar de richtlijnen te kijken tijdens het ontwerpen en ontwikkelen van je content. Als je wacht met nadenken over toegankelijkheid tot je website is gepubliceerd, ben je meer tijd (en geld) kwijt aan het alsnog toegankelijker te maken. 49 Figuur 19: Definities van de WCAG-succescriteria Uitleg over het voorgaande figuur. 1. Wat wordt bedoeld met alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient? 2. Wat wordt bedoeld met contrast (minimum)? 3. Wat wordt bedoeld met info en relaties? 4. Wat wordt bedoeld met linkdoel (in context)? 5. Waarom zou je ondertitels toevoegen? 1. Je moet aan alle afbeeldingen, grafieken, animaties en andere soorten inhoud, alternatieve tekst toevoegen die omschrijven wat er te zien is in de visuele inslag. 2. De contrastverhouding is het verschil in licht tussen de tekst en de achtergrond. Tekst met een laag contrast kan voor sommige gebruikers moeilijk te lezen zijn, vooral voor mensen met kleurenblindheid en andere visuele beperkingen. Er zijn gratis tools om de contrastverhouding van alle kleurenparen te testen. 3. Als je bijvoorbeeld een webformulier hebt met bepaalde verplichte velden, moeten gebruikers begrijpen welke velden verplicht zijn. Als ze het formulier 50  niet kunnen verzenden omdat een van die velden ontbreekt, moet hun software hen kunnen vertellen waarom. Je kunt deze informatie communiceren aan gebruikers die visueel ingesteld zijn door het veld rood te maken, maar mensen die geen visuele informatie kunnen waarnemen, hebben een andere aanwijzing nodig. Een eenvoudige manier om die informatie te geven: Markeer de verplichte velden met een sterretje en vermeld vervolgens “Velden gemarkeerd met een sterretje zijn verplicht.” in de instructies voor het invullen van het formulier. 4. Dit komt erop neer dat mensen voldoende informatie moeten krijgen via de tekst achter een link, de ankertekst, die ze kunnen lezen of middels TTS kunen horen, om te bepalen of ze de link willen volgen. Als je linktekst “klik hier” of “lees meer” luidt, geef je gebruikers niet genoeg informatie. Een linktekst moet beschrijvend zijn: bijvoorbeeld “lees meer over X, Y of Z.” Geef een link naar een artikel over AI in het onderwijs als ankertekst bijvoorbeeld “Lees meer over AI in het onderwijs“. Dat geeft gebruikers genoeg informatie om te beslissen of ze de link willen volgen. 5. Ondertiteling stelt mensen in staat jouw media te begrijpen, zelfs als ze de audio niet kunnen (of willen) horen. Door ondertiteling te geven, bereik je een veel breder publiek: uit een Facebook-onderzoek bleek dat ondertiteling de weergavetijd van videoadvertenties verhoogt met gemiddeld 12%. 51 3 Week 3 Deze week ga je aan de slag met de bruikbaarheid (usability) van je ontwerp. Hiervoor doe je tests, kijk je naar user story’s en ga je reflecteren. 3.1 Usability Bij usability draait het om bruikbaarheid. Hoe, wanneer en waar is de bruikbaarheid te verbeteren? Waarom zou je je zorgen maken? Usability is een kwaliteitskenmerk dat beoordeelt hoe eenvoudig gebruikers- interfaces moeten worden gebruikt. Het woord "usability" verwijst ook naar methoden om het gebruiksgemak tijdens het ontwerpproces te verbeteren. Bruikbaarheid wordt bepaald door 5 kwaliteitscomponenten: Leerbaarheid: Hoe gemakkelijk/logisch is het voor gebruikers om basistaken uit te voeren de eerste keer dat ze het ontwerp tegenkomen? Efficiëntie: Zodra gebruikers het ontwerp hebben geleerd, hoe snel kunnen ze taken uitvoeren? Dus hoeveel moeite moeten gebruikers doen om een bepaald doel te bereiken? Onthoudbaarheid: Wanneer gebruikers terugkeren naar het ontwerp na een periode van niet-gebruik, hoe gemakkelijk kunnen ze er dan weer mee aan de slag? Fouten: Hoeveel fouten maken gebruikers, hoe ernstig zijn deze fouten en hoe gemakkelijk kunnen ze hun fouten herstellen? Tevredenheid: Hoe prettig is het om het ontwerp te gebruiken? Dus welke gedachten heeft de gebruiker tijdens het gebruiken van het product? Het gaat hierbij om de mening over het gebruiksgemak, de toegevoegde waarde van de website of app en de toepasbaarheid. Er zijn veel andere belangrijke kwaliteitskenmerken. Erg belangrijk is utility (effectiviteit), dat verwijst naar de functionaliteit van het ontwerp: Doet het wat gebruikers nodig hebben? Kunnen de gebruikers hun doel bereiken met het product/website/app? Usability en utility zijn even belangrijk en bepalen samen of iets nuttig is: het maakt weinig uit dat iets gemakkelijk is als het niet is wat je wilt. Het heeft ook geen zin dat het systeem hypothetisch kan doen wat je wilt, maar je kunt het niet laten gebeuren omdat de userinterface te moeilijk is. Definitie van utility (effectiviteit) - of het de functies biedt die u nodig hebt. Definitie van usability - hoe eenvoudig en aangenaam deze functies zijn om te gebruiken. Definitie van useful ? usabilitiy + utility. 52 Op het internet is usability een noodzakelijke voorwaarde om te overleven. Als een website moeilijk te gebruiken is, gaan mensen weg. Als de startpagina van een website niet duidelijk aangeeft wat een bedrijf te bieden heeft en wat gebruikers op de site kunnen doen, gaan mensen weg. Als gebruikers verdwalen op een website, gaan ze weg. Als de informatie van een website moeilijk te lezen is of de belangrijkste vragen van gebruikers niet beantwoordt, gaan ze weg. Er bestaat niet zoiets als een gebruiker die een websitehandleiding leest of anderszins veel tijd besteedt aan het zoeken naar hoe de website eigenlijk werkt. Er zijn tal van andere websites beschikbaar; vertrekken is de eerste verdedigingslinie wanneer gebruikers een moeilijkheidsgraad tegenkomen. De eerste commerciële wet is dat als gebruikers het product niet kunnen vinden, ze het ook niet kunnen kopen. 3.1.1 Heuristieken De 10 heuristieken van Jakob Nielsen vormen een belangrijke leidraad voor het ontwerpen van gebruiksvriendelijke interfac