Your SlideShare is downloading. ×
0
Interaction design patterns na Tidwell<br />Het einde van de paginametafoor<br />
Bronnen<br />Cooper, About Face 3, hoofdstuk 19<br />Scott & Neil, Designing Web Interfaces, complete boek<br />Tim O’Reil...
De zeven principes van Web 2.0 <br />‘The web as a platform’<br />‘Harnessingcollectiveintelligence’<br />‘Data is the nex...
Ajax - AsynchronousJavaScript And XML <br />‘Ajax engine’ laag tussen gebruiker en server; activiteiten van gebruikers en ...
Voorbeeld – bbc.co.uk<br />
Direct Manipulation<br />Direct manipulation(Ben Shneiderman, 1974)<br />Visuele representatie van de te manipuleren data ...
Knoppen<br />Muis en keyboard<br />Leftmouse button<br />Right mouse button<br />Middlemouse button<br />Scroll wheel<br /...
Muisacties<br />Point<br />Click<br />Right-click<br />Click and drag<br />Double-click<br />Chord-click<br />Double-drag<...
‘Pliancy’ en ‘hinting’<br />‘Pliancy’: manipuleerbaarheid<br />‘Hinting’: het geven van eenaanwijzing<br />‘Affordance’: d...
Selecteren<br />Discrete selectie<br />Discrete selection<br />Aaneengeslotenselectie<br />Contiguous selection<br />
Voorbeeld: ‘drag and drop’<br />Het ‘drag and drop’ idioom is een al heel langtoegepast pattern datgoed het ‘direct manipu...
Visuele feedback bij ‘drag and drop’<br />Voor gebruiker overgaat tot handelen.<br />Welke objecten zijn manipuleerbaar?<b...
Principes voor rijke interactie<br />Maak het direct<br />Make It Direct<br />Hou het licht<br />Keep It Lightweight<br />...
Principe: maak het direct<br />Pattern: ‘In-PageEditing’<br />
Principe: maak het direct<br />Pattern: ‘Module Configuration’<br />‘Non-configuration state’<br />‘Invitation to configur...
Principe: maak het direct<br />Pattern: ‘Drag and Drop List’<br />‘Normal display state’<br />‘Invitation to drag’<br />‘D...
Principe: maak het direct<br />Pattern: ‘Drag and Drop Action’<br />1. ‘Normal display state’<br />3. ‘Dropped’<br />2. ‘I...
Principe: maak het direct<br />Antipattern: ‘Drag and Drop Action’<br />
Principe: hou het licht<br />Pattern: ‘Always-Visible Tools’<br />‘Visible tool’<br />‘Invitation’<br />‘Completion’<br />
Principe: hou het licht<br />Pattern: ‘Hover-Reveal Tools’<br />‘Normal state’<br />‘Invitation’<br />
Principe: hou het licht<br />Anti-pattern: ‘Hover and Cover’<br />Anti-pattern: ‘MysteryMeat’<br />
Principe: hou het licht<br />Pattern: ‘Secondary Menu’<br />‘Normal view of route’<br />‘Invitation’<br />‘Menu’<br />
Principe: blijf op de pagina<br />Pattern: ‘DialogOverlay’<br />Orbitz: date picker control <br />Netflix: Lightbox Effect...
Principe: blijf op de pagina<br />Anti-pattern: ‘Idiot Boxes’<br />Twee pop-ups die voorkomenhaddenkunnenworden door eengo...
1. ‘Activation’<br />3. ‘Customization inlay’<br />2. ‘Customization inlay (slide)’<br />Principe: blijf op de pagina<br /...
‘Google Reader list view’<br />‘List inlay’<br />Principe: blijf op de pagina<br />Pattern: ‘List Inlay’<br />
Principe: blijf op de pagina<br />Pattern: ‘Inline Paging’<br />Pattern: ‘Scrolled Paging: Carousel’<br />Pattern: ‘Virtua...
Principe: blijf op de pagina<br />Pattern: ‘Zoomable User Interface’<br />Online collectie Hard Rock Café<br />
Principe: geefeenuitnodiging<br />Pattern: ‘Call to Action Invitation’<br />
Principe: geefeenuitnodiging<br />Pattern: ‘Hover Invitation’<br />
Principe: gebruikovergangen<br />Pattern: ‘Brighten and Dim’<br />
Principe: gebruikovergangen<br />Pattern: ‘Animation’<br />‘Dragging module’<br />‘Zoom-back animation’<br />
Principe: gebruikovergangen<br />Pattern: ‘Spotlight’<br />Bijvoorbeeldvoor het benadrukken van veranderingen<br />(Backpa...
Principe: reageeronmiddelijk<br />Pattern: ‘Auto Complete’<br />De mogelijkeoptiesverschijnentijdens het typen.<br />Invoe...
Principe: reageeronmiddelijk<br />Pattern: ‘Refining Search’<br />Met verschillendesoorten controls worden de zoekresultat...
Samenvattend<br />Webapplicaties kunnen tegenwoordig, dankzij technologieën als Ajax, worden ontworpen met een rijke gebru...
Bedankt voor jullie aandacht<br />j.a.m.kemp@hro.nl<br />http://vakgroep.cmd.hro.nl/iad/iad2q4/<br />http://project.cmi.hr...
Upcoming SlideShare
Loading in...5
×

Iad2 0910 q4 les 2 dynamische interactie

669

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
669
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Iad2 0910 q4 les 2 dynamische interactie"

  1. 1. Interaction design patterns na Tidwell<br />Het einde van de paginametafoor<br />
  2. 2. Bronnen<br />Cooper, About Face 3, hoofdstuk 19<br />Scott & Neil, Designing Web Interfaces, complete boek<br />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<br />Jesse James Garrett, Ajax: A New Approach to Web Applications<br />http://www.adaptivepath.com/publications/essays/archives/000385.php<br />Bill Scott, O’Reilly Webcast: Designing Web Interfaces http://www.youtube.com/watch?v=LW4MwvgW_ww&eurl=http://looksgoodworkswell.blogspot.com/&feature=player_embedded<br />Kijk ook eens op: http://www.looksgoodworkswell.com/<br />
  3. 3. De zeven principes van Web 2.0 <br />‘The web as a platform’<br />‘Harnessingcollectiveintelligence’<br />‘Data is the next Intel inside’<br />‘End of the software release cycle’<br />‘Lightweightprogramming models’<br />‘Software above the level of a single device’<br />‘A rich user experience’<br />Uit: Tim O’Reilly, http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html<br />
  4. 4. Ajax - AsynchronousJavaScript And XML <br />‘Ajax engine’ laag tussen gebruiker en server; activiteiten van gebruikers en respons van het systeem worden onafhankelijk.<br />In de beleving van gebruikers hoeft er dus niet meer op een systeemrespons te worden gewacht. <br />Niet langer wachten op die pagina!<br />Uit: Jesse James Garrett, http://www.adaptivepath.com/publications/essays/archives/000385.php<br />
  5. 5. Voorbeeld – bbc.co.uk<br />
  6. 6. Direct Manipulation<br />Direct manipulation(Ben Shneiderman, 1974)<br />Visuele representatie van de te manipuleren data of objecten<br />Fysieke acties in plaats van tekst intypen om objecten te manipuleren<br />Directe visuele terugkoppeling van de actie<br />
  7. 7. Knoppen<br />Muis en keyboard<br />Leftmouse button<br />Right mouse button<br />Middlemouse button<br />Scroll wheel<br />Meta-keys<br />
  8. 8. Muisacties<br />Point<br />Click<br />Right-click<br />Click and drag<br />Double-click<br />Chord-click<br />Double-drag<br />
  9. 9. ‘Pliancy’ en ‘hinting’<br />‘Pliancy’: manipuleerbaarheid<br />‘Hinting’: het geven van eenaanwijzing<br />‘Affordance’: de eigenschappen van een object die duidelijkmaken hoe het moetwordengebruikt<br />Static object hinting<br />Cursor hinting<br />
  10. 10. Selecteren<br />Discrete selectie<br />Discrete selection<br />Aaneengeslotenselectie<br />Contiguous selection<br />
  11. 11. Voorbeeld: ‘drag and drop’<br />Het ‘drag and drop’ idioom is een al heel langtoegepast pattern datgoed het ‘direct manipulation’ principeillustreert. <br />
  12. 12. Visuele feedback bij ‘drag and drop’<br />Voor gebruiker overgaat tot handelen.<br />Welke objecten zijn manipuleerbaar?<br />Gebruiker is begonnen te slepen<br />Wat ben je aan het doen? Waar kan het heen?<br />Gebruiker heeft muisknop losgelaten<br />Wat is er veranderd? Is het gelukt?<br />
  13. 13. Principes voor rijke interactie<br />Maak het direct<br />Make It Direct<br />Hou het licht<br />Keep It Lightweight<br />Blijf op de pagina<br />Stay on the Page<br />Geefeenuitnodiging<br />Provide an Invitation<br />Gebruikovergangen<br />Use Transitions<br />Reageeronmiddelijk<br />React Immediately<br />Uit: Bill Scott and Theresa Neil (2009). Designing Web Interfaces.<br />
  14. 14. Principe: maak het direct<br />Pattern: ‘In-PageEditing’<br />
  15. 15. Principe: maak het direct<br />Pattern: ‘Module Configuration’<br />‘Non-configuration state’<br />‘Invitation to configure’<br />‘Configuration’<br />‘Completion’<br />
  16. 16. Principe: maak het direct<br />Pattern: ‘Drag and Drop List’<br />‘Normal display state’<br />‘Invitation to drag’<br />‘Dragging’<br />‘Dropped’<br />
  17. 17. Principe: maak het direct<br />Pattern: ‘Drag and Drop Action’<br />1. ‘Normal display state’<br />3. ‘Dropped’<br />2. ‘Invitation to drag’<br />4. ‘Completed’<br />
  18. 18. Principe: maak het direct<br />Antipattern: ‘Drag and Drop Action’<br />
  19. 19. Principe: hou het licht<br />Pattern: ‘Always-Visible Tools’<br />‘Visible tool’<br />‘Invitation’<br />‘Completion’<br />
  20. 20. Principe: hou het licht<br />Pattern: ‘Hover-Reveal Tools’<br />‘Normal state’<br />‘Invitation’<br />
  21. 21. Principe: hou het licht<br />Anti-pattern: ‘Hover and Cover’<br />Anti-pattern: ‘MysteryMeat’<br />
  22. 22. Principe: hou het licht<br />Pattern: ‘Secondary Menu’<br />‘Normal view of route’<br />‘Invitation’<br />‘Menu’<br />
  23. 23. Principe: blijf op de pagina<br />Pattern: ‘DialogOverlay’<br />Orbitz: date picker control <br />Netflix: Lightbox Effect<br />
  24. 24. Principe: blijf op de pagina<br />Anti-pattern: ‘Idiot Boxes’<br />Twee pop-ups die voorkomenhaddenkunnenworden door eengoedontwerp van de ‘drag and drop’. <br />Conclusie: onnodigeonderbreking van de flow van gebruikersvoor het doen van onzinnigemededelingen.<br />3. Ja, ja, de foto’szijntoegevoegd<br />… maargeen feedback over ‘drop candidacy’<br />… terwijl de status van het album ogenschijnlijkniet is veranderd<br />2. Bevestigingsdialoog<br />1. ‘drag and drop’ van 3 foto’s in album<br />
  25. 25. 1. ‘Activation’<br />3. ‘Customization inlay’<br />2. ‘Customization inlay (slide)’<br />Principe: blijf op de pagina<br />Pattern: ‘Dialog Inlay’<br />
  26. 26. ‘Google Reader list view’<br />‘List inlay’<br />Principe: blijf op de pagina<br />Pattern: ‘List Inlay’<br />
  27. 27. Principe: blijf op de pagina<br />Pattern: ‘Inline Paging’<br />Pattern: ‘Scrolled Paging: Carousel’<br />Pattern: ‘Virtual Panning’<br />
  28. 28. Principe: blijf op de pagina<br />Pattern: ‘Zoomable User Interface’<br />Online collectie Hard Rock Café<br />
  29. 29. Principe: geefeenuitnodiging<br />Pattern: ‘Call to Action Invitation’<br />
  30. 30. Principe: geefeenuitnodiging<br />Pattern: ‘Hover Invitation’<br />
  31. 31. Principe: gebruikovergangen<br />Pattern: ‘Brighten and Dim’<br />
  32. 32. Principe: gebruikovergangen<br />Pattern: ‘Animation’<br />‘Dragging module’<br />‘Zoom-back animation’<br />
  33. 33. Principe: gebruikovergangen<br />Pattern: ‘Spotlight’<br />Bijvoorbeeldvoor het benadrukken van veranderingen<br />(Backpackit)<br />
  34. 34. Principe: reageeronmiddelijk<br />Pattern: ‘Auto Complete’<br />De mogelijkeoptiesverschijnentijdens het typen.<br />Invoeren van ‘z’ doetallenamen die beginnen met een ‘z’ verschijnen. <br />‘Tab’ selecteertonmiddelijk de geselecteerdeoptie.<br />‘Tab’ geeft NIET de eerstemogelijkeoptie.<br />
  35. 35. Principe: reageeronmiddelijk<br />Pattern: ‘Refining Search’<br />Met verschillendesoorten controls worden de zoekresultaten ‘real-time’ bijgewerkt. <br />
  36. 36. Samenvattend<br />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.<br />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!<br />Er zijn zes ontwerpprincipes voor rijke interactie die zorgen voor een betere gebruiksbeleving. De succesvolle interactie ontwerppatronen volgen één of meer van deze ontwerpprincipes. <br />
  37. 37. Bedankt voor jullie aandacht<br />j.a.m.kemp@hro.nl<br />http://vakgroep.cmd.hro.nl/iad/iad2q4/<br />http://project.cmi.hro.nl/2008_2009/rewind/platform/<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×