NL Samenvatting - Human Computer Interaction
+ bonus hoofdstukken + voorbeeld spiekbriefje + tips
Hoofdstuk 1
Wat is interactie?
Human computer interaction:
Het gaat om de interactie tussen mens en computer.
Het moet positieve invloed hebben op de mens, iets toevoegen.
Elke gebruiker heeft een doel binnen context
Interactieve media:
Het gaat over de interactie tussen verschillende mensen en computer.
Input en output
Computers reageren met output op input van de gebruiker.
Input is wat wij geven aan de computer. Bijvoorbeeld faceID, toetsenbord en muis.
Wij doen iets en er gebeurt wat. Output is wat de computer aan ons geeft, bijvoorbeeld het beeldscherm, audio. Ze
reageren op onze input.
Wat zorgt voor een goede User Interface?
Wat maakt een goede user interface?
1. Aesthetics: Een interface die er aantrekkelijk uitziet houd een gebruiker langer tevreden.
2. Clarity: Een mooie samenhang. Denk aan tekst, typografie, sfeer, etc.
3. Concision: Overzichtelijk en weten waar je moet zijn.
4. Consistency: Patronen in je applicatie laten terugkomen.
5. Efficiency: Werkt makkelijk en snel
6. Familiarity: Bekende elementen laten terugkomen.
7. Forgiveness: Makkelijk iets ongedaan maken. Denk aan verwijderde items terughalen in de prullenbak.
8. Responsiveness: Hoe goed en snel de applicatie reageert op de gebruiker zijn input. Bijvoorbeeld als je op een
knop drukt wordt hij rood zodat je weet dat hij reageert.
The 5 planes
Tip: The 5 planes komt elk jaar in het CMD tentamen terug als eerste
vraag. Schrijf daarom dit goed over op je spiekbriefje.
The Surface Plane
Hoe de website eruit ziet (afbeeldingen/tekst).
The Skeleton Plane
Plaatsing van knoppen, menu’s, afbeeldingen en tekst.
The Structure Plane
Hoe op de website gekomen en waar ze naar toe moeten gaan als ze
klaar zijn.
The Scope Plane
Data opslaan om dit te gebruiken voor het verbeteren van de
website/interactie.
The Strategy Plane
Doel/strategie van de website
Deze 5 lagen bij elkaar vormen een structuur voor het praten over user experience problemen en de tools om ze op te
lossen. Elke laag hangt van elkaar af, de surface hangt af van het skelet welke weer afhangt van de structure, ga zo maar
door. Deze verantwoordelijkheid betekent dus dat een keuze op the strategy plane er voor zorgt dat alles daarboven ook
zal veranderen. Dit noem je het ‘ripple effect’ ook wel ‘kettingreactie’. In de realiteit zijn de lijnen in het model die de
scheidingen aangeeft niet zo duidelijk. Sommige User Experience problemen hebben op meerdere vlakken tegelijk
aandacht nodig.
,Usability
Verwijderen van obstakels die in de weg liggen voor een goede ervaring. Producten die al langer in gebruik zijn door de
mens vormen de basis van User Experience Hierarchy of Needs model, waarin technologische producten en services
ervaring worden behandeld door 6 levels van maturity.
De 6 levels:
1. Functionality
ideeën beginnen vaak als functionele oplossing. Elk technische ondervinding begint
met als uitgangspunt functionaliteit, design komt later.
2. Reliable
De gebruiker moet zich veilig voelen tijdens het proces vooral wanneer er persoonlijke
data van pas komt. Zonder dit vertrouwen kom je niet ver.
3. Usable and convenient
Beide pas je toe om om iets makkelijker te gebruiken. Usable wordt de focus het
meest gelegd op het oplossen van een probleem en bij convenient wil je het probleem
van te voren voorkomen.
4. Pleasurable
Iets wat blijft hangen bij de gebruiker. Dit kan je bereiken door: vriendelijkheid,
uiterlijk, humor, interesse wekken, etc.
5. Meaningful
Een boodschap overbrengen waarbij emoties, gevoelens of gedachten worden
opgeroepen.
Design Patterns
Christopher Alexander beschrijft een patroon als ‘’a problem which occurs over and over again in our environment and then
describes the core of the solution to that problem.’’ - A Pattern Language: Towns, Buildings, Construction
Later werden patronen ook in software toegevoegd.
-Design Patterns: Elements of Reusable Object-Oriented /software- Gang of four
Elementen in een ontwerpproces:
• Field research: Onderzoek wie je doelgroep is en wat ze doen
• Goal and task analysis: Duidelijk maken waarvoor gebruikers jouw product gaan gebruiken
• Design models: Net zoals persona’s, veel voorkomende scenario's en prototypes
• Empirical testing of design: Denk aan usability testen en ‘in situational’ -observaties
• Enough time to iterate over several versions
Verschillende manieren om een patroon toe te passen
• Learning: Door je kennis van interface design uit te breiden, kan je een beter ontwerp maken
• Examples: Inspiratie opdoen in voorbeelden
• Terminology: Vaktermen
• Inspiration: Inspiratie uit patterns halen
User Interface gaat niet alleen over knoppen en menu’s; het gaat om de interactie tussen de gebruiker en de app/device.
Het gaat niet om hoe het er uit ziet maar hoe het werkt.
Wat maakt een goede User Interface?
Alle interfaces hebben 8 kwaliteiten gemeen namelijk;
1. Clarity: Dit kan je bereiken door verschillende aspecten, denk aan taal, sfeer, samenhang.
2. Concision: Balans tussen te veel en te weinig duidelijkheid
3. Responsiveness: Snelheid van het interface en feedback geven aan de gebruiker (betaling is voltooid)
4. Familiarity: Elementen die gebruikers al kennen zonder ooit de website te hebben bezocht
5. Consistency: Door gebruik te maken van herhaling in je design ontwikkel je een herkenbaar patroon voor de
gebruiker
6. Aesthetics: Het design er mooi uit laten zien
7. Efficiency: Design moet snel en makkelijk werken (shortcuts)
8. Forgiveness: Lets ongedaan kunnen maken/verbeteren wanneer de gebruiker een fout maakt
Web Accessibility
Voor gebruikers met disabilities zoals doof en blind was het internet een groot succes. Voorheen was de krant met Braille
erg duur en waren er geen audiotapes beschikbaar. Later kwamen er speciale keyboards en oogbesturing software.
, Principles of User Interface Design
1. Clarity is job #1: Duidelijkheid van de interface
2. Interfaces exist to enable interaction: interfaces bestaan om interactie mogelijk te maken
3. Conserve attention at all costs: aandacht behouden van de gebruiker
4. Keep users in control: de gebruiker moet het gevoel hebben dat hij de controle heeft.
5. Direct manipulation is best: Directe manipulatie is het meest duidelijk
6. One primary action per screen: max. 1 actie per scherm
7. keep secondary action secondary: Houd belangrijke dingen groot, minder belangrijke dingen klein
8. Provide a natural next step: Dat de volgende stap duidelijk is
9. Appearance follows behavior: een UI moet in één te begrijpen zijn
10. Consistency matters: patronen op dezelfde manier herhalen
11. Strong visual hierarchy works best: Goede vormgeving is belangrijk
12. Smart organization reduces cognitive load: Structureer de UI
13. Highlight, don’t determine , with color: Kleur zou niet de enige onderscheidende factor moeten zijn.
14. Progressive disclosure: Toon alleen het vereiste op het scherm
15. Help people inline: Beginners moeten hulp kunnen inschakelen
16. A crucial moment: the zero state: Begeleiding voor beginners
17. Great design is invisible: Een foutloos ontwerp valt niet op
18. Build on other design disciplines: Bouw voort op andere ontwerpdisciplines
19. Interfaces exist to be used: Een interface ontwerp is succesvol wanneer het gebruikt wordt
Principles of Accessible Design
1. Provide appropriate text: alternatieve tekst
2. Provide headings for data tables: headers gebruiken <th>
3. Ensure links make sense out of context:titels moeten duidelijk verwoord zijn
4. Ensure users can complete and submit forms: Elk element moet een label hebben <label>. Zorg dat gebruikers
fouten kunnen herstellen.
5. Ensure accessibility of non-HTML content: alle UI moet toegankelijk zijn
6. Caption and/or provide transcripts for media: Foto/video moeten een beschrijving hebben
7. Do not rely on color alone to convey meaning: Gebruik niet alleen kleur om een betekenis over te brengen
8. Make sure content is clearly written and easy to read: Maak gebruik van goede typografie en schrijf duidelijk
9. Allow users to skip repetitive elements: gebruik een ‘overslaan’ optie
10. Make JavaScript accessible: Zowel met muis en zonder muis te gebruiken
11. Design to standards: Ontwerp volgens normen (HTML>CSS)
Screen reader
Screen readers is een systeem die tekst veranderd in spraak (een stuk tekst wordt voorgelezen)
Dit zijn alle functies die de screen reader kunnen leveren:
• pauses for periods
• Users can pause the screen reader
• Pronounce acronyms
NASA, SQL, NFS, URL
• Announce headings (<h1>)
• Announce the page title (<title>)
• Ignore images without alternative text
• Announce the number of links
• Say ‘’same page link’’
• Can be thrown off by homographs
• Inform the user how many rows and columns
• Inform users when they have entered into a form
• Read letters out loud as you type them
• May or may not read out punctuation
Hieronder staat benoemd welke screen reader je het beste bij elke browser kan gebruiken.
Browser Screen reader
Firefox NVDA
Chrome/Internet Explorer JAWS
+ bonus hoofdstukken + voorbeeld spiekbriefje + tips
Hoofdstuk 1
Wat is interactie?
Human computer interaction:
Het gaat om de interactie tussen mens en computer.
Het moet positieve invloed hebben op de mens, iets toevoegen.
Elke gebruiker heeft een doel binnen context
Interactieve media:
Het gaat over de interactie tussen verschillende mensen en computer.
Input en output
Computers reageren met output op input van de gebruiker.
Input is wat wij geven aan de computer. Bijvoorbeeld faceID, toetsenbord en muis.
Wij doen iets en er gebeurt wat. Output is wat de computer aan ons geeft, bijvoorbeeld het beeldscherm, audio. Ze
reageren op onze input.
Wat zorgt voor een goede User Interface?
Wat maakt een goede user interface?
1. Aesthetics: Een interface die er aantrekkelijk uitziet houd een gebruiker langer tevreden.
2. Clarity: Een mooie samenhang. Denk aan tekst, typografie, sfeer, etc.
3. Concision: Overzichtelijk en weten waar je moet zijn.
4. Consistency: Patronen in je applicatie laten terugkomen.
5. Efficiency: Werkt makkelijk en snel
6. Familiarity: Bekende elementen laten terugkomen.
7. Forgiveness: Makkelijk iets ongedaan maken. Denk aan verwijderde items terughalen in de prullenbak.
8. Responsiveness: Hoe goed en snel de applicatie reageert op de gebruiker zijn input. Bijvoorbeeld als je op een
knop drukt wordt hij rood zodat je weet dat hij reageert.
The 5 planes
Tip: The 5 planes komt elk jaar in het CMD tentamen terug als eerste
vraag. Schrijf daarom dit goed over op je spiekbriefje.
The Surface Plane
Hoe de website eruit ziet (afbeeldingen/tekst).
The Skeleton Plane
Plaatsing van knoppen, menu’s, afbeeldingen en tekst.
The Structure Plane
Hoe op de website gekomen en waar ze naar toe moeten gaan als ze
klaar zijn.
The Scope Plane
Data opslaan om dit te gebruiken voor het verbeteren van de
website/interactie.
The Strategy Plane
Doel/strategie van de website
Deze 5 lagen bij elkaar vormen een structuur voor het praten over user experience problemen en de tools om ze op te
lossen. Elke laag hangt van elkaar af, de surface hangt af van het skelet welke weer afhangt van de structure, ga zo maar
door. Deze verantwoordelijkheid betekent dus dat een keuze op the strategy plane er voor zorgt dat alles daarboven ook
zal veranderen. Dit noem je het ‘ripple effect’ ook wel ‘kettingreactie’. In de realiteit zijn de lijnen in het model die de
scheidingen aangeeft niet zo duidelijk. Sommige User Experience problemen hebben op meerdere vlakken tegelijk
aandacht nodig.
,Usability
Verwijderen van obstakels die in de weg liggen voor een goede ervaring. Producten die al langer in gebruik zijn door de
mens vormen de basis van User Experience Hierarchy of Needs model, waarin technologische producten en services
ervaring worden behandeld door 6 levels van maturity.
De 6 levels:
1. Functionality
ideeën beginnen vaak als functionele oplossing. Elk technische ondervinding begint
met als uitgangspunt functionaliteit, design komt later.
2. Reliable
De gebruiker moet zich veilig voelen tijdens het proces vooral wanneer er persoonlijke
data van pas komt. Zonder dit vertrouwen kom je niet ver.
3. Usable and convenient
Beide pas je toe om om iets makkelijker te gebruiken. Usable wordt de focus het
meest gelegd op het oplossen van een probleem en bij convenient wil je het probleem
van te voren voorkomen.
4. Pleasurable
Iets wat blijft hangen bij de gebruiker. Dit kan je bereiken door: vriendelijkheid,
uiterlijk, humor, interesse wekken, etc.
5. Meaningful
Een boodschap overbrengen waarbij emoties, gevoelens of gedachten worden
opgeroepen.
Design Patterns
Christopher Alexander beschrijft een patroon als ‘’a problem which occurs over and over again in our environment and then
describes the core of the solution to that problem.’’ - A Pattern Language: Towns, Buildings, Construction
Later werden patronen ook in software toegevoegd.
-Design Patterns: Elements of Reusable Object-Oriented /software- Gang of four
Elementen in een ontwerpproces:
• Field research: Onderzoek wie je doelgroep is en wat ze doen
• Goal and task analysis: Duidelijk maken waarvoor gebruikers jouw product gaan gebruiken
• Design models: Net zoals persona’s, veel voorkomende scenario's en prototypes
• Empirical testing of design: Denk aan usability testen en ‘in situational’ -observaties
• Enough time to iterate over several versions
Verschillende manieren om een patroon toe te passen
• Learning: Door je kennis van interface design uit te breiden, kan je een beter ontwerp maken
• Examples: Inspiratie opdoen in voorbeelden
• Terminology: Vaktermen
• Inspiration: Inspiratie uit patterns halen
User Interface gaat niet alleen over knoppen en menu’s; het gaat om de interactie tussen de gebruiker en de app/device.
Het gaat niet om hoe het er uit ziet maar hoe het werkt.
Wat maakt een goede User Interface?
Alle interfaces hebben 8 kwaliteiten gemeen namelijk;
1. Clarity: Dit kan je bereiken door verschillende aspecten, denk aan taal, sfeer, samenhang.
2. Concision: Balans tussen te veel en te weinig duidelijkheid
3. Responsiveness: Snelheid van het interface en feedback geven aan de gebruiker (betaling is voltooid)
4. Familiarity: Elementen die gebruikers al kennen zonder ooit de website te hebben bezocht
5. Consistency: Door gebruik te maken van herhaling in je design ontwikkel je een herkenbaar patroon voor de
gebruiker
6. Aesthetics: Het design er mooi uit laten zien
7. Efficiency: Design moet snel en makkelijk werken (shortcuts)
8. Forgiveness: Lets ongedaan kunnen maken/verbeteren wanneer de gebruiker een fout maakt
Web Accessibility
Voor gebruikers met disabilities zoals doof en blind was het internet een groot succes. Voorheen was de krant met Braille
erg duur en waren er geen audiotapes beschikbaar. Later kwamen er speciale keyboards en oogbesturing software.
, Principles of User Interface Design
1. Clarity is job #1: Duidelijkheid van de interface
2. Interfaces exist to enable interaction: interfaces bestaan om interactie mogelijk te maken
3. Conserve attention at all costs: aandacht behouden van de gebruiker
4. Keep users in control: de gebruiker moet het gevoel hebben dat hij de controle heeft.
5. Direct manipulation is best: Directe manipulatie is het meest duidelijk
6. One primary action per screen: max. 1 actie per scherm
7. keep secondary action secondary: Houd belangrijke dingen groot, minder belangrijke dingen klein
8. Provide a natural next step: Dat de volgende stap duidelijk is
9. Appearance follows behavior: een UI moet in één te begrijpen zijn
10. Consistency matters: patronen op dezelfde manier herhalen
11. Strong visual hierarchy works best: Goede vormgeving is belangrijk
12. Smart organization reduces cognitive load: Structureer de UI
13. Highlight, don’t determine , with color: Kleur zou niet de enige onderscheidende factor moeten zijn.
14. Progressive disclosure: Toon alleen het vereiste op het scherm
15. Help people inline: Beginners moeten hulp kunnen inschakelen
16. A crucial moment: the zero state: Begeleiding voor beginners
17. Great design is invisible: Een foutloos ontwerp valt niet op
18. Build on other design disciplines: Bouw voort op andere ontwerpdisciplines
19. Interfaces exist to be used: Een interface ontwerp is succesvol wanneer het gebruikt wordt
Principles of Accessible Design
1. Provide appropriate text: alternatieve tekst
2. Provide headings for data tables: headers gebruiken <th>
3. Ensure links make sense out of context:titels moeten duidelijk verwoord zijn
4. Ensure users can complete and submit forms: Elk element moet een label hebben <label>. Zorg dat gebruikers
fouten kunnen herstellen.
5. Ensure accessibility of non-HTML content: alle UI moet toegankelijk zijn
6. Caption and/or provide transcripts for media: Foto/video moeten een beschrijving hebben
7. Do not rely on color alone to convey meaning: Gebruik niet alleen kleur om een betekenis over te brengen
8. Make sure content is clearly written and easy to read: Maak gebruik van goede typografie en schrijf duidelijk
9. Allow users to skip repetitive elements: gebruik een ‘overslaan’ optie
10. Make JavaScript accessible: Zowel met muis en zonder muis te gebruiken
11. Design to standards: Ontwerp volgens normen (HTML>CSS)
Screen reader
Screen readers is een systeem die tekst veranderd in spraak (een stuk tekst wordt voorgelezen)
Dit zijn alle functies die de screen reader kunnen leveren:
• pauses for periods
• Users can pause the screen reader
• Pronounce acronyms
NASA, SQL, NFS, URL
• Announce headings (<h1>)
• Announce the page title (<title>)
• Ignore images without alternative text
• Announce the number of links
• Say ‘’same page link’’
• Can be thrown off by homographs
• Inform the user how many rows and columns
• Inform users when they have entered into a form
• Read letters out loud as you type them
• May or may not read out punctuation
Hieronder staat benoemd welke screen reader je het beste bij elke browser kan gebruiken.
Browser Screen reader
Firefox NVDA
Chrome/Internet Explorer JAWS
