SlideShare ist ein Scribd-Unternehmen logo
1 von 32
Downloaden Sie, um offline zu lesen
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, 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
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
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/
Nog zo’n voorbeeld…




                      http://musicovery.com/
‘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‟
‘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’*

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
‘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, Adaptive Path
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.
Terug naar ons BBC
voorbeeld
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
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/

Weitere ähnliche Inhalte

Andere mochten auch

HOSHVA PR Meetup#1 - Reputation Institute
HOSHVA PR Meetup#1 - Reputation InstituteHOSHVA PR Meetup#1 - Reputation Institute
HOSHVA PR Meetup#1 - Reputation InstituteOksana Hoshva
 
Week 29 Sponges
Week 29 SpongesWeek 29 Sponges
Week 29 SpongesCorey Topf
 
Zappos - General Mills - 8-5-09
Zappos - General Mills - 8-5-09Zappos - General Mills - 8-5-09
Zappos - General Mills - 8-5-09zappos
 
Week 6 Sponges
Week 6 SpongesWeek 6 Sponges
Week 6 SpongesCorey Topf
 
Week2 S Ponges
Week2 S PongesWeek2 S Ponges
Week2 S PongesCorey Topf
 
Zappos - WOA - Offset And Beyond - 5-5-09
Zappos - WOA - Offset And Beyond - 5-5-09Zappos - WOA - Offset And Beyond - 5-5-09
Zappos - WOA - Offset And Beyond - 5-5-09zappos
 
13 trender som kommer påverka din affär i framtiden
13 trender som kommer påverka din affär i framtiden13 trender som kommer påverka din affär i framtiden
13 trender som kommer påverka din affär i framtidenJohan Ronnestam
 
Fordonsindustrin — Kunskap och kompetens i framtiden
Fordonsindustrin — Kunskap och kompetens i framtidenFordonsindustrin — Kunskap och kompetens i framtiden
Fordonsindustrin — Kunskap och kompetens i framtidenJohan Ronnestam
 
Making Java Groovy (JavaOne 2013)
Making Java Groovy (JavaOne 2013)Making Java Groovy (JavaOne 2013)
Making Java Groovy (JavaOne 2013)Ken Kousen
 
kewei2
kewei2kewei2
kewei2ytdtz
 
Eerste Bijeenkomst Afstudeerders
Eerste Bijeenkomst AfstudeerdersEerste Bijeenkomst Afstudeerders
Eerste Bijeenkomst AfstudeerdersHans Kemp
 
Cest Laplus Grande Richesse
Cest Laplus Grande RichesseCest Laplus Grande Richesse
Cest Laplus Grande Richessejean_michel
 
Disambiguating Advanced Computing for Humanities Researchers
Disambiguating Advanced Computing for Humanities ResearchersDisambiguating Advanced Computing for Humanities Researchers
Disambiguating Advanced Computing for Humanities ResearchersBaden Hughes
 
Techo aug.22nd
Techo aug.22ndTecho aug.22nd
Techo aug.22ndCorey Topf
 
Zappos - SANG Conference - 2-23-09
Zappos - SANG Conference - 2-23-09Zappos - SANG Conference - 2-23-09
Zappos - SANG Conference - 2-23-09zappos
 

Andere mochten auch (20)

HOSHVA PR Meetup#1 - Reputation Institute
HOSHVA PR Meetup#1 - Reputation InstituteHOSHVA PR Meetup#1 - Reputation Institute
HOSHVA PR Meetup#1 - Reputation Institute
 
Techo may16
Techo may16Techo may16
Techo may16
 
Week 29 Sponges
Week 29 SpongesWeek 29 Sponges
Week 29 Sponges
 
Migrants in greece
Migrants in greeceMigrants in greece
Migrants in greece
 
Zappos - General Mills - 8-5-09
Zappos - General Mills - 8-5-09Zappos - General Mills - 8-5-09
Zappos - General Mills - 8-5-09
 
Kick Off
Kick OffKick Off
Kick Off
 
Incroyable
IncroyableIncroyable
Incroyable
 
Week 6 Sponges
Week 6 SpongesWeek 6 Sponges
Week 6 Sponges
 
Week2 S Ponges
Week2 S PongesWeek2 S Ponges
Week2 S Ponges
 
Zappos - WOA - Offset And Beyond - 5-5-09
Zappos - WOA - Offset And Beyond - 5-5-09Zappos - WOA - Offset And Beyond - 5-5-09
Zappos - WOA - Offset And Beyond - 5-5-09
 
13 trender som kommer påverka din affär i framtiden
13 trender som kommer påverka din affär i framtiden13 trender som kommer påverka din affär i framtiden
13 trender som kommer påverka din affär i framtiden
 
