CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction

949 views
890 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
949
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction

  1. 1. Documenting Rich Interaction <br />
  2. 2. “Wireframing Ajax is a bitch.”<br />Jeffrey Zeldman (2007), Web 3.0, A List Apart<br />
  3. 3. Hoe wireframe je dit?<br />www.sultana.nl<br />
  4. 4. En dit?<br />www.luchtmacht-experience.nl<br />
  5. 5. ‘States’<br />Zijn de verschillendetoestandenwaarineensystemen of object zichkanbevinden<br />‘Statusverandering’ van systeem of object<br />Events of handelingen van gebruiker<br />State Transition Diagram (STD) lijktwel op ‘flow chart’<br />http://yourdon.com/strucanalysis/wiki/index.php?title=Chapter_4<br />
  6. 6. ‘States’ tijdens een ‘drag and drop’<br />Bijvoorbeeld de verschillende fasen van ‘dragand drop’<br />Dienen allemaal te worden gespecificeerd<br />Daarbij gaat het oa. om:<br />Affordances<br />Activering (invitation)<br />Overgangen <br />Timing<br />
  7. 7. ‘Interesting moments’<br />Eensimpele ‘drag and drop’ bevatzo’n 15 ‘microstates’ die behorentewordengedocumenteerd<br />Bijvoorbeeld in een ‘interesting moments grid’<br />Uit: Scott (2009). Designing Web Interfaces, hst. 2.<br />
  8. 8. ‘Interesting moments’<br />Uit: Scott (2009). Designing Web Interfaces.<br />
  9. 9. ‘Interesting moments’<br />
  10. 10. Methodes om rijke interactie te documenteren<br />Frame-by-frame<br />Lo-Fi animaties<br />Wireframes met keyframes<br />Wireflows<br />
  11. 11. Frame-by-frame<br />
  12. 12. Frame-by-frame<br />Voordelen:<br />Helder en beknopt<br />Interactievolgorde wordt duidelijk<br />Veel details<br />Nadelen:<br />Geen context<br />Geen timing<br />Arbeidsintensief<br />
  13. 13. Low-Fi animatie<br />
  14. 14. Low-Fi animatie<br />
  15. 15. Low-Fi animatie<br />
  16. 16. Low-Fi animatie<br />
  17. 17. Low-Fi animatie<br />
  18. 18. Low-Fi animatie<br />
  19. 19. Low-Fi animatie<br />Voordelen:<br />Geen werkend prototype nodig<br />Minimale inspanning, goede resultaten<br />Wordt gemakkelijk begrepen<br />Nadelen:<br />Weinig details<br />Geen technische documentatie<br />
  20. 20. Wireframes met keyframes<br />
  21. 21. Wireframes met keyframes<br />Voordelen:<br />Bekende en duidelijke deliverable<br />Holistische benadering: alles in één<br />Kunnen ook gemakkelijk full-screen veranderingen vastleggen<br />Veelal goede verhouding kosten/baten<br />Nadelen:<br />Wordt ingewikkeld met veel ‘states’<br />Grote informatie-dichtheid in wireframes<br />Geen timing<br />
  22. 22. Terug naar de ‘states’<br />Op moderne websites wemelt het van grote en kleine interactie elementen die verschillende ´states´ kennen, bijvoorbeeld:<br />Een link die verandert van ‘Aanmelden’ naar ‘Aangemeld’, afhankelijk van de login status van de gebruiker<br />Een veld voor het invoeren van een afbeeldingstag dat verschijnt na het klikken op een icoon<br />
  23. 23. Het verband tussen ‘states’ en interactie*<br />De uitdaging is het vastleggen van het verband tussen de verschillende ‘states’ van deze paginacomponenten en de interactie, acties van gebruikers<br />Toevoeging aan wireframes*: ‘region’: een dynamische component die verschillende ‘states’ kent<br />*Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State.<br />
  24. 24. ‘Wireflow’ of ‘taskframe’*<br />*Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State.<br />
  25. 25. Samenvattend<br />Het traditionele wireframe hoortbij het pagina-idioom<br />Rijkeinteractie is onderteverdelen in een discreet aantal ‘interesting moments’<br />Het vollediguitschrijven van de ‘interesting moments’, zoals in de ‘frame-by-fame’ methode in kannodigzijn, maar is arbeidsintensief<br />Lo-fianimatiedaarentegen is eenechte ‘quick and dirty’ documentatiemethode<br />Tenslotte, de combinatie van wireframes met keyframes, zoals in de ‘wireflow’ of ‘taskframe’, biedtvaakeenbruikbaarcompromistussenvolledigheid en haalbaarheid<br />
  26. 26. Even oefenen<br />http://www.den-dopper.com/cmd/demo-schrijfhulp/<br />State Transition Diagram<br />Interesting Moments tabel(vooraanpassen van eenvorigestap)<br />Wireflow(vooraanpassen van eenvorigestap)<br />
  27. 27. Hoe documenteer je dit?<br />www.sultana.nl<br />
  28. 28. Vragen? Feedback?<br />f.den.dopper@hr.nl<br />@ferrydendopper<br />

×