De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Interaction design: structuur en gedrag. Waar bevinden we ons in het proces?

Verwante presentaties


Presentatie over: "Interaction design: structuur en gedrag. Waar bevinden we ons in het proces?"— Transcript van de presentatie:

1 Interaction design: structuur en gedrag

2 Waar bevinden we ons in het proces?

3

4

5 Flowchart klaar. En nu?

6 Hoe komen we van hier...

7 ...naar hier?

8 wireframes?

9 wireframes...

10 wireframes!

11 wireframes 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 wat wel:wat 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 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 –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

17 schieten soms tekort...

18 wireframes

19 schieten soms tekort... wireframes

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

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

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

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

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

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

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

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

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

29 Terug naar STATES wireframes 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 Terug naar STATES wireframes 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 ‘Wireflow’ of ‘taskframe’ wireframes

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

33 Bronnen wireframes 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)an Saffer (2007), Interact Richard Cecil (2007), Documenting the Design of Rich Internet Applications: A Visual Language for State,

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

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


Download ppt "Interaction design: structuur en gedrag. Waar bevinden we ons in het proces?"

Verwante presentaties


Ads door Google