CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction
-
Upload
ferry-den-dopper -
Category
Documents
-
view
667 -
download
0
Transcript of CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction
![Page 1: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/1.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Documenting Rich Interaction
![Page 2: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/2.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Jeffrey Zeldman (2007), Web 3.0, A List Apart
“Wireframing Ajax is a bitch.”
![Page 3: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/3.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Hoe wireframe je dit?
www.sultana.nl
![Page 4: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/4.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
En dit?
www.luchtmacht-experience.nl
![Page 5: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/5.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
‘States’
Zijn de verschillende toestanden waarin een systemen of object zich kan bevinden
‘Statusverandering’ van systeem of object
Events of handelingen van gebruiker
State Transition Diagram (STD) lijkt wel op ‘flow chart’
http://yourdon.com/strucanalysis/wiki/index.php?title=Chapter_4
![Page 6: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/6.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
‘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
![Page 7: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/7.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
‘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, hst. 2.
![Page 8: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/8.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
‘Interesting moments’
Uit: Scott (2009). Designing Web Interfaces.
![Page 9: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/9.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
‘Interesting moments’
![Page 10: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/10.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Methodes om rijke interactie te documenteren
Frame-by-frame
Lo-Fi animaties
Wireframes met keyframes
Wireflows
![Page 11: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/11.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Frame-by-frame
![Page 12: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/12.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Frame-by-frame
Voordelen:• Helder en beknopt• Interactievolgorde wordt duidelijk• Veel details
Nadelen:• Geen context• Geen timing• Arbeidsintensief
![Page 13: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/13.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
![Page 14: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/14.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
![Page 15: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/15.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
![Page 16: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/16.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
![Page 17: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/17.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
![Page 18: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/18.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
![Page 19: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/19.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
Voordelen:• Geen werkend prototype nodig• Minimale inspanning, goede resultaten• Wordt gemakkelijk begrepen
Nadelen:• Weinig details• Geen technische documentatie
![Page 20: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/20.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Wireframes met keyframes
![Page 21: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/21.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
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
![Page 22: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/22.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
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
![Page 23: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/23.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
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 24: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/24.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
‘Wireflow’ of ‘taskframe’*
*Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State.
![Page 25: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/25.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Samenvattend
• Het traditionele wireframe hoort bij het pagina-idioom
• Rijke 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 ‘wireflow’ of ‘taskframe’, biedt vaak een bruikbaar compromis tussen volledigheid en haalbaarheid
![Page 26: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/26.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Even oefenen
http://www.den-dopper.com/cmd/demo-schrijfhulp
/ State Transition Diagram Interesting Moments tabel
(voor aanpassen van een vorige stap) Wireflow
(voor aanpassen van een vorige stap)
![Page 27: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/27.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Hoe documenteer je dit?
www.sultana.nl
![Page 28: CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction](https://reader036.fdocuments.in/reader036/viewer/2022062514/557cc07cd8b42a1b0c8b52ba/html5/thumbnails/28.jpg)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper