1. Vastleggen van dynamiek Rijke interactie documenteren

2. Bronnen Bill Scott & Theresa Neil (2009), Designing Web Interfaces. Jeffrey Zeldman (2007), Web 3.0, http://www.alistapart.com/ Dan Saffer (2007), Interaction Design, AdaptivePath’s UX Intensive Workshop (Amsterdam, juni 2007) 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

3. Ajax - AsynchronousJavaScript And XML ‘Ajax engine’ laag tussen gebruiker en server; activiteiten van gebruikers en respons van het systeem worden onafhankelijk. In de beleving van gebruikers hoeft er dus niet meer op een systeemrespons te worden gewacht. Niet langer wachten op die pagina! Uit: Jesse James Garrett, http://www.adaptivepath.com/publications/essays/archives/000385.php

4. Quote “Wireframing AJAX is a bitch.” Jeffrey Zeldman (2007), Web 3.0, A List Apart

5. Hoe zou je dit moeten ‘framen’? http://www.moma.org/exhibitions/2008/elasticmind/

6. Of dit? http://www.sultana.nl/

7. En deze experience?

8. Met rijke interactie is wireframing moeilijk http://www.luchtmacht-experience.nl/

9. Nogzo’nvoorbeeld… http://musicovery.com/

10. ‘States’ Zijn de verschillendetoestandenwaarineensystemen of object zichkanbevinden ‘Statusverandering’ van systeem of object Events of handelingen van gebruiker Lijktwel op ‘flow chart’

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

12. ‘Interesting moments’* Eensimpele ‘drag and drop’ bevatzo’n 15 ‘microstates’ die behorentewordengedocumenteerd Bijvoorbeeld in een ‘interesting moments grid’ *uit: Scott (2009). Designing Web Interfaces

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

14. ‘Interesting moments’

15. Drie methodes om rijke interactie te documenteren* Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, AdaptivePath

16. Frame-by-frame

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

18. Low-Fi animatie

19. Low-Fi animatie

20. Low-Fi animatie

21. Low-Fi animatie

22. Low-Fi animatie

23. Low-Fi animatie

24. Lo-Fi animatie Voordelen: Geen werkend prototype nodig Minimale inspanning, goede resultaten Wordt gemakkelijk begrepen In aanvulling op andere documenten Nadelen: Weinig details Geen technische documentatie Werkt slecht als deliverable

25. Wireframes met keyframes

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

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

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

29. ‘Wireflow’ of ‘taskframe’* *Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State.

30. 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 ‘taskframe’, biedtvaakeenbruikbaarcompromistussenvolledigheid en haalbaarheid

31. Bedankt voor jullie aandacht j.a.m.kemp@hro.nl http://vakgroep.cmd.hro.nl/iad/iad2_0910q4/ http://project.cmi.hro.nl/2008_2009/rewind/platform/