CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction

936 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
936
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction

  1. 1. Rich Interaction<br />There is no page<br />
  2. 2. Ajax (AsynchronousJavaScriptAnd 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 />
  3. 3. Voorbeeld<br />
  4. 4. Voorbeeld<br />
  5. 5. Impact<br />Volledigherladen van pagina’swordtvervangen door kleine content updates.<br />Hyperlink en Submit wordenvervangen door eenscalaaaninteractieveelementen.<br />Micro-interactie en micro-updates leiden tot micro-’states’.<br />Impact voormanier van ontwerpen, bouwen en gebruiken<br />
  6. 6. Desktop-gedrag<br />Drag & drop<br />Resizing<br />Menu’s & toolbars (ookcontextmenu’s)<br />Panels (tabs)<br />enz.<br />THERE IS A WORLD TO EXPLORE<br />6<br />
  7. 7. Vloeiende effecten<br />Geveninformatie over de UI, zodat we:<br />Begrijpendat de computer bezig is<br />Begrijpenwaarobjectennaartoegaan of waarzevandaankomen<br />Zienwat de toestand is van een object<br />THERE IS A WORLD TO EXPLORE<br />7<br />
  8. 8. Directemanipulatie<br />Affordance: Eigenschappenvan een object die duidelijkmaken hoe het moetwordengebruikt<br />Hinting:Aanwijzinggeven<br />
  9. 9. Visuele feedback bij drag & drop<br />Voor gebruiker overgaat tot handelenWelke objecten zijn manipuleerbaar?<br />Gebruiker is begonnen te slepenWat ben je aan het doen? Waar kan het heen?<br />Gebruiker heeft muisknop losgelatenWat is er veranderd? Is het gelukt?<br />
  10. 10. Principesvoorrijkeinteractie<br />Maak het direct<br />Hou het licht<br />Blijf op de pagina<br />Geef een uitnodiging<br />Gebruik overgangen<br />Reageer onmiddellijk<br />Uit: Bill Scott and Theresa Neil (2009). Designing Web Interfaces.<br />
  11. 11. Principe 1: maak het direct<br />Design pattern: ‘In-Page Editing’<br />
  12. 12. Principe 1: maak het direct<br />Invitationtoconfigure<br />Configuration<br />Completion<br />Design pattern: ‘Module Configuration’<br />
  13. 13. Principe 1: maak het direct<br />Default state<br />Invitationtodrag<br />Dragging<br />Dropped<br />Design pattern: ‘Dragand Drop List’<br />
  14. 14. Principe 1: maak het direct<br />Default state<br />Dropped<br />Completed<br />Design pattern: ‘Dragand Drop Action’<br />
  15. 15. Wat gaat hier mis?<br />
  16. 16. Principe 2: hou het licht<br />Visible tool<br />Invitation<br />Completed<br />Design pattern: ‘Always-Visible Tools’<br />
  17. 17. Principe 2: hou het licht<br />Let op de ‘discoverability’<br />Default state<br />Invitation<br />Design pattern: ‘Hover-Reveal Tools’<br />
  18. 18. Wat gaat hier mis?<br />Anti-pattern: ‘Hover and Cover’<br />Anti-pattern: ‘MysteryMeat’<br />
  19. 19. Principe 2: hou het licht<br />Pattern: ‘Secondary Menu’<br />Default state<br />Invitation<br />Menu<br />Design pattern: ‘Secondary Menu’<br />‘Menu’<br />
  20. 20. Principe 3: blijf op de pagina<br />Date Picker Control<br />Lightbox Effect (NetFlix)<br />Design pattern: ‘DialogOverlay’<br />
  21. 21. Design pattern: ‘DialogInlay’<br />1. ‘Activation’<br />3. ‘Customization inlay’<br />2. ‘Customization inlay (slide)’<br />Principe 3: blijf op de pagina<br />
  22. 22. Design pattern: ‘List Inlay’<br />‘Google Reader list view’<br />‘List inlay’<br />Principe 3: blijf op de pagina<br />
  23. 23. Principe 3: blijf op de pagina<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 />
  24. 24. Principe 3: blijf op de pagina<br />Pattern: ‘Inline Paging’ Pattern: ‘Virtual Panning’<br />Pattern: ‘Scrolled Paging: Carousel’<br />
  25. 25. Principe 3: blijf op de pagina<br />Online collectie Hard Rock Café<br />Design pattern: ‘Zoomable User Interface’<br />
  26. 26. Principe 4: geefeenuitnodiging<br />Design pattern: ‘Call to Action Invitation’<br />
  27. 27. Principe 4: geefeenuitnodiging<br />Design pattern: ‘Hover Invitation’<br />
  28. 28. Principe 5: gebruikovergangen<br />Design pattern: ‘Brightenand Dim’<br />
  29. 29. Principe 5: gebruikovergangen<br />Dragging module<br />Zoom-back animation<br />Design pattern: ‘Animation’<br />
  30. 30. Principe 5: gebruikovergangen<br />Bijvoorbeeld voor het benadrukken van veranderingen op het scherm<br />Design pattern: ‘Spotlight’<br />
  31. 31. Principe 6: reageeronmiddelijk<br />Invoeren van ‘z’ doetallenamen die beginnen met een ‘z’ verschijnen. <br />De mogelijkeoptiesverschijnentijdens het typen.<br />‘Tab’ selecteertonmiddelijk de geselecteerdeoptie.<br />‘Tab’ geeft NIET de eerstemogelijkeoptie.<br />Design pattern: ‘Auto Complete’<br />
  32. 32. Principe 6: reageeronmiddelijk<br />Met verschillendesoorten controls worden de zoekresultaten ‘real-time’ bijgewerkt. <br />Design pattern: ‘Refining Search’<br />
  33. 33. 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 6 ontwerpprincipes voor rijke interactie die zorgen voor een betere gebruiksbeleving. De succesvolle interactie ontwerppatronen volgen één of meer van deze ontwerpprincipes. <br />
  34. 34. Designing Web Interfaces<br />Bill Scott<br />Tentamenstof<br />Patterns:<br />In-Page Editing: <br /> Single Field Inline Edit<br /> Multi-Field Inline Edit<br /> Overlay Edit<br /> Module Configuration<br />Drag and Drop:<br />Alles<br />Direct Manipulation:<br />Toggle Selection<br />Collected Selection<br />Contextual Tools<br />Always Visible Tools<br />Hover-Reveal Tools<br />Toggle-Reveal Tools<br />Overlays<br />Dialog Overlay<br />Inlays<br />Dialog Inlay<br />List Inlay (accordion)<br />Virtual Pages<br />Inline Paging<br />Scrolled Paging (carousel)<br />
  35. 35. Even oefenen: Maakhiereen RIA van<br />http://www.kpn.com/mobiel/alle-telefoons.cat<br />
  36. 36. Verder met de module-opdracht<br />Pas ook rich interaction patterns toe!<br />
  37. 37. Vragen? Feedback?<br />f.den.dopper@hr.nl<br />@ferrydendopper<br />

×