CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction
Download as PPTX, PDF
0 likes408 views
CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction
- 2. Wireframing Ajax is a bitch.Jeffrey Zeldman (2007), Web 3.0, A List Apart
- 3. Hoe wireframe je dit?www.sultana.nl
- 5. StatesZijn de verschillendetoestandenwaarineensystemen of object zichkanbevindenStatusverandering van systeem of objectEvents of handelingen van gebruikerState Transition Diagram (STD) lijktwel op flow charthttp://yourdon.com/strucanalysis/wiki/index.php?title=Chapter_4
- 6. States tijdens een drag and dropBijvoorbeeld de verschillende fasen van dragand dropDienen allemaal te worden gespecificeerdDaarbij gaat het oa. om:AffordancesActivering (invitation)Overgangen Timing
- 7. Interesting momentsEensimpele drag and drop bevatzon 15 microstates die behorentewordengedocumenteerdBijvoorbeeld in een interesting moments gridUit: Scott (2009). Designing Web Interfaces, hst. 2.
- 8. Interesting momentsUit: Scott (2009). Designing Web Interfaces.
- 10. Methodes om rijke interactie te documenterenFrame-by-frameLo-Fi animatiesWireframes met keyframesWireflows
- 11. Frame-by-frame
- 12. Frame-by-frameVoordelen:Helder en beknoptInteractievolgorde wordt duidelijkVeel detailsNadelen:Geen contextGeen timingArbeidsintensief
- 13. Low-Fi animatie
- 14. Low-Fi animatie
- 15. Low-Fi animatie
- 16. Low-Fi animatie
- 17. Low-Fi animatie
- 18. Low-Fi animatie
- 19. Low-Fi animatieVoordelen:Geen werkend prototype nodigMinimale inspanning, goede resultatenWordt gemakkelijk begrepenNadelen:Weinig detailsGeen technische documentatie
- 21. Wireframes met keyframesVoordelen:Bekende en duidelijke deliverableHolistische benadering: alles in 辿辿nKunnen ook gemakkelijk full-screen veranderingen vastleggenVeelal goede verhouding kosten/batenNadelen:Wordt ingewikkeld met veel statesGrote informatie-dichtheid in wireframesGeen timing
- 22. Terug naar de statesOp moderne websites wemelt het van grote en kleine interactie elementen die verschillende 卒states卒 kennen, bijvoorbeeld:Een link die verandert van Aanmelden naar Aangemeld, afhankelijk van de login status van de gebruikerEen veld voor het invoeren van een afbeeldingstag dat verschijnt na het klikken op een icoon
- 23. Het verband tussen states en interactie*De uitdaging is het vastleggen van het verband tussen de verschillende states van deze paginacomponenten en de interactie, acties van gebruikersToevoeging aan wireframes*: region: een dynamische component die verschillende states kent*Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State.
- 24. Wireflow of taskframe**Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State.
- 25. SamenvattendHet traditionele wireframe hoortbij het pagina-idioomRijkeinteractie is onderteverdelen in een discreet aantal interesting momentsHet vollediguitschrijven van de interesting moments, zoals in de frame-by-fame methode in kannodigzijn, maar is arbeidsintensiefLo-fianimatiedaarentegen is eenechte quick and dirty documentatiemethodeTenslotte, de combinatie van wireframes met keyframes, zoals in de wireflow of taskframe, biedtvaakeenbruikbaarcompromistussenvolledigheid en haalbaarheid
- 26. Even oefenenhttp://www.den-dopper.com/cmd/demo-schrijfhulp/State Transition DiagramInteresting Moments tabel(vooraanpassen van eenvorigestap)Wireflow(vooraanpassen van eenvorigestap)
- 27. Hoe documenteer je dit?www.sultana.nl