0708 Iad2 Q3 Hoorcollege1

  • Published on
    10-Dec-2014

  • View
    1.232

  • Download
    2

Embed Size (px)

DESCRIPTION

 

Transcript

<ul><li> 1. Interactie ontwerpen voor Web 2.0 Het einde van de pagina-metafoor</li></ul> <p> 2. Vandaag </p> <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> <p> 3. Bronnen </p> <ul><li>Cooper,About Face 2.0,hoofdstuk 21 </li></ul> <ul><li>Tim OReilly,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&gt;Breakout&gt;Designer </li></ul> <ul><li>Kijk ook eens op:http://www.looksgoodworkswell.com/ </li></ul> <p> 4. Web 2.0 AJAX en andere buzzwords </p> <ul><li>Web 2.0 </li></ul> <ul><li><ul><li>Noemer waaronder vele begrippen samenkomen </li></ul></li></ul> <ul><li><ul><li>http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html </li></ul></li></ul> <ul><li>RIA </li></ul> <ul><li><ul><li>Type webapplicatie waarbij interactie geen gebruik maakt van pagina-metafoor </li></ul></li></ul> <ul><li>AJAX </li></ul> <ul><li><ul><li>Verzamelnaam van technologien waarmee RIAs kunnen worden gerealiseerd, zonder plug-in </li></ul></li></ul> <ul><li><ul><li>http://www.adaptivepath.com/publications/essays/archives/000385.php </li></ul></li></ul> <p> 5. De zeven principes van Web 2.0</p> <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> <p> 6. Ajax - Asynchronous JavaScript And XML</p> <ul><li>Het introduceren van een Ajax engine laag tussen gebruiker en server maakt dat de respons naar gebruikers en de respons van het systeemonafhankelijk 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> <p> 7. Voorbeeld AH.nl 8. Direct Manipulation </p> <ul><li>Direct manipulationleunt 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> <p> 9. Drie fases van het direct manipulation proces </p> <ul><li>Free phase </li></ul> <ul><li><ul><li>Voordat de gebruiker tot handelen overgaat. </li></ul></li></ul> <ul><li><ul><li>Welke objecten zijn manipuleerbaar? </li></ul></li></ul> <p> 10. Drie fases van het direct manipulation proces </p> <ul><li>Captive phase </li></ul> <ul><li><ul><li>Nadat de gebruiker is begonnen met slepen. </li></ul></li></ul> <ul><li><ul><li>Hoe communiceert de interface wat je aan het doen bent, en waar dat eventueel heen kan? </li></ul></li></ul> <p> 11. Drie fases van het direct manipulation proces </p> <ul><li>Termination phase </li></ul> <ul><li><ul><li>Nadat de gebruiker de muisknop losgelaten heeft.</li></ul></li></ul> <ul><li><ul><li>Duidelijk aangeven dat de handeling beindigd is en wat het resultaat is. </li></ul></li></ul> <p> 12. Hinting, affordances </p> <ul><li>Voor de gebruiker dient duidelijk te zijn wat manipuleerbaar is en welke acties er uitgevoerd kunnen worden </li></ul> <p>Cursor hinting (cursor verandert als er bijvoorbeeld iets versleept kan worden.) Textual hinting (tool tips) Visual hinting (3D buttons) 13. Principes voor rijke interactie </p> <ul><li>Principes voor interactie </li></ul> <ul><li>Principes voor feedback </li></ul> <ul><li>Principes voor informatie </li></ul> <p> 14. Principes voor rijke interactie </p> <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> <p> 15. Maak de interactie direct </p> <ul><li> in page action </li></ul> <ul><li> inline editing </li></ul> <p> 16. Maak de interactie direct </p> <ul><li> in context tools </li></ul> <p> 17. Voorkom grenzen in de interactie </p> <ul><li> inline assistant </li></ul> <ul><li>Every space jump is</li></ul> <ul><li>a mental speed bump </li></ul> <p> 18. Voorkom grenzen in de interactie </p> <ul><li>Liever scrolling dan paging </li></ul> <p> 19. Principes voor rijke interactie </p> <ul><li>Principes voor feedback </li></ul> <p> 20. Geef directe terugkoppeling </p> <ul><li> auto complete </li></ul> <p> 21. Nodig uit, laat ondekken </p> <ul><li> tooltip </li></ul> <ul><li> hover invitation </li></ul> <p> 22. Laat overgangen zien </p> <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> <p> 23. Principes voor rijke interactie </p> <ul><li>Principes voor informatie </li></ul> <p> 24. Denk in objecten 25. Verbind informatie met interactiviteit </p> <ul><li> multi-variate views </li></ul> <p> 26. Sleutelprincipes voor rijke interactie </p> <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> <p> 27. Samenvattend </p> <ul><li>Webapplicaties kunnen tegenwoordig, dankzij technologien 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> <p> 28. Tenslotte, wat verder niets te maken heeft met interactie 29. Bedankt voor jullie aandacht </p>