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?

f.den.dopper@hr.nl

@ferrydendopper