IAD 4 - les 4+5 - Documenting Rich Interaction

Interaction Design 201 Vragen of feedback? @ferrydendopper

Documenting Rich Interaction


Jeffrey Zeldman (2007), Web 3.0, A List Apart

“Wireframing Ajax is a bitch.”


Hoe wireframe je dit?

www.sultana.nl

http://www.sultana.nl/



En dit?

www.luchtmacht-experience.nl

http://www.luchtmacht-experience.nl/

http://www.luchtmacht-experience.nl/


‘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



http://yourdon.com/strucanalysis/wiki/index.php?title=Image:Figure46.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: Affordances Activering (invitation) Overgangen Timing


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



Uit: Scott (2009). Designing Web Interfaces.


Methodes om rijke interactie te documenteren

Frame-by-frame

Lo-Fi animaties

Wireframes met keyframes

Wireflows


Frame-by-frame


Frame-by-frame

Voordelen:• Helder en beknopt• Interactievolgorde wordt duidelijk• Veel details

Nadelen:• Geen context• Geen timing• Arbeidsintensief


Low-Fi animatie


Low-Fi animatie

Voordelen:• Geen werkend prototype nodig• Minimale inspanning, goede resultaten• Wordt gemakkelijk begrepen

Nadelen:• Weinig details• Geen technische documentatie



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


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


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.


‘Wireflow’ of ‘taskframe’*

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


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


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)

http://www.den-dopper.com/cmd/demo-schrijfhulp/




Hoe documenteer je dit?

www.sultana.nl




Vragen? Feedback?

[email protected]

@ferrydendopper

IAD 4 - les 4+5 - Documenting Rich Interaction

Design

Transcript of IAD 4 - les 4+5 - Documenting Rich Interaction