0
Vastleggen van dynamiek<br />Rijke interactie documenteren<br />
Bronnen<br />Bill Scott & Theresa Neil (2009), Designing Web Interfaces. <br />Jeffrey Zeldman (2007), Web 3.0, http://www...
Ajax - AsynchronousJavaScript And XML <br />‘Ajax engine’ laag tussen gebruiker en server; activiteiten van gebruikers en ...
Quote<br />“Wireframing AJAX is a bitch.”<br />Jeffrey Zeldman (2007), Web 3.0, A List Apart<br />
Hoe zou je dit moeten ‘framen’?<br />http://www.moma.org/exhibitions/2008/elasticmind/<br />
Of dit?<br />http://www.sultana.nl/<br />
En deze experience?<br />
Met rijke interactie is wireframing moeilijk<br />http://www.luchtmacht-experience.nl/ <br />
Nogzo’nvoorbeeld…<br />http://musicovery.com/<br />
‘States’<br />Zijn de verschillendetoestandenwaarineensystemen of object zichkanbevinden<br />‘Statusverandering’ van syst...
‘States’ tijdens een ‘drag and drop’<br />Bijvoorbeeld de verschillende fasen van ‘drag and drop’<br />Dienen allemaal te ...
‘Interesting moments’*<br />Eensimpele ‘drag and drop’ bevatzo’n 15 ‘microstates’ die behorentewordengedocumenteerd<br />B...
‘Interesting moments’<br />Uit: Scott (2009). Designing Web Interfaces.<br />
‘Interesting moments’<br />
Drie methodes om rijke interactie te documenteren*<br />Frame-by-frame<br />Lo-Fi animaties<br />Wireframes met keyframes<...
Frame-by-frame<br />
Frame-by-frame<br />Voordelen:<br />Helder en beknopt<br />Interactievolgorde wordt duidelijk<br />Veel details<br />Nadel...
Low-Fi animatie<br />
Low-Fi animatie<br />
Low-Fi animatie<br />
Low-Fi animatie<br />
Low-Fi animatie<br />
Low-Fi animatie<br />
Lo-Fi animatie<br />Voordelen:<br />Geen werkend prototype nodig<br />Minimale inspanning, goede resultaten<br />Wordt gem...
Wireframes met keyframes<br />
Wireframes met keyframes<br />Voordelen:<br />Bekende en duidelijke deliverable<br />Holistische benadering: alles in één<...
Terug naar de ‘states’<br />Op moderne websites wemelt het van grote en kleine interactie elementen die verschillende ´sta...
Het verband tussen ‘states’ en interactie*<br />De uitdaging is het vastleggen van het verband tussen de verschillende ‘st...
‘Wireflow’ of ‘taskframe’*<br />*Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual...
Samenvattend<br />Het traditionele wireframe hoortbij het pagina-idioom<br />Rijkeinteractie is onderteverdelen in een dis...
Bedankt voor jullie aandacht<br />j.a.m.kemp@hro.nl<br />http://vakgroep.cmd.hro.nl/iad/iad2_0910q4/<br />http://project.c...
Upcoming SlideShare
Loading in...5
×

Iad2 0910 q4 les 3 documenteren van rijke interactie

592

Published on

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

  • Be the first to like this

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

No notes for slide

Transcript of "Iad2 0910 q4 les 3 documenteren van rijke interactie"

  1. 1. Vastleggen van dynamiek<br />Rijke interactie documenteren<br />
  2. 2. Bronnen<br />Bill Scott & Theresa Neil (2009), Designing Web Interfaces. <br />Jeffrey Zeldman (2007), Web 3.0, http://www.alistapart.com/<br />Dan Saffer (2007), Interaction Design, AdaptivePath’s UX Intensive Workshop (Amsterdam, juni 2007)<br />Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State, http://www.uxmatters.com/mt/archives/2007/12/documenting-the-design-of-rich-internet-applications-a-visual-language-for-state.php<br />
  3. 3. 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 />
  4. 4. Quote<br />“Wireframing AJAX is a bitch.”<br />Jeffrey Zeldman (2007), Web 3.0, A List Apart<br />
  5. 5. Hoe zou je dit moeten ‘framen’?<br />http://www.moma.org/exhibitions/2008/elasticmind/<br />
  6. 6. Of dit?<br />http://www.sultana.nl/<br />
  7. 7. En deze experience?<br />
  8. 8. Met rijke interactie is wireframing moeilijk<br />http://www.luchtmacht-experience.nl/ <br />
  9. 9. Nogzo’nvoorbeeld…<br />http://musicovery.com/<br />
  10. 10. ‘States’<br />Zijn de verschillendetoestandenwaarineensystemen of object zichkanbevinden<br />‘Statusverandering’ van systeem of object<br />Events of handelingen van gebruiker<br />Lijktwel op ‘flow chart’<br />
  11. 11. ‘States’ tijdens een ‘drag and drop’<br />Bijvoorbeeld de verschillende fasen van ‘drag and drop’<br />Dienen allemaal te worden gespecificeerd<br />Daarbij gaat het oa. om:<br />Affordances<br />Activering (invitation)<br />Overgangen <br />Timing<br />
  12. 12. ‘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<br />
  13. 13. ‘Interesting moments’<br />Uit: Scott (2009). Designing Web Interfaces.<br />
  14. 14. ‘Interesting moments’<br />
  15. 15. Drie methodes om rijke interactie te documenteren*<br />Frame-by-frame<br />Lo-Fi animaties<br />Wireframes met keyframes<br />*volgens Dan Saffer, AdaptivePath<br />
  16. 16. Frame-by-frame<br />
  17. 17. 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 />
  18. 18. Low-Fi animatie<br />
  19. 19. Low-Fi animatie<br />
  20. 20. Low-Fi animatie<br />
  21. 21. Low-Fi animatie<br />
  22. 22. Low-Fi animatie<br />
  23. 23. Low-Fi animatie<br />
  24. 24. Lo-Fi animatie<br />Voordelen:<br />Geen werkend prototype nodig<br />Minimale inspanning, goede resultaten<br />Wordt gemakkelijk begrepen<br />In aanvulling op andere documenten<br />Nadelen:<br />Weinig details<br />Geen technische documentatie<br />Werkt slecht als deliverable<br />
  25. 25. Wireframes met keyframes<br />
  26. 26. 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 />
  27. 27. 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 />
  28. 28. 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 />
  29. 29. ‘Wireflow’ of ‘taskframe’*<br />*Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State.<br />
  30. 30. 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 ‘taskframe’, biedtvaakeenbruikbaarcompromistussenvolledigheid en haalbaarheid<br />
  31. 31. Bedankt voor jullie aandacht<br />j.a.m.kemp@hro.nl<br />http://vakgroep.cmd.hro.nl/iad/iad2_0910q4/<br />http://project.cmi.hro.nl/2008_2009/rewind/platform/<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×