0708 Iad2 Q3 Hoorcollege2

1,521 views
1,494 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,521
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

0708 Iad2 Q3 Hoorcollege2

  1. 1. Vastleggen van dynamiek Rijke interactie documenteren
  2. 2. Bronnen <ul><li>Bill Scott (2007), Designing with AJAX: Yahoo! Patterns Library, http://sessions.visitmix.com/ , (MIX07>Breakout>Designer) </li></ul><ul><li>Jeffrey Zeldman (2007), Web 3.0, http://www.alistapart.com/ </li></ul><ul><li>Dan Saffer (2007), Interaction Design, Adaptive Path’s UX Intensive Workshop (Amsterdam, juni 2007) </li></ul><ul><li>Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State, http://www.uxmatters.com/ </li></ul>
  3. 3. Heel mooi, maar hoe ‘schetsen’ we dat? <ul><li>Principes voor rijke interactie </li></ul><ul><li>Naar: Bill Scott, Yahoo! Pattern Library (tegenwoordig bij Netflix) </li></ul><ul><li>Blog: http://looksgoodworkswell.blogspot.com/ </li></ul>
  4. 4. Quote <ul><li>“ Wireframing AJAX is a bitch.” </li></ul><ul><li>Jeffrey Zeldman (2007), Web 3.0, A List Apart </li></ul>
  5. 5. Asynchrone communicatie met server <ul><li>Bij AJAX gaan interactie en dataverkeer met de server niet langer gelijk op (asynchroon) </li></ul>
  6. 6. Met rijke interactie is wireframing een ramp http://www.intelisea.com
  7. 7. Hoe zou je dit moeten ‘framen’? http://www.moma.org/exhibitions/2008/elasticmind/
  8. 8. ‘ States’ betekent documenteren <ul><li>Bijvoorbeeld de drie fasen van ‘drag and drop’ </li></ul><ul><li>Alle drie dienen te worden gespecificeerd </li></ul><ul><li>Daarbij gaat het oa. om: </li></ul><ul><li>Affordances </li></ul><ul><li>Activering </li></ul><ul><li>Overgangen </li></ul><ul><li>Timing </li></ul>
  9. 9. Drie methodes om rijke interactie te documenteren* <ul><li>Frame-by-frame </li></ul><ul><li>Lo-Fi animaties </li></ul><ul><li>Wireframes met keyframes </li></ul>*volgens Dan Saffer, Adaptive Path
  10. 10. Frame-by-frame
  11. 11. Frame-by-frame <ul><li>Voordelen: </li></ul><ul><ul><li>Helder en beknopt </li></ul></ul><ul><ul><li>Interactievolgorde wordt duidelijk </li></ul></ul><ul><ul><li>Veel details </li></ul></ul><ul><li>Nadelen: </li></ul><ul><ul><li>Geen context </li></ul></ul><ul><ul><li>Geen timing </li></ul></ul><ul><ul><li>Arbeidsintensief </li></ul></ul>
  12. 12. Low-Fi animatie
  13. 13. Lo-Fi animatie <ul><li>Voordelen: </li></ul><ul><ul><li>Geen werkend prototype nodig </li></ul></ul><ul><ul><li>Minimale inspanning, goede resultaten </li></ul></ul><ul><ul><li>Wordt gemakkelijk begrepen </li></ul></ul><ul><ul><li>In aanvulling op andere documenten </li></ul></ul><ul><li>Nadelen: </li></ul><ul><ul><li>Weinig details </li></ul></ul><ul><ul><li>Geen technische documentatie </li></ul></ul><ul><ul><li>Werkt slecht als deliverable </li></ul></ul>
  14. 14. Wireframes met keyframes
  15. 15. Wireframes met keyframes <ul><li>Voordelen: </li></ul><ul><ul><li>Bekende en duidelijke deliverable </li></ul></ul><ul><ul><li>Holistische benadering: alles in één </li></ul></ul><ul><ul><li>Kunnen ook gemakkelijk full-screen veranderingen vastleggen </li></ul></ul><ul><ul><li>Veelal goede verhouding kosten/baten </li></ul></ul><ul><li>Nadelen: </li></ul><ul><ul><li>Wordt ingewikkeld met veel ‘states’ </li></ul></ul><ul><ul><li>Grote informatie-dichtheid in wireframes </li></ul></ul><ul><ul><li>Geen timing </li></ul></ul>
  16. 16. Anti-patterns
  17. 17. Terug naar de ‘states’ <ul><li>Op moderne websites wemelt het van grote en kleine interactie elementen die verschillende ´states´ kennen, bijvoorbeeld: </li></ul><ul><ul><li>Een link die verandert van ‘Aanmelden’ naar ‘Aangemeld’, afhankelijk van de login status van de gebruiker </li></ul></ul><ul><ul><li>Een veld voor het invoeren van een afbeeldingstag dat verschijnt na het klikken op een icoon </li></ul></ul><ul><ul><li>Etc. (zie de talloze voorbeelden uit de presentatie van Bill Scott) </li></ul></ul>
  18. 18. Het verband tussen ‘states’ en interactie <ul><li>De uitdaging is het vastleggen van het verband tussen de verschillende ‘states’ van deze paginacomponenten en de interactie, acties van gebruikers </li></ul><ul><li>Toevoeging aan wireframes: ‘region’: een dynamische component die verschillende ‘states’ kent </li></ul>
  19. 19. Notatie conventies <ul><li>Asynchrone ‘state transition’ </li></ul><ul><li>Synchrone ‘state transition’ </li></ul>
  20. 20. ‘ Wireflow’ of ‘taskframe’
  21. 21. Nog een paar inspirerende voorbeelden
  22. 22. Bedankt voor jullie aandacht

×