Fordonsindustrin — Kunskap och kompetens i framtiden
Fordonsindustrin — Kunskap och kompetens i framtidenFordonsindustrin — Kunskap och kompetens i framtiden
Fordonsindustrin — Kunskap och kompetens i framtiden
 
Making Java Groovy (JavaOne 2013)
Making Java Groovy (JavaOne 2013)Making Java Groovy (JavaOne 2013)
Making Java Groovy (JavaOne 2013)
 
Copyleft
CopyleftCopyleft
Copyleft
 
kewei2
kewei2kewei2
kewei2
 
Eerste Bijeenkomst Afstudeerders
Eerste Bijeenkomst AfstudeerdersEerste Bijeenkomst Afstudeerders
Eerste Bijeenkomst Afstudeerders
 
Cest Laplus Grande Richesse
Cest Laplus Grande RichesseCest Laplus Grande Richesse
Cest Laplus Grande Richesse
 
Disambiguating Advanced Computing for Humanities Researchers
Disambiguating Advanced Computing for Humanities ResearchersDisambiguating Advanced Computing for Humanities Researchers
Disambiguating Advanced Computing for Humanities Researchers
 
Techo aug.22nd
Techo aug.22ndTecho aug.22nd
Techo aug.22nd
 
Zappos - SANG Conference - 2-23-09
Zappos - SANG Conference - 2-23-09Zappos - SANG Conference - 2-23-09
Zappos - SANG Conference - 2-23-09
 

Ähnlich wie Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie

CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction
CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich InteractionCMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction
CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich InteractionFerry den Dopper
 
0708 Iad2 Q3 Hoorcollege2
0708 Iad2 Q3 Hoorcollege20708 Iad2 Q3 Hoorcollege2
0708 Iad2 Q3 Hoorcollege2Hans Kemp
 
IAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionIAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionFerry den Dopper
 
Third Generation Internet Applications
Third Generation Internet ApplicationsThird Generation Internet Applications
Third Generation Internet ApplicationsPatrick Koning
 
Html5 jeugdwerknet
Html5 jeugdwerknetHtml5 jeugdwerknet
Html5 jeugdwerknetHans Rossel
 
Usabilityweb magazine nr 1
Usabilityweb magazine nr 1Usabilityweb magazine nr 1
Usabilityweb magazine nr 1srprs.me
 
2007-may-31 HL7 NL Themamiddag V3 Architecture
2007-may-31 HL7 NL Themamiddag V3 Architecture2007-may-31 HL7 NL Themamiddag V3 Architecture
2007-may-31 HL7 NL Themamiddag V3 ArchitectureMichael van der Zel
 
CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
CMD Interaction Design - Y2 Q1 les 2 - Rich InteractionCMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
CMD Interaction Design - Y2 Q1 les 2 - Rich InteractionFerry den Dopper
 
Applicatie Architectuur, Java Frameworks en ADF
Applicatie Architectuur, Java Frameworks en ADFApplicatie Architectuur, Java Frameworks en ADF
Applicatie Architectuur, Java Frameworks en ADFLucas Jellema
 
2007-12-13 - SDN - Mobile Application Development Do's and Don'ts
2007-12-13 - SDN - Mobile Application Development Do's and Don'ts2007-12-13 - SDN - Mobile Application Development Do's and Don'ts
2007-12-13 - SDN - Mobile Application Development Do's and Don'tsJaap van Ekris
 
XML tekortkomingen en pluspunten
XML   tekortkomingen en pluspuntenXML   tekortkomingen en pluspunten
XML tekortkomingen en pluspuntenMarc de Graauw
 
2009 10 Sdc09 Iw01 Nick Boumans Social Networking
2009 10 Sdc09 Iw01 Nick Boumans   Social Networking2009 10 Sdc09 Iw01 Nick Boumans   Social Networking
2009 10 Sdc09 Iw01 Nick Boumans Social NetworkingNick Boumans
 
Moderne Software Engineering
Moderne Software EngineeringModerne Software Engineering
Moderne Software Engineeringguestf2fc08
 
Reactieve applicaties; klaar voor de toekomst
Reactieve applicaties; klaar voor de toekomstReactieve applicaties; klaar voor de toekomst
Reactieve applicaties; klaar voor de toekomstNLJUG
 
Reactieve applicaties allard buijze
Reactieve applicaties   allard buijzeReactieve applicaties   allard buijze
Reactieve applicaties allard buijzeNLJUG
 
Presentatie @RC Groningen Oost
Presentatie @RC Groningen OostPresentatie @RC Groningen Oost
Presentatie @RC Groningen Oostfolkjur
 

