Successfully reported this slideshow.

0708 Iad2 Q3 Hoorcollege1

1,010 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

0708 Iad2 Q3 Hoorcollege1

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

×