IAD 4 - les 4+5 - Documenting Rich Interaction
-
Upload
ferry-den-dopper -
Category
Design
-
view
106 -
download
1
description
Transcript of IAD 4 - les 4+5 - Documenting Rich Interaction
Interaction Design 201 Vragen of feedback? @ferrydendopper
Documenting Rich Interaction
Interaction Design 201 Vragen of feedback? @ferrydendopper
Jeffrey Zeldman (2007), Web 3.0, A List Apart
“Wireframing Ajax is a bitch.”
Interaction Design 201 Vragen of feedback? @ferrydendopper
Hoe wireframe je dit?
www.sultana.nl
Interaction Design 201 Vragen of feedback? @ferrydendopper
En dit?
www.luchtmacht-experience.nl
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
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
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.
Interaction Design 201 Vragen of feedback? @ferrydendopper
‘Interesting moments’
Uit: Scott (2009). Designing Web Interfaces.
Interaction Design 201 Vragen of feedback? @ferrydendopper
‘Interesting moments’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Methodes om rijke interactie te documenteren
Frame-by-frame
Lo-Fi animaties
Wireframes met keyframes
Wireflows
Interaction Design 201 Vragen of feedback? @ferrydendopper
Frame-by-frame
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
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
Interaction Design 201 Vragen of feedback? @ferrydendopper
Low-Fi animatie
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
Interaction Design 201 Vragen of feedback? @ferrydendopper
Wireframes met keyframes
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
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
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.
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.
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
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)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Hoe documenteer je dit?
www.sultana.nl
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper