Interactie ontwerpen voor Web 2.0 Het einde van de pagina-metafoor
Vandaag <ul><li>Enkele begrippen </li></ul><ul><li>Direct manipulation </li></ul><ul><li>Principes voor rijke interactie <...
Bronnen <ul><li>Cooper,  About Face 2.0,  hoofdstuk 21 </li></ul><ul><li>Tim O’Reilly,  http://www.oreillynet.com/pub/a/or...
Web 2.0 – AJAX en andere buzzwords <ul><li>Web 2.0 </li></ul><ul><ul><li>Noemer waaronder vele begrippen samenkomen </li><...
De zeven principes van Web 2.0  <ul><li>‘ The web as a platform’ </li></ul><ul><li>‘ Harnessing collective intelligence’ <...
Ajax - Asynchronous JavaScript And XML  <ul><li>Het introduceren van een ‘Ajax engine’ laag tussen gebruiker en server maa...
Voorbeeld – AH.nl
Direct Manipulation <ul><li>Direct manipulation  leunt op drie aspecten: </li></ul><ul><li>Visuele representatie van het g...
Drie fases van het direct manipulation proces <ul><li>Free phase </li></ul><ul><ul><li>Voordat de gebruiker tot handelen o...
Drie fases van het direct manipulation proces <ul><li>Captive phase </li></ul><ul><ul><li>Nadat de gebruiker is begonnen m...
Drie fases van het direct manipulation proces <ul><li>Termination phase </li></ul><ul><ul><li>Nadat de gebruiker de muiskn...
Hinting, affordances <ul><li>Voor de gebruiker dient duidelijk te zijn wat manipuleerbaar is en welke acties er uitgevoerd...
Principes voor rijke interactie <ul><li>Principes voor interactie </li></ul><ul><li>Principes voor feedback </li></ul><ul>...
Principes voor rijke interactie <ul><li>Principes voor interactie  </li></ul><ul><li>Naar: Bill Scott, Yahoo! Pattern Libr...
Maak de interactie direct <ul><li>‘ in page action’ </li></ul><ul><li>‘ inline editing’ </li></ul>
Maak de interactie direct <ul><li>‘ in context tools’ </li></ul>
Voorkom grenzen in de interactie <ul><li>‘ inline assistant’ </li></ul><ul><li>Every space jump is  </li></ul><ul><li>a me...
Voorkom grenzen in de interactie <ul><li>Liever ‘scrolling’ dan ‘paging’ </li></ul>
Principes voor rijke interactie <ul><li>Principes voor feedback </li></ul>
Geef directe terugkoppeling <ul><li>‘ auto complete’ </li></ul>
Nodig uit, laat ondekken <ul><li>‘ tooltip’ </li></ul><ul><li>‘ hover invitation’ </li></ul>
Laat overgangen zien <ul><li>Tijd lijkt sneller te gaan </li></ul><ul><li>Interactie vertraagt </li></ul><ul><li>Relatie t...
Principes voor rijke interactie <ul><li>Principes voor informatie </li></ul>
Denk in objecten
Verbind informatie met interactiviteit <ul><li>‘ multi-variate views’ </li></ul>
Sleutelprincipes voor rijke interactie <ul><li>Prefer direct, lightweight, in-page interaction </li></ul><ul><li>Provide i...
Samenvattend <ul><li>Webapplicaties kunnen tegenwoordig, dankzij technologieën als Ajax, worden ontworpen met een rijke ge...
Tenslotte, wat verder niets te maken heeft met interactie…
Bedankt voor jullie aandacht
Upcoming SlideShare
Loading in...5
×

0708 Iad2 Q3 Hoorcollege1

878

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide
  • Transcript of "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
    1. A particular slide catching your eye?

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

    ×