iad2 0910 q4 les 3 documenteren van rijke interactie
DESCRIPTION
TRANSCRIPT
![Page 1: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/1.jpg)
Vastleggen van dynamiek
Rijke interactie documenteren
![Page 2: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/2.jpg)
Bronnen
Bill Scott & Theresa Neil (2009), Designing Web Interfaces. Jeffrey Zeldman (2007), Web 3.0, http://www.alistapart.com/ Dan Saffer (2007), Interaction Design, Adaptive Path’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
![Page 3: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/3.jpg)
Ajax - Asynchronous JavaScript 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
![Page 4: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/4.jpg)
Quote
“Wireframing AJAX is a bitch.”
Jeffrey Zeldman (2007), Web 3.0, A List Apart
![Page 5: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/5.jpg)
Hoe zou je dit moeten ‘framen’?
http://www.moma.org/exhibitions/2008/elasticmind/
![Page 6: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/6.jpg)
Of dit?
http://www.sultana.nl/
![Page 7: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/7.jpg)
En deze experience?
![Page 8: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/8.jpg)
Met rijke interactie is wireframing moeilijk
http://www.luchtmacht-experience.nl/
![Page 10: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/10.jpg)
‘States’
Zijn de verschillende toestanden waarin een systemen of object zich kan bevinden
‘Statusverandering’ van systeem of object
Events of handelingen van gebruiker
Lijkt wel op ‘flow chart’
![Page 11: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/11.jpg)
‘States’ tijdens een ‘drag and drop’
Bijvoorbeeld de verschillende fasen van ‘drag and drop’
Dienen allemaal te worden gespecificeerd
Daarbij gaat het oa. om:AffordancesActivering (invitation)Overgangen Timing
![Page 12: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/12.jpg)
‘Interesting moments’*
Een simpele ‘drag and drop’ bevat zo’n 15 ‘microstates’ die behoren te worden gedocumenteerd
Bijvoorbeeld in een ‘interesting moments grid’
*uit: Scott (2009). Designing Web Interfaces
![Page 13: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/13.jpg)
‘Interesting moments’Uit: Scott (2009). Designing Web Interfaces.
![Page 15: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/15.jpg)
Drie methodes om rijke interactie te documenteren*
Frame-by-frameLo-Fi animatiesWireframes met keyframes
*volgens Dan Saffer, Adaptive Path
![Page 16: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/16.jpg)
Frame-by-frame
![Page 17: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/17.jpg)
Frame-by-frame
Voordelen:Helder en beknoptInteractievolgorde wordt duidelijkVeel details
Nadelen:Geen contextGeen timingArbeidsintensief
![Page 18: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/18.jpg)
Low-Fi animatie
![Page 19: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/19.jpg)
Low-Fi animatie
![Page 20: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/20.jpg)
Low-Fi animatie
![Page 21: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/21.jpg)
Low-Fi animatie
![Page 22: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/22.jpg)
Low-Fi animatie
![Page 23: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/23.jpg)
Low-Fi animatie
![Page 24: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/24.jpg)
Lo-Fi animatie
Voordelen:Geen werkend prototype nodigMinimale inspanning, goede resultatenWordt gemakkelijk begrepenIn aanvulling op andere documenten
Nadelen:Weinig detailsGeen technische documentatieWerkt slecht als deliverable
![Page 25: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/25.jpg)
Wireframes met keyframes
![Page 26: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/26.jpg)
Wireframes met keyframes
Voordelen:Bekende en duidelijke deliverableHolistische benadering: alles in éénKunnen ook gemakkelijk full-screen veranderingen vastleggenVeelal goede verhouding kosten/baten
Nadelen:Wordt ingewikkeld met veel ‘states’Grote informatie-dichtheid in wireframesGeen timing
![Page 27: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/27.jpg)
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 gebruikerEen veld voor het invoeren van een afbeeldingstag dat verschijnt na
het klikken op een icoon
![Page 28: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/28.jpg)
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.
![Page 29: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/29.jpg)
‘Wireflow’ of ‘taskframe’*
*Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State.
![Page 30: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/30.jpg)
Samenvattend
Het traditionele wireframe hoort bij het pagina-idioomRijke interactie is onder te verdelen in een discreet aantal
‘interesting moments’Het volledig uitschrijven van de ‘interesting moments’, zoals
in de ‘frame-by-fame’ methode in kan nodig zijn, maar is arbeidsintensief
Lo-fi animatie daarentegen is een echte ‘quick and dirty’ documentatiemethode
Tenslotte, de combinatie van wireframes met keyframes, zoals in de ‘taskframe’, biedt vaak een bruikbaar compromis tussen volledigheid en haalbaarheid
![Page 31: Iad2 0910 q4 les 3 documenteren van rijke interactie](https://reader033.vdocuments.net/reader033/viewer/2022061210/548d468ab479598e6a8b46d2/html5/thumbnails/31.jpg)
Bedankt voor jullie aandacht
[email protected]://vakgroep.cmd.hro.nl/iad/iad2_0910q4/http://project.cmi.hro.nl/2008_2009/rewind/platform/