Your SlideShare is downloading. ×
0
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Iad2 0910 q4 les 2   dynamische interactie
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Iad2 0910 q4 les 2 dynamische interactie

665

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Interaction design patterns na Tidwell<br />Het einde van de paginametafoor<br />
  • 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. 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. 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. Voorbeeld – bbc.co.uk<br />
  • 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. Knoppen<br />Muis en keyboard<br />Leftmouse button<br />Right mouse button<br />Middlemouse button<br />Scroll wheel<br />Meta-keys<br />
  • 8. Muisacties<br />Point<br />Click<br />Right-click<br />Click and drag<br />Double-click<br />Chord-click<br />Double-drag<br />
  • 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. Selecteren<br />Discrete selectie<br />Discrete selection<br />Aaneengeslotenselectie<br />Contiguous selection<br />
  • 11. Voorbeeld: ‘drag and drop’<br />Het ‘drag and drop’ idioom is een al heel langtoegepast pattern datgoed het ‘direct manipulation’ principeillustreert. <br />
  • 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. 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. Principe: maak het direct<br />Pattern: ‘In-PageEditing’<br />
  • 15. Principe: maak het direct<br />Pattern: ‘Module Configuration’<br />‘Non-configuration state’<br />‘Invitation to configure’<br />‘Configuration’<br />‘Completion’<br />
  • 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. 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. Principe: maak het direct<br />Antipattern: ‘Drag and Drop Action’<br />
  • 19. Principe: hou het licht<br />Pattern: ‘Always-Visible Tools’<br />‘Visible tool’<br />‘Invitation’<br />‘Completion’<br />
  • 20. Principe: hou het licht<br />Pattern: ‘Hover-Reveal Tools’<br />‘Normal state’<br />‘Invitation’<br />
  • 21. Principe: hou het licht<br />Anti-pattern: ‘Hover and Cover’<br />Anti-pattern: ‘MysteryMeat’<br />
  • 22. Principe: hou het licht<br />Pattern: ‘Secondary Menu’<br />‘Normal view of route’<br />‘Invitation’<br />‘Menu’<br />
  • 23. Principe: blijf op de pagina<br />Pattern: ‘DialogOverlay’<br />Orbitz: date picker control <br />Netflix: Lightbox Effect<br />
  • 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. 1. ‘Activation’<br />3. ‘Customization inlay’<br />2. ‘Customization inlay (slide)’<br />Principe: blijf op de pagina<br />Pattern: ‘Dialog Inlay’<br />
  • 26. ‘Google Reader list view’<br />‘List inlay’<br />Principe: blijf op de pagina<br />Pattern: ‘List Inlay’<br />
  • 27. Principe: blijf op de pagina<br />Pattern: ‘Inline Paging’<br />Pattern: ‘Scrolled Paging: Carousel’<br />Pattern: ‘Virtual Panning’<br />
  • 28. Principe: blijf op de pagina<br />Pattern: ‘Zoomable User Interface’<br />Online collectie Hard Rock Café<br />
  • 29. Principe: geefeenuitnodiging<br />Pattern: ‘Call to Action Invitation’<br />
  • 30. Principe: geefeenuitnodiging<br />Pattern: ‘Hover Invitation’<br />
  • 31. Principe: gebruikovergangen<br />Pattern: ‘Brighten and Dim’<br />
  • 32. Principe: gebruikovergangen<br />Pattern: ‘Animation’<br />‘Dragging module’<br />‘Zoom-back animation’<br />
  • 33. Principe: gebruikovergangen<br />Pattern: ‘Spotlight’<br />Bijvoorbeeldvoor het benadrukken van veranderingen<br />(Backpackit)<br />
  • 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. Principe: reageeronmiddelijk<br />Pattern: ‘Refining Search’<br />Met verschillendesoorten controls worden de zoekresultaten ‘real-time’ bijgewerkt. <br />
  • 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. 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 />

×