Ähnlich wie Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie (20)

CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction
CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich InteractionCMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction
CMD Interaction Design - Y2 Q1 les 3 - Documenting Rich Interaction
 
0708 Iad2 Q3 Hoorcollege2
0708 Iad2 Q3 Hoorcollege20708 Iad2 Q3 Hoorcollege2
0708 Iad2 Q3 Hoorcollege2
 
IAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich InteractionIAD 4 - les 4+5 - Documenting Rich Interaction
IAD 4 - les 4+5 - Documenting Rich Interaction
 
Third Generation Internet Applications
Third Generation Internet ApplicationsThird Generation Internet Applications
Third Generation Internet Applications
 
Html5 jeugdwerknet
Html5 jeugdwerknetHtml5 jeugdwerknet
Html5 jeugdwerknet
 
Usabilityweb magazine nr 1
Usabilityweb magazine nr 1Usabilityweb magazine nr 1
Usabilityweb magazine nr 1
 
2007-may-31 HL7 NL Themamiddag V3 Architecture
2007-may-31 HL7 NL Themamiddag V3 Architecture2007-may-31 HL7 NL Themamiddag V3 Architecture
2007-may-31 HL7 NL Themamiddag V3 Architecture
 
CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
CMD Interaction Design - Y2 Q1 les 2 - Rich InteractionCMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
CMD Interaction Design - Y2 Q1 les 2 - Rich Interaction
 
Applicatie Architectuur, Java Frameworks en ADF
Applicatie Architectuur, Java Frameworks en ADFApplicatie Architectuur, Java Frameworks en ADF
Applicatie Architectuur, Java Frameworks en ADF
 
Cloud computing lunchsessie (v2)
Cloud computing lunchsessie (v2)Cloud computing lunchsessie (v2)
Cloud computing lunchsessie (v2)
 
2007-12-13 - SDN - Mobile Application Development Do's and Don'ts
2007-12-13 - SDN - Mobile Application Development Do's and Don'ts2007-12-13 - SDN - Mobile Application Development Do's and Don'ts
2007-12-13 - SDN - Mobile Application Development Do's and Don'ts
 
XML tekortkomingen en pluspunten
XML   tekortkomingen en pluspuntenXML   tekortkomingen en pluspunten
XML tekortkomingen en pluspunten
 
Alles Over Api's
Alles Over Api'sAlles Over Api's
Alles Over Api's
 
2009 10 Sdc09 Iw01 Nick Boumans Social Networking
2009 10 Sdc09 Iw01 Nick Boumans   Social Networking2009 10 Sdc09 Iw01 Nick Boumans   Social Networking
2009 10 Sdc09 Iw01 Nick Boumans Social Networking
 
Moderne Software Engineering
Moderne Software EngineeringModerne Software Engineering
Moderne Software Engineering
 
Api kooien les 1
Api kooien les 1Api kooien les 1
Api kooien les 1
 
Reactieve applicaties; klaar voor de toekomst
Reactieve applicaties; klaar voor de toekomstReactieve applicaties; klaar voor de toekomst
Reactieve applicaties; klaar voor de toekomst
 
Reactieve applicaties allard buijze
Reactieve applicaties   allard buijzeReactieve applicaties   allard buijze
Reactieve applicaties allard buijze
 
Cloud computing overzicht
Cloud computing overzichtCloud computing overzicht
Cloud computing overzicht
 
Presentatie @RC Groningen Oost
Presentatie @RC Groningen OostPresentatie @RC Groningen Oost
Presentatie @RC Groningen Oost
 

Mehr von Hans Kemp

Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011Hans Kemp
 
Mijn cmd beleving
Mijn cmd belevingMijn cmd beleving
Mijn cmd belevingHans Kemp
 
Multimodal, crossmedia, multi platform
Multimodal, crossmedia, multi platformMultimodal, crossmedia, multi platform
Multimodal, crossmedia, multi platformHans Kemp
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobileHans Kemp
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobileHans Kemp
 
1011q1 design for mobile les 4 - usabilitytesting for mobile
1011q1 design for mobile    les 4 - usabilitytesting for mobile1011q1 design for mobile    les 4 - usabilitytesting for mobile
1011q1 design for mobile les 4 - usabilitytesting for mobileHans Kemp
 
1011 q1 iadd1 de gebruiker heeft altijd gelijk
1011 q1 iadd1   de gebruiker heeft altijd gelijk1011 q1 iadd1   de gebruiker heeft altijd gelijk
1011 q1 iadd1 de gebruiker heeft altijd gelijkHans Kemp
 
