'. Q3!.atR .'9:. :a~ (~) · aUChI'l"Q3!.atR.'9:.:g6ChIU "J6R'fiul:a~ (~) m.~.Qi.6(~), m
0708 Iad2 Q3 Hoorcollege1
-
Upload
hans-kemp -
Category
Technology
-
view
1.237 -
download
2
description
Transcript of 0708 Iad2 Q3 Hoorcollege1
Interactie ontwerpen voor Web 2.0Het einde van de pagina-metafoor
Interaction designIAD2Q3 hoorcollege 1
Vandaag
• Enkele begrippen
• Direct manipulation
• Principes voor rijke interactie
• Voorbeelden
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/
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
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
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!
Interaction designIAD2Q3 hoorcollege 1
Voorbeeld – AH.nl
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
Interaction designIAD2Q3 hoorcollege 1
Drie fases van het direct manipulation proces1. Free phase
Voordat de gebruiker tot handelen overgaat.
– Welke objecten zijn manipuleerbaar?
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?
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.
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)
Interaction designIAD2Q3 hoorcollege 1
Principes voor rijke interactie
Principes voor interactie
Principes voor feedback
Principes voor informatie
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/
Interaction designIAD2Q3 hoorcollege 1
Maak de interactie direct
‘in page action’
‘inline editing’
Interaction designIAD2Q3 hoorcollege 1
Maak de interactie direct
‘in context tools’
Interaction designIAD2Q3 hoorcollege 1
Voorkom grenzen in de interactie
‘inline assistant’
Every space jump is
a mental speed bump
Interaction designIAD2Q3 hoorcollege 1
Voorkom grenzen in de interactie
Liever ‘scrolling’ dan ‘paging’
Interaction designIAD2Q3 hoorcollege 1
Principes voor rijke interactie
Principes voor feedback
Interaction designIAD2Q3 hoorcollege 1
Geef directe terugkoppeling
‘auto complete’
Interaction designIAD2Q3 hoorcollege 1
Nodig uit, laat ondekken
‘tooltip’
‘hover invitation’
Interaction designIAD2Q3 hoorcollege 1
Laat overgangen zien
Tijd lijkt sneller te gaan
Interactie vertraagt
Relatie tussen objecten
Aandacht krijgen
Interaction designIAD2Q3 hoorcollege 1
Principes voor rijke interactie
Principes voor informatie
Interaction designIAD2Q3 hoorcollege 1
Denk in objecten
Interaction designIAD2Q3 hoorcollege 1
Verbind informatie met interactiviteit
‘multi-variate views’
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
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.
Interaction designIAD2Q3 hoorcollege 1
Tenslotte, wat verder niets te maken heeft met interactie…
Interaction designIAD2Q3 hoorcollege 1
Bedankt voor jullie aandacht