2. Bronnen
Cooper, About Face 3, hoofdstuk 19
Scott & Neil, Designing Web Interfaces, complete boek
Tim O’Reilly, What Is Web 2.0
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-
web-20.html
Jesse James Garrett, Ajax: A New Approach to Web Applications
http://www.adaptivepath.com/publications/essays/archives/000385.php
Bill Scott, O’Reilly Webcast: Designing Web Interfaces
http://www.youtube.com/watch?v=LW4MwvgW_ww&eurl=http://look
sgoodworkswell.blogspot.com/&feature=player_embedded
Kijk ook eens op: http://www.looksgoodworkswell.com/
3. 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: Tim O’Reilly,
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/
what-is-web-20.html
4. Ajax - Asynchronous JavaScript And XML
‘Ajax engine’ laag tussen
gebruiker en server;
activiteiten van gebruikers en
respons van het systeem
worden onafhankelijk.
In de beleving van gebruikers
hoeft er dus niet meer op een
systeemrespons te worden
gewacht.
Niet langer wachten op die
pagina!
Uit: Jesse James Garrett,
http://www.adaptivepath.com/publications/essays/archive
s/000385.php
6. Direct Manipulation
Direct manipulation (Ben
Shneiderman, 1974)
1. Visuele representatie van de te
manipuleren data of objecten
2. Fysieke acties in plaats van
tekst intypen om objecten te
manipuleren
3. Directe visuele terugkoppeling
van de actie
7. Knoppen
Muis en keyboard
Left mouse button
Right mouse button
Middle mouse button
Scroll wheel
Meta-keys
9. ‘Pliancy’ en ‘hinting’
‘Pliancy’:
manipuleerbaarheid
‘Hinting’: het geven van Static object hinting
een aanwijzing
Cursor hinting
‘Affordance’: de
eigenschappen van een
object die duidelijk
maken hoe het moet
worden gebruikt
11. Voorbeeld: ‘drag and drop’
Het ‘drag and drop’ idioom is een al heel lang toegepast
pattern dat goed het ‘direct manipulation’ principe
illustreert.
12. Visuele feedback bij ‘drag and drop’
1. Voor gebruiker overgaat
tot handelen.
Welke objecten zijn
manipuleerbaar?
2. Gebruiker is begonnen te
slepen
Wat ben je aan het doen? Waar
kan het heen?
3. Gebruiker heeft muisknop
losgelaten
Wat is er veranderd? Is het
gelukt?
13. Principes voor rijke interactie
Maak het direct
Make It Direct
Hou het licht
Keep It Lightweight
Blijf op de pagina
Stay on the Page
Geef een uitnodiging
Provide an Invitation
Gebruik overgangen
Use Transitions
Reageer onmiddelijk Uit: Bill Scott and Theresa Neil (2009).
Designing Web Interfaces.
React Immediately
21. Principe: hou het licht
Anti-pattern: ‘Hover and Cover’
Anti-pattern: ‘Mystery Meat’
22. Principe: hou het licht
Pattern: ‘Secondary Menu’
‘Normal view of route’
‘Invitation’
‘Menu’
23. Principe: blijf op de pagina
Pattern: ‘Dialog Overlay’
Orbitz: date picker control
Netflix: Lightbox Effect
24. Principe: blijf op de pagina
Anti-pattern: ‘Idiot Boxes’
Twee pop-ups die voorkomen
hadden kunnen worden door
een goed ontwerp van de ‘drag
and drop’.
3. Ja, ja, de foto’s zijn
Conclusie: onnodige
toegevoegd
… terwijl de status van
onderbreking van de flow van
het … maarogenschijnlijk
album geen feedback
over ‘drop 2. Bevestigingsdialoog
candidacy’
gebruikers voor het doen van
niet is veranderd
onzinnige mededelingen.
1. ‘drag and drop’ van 3
foto’s in album
25. Principe: blijf op de pagina
Pattern: ‘Dialog Inlay’
3. ‘Customization inlay’
1. ‘Activation’
2. ‘Customization inlay
(slide)’
26. Principe: blijf op de pagina
Pattern: ‘List Inlay’
‘Google Reader
‘List inlay’
list view’
27. Principe: blijf op de pagina
Pattern: ‘Inline Paging’
Pattern: ‘Scrolled Paging: Carousel’
Pattern: ‘Virtual Panning’
28. Principe: blijf op de pagina
Pattern: ‘Zoomable User Interface’
Online collectie
Hard Rock Café
34. Principe: reageer onmiddelijk
Pattern: ‘Auto Complete’
De mogelijke opties verschijnen
Invoeren van ‘z’ doet alle namen die tijdens het typen.
beginnen met een ‘z’ verschijnen.
‘Tab’ selecteert onmiddelijk de
geselecteerde optie.
‘Tab’ geeft NIET de eerste mogelijke optie.
36. Samenvattend
Webapplicaties 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 van web interfaces beter
worden afgestemd op het mentale model en flow van gebruikers:
weg met de browser en de pagina-metafoor, lang leve het
principe van direct manipulation!
Er zijn zes ontwerpprincipes voor rijke interactie die zorgen voor
een betere gebruiksbeleving. De succesvolle interactie
ontwerppatronen volgen één of meer van deze ontwerpprincipes.
37. Bedankt voor jullie aandacht
j.a.m.kemp@hro.nl
http://vakgroep.cmd.hro.nl/iad
http://project.cmi.hro.nl/2008_2009/rewind/platform/