0708 iad2 q3 hoorcollege1
DESCRIPTION
TRANSCRIPT
![Page 1: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/1.jpg)
Interactie ontwerpen voor Web 2.0Het einde van de pagina-metafoor
![Page 2: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/2.jpg)
Interaction designIAD2Q3 hoorcollege 1
Vandaag
• Enkele begrippen
• Direct manipulation
• Principes voor rijke interactie
• Voorbeelden
![Page 3: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/3.jpg)
Interaction designIAD2Q3 hoorcollege 1
Bronnen
• Cooper, About Face 2.0, hoofdstuk 21
• Tim O’Reilly, http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
• Jesse James Garrett, http://www.adaptivepath.com/publications/essays/archives/000385.php
• Bill Scott, http://sessions.visitmix.com/, MIX07>Breakout>Designer
Kijk ook eens op: http://www.looksgoodworkswell.com/
![Page 4: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/4.jpg)
Interaction designIAD2Q3 hoorcollege 1
Web 2.0 – AJAX en andere buzzwords
• Web 2.0Noemer waaronder vele begrippen samenkomenhttp://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-
20.html
• RIAType webapplicatie waarbij interactie geen
gebruik maakt van pagina-metafoor
• AJAXVerzamelnaam van technologieën waarmee RIA’s
kunnen worden gerealiseerd, zonder plug-inhttp://www.adaptivepath.com/publications/essays/archives/000385.php
![Page 5: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/5.jpg)
Interaction designIAD2Q3 hoorcollege 1
De zeven principes van Web 2.0
‘The web as a platform’
‘Harnessing collective intelligence’
‘Data is the next Intel inside’
‘End of the software release cycle’
‘Lightweight programming models’
‘Software above the level of a single device’
‘A rich user experience’
Uit: http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
![Page 6: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/6.jpg)
Interaction designIAD2Q3 hoorcollege 1
Ajax - Asynchronous JavaScript And XML
Het introduceren van een ‘Ajax engine’ laag tussen gebruiker en server maakt dat de respons naar gebruikers en de respons van het systeem onafhankelijk worden.
In de beleving van gebruikers hoeft er dus niet meer op een systeemrespons te worden gewacht.
Niet langer wachten op die pagina!
![Page 7: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/7.jpg)
Interaction designIAD2Q3 hoorcollege 1
Voorbeeld – AH.nl
![Page 8: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/8.jpg)
Interaction designIAD2Q3 hoorcollege 1
Direct Manipulation
Direct manipulation leunt op drie aspecten:
1. Visuele representatie van het gemanipuleerde object
2. Fysieke acties in plaats van tekst intypen
3. Directe visuele terugkoppeling van de actie
![Page 9: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/9.jpg)
Interaction designIAD2Q3 hoorcollege 1
Drie fases van het direct manipulation proces1. Free phase
Voordat de gebruiker tot handelen overgaat.
– Welke objecten zijn manipuleerbaar?
![Page 10: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/10.jpg)
Interaction designIAD2Q3 hoorcollege 1
Drie fases van het direct manipulation proces2. Captive phase
Nadat de gebruiker is begonnen met slepen.
– Hoe communiceert de interface wat je aan het doen bent, en waar dat eventueel heen kan?
![Page 11: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/11.jpg)
Interaction designIAD2Q3 hoorcollege 1
Drie fases van het direct manipulation proces3. Termination phase
Nadat de gebruiker de muisknop losgelaten heeft.
– Duidelijk aangeven dat de handeling beëindigd is en wat het resultaat is.
![Page 12: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/12.jpg)
Interaction designIAD2Q3 hoorcollege 1
Hinting, affordances
Voor de gebruiker dient duidelijk te zijn wat manipuleerbaar is en welke acties er uitgevoerd kunnen worden
Cursor hinting (cursor verandert als er bijvoorbeeld iets versleept kan worden.)
Textual hinting (tool tips)Visual hinting (3D buttons)
![Page 13: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/13.jpg)
Interaction designIAD2Q3 hoorcollege 1
Principes voor rijke interactie
Principes voor interactie
Principes voor feedback
Principes voor informatie
![Page 14: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/14.jpg)
Interaction designIAD2Q3 hoorcollege 1
Principes voor rijke interactie
Principes voor interactie
Naar: Bill Scott, Yahoo! Pattern Library (tegenwoordig bij Netflix)
Blog: http://looksgoodworkswell.blogspot.com/
![Page 15: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/15.jpg)
Interaction designIAD2Q3 hoorcollege 1
Maak de interactie direct
‘in page action’
‘inline editing’
![Page 16: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/16.jpg)
Interaction designIAD2Q3 hoorcollege 1
Maak de interactie direct
‘in context tools’
![Page 17: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/17.jpg)
Interaction designIAD2Q3 hoorcollege 1
Voorkom grenzen in de interactie
‘inline assistant’
Every space jump is
a mental speed bump
![Page 18: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/18.jpg)
Interaction designIAD2Q3 hoorcollege 1
Voorkom grenzen in de interactie
Liever ‘scrolling’ dan ‘paging’
![Page 19: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/19.jpg)
Interaction designIAD2Q3 hoorcollege 1
Principes voor rijke interactie
Principes voor feedback
![Page 20: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/20.jpg)
Interaction designIAD2Q3 hoorcollege 1
Geef directe terugkoppeling
‘auto complete’
![Page 21: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/21.jpg)
Interaction designIAD2Q3 hoorcollege 1
Nodig uit, laat ondekken
‘tooltip’
‘hover invitation’
![Page 22: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/22.jpg)
Interaction designIAD2Q3 hoorcollege 1
Laat overgangen zien
Tijd lijkt sneller te gaan
Interactie vertraagt
Relatie tussen objecten
Aandacht krijgen
![Page 23: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/23.jpg)
Interaction designIAD2Q3 hoorcollege 1
Principes voor rijke interactie
Principes voor informatie
![Page 24: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/24.jpg)
Interaction designIAD2Q3 hoorcollege 1
Denk in objecten
![Page 25: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/25.jpg)
Interaction designIAD2Q3 hoorcollege 1
Verbind informatie met interactiviteit
‘multi-variate views’
![Page 26: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/26.jpg)
Interaction designIAD2Q3 hoorcollege 1
Sleutelprincipes voor rijke interactie
• Prefer direct, lightweight, in-page interaction
• Provide invitations beforehand, transitions during, and feedback after interaction
• Think in objects and tie information to interactivity
![Page 27: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/27.jpg)
Interaction designIAD2Q3 hoorcollege 1
SamenvattendWebapplicaties kunnen tegenwoordig, dankzij technologieën als
Ajax, worden ontworpen met een rijke gebruiksbeleving die niet meer onder doet voor de gebruiksbeleving van een (desktop) software programma.
Hierdoor kan het interactie ontwerp nog beter worden afgestemd op het mentale model van gebruikers: weg met de browser en de pagina-metafoor, lang leve het principe van direct manipulation!
De kwaliteit van een dergelijke rijke interactie is in hoge mate afhankelijk van de visuele detaillering, in alle drie de fasen van directe manipulatie.
![Page 28: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/28.jpg)
Interaction designIAD2Q3 hoorcollege 1
Tenslotte, wat verder niets te maken heeft met interactie…
![Page 29: 0708 Iad2 Q3 Hoorcollege1](https://reader033.vdocuments.pub/reader033/viewer/2022051610/54879aa3b4af9f5f388b5eb4/html5/thumbnails/29.jpg)
Interaction designIAD2Q3 hoorcollege 1
Bedankt voor jullie aandacht