Iad2 0910 q4 les 3 documenteren van rijke interactie

  • 558 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
558
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
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, AdaptivePath’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 - AsynchronousJavaScript 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
  • 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. Nogzo’nvoorbeeld…
    http://musicovery.com/
  • 10. ‘States’
    Zijn de verschillendetoestandenwaarineensystemen of object zichkanbevinden
    ‘Statusverandering’ van systeem of object
    Events of handelingen van gebruiker
    Lijktwel 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’*
    Eensimpele ‘drag and drop’ bevatzo’n 15 ‘microstates’ die behorentewordengedocumenteerd
    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, AdaptivePath
  • 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. Samenvattend
    Het traditionele wireframe hoortbij het pagina-idioom
    Rijkeinteractie is onderteverdelen in een discreet aantal ‘interesting moments’
    Het vollediguitschrijven van de ‘interesting moments’, zoals in de ‘frame-by-fame’ methode in kannodigzijn, maar is arbeidsintensief
    Lo-fianimatiedaarentegen is eenechte ‘quick and dirty’ documentatiemethode
    Tenslotte, de combinatie van wireframes met keyframes, zoals in de ‘taskframe’, biedtvaakeenbruikbaarcompromistussenvolledigheid en haalbaarheid
  • 31. Bedankt voor jullie aandacht
    j.a.m.kemp@hro.nl
    http://vakgroep.cmd.hro.nl/iad/iad2_0910q4/
    http://project.cmi.hro.nl/2008_2009/rewind/platform/