User Experience
Introductie UX en Basisprincipes
Uitleg
User Experience, kortweg UX, gaat over hoe een gebruiker een product of dienst ervaart. In deze les duiken we in de kernbegrippen, ontdekken we waarom UX zo belangrijk is en bekijken we concrete voorbeelden uit populaire applicaties en websites. De les is opgedeeld in vijf onderdelen:
Wat is User Experience?
User Experience omvat alle facetten van de interactie tussen een gebruiker en een systeem. Denk niet alleen aan knoppen en menu’s, maar ook aan hoe snel een pagina laadt, hoe duidelijk de instructies zijn en welk gevoel de gebruiker overhoudt na gebruik. Een goede UX zorgt ervoor dat gebruikers vlot hun doel bereiken, zonder frustratie, en het liefst met plezier.
Voorbeeld: Stel je voor dat je een nieuw fotobewerkingsprogramma opent. Als de meeste functies direct toegankelijk zijn via intuïtieve iconen en je niet eerst uitgebreide handleidingen hoeft te lezen, ervaar je een prettige start. Dit is precies wat veel moderne apps, zoals VSCO of Snapseed, doen: de belangrijkste bewerkingstools zitten direct in beeld en je kunt eenvoudig met schuifjes de helderheid of contrast aanpassen.
Het verschil tussen UX en UI
Hoewel de termen vaak door elkaar gebruikt worden, is UX niet hetzelfde als UI. UI (User Interface) richt zich op hoe de interface eruitziet: kleuren, lettertypes, iconen en lay-out. UX heeft een breder perspectief: het gaat over gebruikersonderzoek, structuur, navigatie, content en testen.
UX : Van onderzoek naar de behoeften van gebruikers tot testen van prototypes en het analyseren van gebruiksdata.
UI : De visuele vormgeving en interacties zoals knoppen, animaties en typografie.
Voorbeeld: Een webshop kan een prachtige, strak vormgegeven productpagina hebben (UI). Maar als de bestelknop onduidelijk is of de betaalprocedure steeds crasht, is de UX slecht.
Belangrijke principes van goed UX-ontwerp
Gebruiksvriendelijkheid (Usability): Gebruikers moeten taken kunnen uitvoeren zonder uitgebreide uitleg. Denk aan een videostreamingdienst: de ‘play’-knop is overal hetzelfde symbool en staat altijd zichtbaar.
Toegankelijkheid (Accessibility): Ontwerpen voor iedereen, ook voor mensen met beperkingen. Bijvoorbeeld: tekst die te klein is, kleurschema’s met te weinig contrast of knoppen die alleen via touchscreen werken, sluiten mensen met slecht zicht of motorische problemen uit.
Consistentie: Houd designpatronen uniform. Als in één onderdeel van de app een menu-link rechtsboven staat, moet dat in de rest van de app ook zo zijn. Dit voorkomt dat gebruikers steeds opnieuw moeten zoeken.
Feedback en systeemstatus: Geef direct terugkoppeling. Als je ergens op klikt, moet je zien dat de actie is verwerkt: een knop verandert van kleur, er verschijnt een laadanimatie of je krijgt een bevestigingsbericht.
User-Centred Design: Betrek gebruikers vanaf het begin. Door onderzoek en testen ontdek je wat gebruikers echt nodig hebben in plaats van wat je zelf denkt dat ze nodig hebben.
Latente behoeften en emotioneel design
Naast de functionele eisen, zijn er ook latente behoeften: wensen die gebruikers zelf vaak niet expliciet noemen. Emotioneel design richt zich op het opwekken van positieve gevoelens. Micro-interacties spelen hierin een grote rol: dat zijn kleine animaties of geluidjes die plaatsvinden na een gebruikersactie.
Voorbeeld: Denk aan de ‘like’-animatie op Instagram: als je dubbel tikt, zie je kort een hartvormige animatie. Deze kleine verrassing versterkt het gevoel dat je actie is geslaagd en maakt het gebruik plezieriger.
Case study: het onboarding-proces van Duolingo
Duolingo is een taalapp die nieuwe gebruikers stap voor stap introduceert:
Keuze van taal: Nadat je een taal hebt gekozen, krijg je een korte quiz om je startniveau te bepalen.
Duidelijke instructies: Elke oefening heeft één duidelijke opdracht, bijvoorbeeld “Vertaal dit woord”.
Gamification: Punten, levels en streaks motiveren gebruikers om dagelijks in te loggen.
Visuele voortgang: Een voortgangsbalk laat zien hoe ver je bent en wat je nog moet doen.
Dit zorgt ervoor dat je direct begrijpt wat er van je wordt verwacht en gemotiveerd blijft om door te gaan.
Opdracht
Schrijf een rapport/verslag (minimaal 600 woorden) waarin je een app of website naar keuze grondig analyseert:
Introductie: Beschrijf het doel en de context van het product.
UX-principes: Kies vier principes (bijvoorbeeld gebruiksvriendelijkheid, consistentie, feedback, toegankelijkheid) en geef concrete voorbeelden uit de app/website.
Sterke punten: Benoem drie aspecten waarin de UX uitblinkt.
Verbeterpunten: Beschrijf drie knelpunten en werk schetsen of wireframes uit om jouw verbeteringen te illustreren.
Conclusie en aanbevelingen: Vat je bevindingen samen en stel een actieplan op voor het waarborgen en verder verbeteren van de UX.
Gebruikersonderzoek
Uitleg
Gebruikersonderzoek is cruciaal om te begrijpen wie je gebruikers zijn, wat zij nodig hebben en op welke manier zij jouw product gebruiken. In deze les behandelen we vijf belangrijke onderdelen: doelgroepanalyse, interviews, enquêtes, persona’s en user journeys.
Doelgroepanalyse
Bij een doelgroepanalyse breng je in kaart welke groepen je bedient. Dit doe je door:
Demografische gegevens: Leeftijd, geslacht, opleiding, locatie.
Psychografische factoren: Interesses, waarden, leefstijl.
Gedragskenmerken: Technische vaardigheden, online gedrag, aankoopgedrag.
Contextueel gebruik: Waar en wanneer gebruiken gebruikers je product? Bijvoorbeeld onderweg op mobiel of thuis op desktop.
Voorbeeld: Een fitness-app kan jongvolwassenen (18-30) als primaire doelgroep hebben, geïnteresseerd in gezondheid en gemakkelijk trainingsschema’s willen volgen via hun smartphone.
Interviews
Interviews geven rijke, kwalitatieve inzichten:
Voorbereiding: Bepaal doel, stel open vragen op (bijvoorbeeld: “Wat vind je lastig aan deze app?”).
Uitvoering: Interview 5–7 personen individueel, 30–45 minuten per sessie.
Techniek: Gebruik laddering om achterliggende motivaties te ontdekken.
Analyse: Maak transcripties en codeer herhaalde thema’s.
Voorbeeld: Bij het interviewen van leerlingen over een studieplanner-app ontdek je dat zij vooral moeite hebben met herinneringen instellen, waardoor ze deadlines missen.
Enquêtes (Surveys)
Surveys verzamelen kwantitatieve data bij grotere groepen:
Ontwerp: Mix van multiple-choice, Likert-schalen en open vragen.
Verspreiding: E-mail, social media of direct ingebed in je prototype.
Analyse: Bekijk percentages, gemiddelden en standaarddeviaties.
Voorbeeld: Een enquête onder 100 gebruikers toont aan dat 70% de navigatie verwarrend vindt en 50% aangeeft de zoekfunctie te waarderen.
Persona’s
Op basis van interviews en enquêtes maak je fictieve profielen:
Naam en achtergrond: Geef je persona een naam en achtergrond.
Doelen en behoeften: Wat wil deze gebruiker bereiken?
Frustraties en pijnpunten: Welke problemen ondervindt hij of zij?
Voorbeeld: “Lisa, 22 jaar, student, werkt parttime, zoekt snel overzicht van haar colleges en deadlines. Ze raakt snel afgeleid door te veel meldingen.”
User journeys
Een user journey beschrijft de stappen die een persona doorloopt:
Fasen: Oriëntatie, eerste gebruik, regelmatig gebruik.
Touchpoints: Momenten waarop de gebruiker in contact komt met je product.
Emotiecurve: Noteer in elke fase welk gevoel de gebruiker ervaart.
Voorbeeld: In de oriëntatiefase voelt de gebruiker nieuwsgierigheid, bij het eerste gebruik frustratie door onduidelijke knoppen en bij regelmatig gebruik tevredenheid als routines vanzelf gaan.
Opdracht
Schrijf een onderzoeksrapport voor de gekozen website of app uit opdracht 1 waarin je:
Doelgroep analyse: Beschrijf twee segmenten en hun kenmerken.
Interviewplan: Stel een vragenlijst op en voer minimaal twee interviews uit. Beschrijf de belangrijkste inzichten.
Survey: Ontwerp een korte enquête, verzamel minimaal 10 reacties en analyseer de resultaten.
Persona: Maak één persona met naam, achtergrond, doelen en frustraties.
User journey map: Visualiseer de stappen en emoties van deze persona.
Toepassing: Beschrijf hoe je uitkomsten verwerkt in je ontwerpkeuzes.
Wireframes en Prototyping
Uitleg
In dit hoofdstuk staan wireframes en prototyping centraal: twee essentiële stappen in het UX-proces waarmee je ideeën snel visueel kunt maken en testen. We behandelen wat wireframes zijn, hoe je de informatiearchitectuur bepaalt, welke tools je kunt gebruiken voor prototyping, en hoe je een iteratief testproces opzet.
Wat zijn wireframes?
Wireframes zijn schematische, zwart-wit tekeningen van een scherm of pagina. Ze geven de indeling weer, de hiërarchie van informatie en plaatsing van knoppen, afbeeldingen en tekstblokken, zonder dat je wordt afgeleid door kleuren of stijl. Wireframes helpen om snel verschillende layouts te vergelijken en feedback uit te wisselen.
Voorbeeld: Stel je maakt een wireframe voor de startpagina van een nieuw nieuwsplatform. In plaats van echt plaatjes gebruik je rechthoeken als placeholders voor afbeeldingen en lijnen voor tekst. Zo bepaal je waar het hoofdartikel komt, welke snack- of kopblokjes je gebruikt en waar de navigatiebalk staat.
Informatiearchitectuur en sitemaps
Voordat je wireframes gaat tekenen, maak je een sitemap: een overzicht van alle pagina’s en de onderlinge relaties. De sitemap toont hoe gebruikers door de verschillende onderdelen van je product kunnen navigeren.
Top-level pagina’s: Home, Over ons, Contact, Nieuwsartikelen.
Onderliggende secties: Bij Nieuwsartikelen denk je aan categorieën zoals Binnenland, Buitenland, Sport.
Navigatiepatronen: Kies voor een horizontaal menu bovenaan of een hamburgermenu op mobiel.
Door de informatiearchitectuur helder op te zetten, zorg je dat gebruikers niet vastlopen en snel vinden wat ze zoeken.
Low-fidelity vs. high-fidelity wireframes
Low-fidelity: Snelle schets op papier of in een tool als Balsamiq. Goed voor brainstormsessies.
High-fidelity: Meer gedetailleerd, in tools als Figma of Sketch. Je voegt echte teksten, iconen en soms basiskleuren toe.
Begin altijd low-fidelity om concepten snel te toetsen en pas high-fidelity als het ontwerp definitief wordt.
Prototyping-tools en workflows
Na wireframing bouw je een klikbaar prototype waarmee je navigatie en interactie kunt simuleren:
Figma: Gratis optie, browser-gebaseerd, ideaal voor samenwerken.
Sketch: Populair onder Mac-gebruikers, veel plugins beschikbaar.
Workflow:
Maak componenten (knoppen, invoervelden) aan in je design library.
Hergebruik deze componenten op alle schermen voor consistentie.
Gebruik “Auto Layout” in Figma om layouts eenvoudig aan te passen.
Link schermen aan elkaar via hotspots: klik-acties, hoverstates, navigatielinks.
Interactiepatronen en micro-interacties
Een prototype bevat niet alleen links, maar toont subtiele animaties:
Overgangsanimaties: Fade in/out bij wisselen van scherm.
Button states: Normal, hover, active, disabled.
Loader: Kort animatie-element bij het laden van content.
Deze patronen maken de ervaring dynamischer en laten testers intuïtief begrijpen wat er gebeurt.
Iteratief testen van prototypes
Prototyping is geen eindstation; het is juist een startpunt voor tests:
Voorbereiden van testscenario’s: Beschrijf concrete taken zoals “Vind het laatste sportnieuws en lees het artikel”.
Live tests: Nodig 3–5 testers uit (klassengenoten, vrienden). Observeer hun gedrag en noteer fouten of aarzeling.
Remote tests: Deel een link en laat gebruikers op eigen tempo het prototype doorlopen. Verzamel schermopnames.
Feedback verwerken: Cluster de bevindingen (bijv. via post-its of een spreadsheet) en identificeer terugkerende issues.
Itereren: Pas je wireframes en prototype aan, voer een tweede testronde uit.
Iteratief ontwerpen verlaagt de kans op kostbare fouten in de uiteindelijke productontwikkeling.
Opdracht
Ontwikkel een prototype voor een verbeterde versie van de eerder gekozen app of website en lever de volgende onderdelen in:
Sitemap en informatiearchitectuur (minimaal 1 pagina): Heldere diagrammen van alle hoofd- en subpagina’s.
Low-fidelity wireframes (3 schermen): Snelle schetsen (digitaal of papier) met duidelijke indeling.
High-fidelity wireframes (3 schermen): In een tool als Figma, inclusief teksten, iconen en basale stijlelementen.
Interactief prototype: Klikbare flow met navigatie (tussen ten minste 2 pagina’s).
Visueel ontwerp en interactie
Uitleg
In dit hoofdstuk vertalen we functionele ontwerpen naar aantrekkelijke, bruikbare interfaces. We behandelen kleurenleer, typografie, iconografie, beeldgebruik, micro-interacties en responsive design.
Kleurenleer en -psychologie
Kleuren wekken emoties op. Kort overzicht van kleurentheorie:
Primaire kleuren: Rood, blauw, geel. Aandachtstrekkers.
Secundaire kleuren: Groen, oranje, paars. Balans en harmonie.
Accentkleuren: Voor call-to-action knoppen.
Let op contrast: zorg dat tekst altijd goed leesbaar is tegen de achtergrond. Gebruik online tools om contrastratio’s te controleren.
Voorbeeld: Adobe gebruikt blauw en wit voor een professionele uitstraling, met oranje accenten voor belangrijke knoppen.
Typografie
Typografie bepaalt hoe prettig tekst leest:
Lettertypekeuze: Sans-serif voor scherm (bijv. Roboto), serif voor langere teksten.
Hiërarchie: Koppen, subkoppen en bodytekst in verschillende groottes en gewichten.
Line-height en letter-spacing: Genoeg witruimte om leesbaarheid te vergroten.
Voorbeeld: Medium.com gebruikt een duidelijk hiërarchisch systeem: grote koppen, korte paragrafen en voldoende witruimte.
Iconografie en beeldgebruik
Iconen moeten eenduidig en uniform van stijl zijn. Gebruik een iconenbibliotheek of maak eigen pictogrammen.
Beelden en illustraties geven context en emotie:
Optimaliseer afbeeldingen voor web (bestandsgrootte).
Let op auteursrechten en licenties.
Voorbeeld: Airbnb gebruikt eigen fotografie om gebruikers een gevoel van authenticiteit te geven.
Micro-interacties
Kleine animaties geven feedback en brengen plezier:
Button states: Normal, hover, active, disabled.
Loading indicators: Toon dat content wordt geladen.
Toggle switches: Beweging geeft direct duidelijkheid.
Voorbeeld: Bij Spotify zie je een pulserend rondje rond de play-knop wanneer muziek afspeelt.
Responsive design
Ontwerpen voor verschillende schermgroottes:
Mobile-first: Begin ontwerp voor mobiel, schaal op naar tablet en desktop.
Flexbox en grid: CSS-technieken om layouts flexibel te maken.
Breakpoint planning: Definieer punten waarop layout aanpast.
Voorbeeld: Gmail past de inboxweergave aan: op mobiel vouwt de zijbalk automatisch in.
Opdracht
Werk je prototype visueel uit:
Stijlgids (visuele richtlijnen): Kleurenpalet, typografie, iconen en beeldrichtlijnen.
Micro-interacties: Implementeer minimaal twee korte animaties en beschrijf hun effect.
Responsive mockups: Toon hoe je scherm op mobiel, tablet en desktop eruitziet.
Reflectieverslag: Bespreek je keuzes en hoe ze aansluiten bij gebruikersbehoeftes.
Toegankelijkheid en responsive design
Na dit hoofdstuk kun je:
Uitleggen wat webtoegankelijkheid inhoudt en waarom het belangrijk is
Verschillende soorten beperkingen herkennen en meenemen in ontwerpkeuzes
Ontwerpkeuzes maken die bijdragen aan digitale inclusie
Begrijpen wat responsief ontwerp is en waarom het nodig is
Websites beoordelen op toegankelijkheid en schermgeschiktheid
Uitleg
Wat is toegankelijk webdesign?
Toegankelijkheid in webdesign betekent dat iedereen je website goed kan gebruiken — ook mensen met:
een visuele beperking (bijv. kleurenblindheid, slechtziendheid)
motorische beperking (moeite met muisgebruik)
auditieve beperking (bijv. doven of slechthorenden)
cognitieve of leerproblemen (bijv. dyslexie)
een trage internetverbinding of ouder apparaat
📣 “Als je ontwerp alleen werkt voor de ideale gebruiker, dan werkt het niet goed.”
Toegankelijkheid gaat dus over inclusie : niemand wordt buitengesloten vanwege technologie, beperking of situatie.
Waarom is dit belangrijk?
1 op de 5 mensen heeft een tijdelijke of permanente beperking
Toegankelijke websites zijn gebruiksvriendelijker voor iedereen
In veel landen zijn overheden en onderwijsinstellingen wettelijk verplicht om toegankelijk te ontwerpen (WCAG)
Een site die toegankelijk is:
vergroot je bereik
laat zien dat je rekening houdt met anderen
is vaak beter gestructureerd en duidelijker
Basisprincipes van toegankelijkheid
Hieronder staan enkele richtlijnen die bijdragen aan toegankelijkheid:
Richtlijn
Waarom?
Voorbeelden
Goede contrasten
Mensen met slecht zicht kunnen alles goed lezen
Donkere tekst op lichte achtergrond
Grote, duidelijke letters
Beter leesbaar voor iedereen
Minimaal 16px voor normale tekst
Alternatieve tekst bij afbeeldingen
Gebruikers met screenreaders kunnen inhoud begrijpen
![Man met hond]()
Toetsenbord-navigatie
Niet iedereen gebruikt een muis
Menus kunnen via Tab-toets bereikt worden
Duidelijke koppenstructuur
Screenreaders lezen koppen in logische volgorde
Gebruik , , enz. correct
Geen informatie alleen via kleur
Kleurenblinde gebruikers missen anders informatie
Niet alleen rood = fout; gebruik ook een icoon of tekst
Wat is responsief ontwerp (responsive design)?
Responsief ontwerp betekent dat een website zich automatisch aanpast aan het schermformaat van het apparaat.
Dat kan zijn:
🖥️ desktop
📱 mobiel
💻 tablet
Waarom is dat belangrijk?
Meer dan 60% van het internetgebruik gebeurt via mobiele apparaten
Als je site niet goed schaalt, haken gebruikers af
Een goed mobiel ontwerp betekent: eenvoudig, groot genoeg, overzichtelijk
Wat verandert er meestal bij kleinere schermen?
Het menu wordt een hamburgermenu
Elementen worden onder elkaar gezet i.p.v. naast elkaar
Tekst en knoppen worden groter en beter klikbaar
Onnodige of grote elementen worden verborgen
🧠 Ontwerp dus mobile-first of test altijd hoe je ontwerp eruitziet op mobiel.
Test jezelf: is jouw ontwerp toegankelijk?
Hieronder een checklist:
✅ Is je tekst goed leesbaar (kleur, grootte)? ✅ Heb je geen informatie die alleen via kleur wordt overgebracht? ✅ Werken knoppen en links ook met toetsenbord? ✅ Heb je afbeeldingen voorzien van tekst of beschrijving? ✅ Is je ontwerp goed te gebruiken op mobiel én desktop?
Oefeningen
Opdracht A – Ontwerpanalyse: toegankelijk of niet?
Kies een bestaande website. Analyseer de volgende punten:
Zijn de lettertypes goed leesbaar?
Is er genoeg contrast tussen tekst en achtergrond?
Kan je de site met alleen het toetsenbord bedienen?
Worden afbeeldingen beschreven of genegeerd?
Hoe ziet de site eruit op mobiel?
Werk je bevindingen uit in ±200 woorden.
Opdracht B – Je eigen ontwerp verbeteren
Neem je eigen wireframe of ontwerpstijl (van hoofdstuk 3 of 4) en:
Controleer de toegankelijkheid (kleur, tekst, structuur)
Teken een mobiele versie van je ontwerp (layout herschikken!)
Schrijf kort op wat je hebt aangepast en waarom