Interaction design: structuur en gedrag

Presentatie over: "Interaction design: structuur en gedrag"— Transcript van de presentatie:

1 Interaction design: structuur en gedrag

2 Waar bevinden we ons in het proces?

3 Waar bevinden we ons in het proces?

4 Waar bevinden we ons in het proces?

5 Flowchart klaar. En nu?

6 Hoe komen we van hier...

7 ...naar hier?

8 wireframes?

9 wireframes...

10 wireframes!

11 wireframes wat wel: wat niet: Verklaring van de inhoud
hierarchie onderlinge relaties Demonstreren van de inhoud hoe wordt het gepresenteerd functionaliteit Interactie met de inhoud Heeft niets met esthetiek te maken Bevat geen grafische elementen Communiceert het merk niet

12 wireframes soorten Schetsen Snel, experimenteel Snelle feedback
Alleen inhoud (low fidelity) Schematisch Goed voor het tonen van flows High fidelity wireframes Gedetailleerde wireframes Opmerkingen / Voetnoten Beschrijft inhoud en gedrag Beschrijft functie (voor developers) Wordt begrepen zonder uitleg

13 wireframes soorten Alleen inhoud (low fidelity) Schetsen
Snel, experimenteel Snelle feedback Alleen inhoud (low fidelity) Schematisch Goed voor het tonen van flows High fidelity wireframes Gedetailleerde wireframes Opmerkingen / Voetnoten Beschrijft inhoud en gedrag Beschrijft functie (voor developers) Wordt begrepen zonder uitleg

14 wireframes soorten Schetsen Alleen inhoud (low fidelity)
Snel, experimenteel Snelle feedback Alleen inhoud (low fidelity) Schematisch Goed voor het tonen van flows High fidelity wireframes Gedetailleerde wireframes Opmerkingen / voetnoten Beschrijft inhoud en gedrag Beschrijft functie (voor developers) Wordt begrepen zonder uitleg

15 wireframes

16 wireframes

17 wireframes schieten soms tekort...

18 wireframes schieten soms tekort...

19 wireframes schieten soms tekort...

20 wireframes schieten soms tekort... Bij AJAX gaan interactie en
dataverkeer met de server niet langer gelijk op (asynchroon)

21 wireframes Er is een alternatief: STATES
Bijvoorbeeld de drie fasen van ‘drag and drop’: alle drie dienen te worden gespecificeerd Daarbij gaat het oa. om: Affordances Activering Overgangen Timing

22 wireframes Drie methodes om rijke interactie te documenteren*
Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

23 wireframes Drie methodes om rijke interactie te documenteren*
Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

24 wireframes Drie methodes om rijke interactie te documenteren*
Voordelen: Helder en beknopt Interactievolgorde wordt duidelijk Veel details Nadelen: Geen context Geen timing Arbeidsintensief Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

25 wireframes Drie methodes om rijke interactie te documenteren*
Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

26 wireframes Drie methodes om rijke interactie te documenteren*
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 Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

27 wireframes Drie methodes om rijke interactie te documenteren*
Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

28 wireframes Drie methodes om rijke interactie te documenteren*
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 Frame-by-frame Lo-Fi animaties Wireframes met keyframes *volgens Dan Saffer, Adaptive Path

29 wireframes Terug naar 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 etc. etc.

30 wireframes Terug naar STATES
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

31 wireframes ‘Wireflow’ of ‘taskframe’

32 wireframes Tools Visio OmniGraffle InDesign Fireworks
Powerpoint (yuk!) Flash Flash Catalyst (medio 2009) Software vergelijking:

33 wireframes Bronnen Bill Scott (2007), Designing with AJAX: Yahoo! Patterns Library, (MIX07>Breakout>Designer) Jeffrey Zeldman (2007), Web 3.0, 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,

34 visueel design We kunnen twee delen onderscheiden: Look & feel emotie
kleurgebruik typografie afbeeldingen vorm branding Visuele organisatie perceptie contrast hiërarchie

35 visueel design Visuele organisatie perceptie

36 visueel design Visuele organisatie perceptie

37 visueel design Visuele organisatie contrast

38 visueel design Visuele organisatie hiërarchie