College 1
Wat is een computer?
• Een computer is een elektronisch apparaat waarmee gegevens met algoritmes*
worden verwerkt. Het kan gegevens opslaan, opvragen en verwerken
• Product ontwerp en interactie ontwerp zijn niet hetzelfde
Een goed interactie ontwerp zorgt dat een product:
• Verbetert hoe mensen werken, communiceren en interacteren (usefulness)
• Mensen ondersteunt in hun dagelijkse activiteiten en het behalen van hun doelen
(effectiveness)
• Makkelijk te gebruiken is (usability)
• Aangenaam is om te gebruiken (user experience)
College 2
Interactietypes & user interface trends
- Productontwerp: discipline die voorafging aan interactieontwerp
• Productontwerp:
-> vorm
-> materiaal
-> ergonomie
-> esthetiek
• Interactieontwerp
-> input gebruiker
-> output systeem’
- De interface (intermediair) waar de interacties tussen de computer en mens
plaatsvinden
• Input (invoer): controle elementen voor het uitvoeren van acties
• Output: informatie vanuit het systeem
- Vijf belangrijke interactietypes
1. instructing
• Opdrachten geven en opties selecteren in interface
2. conversing
• Interactie met een systeem alsof je een gesprek voert
3. manipulating
, • Objecten in een virtuele of fysieke ruimte verplaatsen
4. exploring
• Bewegen door een virtuele of fysieke ruimte (als gebruiker)
5. responding
• Door de computer geïnitieerde interacties waarop gebruikers kunnen reageren
- User interface trends
1. 1960s: eerste HCI wave
• ‘mainframe’ computers bediend door meerdere gebruikers
• Doel: optimaliseren van de aansluiting tussen computer en gebruiker om
bediening mogelijk te maken
-> complexe apparaten, langdurige training noodzakelijk
• Onderzoek was gericht op computer zelf (informatica)
• Interface trends:
-> ponskaart computers (geen scherm, vaak geen toetsenbord)
• user interface:
-> input: gebruikers ponsen gaatjes in kaarten (binaire gegevens), kaarten worden
ingevoerd in computer, mechanisch, geen processor
-> output: ponskaarten (geprinte rapporten)
• command line interfacs
-> input: tekst commando’s via toetsenbord
-> output: tekst op het scherm
2. 1980s: tweede HCI wave
• PC’s gebruik op de werkvloer (1 gebruiker met 1 computer)
• Doel: ondersteunen werkgerelateerde taken (accuraatheid en efficiëntie van
werkprestaties) PC’s werden alleen op de werkvloer gebruikt, nog niet voor
persoonlijk gebruik thuis. Focus op de mens helpen in het doen van zijn werk.
• Onderzoek gericht op cognitiewetenschappen (usability). De PC moest
toegankelijk zijn voor iedereen (om te ondersteunen in werk gerelateerde taken),
niet alleen experts die een langere training hebben gehad.
• Interface trends:
-> grafische user interfaces (niet alleen maar tekst, ook plaatjes en afbeeldingen
etc.)
-> input: tekst via toetsenbord; beweeg cursor & klik met muis om een selectie te
maken uit het menu
-> output: grafisch en tekst via het scherm
• WIMP paradigma: Windows, Icons, Menus, Pointers
, -> niet alleen tekst input, subschermen waarop je dingen kan aanklikken
-> je kon nu meerdere programma’s tegelijkertijd op het scherm hebben, waar je
tussen kon kiezen met cursor
• Grafische user interfaces
-> minder beroep op cognitieve vaardigheden (niet uit het hoofd leren van welke
toets combinaties nodig zijn om een handeling uit te voeren, training niet langer
nodig)
-> een meer logische en intuïtieve navigatie
-> laat multitasking toe (door meerde windows -> hogere productiviteit)
-> esthetiek (kleuren, vormen)
Maar ook:
-> hogere ontwikkelingskosten & computercapaciteit door grafische user
interfaces
-> hogere visuele complexiteit -> aandacht eisen (afleiding, niet te lang hoeven
zoeken naar iets)
-> drie handen nodig (muis, toetsenbord)
-> vrijwel onbeperkte mogelijkheden: hoe begeleid je de gebruiker (menu’s)
• Revolutie: brede invoering van PC
-> privégebruik PC
-> focus op dat het makkelijk is om de PC te gebruiken
• Andere ontwikkelingen
-> full-colour schermen (ontwikkelingen op grafisch gebied; grafisch vormgevers)
-> multimedia
-> lagere kosten hardware -> meer geheugen, sneller
3. 2000s: Derde HCI wave
• Mobiele apparaten gebruikt in het dagelijks leven: gebruik voor privé doeleinden
en in het openbaar, ze konden makkelijk meegenomen worden (mobiel)
• Naast een PC thuis, hadden mensen nu ook computers die ze konden
meenemen (telefoon), meerdere computers per persoon
• Doel: ondersteunen van taken in het dagelijks privéleven, plezier en zelfexpressie
(user experience)
• Onderzoek gefocust op culturele studies, etnografie (observeren gebruikers)
• Miniaturisatie van hardware
• Minder vermogen nodig (batterij)
• Introductie van het internet
-> internet dateert uit de jaren ’60 (overheid, militaire sector, academisch)
-> WWW, het internet dat we nu kennen, dateert uit 1989
-> Web ontwerpers gebruikten de GUI ontwerpprincipes, websites zagen er uit als
GUI software
, -> gebruikersdoel: informatiebron
• Revolutie: Web 2.0
-> participatieve of sociale web
-> gebruikers genereren zelf content
-> rijke user experience
-> voorbeelden: instagram, wordpress (blogs), hyves
• Revolutie: internet, en vooral het sociale web, maakte overal toegang tot
informatie mogelijk, en nieuwe middelen voor zelfexpressie en communicatie
verschoven de focus van pragmatisch ontwerp naar plezierig onderwerp (user
experience design)
• Revolutie: natuurlijke user interfaces (NUI)
-> interacteren met computers op dezelfde manier als we met de fysieke wereld
interacteren
->Voordeel: alledaagse vaardigheden gebruiken die mensen toch al kennen
(praten,schrijven, gebaren)
-> Hoeft niet geleerd te worden (intuïtief)
-> touch & gesture interactie
-> multitouch-interfaces vereisen dat ontwerpers interfaces en interacties
volledig heroverwegen
• Revolutie: hoewel natuurlijke gebruikersinterfaces GUI’s niet hebben vervangen,
hebben zij wel een overgang op gang gebracht van WIMP naar acties die
natuurlijker zijn voor gebruikers, hetgeen nieuwe benaderingen van interactie-
ontwerp vereist.
4. 2020: vierde HCI wave
• Hypermobiliteit, ‘ubiquitous computing’ (verborgen computers), AI
• Computers kunnen steeds meer zonder de inbreng van de mens
• Ontwerpen voor het grotere geheel/algemeen belang, sociale
verantwoordelijkheid
• Onderzoek gefocust op: waarden, ethiek
• Revolutie: ubiquitous objects
-> computers worden onherkenbaar en onzichtbaar
-> dagelijkse objecten worden computers
• Slimme ‘smart’ objects
-> processoren
-> sensoren
-> verbonden (internet)
-> communicatie
• Wearables
-> apple watch
Wat is een computer?
• Een computer is een elektronisch apparaat waarmee gegevens met algoritmes*
worden verwerkt. Het kan gegevens opslaan, opvragen en verwerken
• Product ontwerp en interactie ontwerp zijn niet hetzelfde
Een goed interactie ontwerp zorgt dat een product:
• Verbetert hoe mensen werken, communiceren en interacteren (usefulness)
• Mensen ondersteunt in hun dagelijkse activiteiten en het behalen van hun doelen
(effectiveness)
• Makkelijk te gebruiken is (usability)
• Aangenaam is om te gebruiken (user experience)
College 2
Interactietypes & user interface trends
- Productontwerp: discipline die voorafging aan interactieontwerp
• Productontwerp:
-> vorm
-> materiaal
-> ergonomie
-> esthetiek
• Interactieontwerp
-> input gebruiker
-> output systeem’
- De interface (intermediair) waar de interacties tussen de computer en mens
plaatsvinden
• Input (invoer): controle elementen voor het uitvoeren van acties
• Output: informatie vanuit het systeem
- Vijf belangrijke interactietypes
1. instructing
• Opdrachten geven en opties selecteren in interface
2. conversing
• Interactie met een systeem alsof je een gesprek voert
3. manipulating
, • Objecten in een virtuele of fysieke ruimte verplaatsen
4. exploring
• Bewegen door een virtuele of fysieke ruimte (als gebruiker)
5. responding
• Door de computer geïnitieerde interacties waarop gebruikers kunnen reageren
- User interface trends
1. 1960s: eerste HCI wave
• ‘mainframe’ computers bediend door meerdere gebruikers
• Doel: optimaliseren van de aansluiting tussen computer en gebruiker om
bediening mogelijk te maken
-> complexe apparaten, langdurige training noodzakelijk
• Onderzoek was gericht op computer zelf (informatica)
• Interface trends:
-> ponskaart computers (geen scherm, vaak geen toetsenbord)
• user interface:
-> input: gebruikers ponsen gaatjes in kaarten (binaire gegevens), kaarten worden
ingevoerd in computer, mechanisch, geen processor
-> output: ponskaarten (geprinte rapporten)
• command line interfacs
-> input: tekst commando’s via toetsenbord
-> output: tekst op het scherm
2. 1980s: tweede HCI wave
• PC’s gebruik op de werkvloer (1 gebruiker met 1 computer)
• Doel: ondersteunen werkgerelateerde taken (accuraatheid en efficiëntie van
werkprestaties) PC’s werden alleen op de werkvloer gebruikt, nog niet voor
persoonlijk gebruik thuis. Focus op de mens helpen in het doen van zijn werk.
• Onderzoek gericht op cognitiewetenschappen (usability). De PC moest
toegankelijk zijn voor iedereen (om te ondersteunen in werk gerelateerde taken),
niet alleen experts die een langere training hebben gehad.
• Interface trends:
-> grafische user interfaces (niet alleen maar tekst, ook plaatjes en afbeeldingen
etc.)
-> input: tekst via toetsenbord; beweeg cursor & klik met muis om een selectie te
maken uit het menu
-> output: grafisch en tekst via het scherm
• WIMP paradigma: Windows, Icons, Menus, Pointers
, -> niet alleen tekst input, subschermen waarop je dingen kan aanklikken
-> je kon nu meerdere programma’s tegelijkertijd op het scherm hebben, waar je
tussen kon kiezen met cursor
• Grafische user interfaces
-> minder beroep op cognitieve vaardigheden (niet uit het hoofd leren van welke
toets combinaties nodig zijn om een handeling uit te voeren, training niet langer
nodig)
-> een meer logische en intuïtieve navigatie
-> laat multitasking toe (door meerde windows -> hogere productiviteit)
-> esthetiek (kleuren, vormen)
Maar ook:
-> hogere ontwikkelingskosten & computercapaciteit door grafische user
interfaces
-> hogere visuele complexiteit -> aandacht eisen (afleiding, niet te lang hoeven
zoeken naar iets)
-> drie handen nodig (muis, toetsenbord)
-> vrijwel onbeperkte mogelijkheden: hoe begeleid je de gebruiker (menu’s)
• Revolutie: brede invoering van PC
-> privégebruik PC
-> focus op dat het makkelijk is om de PC te gebruiken
• Andere ontwikkelingen
-> full-colour schermen (ontwikkelingen op grafisch gebied; grafisch vormgevers)
-> multimedia
-> lagere kosten hardware -> meer geheugen, sneller
3. 2000s: Derde HCI wave
• Mobiele apparaten gebruikt in het dagelijks leven: gebruik voor privé doeleinden
en in het openbaar, ze konden makkelijk meegenomen worden (mobiel)
• Naast een PC thuis, hadden mensen nu ook computers die ze konden
meenemen (telefoon), meerdere computers per persoon
• Doel: ondersteunen van taken in het dagelijks privéleven, plezier en zelfexpressie
(user experience)
• Onderzoek gefocust op culturele studies, etnografie (observeren gebruikers)
• Miniaturisatie van hardware
• Minder vermogen nodig (batterij)
• Introductie van het internet
-> internet dateert uit de jaren ’60 (overheid, militaire sector, academisch)
-> WWW, het internet dat we nu kennen, dateert uit 1989
-> Web ontwerpers gebruikten de GUI ontwerpprincipes, websites zagen er uit als
GUI software
, -> gebruikersdoel: informatiebron
• Revolutie: Web 2.0
-> participatieve of sociale web
-> gebruikers genereren zelf content
-> rijke user experience
-> voorbeelden: instagram, wordpress (blogs), hyves
• Revolutie: internet, en vooral het sociale web, maakte overal toegang tot
informatie mogelijk, en nieuwe middelen voor zelfexpressie en communicatie
verschoven de focus van pragmatisch ontwerp naar plezierig onderwerp (user
experience design)
• Revolutie: natuurlijke user interfaces (NUI)
-> interacteren met computers op dezelfde manier als we met de fysieke wereld
interacteren
->Voordeel: alledaagse vaardigheden gebruiken die mensen toch al kennen
(praten,schrijven, gebaren)
-> Hoeft niet geleerd te worden (intuïtief)
-> touch & gesture interactie
-> multitouch-interfaces vereisen dat ontwerpers interfaces en interacties
volledig heroverwegen
• Revolutie: hoewel natuurlijke gebruikersinterfaces GUI’s niet hebben vervangen,
hebben zij wel een overgang op gang gebracht van WIMP naar acties die
natuurlijker zijn voor gebruikers, hetgeen nieuwe benaderingen van interactie-
ontwerp vereist.
4. 2020: vierde HCI wave
• Hypermobiliteit, ‘ubiquitous computing’ (verborgen computers), AI
• Computers kunnen steeds meer zonder de inbreng van de mens
• Ontwerpen voor het grotere geheel/algemeen belang, sociale
verantwoordelijkheid
• Onderzoek gefocust op: waarden, ethiek
• Revolutie: ubiquitous objects
-> computers worden onherkenbaar en onzichtbaar
-> dagelijkse objecten worden computers
• Slimme ‘smart’ objects
-> processoren
-> sensoren
-> verbonden (internet)
-> communicatie
• Wearables
-> apple watch
