Vastleggen van dynamiekRijke interactie documenteren

Interaction designIAD2Q3 Hoorcollege 2

Bronnen

Bill Scott (2007), Designing with AJAX: Yahoo! Patterns Library, http://sessions.visitmix.com/, (MIX07>Breakout>Designer)

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/

Interaction designIAD2Q3 Hoorcollege 2

Heel mooi, maar hoe ‘schetsen’ we dat?

Principes voor rijke interactie

Naar: Bill Scott, Yahoo! Pattern Library (tegenwoordig bij Netflix)

Blog: http://looksgoodworkswell.blogspot.com/

Interaction designIAD2Q3 Hoorcollege 2

Quote

“Wireframing AJAX is a bitch.”

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

Interaction designIAD2Q3 Hoorcollege 2

Asynchrone communicatie met server

Bij AJAX gaan interactie en dataverkeer met de server niet langer gelijk op (asynchroon)

Interaction designIAD2Q3 Hoorcollege 2

Met rijke interactie is wireframing een ramp

http://www.intelisea.com

Interaction designIAD2Q3 Hoorcollege 2

Hoe zou je dit moeten ‘framen’?

http://www.moma.org/exhibitions/2008/elasticmind/

Interaction designIAD2Q3 Hoorcollege 2

‘States’ betekent documenteren

Bijvoorbeeld de drie fasen van ‘drag and drop’

Alle drie dienen te worden gespecificeerd

Daarbij gaat het oa. om:

• Affordances

• Activering

• Overgangen

• Timing

Interaction designIAD2Q3 Hoorcollege 2

Drie methodes om rijke interactie te documenteren*Frame-by-frame

Lo-Fi animaties

Wireframes met keyframes

*volgens Dan Saffer, Adaptive Path

Interaction designIAD2Q3 Hoorcollege 2

Frame-by-frame

Interaction designIAD2Q3 Hoorcollege 2

Frame-by-frame

Voordelen:– Helder en beknopt

– Interactievolgorde wordt duidelijk

– Veel details

Nadelen:– Geen context

– Geen timing

– Arbeidsintensief

Interaction designIAD2Q3 Hoorcollege 2

Low-Fi animatie

Interaction designIAD2Q3 Hoorcollege 2

Lo-Fi animatie

Voordelen:– Geen werkend prototype nodig

– Minimale inspanning, goede resultaten

– Wordt gemakkelijk begrepen

– In aanvulling op andere documenten

Nadelen:– Weinig details

– Geen technische documentatie

– Werkt slecht als deliverable

Interaction designIAD2Q3 Hoorcollege 2

Wireframes met keyframes

Interaction designIAD2Q3 Hoorcollege 2

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 designIAD2Q3 Hoorcollege 2

Anti-patterns

Interaction designIAD2Q3 Hoorcollege 2

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

– Etc. (zie de talloze voorbeelden uit de presentatie van Bill Scott)

Interaction designIAD2Q3 Hoorcollege 2

Het verband tussen ‘states’ en interactieDe 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

Interaction designIAD2Q3 Hoorcollege 2

Notatie conventies

Asynchrone ‘state transition’

Synchrone ‘state transition’

Interaction designIAD2Q3 Hoorcollege 2

‘Wireflow’ of ‘taskframe’

Interaction designIAD2Q3 Hoorcollege 2

Nog een paar inspirerende voorbeelden

Interaction designIAD2Q3 Hoorcollege 2

Bedankt voor jullie aandacht