iad2 0910 q4 les 3 documenteren van rijke interactie
DESCRIPTION
TRANSCRIPT
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/
‘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:AffordancesActivering (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.
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 beknoptInteractievolgorde wordt duidelijkVeel details
Nadelen:Geen contextGeen timingArbeidsintensief
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 nodigMinimale inspanning, goede resultatenWordt gemakkelijk begrepenIn aanvulling op andere documenten
Nadelen:Weinig detailsGeen technische documentatieWerkt slecht als deliverable
Wireframes met keyframes
Wireframes met keyframes
Voordelen:Bekende en duidelijke deliverableHolistische benadering: alles in éénKunnen ook gemakkelijk full-screen veranderingen vastleggenVeelal goede verhouding kosten/baten
Nadelen:Wordt ingewikkeld met veel ‘states’Grote informatie-dichtheid in wireframesGeen 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 gebruikerEen 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-idioomRijke 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
[email protected]://vakgroep.cmd.hro.nl/iad/iad2_0910q4/http://project.cmi.hro.nl/2008_2009/rewind/platform/