Iad2 0910 q4 les 3   documenteren van rijke interactie
Upcoming SlideShare
Loading in...5
×
 

Iad2 0910 q4 les 3 documenteren van rijke interactie

on

  • 974 views

 

Statistics

Views

Total Views
974
Views on SlideShare
789
Embed Views
185

Actions

Likes
0
Downloads
20
Comments
0

2 Embeds 185

http://vakgroep.cmd.hro.nl 167
http://www.slideshare.net 18

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Iad2 0910 q4 les 3   documenteren van rijke interactie Iad2 0910 q4 les 3 documenteren van rijke interactie Presentation Transcript

    • Vastleggen van dynamiek
      Rijke interactie documenteren
    • 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
    • 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
    • Quote
      “Wireframing AJAX is a bitch.”
      Jeffrey Zeldman (2007), Web 3.0, A List Apart
    • Hoe zou je dit moeten ‘framen’?
      http://www.moma.org/exhibitions/2008/elasticmind/
    • Of dit?
      http://www.sultana.nl/
    • En deze experience?
    • Met rijke interactie is wireframing moeilijk
      http://www.luchtmacht-experience.nl/
    • Nogzo’nvoorbeeld…
      http://musicovery.com/
    • ‘States’
      Zijn de verschillendetoestandenwaarineensystemen of object zichkanbevinden
      ‘Statusverandering’ van systeem of object
      Events of handelingen van gebruiker
      Lijktwel op ‘flow chart’
    • ‘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
    • ‘Interesting moments’*
      Eensimpele ‘drag and drop’ bevatzo’n 15 ‘microstates’ die behorentewordengedocumenteerd
      Bijvoorbeeld in een ‘interesting moments grid’
      *uit: Scott (2009). Designing Web Interfaces
    • ‘Interesting moments’
      Uit: Scott (2009). Designing Web Interfaces.
    • ‘Interesting moments’
    • Drie methodes om rijke interactie te documenteren*
      Frame-by-frame
      Lo-Fi animaties
      Wireframes met keyframes
      *volgens Dan Saffer, AdaptivePath
    • Frame-by-frame
    • Frame-by-frame
      Voordelen:
      Helder en beknopt
      Interactievolgorde wordt duidelijk
      Veel details
      Nadelen:
      Geen context
      Geen timing
      Arbeidsintensief
    • Low-Fi animatie
    • Low-Fi animatie
    • Low-Fi animatie
    • Low-Fi animatie
    • Low-Fi animatie
    • Low-Fi animatie
    • 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
    • Wireframes met keyframes
    • 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
    • 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
    • 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.
    • ‘Wireflow’ of ‘taskframe’*
      *Uit: Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State.
    • 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
    • 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/