0708 Iad2 Q3 Hoorcollege1

  • View
    1.232

  • Download
    2

Embed Size (px)

DESCRIPTION

 

Text of 0708 Iad2 Q3 Hoorcollege1

  • 1. Interactie ontwerpen voor Web 2.0 Het einde van de pagina-metafoor

2. Vandaag

  • Enkele begrippen
  • Direct manipulation
  • Principes voor rijke interactie
  • Voorbeelden

3. Bronnen

  • Cooper,About Face 2.0,hoofdstuk 21
  • Tim OReilly,http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
  • Jesse James Garrett,http://www.adaptivepath.com/publications/essays/archives/000385.php
  • Bill Scott,http://sessions.visitmix.com/ ,MIX07>Breakout>Designer
  • Kijk ook eens op:http://www.looksgoodworkswell.com/

4. Web 2.0 AJAX en andere buzzwords

  • Web 2.0
    • Noemer waaronder vele begrippen samenkomen
    • http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
  • RIA
    • Type webapplicatie waarbij interactie geen gebruik maakt van pagina-metafoor
  • AJAX
    • Verzamelnaam van technologien waarmee RIAs kunnen worden gerealiseerd, zonder plug-in
    • http://www.adaptivepath.com/publications/essays/archives/000385.php

5. 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:http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

6. Ajax - Asynchronous JavaScript And XML

  • Het introduceren van een Ajax engine laag tussen gebruiker en server maakt dat de respons naar gebruikers en de respons van het systeemonafhankelijk worden.
  • In de beleving van gebruikers hoeft er dus niet meer op een systeemrespons te worden gewacht.
  • Niet langer wachten op die pagina!

7. Voorbeeld AH.nl 8. Direct Manipulation

  • Direct manipulationleunt op drie aspecten:
  • Visuele representatie van het gemanipuleerde object
  • Fysieke acties in plaats van tekst intypen
  • Directe visuele terugkoppeling van de actie

9. Drie fases van het direct manipulation proces

  • Free phase
    • Voordat de gebruiker tot handelen overgaat.
    • Welke objecten zijn manipuleerbaar?

10. Drie fases van het direct manipulation proces

  • Captive phase
    • Nadat de gebruiker is begonnen met slepen.
    • Hoe communiceert de interface wat je aan het doen bent, en waar dat eventueel heen kan?

11. Drie fases van het direct manipulation proces

  • Termination phase
    • Nadat de gebruiker de muisknop losgelaten heeft.
    • Duidelijk aangeven dat de handeling beindigd is en wat het resultaat is.

12. Hinting, affordances

  • Voor de gebruiker dient duidelijk te zijn wat manipuleerbaar is en welke acties er uitgevoerd kunnen worden

Cursor hinting (cursor verandert als er bijvoorbeeld iets versleept kan worden.) Textual hinting (tool tips) Visual hinting (3D buttons) 13. Principes voor rijke interactie

  • Principes voor interactie
  • Principes voor feedback
  • Principes voor informatie

14. Principes voor rijke interactie

  • Principes voor interactie
  • Naar: Bill Scott, Yahoo! Pattern Library (tegenwoordig bij Netflix)
  • Blog:http://looksgoodworkswell.blogspot.com/

15. Maak de interactie direct

  • in page action
  • inline editing

16. Maak de interactie direct

  • in context tools

17. Voorkom grenzen in de interactie

  • inline assistant
  • Every space jump is
  • a mental speed bump

18. Voorkom grenzen in de interactie

  • Liever scrolling dan paging

19. Principes voor rijke interactie

  • Principes voor feedback

20. Geef directe terugkoppeling

  • auto complete

21. Nodig uit, laat ondekken

  • tooltip
  • hover invitation

22. Laat overgangen zien

  • Tijd lijkt sneller te gaan
  • Interactie vertraagt
  • Relatie tussen objecten
  • Aandacht krijgen

23. Principes voor rijke interactie

  • Principes voor informatie

24. Denk in objecten 25. Verbind informatie met interactiviteit

  • multi-variate views

26. Sleutelprincipes voor rijke interactie

  • Prefer direct, lightweight, in-page interaction
  • Provide invitations beforehand, transitions during, and feedback after interaction
  • Think in objects and tie information to interactivity

27. Samenvattend

  • 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.
  • 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!
  • De kwaliteit van een dergelijke rijke interactie is in hoge mate afhankelijk van de visuele detaillering, in alle drie de fasen van directe manipulatie.

28. Tenslotte, wat verder niets te maken heeft met interactie 29. Bedankt voor jullie aandacht