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
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
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
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/