Vastleggen van dynamiek

Rijke interactie documenteren

Bronnen

Bill Scott & Theresa Neil (2009), Designing Web Interfaces.

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/mt/archives/2007/12/documenting-the-design-of-rich-internet-applications-a-visual-language-for-state.php

Ajax - Asynchronous JavaScript And XML

‘Ajax engine’ laag tussen gebruiker en server; activiteiten van gebruikers en respons van het systeem worden onafhankelijk.

In de beleving van gebruikers hoeft er dus niet meer op een systeemrespons te worden gewacht.

Niet langer wachten op die pagina!

Uit: Jesse James Garrett, http://www.adaptivepath.com/publications/essays/archives/000385.php

Quote

“Wireframing AJAX is a bitch.”

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

Hoe zou je dit moeten ‘framen’?

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

Of dit?

http://www.sultana.nl/

En deze experience?

Met rijke interactie is wireframing moeilijk

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

Nog zo’n voorbeeld…

http://musicovery.com/

‘States’

Zijn de verschillende toestanden waarin een systemen of object zich kan bevinden

‘Statusverandering’ van systeem of object

Events of handelingen van gebruiker

Lijkt wel op ‘flow chart’

‘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

‘Interesting moments’Uit: Scott (2009). Designing Web Interfaces.

‘Interesting moments’

Drie methodes om rijke interactie te documenteren*

Frame-by-frameLo-Fi animatiesWireframes met keyframes

*volgens Dan Saffer, Adaptive Path

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

Low-Fi animatie

Low-Fi animatie

Low-Fi animatie

Low-Fi animatie

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

Wireframes met keyframes

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

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.

Terug naar ons BBC voorbeeld

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 ‘taskframe’, biedt vaak een bruikbaar compromis tussen volledigheid en haalbaarheid

Bedankt voor jullie aandacht

j.a.m.kemp@hro.nlhttp://vakgroep.cmd.hro.nl/iadhttp://project.cmi.hro.nl/2008_2009/rewind/platform/