Iadd1 1011 q1 introductie
Iadd1 1011 q1 introductieIadd1 1011 q1 introductie
Iadd1 1011 q1 introductieHans Kemp
 
Gobelins hro workshop kick-off
Gobelins hro workshop kick-offGobelins hro workshop kick-off
Gobelins hro workshop kick-offHans Kemp
 
1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en postures1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en posturesHans Kemp
 
Uxd blog workshop
Uxd blog workshopUxd blog workshop
Uxd blog workshopHans Kemp
 
Interactieve datavisualisaties
Interactieve datavisualisatiesInteractieve datavisualisaties
Interactieve datavisualisatiesHans Kemp
 
User experience design web en mobile - introduction
User experience design   web en mobile - introductionUser experience design   web en mobile - introduction
User experience design web en mobile - introductionHans Kemp
 
1011 q1 project 5 kick off
1011 q1 project 5 kick off1011 q1 project 5 kick off
1011 q1 project 5 kick offHans Kemp
 
1011q1 design for mobile les 1 the carry principle
1011q1 design for mobile les 1   the carry principle1011q1 design for mobile les 1   the carry principle
1011q1 design for mobile les 1 the carry principleHans Kemp
 
1011 q1 minor kickoff
1011 q1 minor kickoff1011 q1 minor kickoff
1011 q1 minor kickoffHans Kemp
 
Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4Hans Kemp
 
User experiencedesignfronteers
User experiencedesignfronteersUser experiencedesignfronteers
User experiencedesignfronteersHans Kemp
 

Mehr von Hans Kemp (20)

Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011Voorlichting tweedejaars 16 februari 2011
Voorlichting tweedejaars 16 februari 2011
 
Mijn cmd beleving
Mijn cmd belevingMijn cmd beleving
Mijn cmd beleving
 
Ict lab
Ict labIct lab
Ict lab
 
Multimodal, crossmedia, multi platform
Multimodal, crossmedia, multi platformMultimodal, crossmedia, multi platform
Multimodal, crossmedia, multi platform
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobile
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobile
 
1011q1 design for mobile les 4 - usabilitytesting for mobile
1011q1 design for mobile    les 4 - usabilitytesting for mobile1011q1 design for mobile    les 4 - usabilitytesting for mobile
1011q1 design for mobile les 4 - usabilitytesting for mobile
 
1011 q1 iadd1 de gebruiker heeft altijd gelijk
1011 q1 iadd1   de gebruiker heeft altijd gelijk1011 q1 iadd1   de gebruiker heeft altijd gelijk
1011 q1 iadd1 de gebruiker heeft altijd gelijk
 
Iadd1 1011 q1 introductie
Iadd1 1011 q1 introductieIadd1 1011 q1 introductie
Iadd1 1011 q1 introductie
 
Gobelins hro workshop kick-off
Gobelins hro workshop kick-offGobelins hro workshop kick-off
Gobelins hro workshop kick-off
 
1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en postures1011Q1 Design For Mobile Les 2 - wireless, context en postures
1011Q1 Design For Mobile Les 2 - wireless, context en postures
 
Uxd blog workshop
Uxd blog workshopUxd blog workshop
Uxd blog workshop
 
Interactieve datavisualisaties
Interactieve datavisualisatiesInteractieve datavisualisaties
Interactieve datavisualisaties
 
User experience design web en mobile - introduction
User experience design   web en mobile - introductionUser experience design   web en mobile - introduction
User experience design web en mobile - introduction
 
1011 q1 project 5 kick off
1011 q1 project 5 kick off1011 q1 project 5 kick off
1011 q1 project 5 kick off
 
1011q1 design for mobile les 1 the carry principle
1011q1 design for mobile les 1   the carry principle1011q1 design for mobile les 1   the carry principle
1011q1 design for mobile les 1 the carry principle
 
Bio
BioBio
Bio
 
1011 q1 minor kickoff
1011 q1 minor kickoff1011 q1 minor kickoff
1011 q1 minor kickoff
 
Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4Iad2 0910 q1 hoorcollege 4
Iad2 0910 q1 hoorcollege 4
 
User experiencedesignfronteers
User experiencedesignfronteersUser experiencedesignfronteers
User experiencedesignfronteers
 

Iad2 0809 Q4 Hoorcollege 3: Documenteren Van Rijke Interactie

  • 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/
  • 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.
  • 15. Drie methodes om rijke interactie te documenteren* Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path
  • 17. Frame-by-frame Voordelen: • Helder en beknopt • Interactievolgorde wordt duidelijk • Veel details Nadelen: • Geen context • Geen timing • Arbeidsintensief
  • 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
  • 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/