2. 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
3. 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/0
00385.php
10. ‘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‟
11. ‘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
12. ‘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
17. Frame-by-frame
Voordelen:
• Helder en beknopt
• Interactievolgorde wordt duidelijk
• Veel details
Nadelen:
• Geen context
• Geen timing
• Arbeidsintensief
26. 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
27. 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
28. 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.
31. 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
32. Bedankt voor jullie aandacht
j.a.m.kemp@hro.nl
http://vakgroep.cmd.hro.nl/iad
http://project.cmi.hro.nl/2008_2009/rewind/platform/