Human Computer Interaction voor CIW
Minicollege: wat is (nieuwe) media?
Nieuwe media
Wat is een medium?
Gemeenschappelijke domeinspecifieke definities:
- Kunst: materialen en technieken die een kunstenaar
gebruikt om kunst te maken
- Biologie: materialen waarin leven (bijv. bacteriën) in
stand kan worden gehouden
- Natuurkunde: materialen waardoor golven en energie
zich voortplanten
- Communicatie: verkooppunten en hulpmiddelen die worden gebruikt om informatie of gegevens op te slaan en
te leveren
Sterling (1995-2001) – Dode media
‘Tragische en onvermijdelijke einde van de meeste (zo
niet alle) media.’
- Dode media = media die verouderd zijn of zijn
vergeten
Oude media
= Vormen van analoge, in plaats van digitale, media
die nog steeds in gebruik zijn
- Televisie, radio, kranten
- Oude media die nog steeds in gebruik zijn,
worden vaak aangevuld met ‘nieuwe’ media
Bolter (2000) – Remediatie
Remediatie = de integratie van kenmerken van een oud medium naar een nieuw medium
Voorbeelden:
- Film gebruikt tekst vergelijkbaar met theater
- Computerspellen gebruiken verhalen uit films
- Nieuwswebsites gebruiken lay-outs die vergelijkbaar zijn met kranten
De inhoud van media blijft hetzelfde
Nieuwe media
= vormen van media die hun oorsprong hebben van computers, zijn computationeel en vertrouwen op computers
voor herdistributie (digitaal)
Voorbeelden:
- Smartphones
- Computers
- Vituele werelden
- Computerspellen
- Mens-computerinterfaces
- Sociale robots
- Spraakinterfaces
- Virtuele assistentie
- Interactieve museuminstallsaties
- Smart home
Belangrijkste aspect: hoog niveau van interactie
Opkomende media = communicatiekanalen die bekend worden als onderdeel van een lange evolutie van onze
communicatiearchitectuur.
,Minicollege: wat is interaction design?
Productdesign Interactiedesign
- Vorm - Vorm
- Materiaal - Materiaal
- Ergonomie - Ergonomie
- Esthetiek - Eshetiek
- Communicatie tussen gebruikers
- Reactie systeem
- Input gebruiker
Interactiedesign
- Ontwerpen van interactieve producten om de manier van communicatie en interactie van mensen in hun
dagelijks en werkende leven te ondersteunen
- Het ontwerpen van interactieve producten en diensten waarbij een ontwerper zich op de ontwikkeling van het
item om de manier waarop gebruikers ermee omgaan erbij te betrekken
Gaat over:
- Ontwerpen van interactie tussen gebruiker en product
- Ontwerpen van interactie en communicatie tussen mensen
Ontwerpen van goede interacties
Goede interacties zorgen ervoor dat een product/dienst:
- De manier waarop mensen werken, communiceren en interacteren verbetert (usefullness)
- Mensen ondersteunt bij het bereiken van hun doelen en activiteiten (effectiveness)
- Makkelijk in gebruik is (usability)
- Prettig in gebruik is (user experience (UX))
Interactieontwerp vereist multidisciplinariteit
- Hardware
- Software
- Design
- Business
- Manufacturing
- Strategie
- Marketing
Gebruikers
- Gedrag
- Cognitie
- Emoties
- Communicatie
HC1 Basisconcepten en theorieën deel 1
Ontwerpen mens-computer interacties
Basisconcepten en theorieën
- Gebruiker – ontwerper – techniek
Innovatieve en creatieve ontwerpprocessen
Complex nieuw en veranderend medialandschap
Complexe en veranderende behoeften
- Opkomende media (VR etc.)
Computer = elektronisch apparaat waarmee gegevens met algoritmes* worden verwerkt. Het kan gegevens opslaan,
opvragen en verwerken
*Algoritme = aantal stappen dat je zet om een bepaald doel te bereiken
,HC2 Basisconcepten en theorieën deel 2
Interactietypes & User interface trends
Productontwerp interactieontwerp
- Vorm
- Materiaal
- Ergonomie
- Esthetiek
Verschillen tussen product en interactieproduct:
- Interactieproduct + output systeem en input gebruiker + communicatie tussen gebruikers
User interface (UI) (gebruiksinterface)
De interface (intermediair) waar de interacties tussen computer en mens plaatsvinden
- Input (invoer): controle elementen voor het uitvoeren van acties
- Output: informatie vanuit het systeem
Interactietypes
→ Boek H7
Vijf belangrijkste interactietypes
1. Instructing = opdrachten geven en opties selecteren
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
5. Responding = door de computer geïnitieerde interacties waarop gebruikers kunnen reageren
User interface trends
Waves of HCI
Eerste HCI wave Tweede HCI wave
Piek ‘60 Piek ‘80
Context Mainframe computers bediend door Context Pc’s gebruikt op de werkvloer
meerdere gebruikers HCI doel Ondersteunen van werk gerelateerde
HCI doel Optimaliseren van de aansluiting taken, bijv. de accuraatheid en
tussen computer en gebruiker om efficiëntie van de werkpresentaties
bediening mogelijk te maken Onderzoek Cognitiewetenschappen
Onderzoek Informatica → Usability
, Derde HCI wave Vierde HCI wave
Piek ’00 (deze eeuw) Periode Nu!
Context Mobiele apparaten gebruikt in het Context Hypermobiliteit, ‘ubiquitous computing’
dagelijks leven: prive-doeleinden en in (computers die er niet uitzien als
het openbaar computers), AI
HCI doel Ondersteunen taken in het dagelijks HCI doel Ontwerpen voor het grotere geheel /
(prive) leven, plezier en zelfexpressie algemeen belang, sociale
→ UX (User experience) verantwoordelijkheid
Onderzoek Culturele studies, ethnografie Onderzoek Waarden
Interface trends in de verschillende waves
Wave 1
Ponskaart computers (’50)
- User interface
- Input: gebruikers ponsen gaatjes in kaarten (binaire gegevens), kaarten worden ingevoerd in computer
- Output: ponskaarten (of geprinte rapporten)
→ Instructing
Command-line interfaces (’60-’70)
- User interface
- Input: text-commando’s via toetsenbord
- Output: text op het scherm (unicolour)
→ Instructing
Wave 2
Grafische user interfaces (Xerox Alto, 1973)
- Input: text via toetsenbord; beweeg cursor en klik met muis om een selectie te maken uit het menu
- Output: grafisch en text via het scherm
- WIMP (Windows Icons Menus Pointers)
- WYSIWYG (What You See Is What You Get)
Grafische User Interface (GUI)
+ Minder beroep op cognitieve vaardigheden (geheugen, − Hogere ontwikkelingskosten en
leren) computercapaciteit
+ Een meer logische en intuïtieve navigatie − Hogere (visuele) complexiteit → aandachtseisen
(mogelijk…) (afleiding)
+ Laat multitasken toe − 3 handen nodig
+ Esthetiek − Vrijwel onbeperkte mogelijkheden: hoe begeleid je
de gebruiker?
Revolution: widespread introduction of the PC
Verdere ontwikkelingen (’80-’90)
- Full-colour schermen
- Multimedia
- Lagere kosten hardware → meer geheugen, sneller
→ Exploring
- Miniaturisatie van hardware
- Minder vermogen nodig (batterij) Draagbaarheid
Introductie van het internet
- Internet dateert uit ’60 (overheid VS, militair en academische toepassing)
- WWW, het internet dat we nu kennen, dateert uit 1989 (Tim Berners-Lee)
- Webgebruikers gebruikten de GUI ontwerpprincipes, websites zagen eruit als GUI software
Minicollege: wat is (nieuwe) media?
Nieuwe media
Wat is een medium?
Gemeenschappelijke domeinspecifieke definities:
- Kunst: materialen en technieken die een kunstenaar
gebruikt om kunst te maken
- Biologie: materialen waarin leven (bijv. bacteriën) in
stand kan worden gehouden
- Natuurkunde: materialen waardoor golven en energie
zich voortplanten
- Communicatie: verkooppunten en hulpmiddelen die worden gebruikt om informatie of gegevens op te slaan en
te leveren
Sterling (1995-2001) – Dode media
‘Tragische en onvermijdelijke einde van de meeste (zo
niet alle) media.’
- Dode media = media die verouderd zijn of zijn
vergeten
Oude media
= Vormen van analoge, in plaats van digitale, media
die nog steeds in gebruik zijn
- Televisie, radio, kranten
- Oude media die nog steeds in gebruik zijn,
worden vaak aangevuld met ‘nieuwe’ media
Bolter (2000) – Remediatie
Remediatie = de integratie van kenmerken van een oud medium naar een nieuw medium
Voorbeelden:
- Film gebruikt tekst vergelijkbaar met theater
- Computerspellen gebruiken verhalen uit films
- Nieuwswebsites gebruiken lay-outs die vergelijkbaar zijn met kranten
De inhoud van media blijft hetzelfde
Nieuwe media
= vormen van media die hun oorsprong hebben van computers, zijn computationeel en vertrouwen op computers
voor herdistributie (digitaal)
Voorbeelden:
- Smartphones
- Computers
- Vituele werelden
- Computerspellen
- Mens-computerinterfaces
- Sociale robots
- Spraakinterfaces
- Virtuele assistentie
- Interactieve museuminstallsaties
- Smart home
Belangrijkste aspect: hoog niveau van interactie
Opkomende media = communicatiekanalen die bekend worden als onderdeel van een lange evolutie van onze
communicatiearchitectuur.
,Minicollege: wat is interaction design?
Productdesign Interactiedesign
- Vorm - Vorm
- Materiaal - Materiaal
- Ergonomie - Ergonomie
- Esthetiek - Eshetiek
- Communicatie tussen gebruikers
- Reactie systeem
- Input gebruiker
Interactiedesign
- Ontwerpen van interactieve producten om de manier van communicatie en interactie van mensen in hun
dagelijks en werkende leven te ondersteunen
- Het ontwerpen van interactieve producten en diensten waarbij een ontwerper zich op de ontwikkeling van het
item om de manier waarop gebruikers ermee omgaan erbij te betrekken
Gaat over:
- Ontwerpen van interactie tussen gebruiker en product
- Ontwerpen van interactie en communicatie tussen mensen
Ontwerpen van goede interacties
Goede interacties zorgen ervoor dat een product/dienst:
- De manier waarop mensen werken, communiceren en interacteren verbetert (usefullness)
- Mensen ondersteunt bij het bereiken van hun doelen en activiteiten (effectiveness)
- Makkelijk in gebruik is (usability)
- Prettig in gebruik is (user experience (UX))
Interactieontwerp vereist multidisciplinariteit
- Hardware
- Software
- Design
- Business
- Manufacturing
- Strategie
- Marketing
Gebruikers
- Gedrag
- Cognitie
- Emoties
- Communicatie
HC1 Basisconcepten en theorieën deel 1
Ontwerpen mens-computer interacties
Basisconcepten en theorieën
- Gebruiker – ontwerper – techniek
Innovatieve en creatieve ontwerpprocessen
Complex nieuw en veranderend medialandschap
Complexe en veranderende behoeften
- Opkomende media (VR etc.)
Computer = elektronisch apparaat waarmee gegevens met algoritmes* worden verwerkt. Het kan gegevens opslaan,
opvragen en verwerken
*Algoritme = aantal stappen dat je zet om een bepaald doel te bereiken
,HC2 Basisconcepten en theorieën deel 2
Interactietypes & User interface trends
Productontwerp interactieontwerp
- Vorm
- Materiaal
- Ergonomie
- Esthetiek
Verschillen tussen product en interactieproduct:
- Interactieproduct + output systeem en input gebruiker + communicatie tussen gebruikers
User interface (UI) (gebruiksinterface)
De interface (intermediair) waar de interacties tussen computer en mens plaatsvinden
- Input (invoer): controle elementen voor het uitvoeren van acties
- Output: informatie vanuit het systeem
Interactietypes
→ Boek H7
Vijf belangrijkste interactietypes
1. Instructing = opdrachten geven en opties selecteren
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
5. Responding = door de computer geïnitieerde interacties waarop gebruikers kunnen reageren
User interface trends
Waves of HCI
Eerste HCI wave Tweede HCI wave
Piek ‘60 Piek ‘80
Context Mainframe computers bediend door Context Pc’s gebruikt op de werkvloer
meerdere gebruikers HCI doel Ondersteunen van werk gerelateerde
HCI doel Optimaliseren van de aansluiting taken, bijv. de accuraatheid en
tussen computer en gebruiker om efficiëntie van de werkpresentaties
bediening mogelijk te maken Onderzoek Cognitiewetenschappen
Onderzoek Informatica → Usability
, Derde HCI wave Vierde HCI wave
Piek ’00 (deze eeuw) Periode Nu!
Context Mobiele apparaten gebruikt in het Context Hypermobiliteit, ‘ubiquitous computing’
dagelijks leven: prive-doeleinden en in (computers die er niet uitzien als
het openbaar computers), AI
HCI doel Ondersteunen taken in het dagelijks HCI doel Ontwerpen voor het grotere geheel /
(prive) leven, plezier en zelfexpressie algemeen belang, sociale
→ UX (User experience) verantwoordelijkheid
Onderzoek Culturele studies, ethnografie Onderzoek Waarden
Interface trends in de verschillende waves
Wave 1
Ponskaart computers (’50)
- User interface
- Input: gebruikers ponsen gaatjes in kaarten (binaire gegevens), kaarten worden ingevoerd in computer
- Output: ponskaarten (of geprinte rapporten)
→ Instructing
Command-line interfaces (’60-’70)
- User interface
- Input: text-commando’s via toetsenbord
- Output: text op het scherm (unicolour)
→ Instructing
Wave 2
Grafische user interfaces (Xerox Alto, 1973)
- Input: text via toetsenbord; beweeg cursor en klik met muis om een selectie te maken uit het menu
- Output: grafisch en text via het scherm
- WIMP (Windows Icons Menus Pointers)
- WYSIWYG (What You See Is What You Get)
Grafische User Interface (GUI)
+ Minder beroep op cognitieve vaardigheden (geheugen, − Hogere ontwikkelingskosten en
leren) computercapaciteit
+ Een meer logische en intuïtieve navigatie − Hogere (visuele) complexiteit → aandachtseisen
(mogelijk…) (afleiding)
+ Laat multitasken toe − 3 handen nodig
+ Esthetiek − Vrijwel onbeperkte mogelijkheden: hoe begeleid je
de gebruiker?
Revolution: widespread introduction of the PC
Verdere ontwikkelingen (’80-’90)
- Full-colour schermen
- Multimedia
- Lagere kosten hardware → meer geheugen, sneller
→ Exploring
- Miniaturisatie van hardware
- Minder vermogen nodig (batterij) Draagbaarheid
Introductie van het internet
- Internet dateert uit ’60 (overheid VS, militair en academische toepassing)
- WWW, het internet dat we nu kennen, dateert uit 1989 (Tim Berners-Lee)
- Webgebruikers gebruikten de GUI ontwerpprincipes, websites zagen eruit als GUI software
