SAMENVATTING (HCI)
HUMAN COMPUTER INTERACTION
Roos Klaassen - 2020-2021
,Chapter 1 – The Elements of User Experience
Wat is Interactie
hummeniteracton: gaat over de interactie tussen mens en computer.
soorten input soorten output:
voice commando's voice commando's
In typen print
klikken met de muis trillen
touchscreens
Schudden / bewegen
Beeld
Interactieve media: gaat over de interactie tussen verschillende mensen en de computer.
The Five planes:
Surface: Series van web pagina's opgemaakt met afbeeldingen en
tekst.
Skeleton: Waar komen de button de tekst en de afbeeldingen op een
website?
Structure: Hoe gaan gebruikers naar een pagina? Wat is voor jou
gebruiker de beste manier van informatie is?
Scope: gaat over de omvang, waar begint de opdracht en waar houd
het op. Wat heeft de gebruiker functioneel en inhoudelijk nodig.
Strategy: gebruikers behoefte en product doelen.
Context is van belang!
User Experience Hierarchy of Needs model
Meaningful: Dit is persoonlijk en subjectief
Pleasurable: gericht op emotie
Usable and convenient: Het fijn en gemakkelijk maken om te
gebruiken.
Reliable: Vertrouwen bruikbaarheid/ gegevens
Functional: useful, ideeën beginnen als functionele oplossing voor
een probleem.
Patterns
Design patterns: zijn terugkerende oplossingen die veel voorkomende ontwerp problemen oplossen.
Patroon die steeds terugkomt, mensen weten al hoe dit werkt.
1
,Design principles
Design principles: zorgt ervoor dat je ontwerp beter wordt.
1. Aesthetics: een mooie interface, dit zorgt ervoor dat het leuker/fijner is om te gebruiken.
• Voorbeelden: Tekst, kleuren, contrast, subtiele overgangen.
2. Clarity: duidelijkheid/ helder, hiërarchie
• Microsoft Word: Een hover over de buttons in waarbij een tooltip tevoorschijn komt om uit te leggen
wat de functie is.
• Google: richt de aandacht van de gebruiker op slechts één ding: zoeken.
• Trivago: De website van Trivago is clear. De gebruiker wordt niet afgeleid van overige elementen.
3. Concision: beknoptheid, niet teveel op het scherm. Kort en bondig mogelijk. LESS IS MORE
• IOS Volume: De volumeregelaars van Iphone geven een balk weer dat je omhoog en omlaag kan
vegen voor harder/zachter volume
• IOS Notes: Het keyboard komt alleen tevoorschijn wanneer je deze nodig hebt.
• Autocorrectie: Wanneer de user een woord verkeerd typt, past je device autocorrectie toe.
• Emoji: Als de gebruiker de naam van een emoji intypt in Whatsapp, verschijnt er een emoji.
4. Consistency: elementen herhalen zodat users dit gaan herkennen (navigatie, huisstijl)
• Microsoft Office: De UI van Microsoft Officepakket (Word, Exel, PowerPoint).
• Gmail: De taal die voor deze mappen wordt gebruikt, vertoont consistentie omdat deze de labels
"Inbox", "Drafts" en "Spam" gebruikt - allemaal bekend voor iedereen die in het verleden
e- mailtoepassingen heeft gebruikt.
• Apple & Microsoft website: Microsoft en Apple plaatsen hun logo linksboven en het zoekveld
rechtsboven op hun websites. Deze vorm van consistentie in de lay-out helpt gebruikers zich minder
gedesoriënteerd te voelen wanneer ze door een nieuwe en onbekende site bladeren
• Youtube: Van een website voor het delen van video's zoals YouTube wordt uiteraard verwacht dat
deze een videospeler heeft. Dit is een goed voorbeeld van consistentie, omdat de functies en
functionaliteit van de site ondersteunen wat de gebruiker verwacht.
5. Efficiency: gebruik shortcuts en zorg dat het zo weinig mogelijk tijd en moeite kost.
• IOS Camera: Op het scherm klikken om de focus van de lens in te stellen.
• Bedieningspaneel op de iPhone: Omhoog slepen om helderheid van je device lichter/donker in te
stellen.
• Vingerafdrukscanner: Bij het downloaden van een app in de Play store scan je je vinger op de
telefoon om de download te voltooien of om je telefoon van het slot te halen.
2
, 6. Familiarity: elementen gebruiken die users kennen,
• Hamburgermenu
• Prullenbak
• Winkelwagen
• Download buttons
7. Forgiveness: reactie op fouten van de user.
• Photoshop: Undo button in Photoshop om je fout te herstellen
• Prullenbak: Bij het verwijderen van bestanden kun je ze terughalen.
• Google: De bekende “Did you mean” tekst die verschijnt als je een zin niet correct geschreven hebt.
• Gmail: Bij het verwijderen van een email verschijnt er links onder het beeld een optie waarbij de
gebruiker de verwijderde e mail ongedaan kunt maken.
8. Responsiveness: feedback geven aan de user over wat er gaat gebeuren/of iets gelukt is
• Laad icoontje
3
HUMAN COMPUTER INTERACTION
Roos Klaassen - 2020-2021
,Chapter 1 – The Elements of User Experience
Wat is Interactie
hummeniteracton: gaat over de interactie tussen mens en computer.
soorten input soorten output:
voice commando's voice commando's
In typen print
klikken met de muis trillen
touchscreens
Schudden / bewegen
Beeld
Interactieve media: gaat over de interactie tussen verschillende mensen en de computer.
The Five planes:
Surface: Series van web pagina's opgemaakt met afbeeldingen en
tekst.
Skeleton: Waar komen de button de tekst en de afbeeldingen op een
website?
Structure: Hoe gaan gebruikers naar een pagina? Wat is voor jou
gebruiker de beste manier van informatie is?
Scope: gaat over de omvang, waar begint de opdracht en waar houd
het op. Wat heeft de gebruiker functioneel en inhoudelijk nodig.
Strategy: gebruikers behoefte en product doelen.
Context is van belang!
User Experience Hierarchy of Needs model
Meaningful: Dit is persoonlijk en subjectief
Pleasurable: gericht op emotie
Usable and convenient: Het fijn en gemakkelijk maken om te
gebruiken.
Reliable: Vertrouwen bruikbaarheid/ gegevens
Functional: useful, ideeën beginnen als functionele oplossing voor
een probleem.
Patterns
Design patterns: zijn terugkerende oplossingen die veel voorkomende ontwerp problemen oplossen.
Patroon die steeds terugkomt, mensen weten al hoe dit werkt.
1
,Design principles
Design principles: zorgt ervoor dat je ontwerp beter wordt.
1. Aesthetics: een mooie interface, dit zorgt ervoor dat het leuker/fijner is om te gebruiken.
• Voorbeelden: Tekst, kleuren, contrast, subtiele overgangen.
2. Clarity: duidelijkheid/ helder, hiërarchie
• Microsoft Word: Een hover over de buttons in waarbij een tooltip tevoorschijn komt om uit te leggen
wat de functie is.
• Google: richt de aandacht van de gebruiker op slechts één ding: zoeken.
• Trivago: De website van Trivago is clear. De gebruiker wordt niet afgeleid van overige elementen.
3. Concision: beknoptheid, niet teveel op het scherm. Kort en bondig mogelijk. LESS IS MORE
• IOS Volume: De volumeregelaars van Iphone geven een balk weer dat je omhoog en omlaag kan
vegen voor harder/zachter volume
• IOS Notes: Het keyboard komt alleen tevoorschijn wanneer je deze nodig hebt.
• Autocorrectie: Wanneer de user een woord verkeerd typt, past je device autocorrectie toe.
• Emoji: Als de gebruiker de naam van een emoji intypt in Whatsapp, verschijnt er een emoji.
4. Consistency: elementen herhalen zodat users dit gaan herkennen (navigatie, huisstijl)
• Microsoft Office: De UI van Microsoft Officepakket (Word, Exel, PowerPoint).
• Gmail: De taal die voor deze mappen wordt gebruikt, vertoont consistentie omdat deze de labels
"Inbox", "Drafts" en "Spam" gebruikt - allemaal bekend voor iedereen die in het verleden
e- mailtoepassingen heeft gebruikt.
• Apple & Microsoft website: Microsoft en Apple plaatsen hun logo linksboven en het zoekveld
rechtsboven op hun websites. Deze vorm van consistentie in de lay-out helpt gebruikers zich minder
gedesoriënteerd te voelen wanneer ze door een nieuwe en onbekende site bladeren
• Youtube: Van een website voor het delen van video's zoals YouTube wordt uiteraard verwacht dat
deze een videospeler heeft. Dit is een goed voorbeeld van consistentie, omdat de functies en
functionaliteit van de site ondersteunen wat de gebruiker verwacht.
5. Efficiency: gebruik shortcuts en zorg dat het zo weinig mogelijk tijd en moeite kost.
• IOS Camera: Op het scherm klikken om de focus van de lens in te stellen.
• Bedieningspaneel op de iPhone: Omhoog slepen om helderheid van je device lichter/donker in te
stellen.
• Vingerafdrukscanner: Bij het downloaden van een app in de Play store scan je je vinger op de
telefoon om de download te voltooien of om je telefoon van het slot te halen.
2
, 6. Familiarity: elementen gebruiken die users kennen,
• Hamburgermenu
• Prullenbak
• Winkelwagen
• Download buttons
7. Forgiveness: reactie op fouten van de user.
• Photoshop: Undo button in Photoshop om je fout te herstellen
• Prullenbak: Bij het verwijderen van bestanden kun je ze terughalen.
• Google: De bekende “Did you mean” tekst die verschijnt als je een zin niet correct geschreven hebt.
• Gmail: Bij het verwijderen van een email verschijnt er links onder het beeld een optie waarbij de
gebruiker de verwijderde e mail ongedaan kunt maken.
8. Responsiveness: feedback geven aan de user over wat er gaat gebeuren/of iets gelukt is
• Laad icoontje
3
