Your SlideShare is downloading. ×
0
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie

386

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
386
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Vastleggen van dynamiek Rijke interactie documenteren
  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
  4. Quote “Wireframing AJAX is a bitch.” Jeffrey Zeldman (2007), Web 3.0, A List Apart
  5. Hoe zou je dit moeten ‘framen’? http://www.moma.org/exhibitions/2008/elasticmind/
  6. Of dit? http://www.sultana.nl/
  7. En deze experience?
  8. Met rijke interactie is wireframing moeilijk http://www.luchtmacht-experience.nl/
  9. Nog zo’n voorbeeld… http://musicovery.com/
  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
  13. ‘Interesting moments’ Uit: Scott (2009). Designing Web Interfaces.
  14. ‘Interesting moments’
  15. Drie methodes om rijke interactie te documenteren* Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path
  16. Frame-by-frame
  17. Frame-by-frame Voordelen: • Helder en beknopt • Interactievolgorde wordt duidelijk • Veel details Nadelen: • Geen context • Geen timing • Arbeidsintensief
  18. Low-Fi animatie
  19. Low-Fi animatie
  20. Low-Fi animatie
  21. Low-Fi animatie
  22. Low-Fi animatie
  23. Low-Fi animatie
  24. 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
  25. Wireframes met keyframes
  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.
  29. ‘Wireflow’ of ‘taskframe’* *Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State.
  30. Terug naar ons BBC voorbeeld
  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/

×