Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

0708 Iad2 Q3 Hoorcollege2

1,597 views

Published on

Published in: Technology, Travel
  • Be the first to comment

  • Be the first to like this

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

×