1. 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

4. En dit? www.luchtmacht-experience.nl

5. ‘States’ Zijn de verschillendetoestandenwaarineensystemen of object zichkanbevinden ‘Statusverandering’ van systeem of object Events of handelingen van gebruiker State Transition Diagram (STD) lijktwel op ‘flow chart’ http://yourdon.com/strucanalysis/wiki/index.php?title=Chapter_4

6. ‘States’ tijdens een ‘drag and drop’ Bijvoorbeeld de verschillende fasen van ‘dragand drop’ Dienen allemaal te worden gespecificeerd Daarbij gaat het oa. om: Affordances Activering (invitation) Overgangen Timing

7. ‘Interesting moments’ Eensimpele ‘drag and drop’ bevatzo’n 15 ‘microstates’ die behorentewordengedocumenteerd Bijvoorbeeld in een ‘interesting moments grid’ Uit: Scott (2009). Designing Web Interfaces, hst. 2.

8. ‘Interesting moments’ Uit: Scott (2009). Designing Web Interfaces.

9. ‘Interesting moments’

10. Methodes om rijke interactie te documenteren Frame-by-frame Lo-Fi animaties Wireframes met keyframes Wireflows

11. Frame-by-frame

12. Frame-by-frame Voordelen: Helder en beknopt Interactievolgorde wordt duidelijk Veel details Nadelen: Geen context Geen timing Arbeidsintensief

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 animatie Voordelen: Geen werkend prototype nodig Minimale inspanning, goede resultaten Wordt gemakkelijk begrepen Nadelen: Weinig details Geen technische documentatie

20. Wireframes met keyframes

21. Wireframes met keyframes Voordelen: Bekende en duidelijke deliverable Holistische benadering: alles in één Kunnen ook gemakkelijk full-screen veranderingen vastleggen Veelal goede verhouding kosten/baten Nadelen: Wordt ingewikkeld met veel ‘states’ Grote informatie-dichtheid in wireframes Geen timing

22. Terug naar de ‘states’ Op 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 gebruiker Een 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 gebruikers Toevoeging 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. Samenvattend Het traditionele wireframe hoortbij het pagina-idioom Rijkeinteractie is onderteverdelen in een discreet aantal ‘interesting moments’ Het vollediguitschrijven van de ‘interesting moments’, zoals in de ‘frame-by-fame’ methode in kannodigzijn, maar is arbeidsintensief Lo-fianimatiedaarentegen is eenechte ‘quick and dirty’ documentatiemethode Tenslotte, de combinatie van wireframes met keyframes, zoals in de ‘wireflow’ of ‘taskframe’, biedtvaakeenbruikbaarcompromistussenvolledigheid en haalbaarheid

26. Even oefenen http://www.den-dopper.com/cmd/demo-schrijfhulp/ State Transition Diagram Interesting Moments tabel(vooraanpassen van eenvorigestap) Wireflow(vooraanpassen van eenvorigestap)

27. Hoe documenteer je dit? www.sultana.nl

28. Vragen? Feedback? f.den.dopper@hr.nl @ferrydendopper