DESIGN. Ontwerpen van Interactieve Systemen. Frans Wiering 6 maart 2017

Transcriptie

1 DESIGN Ontwerpen van Interactieve Systemen Frans Wiering 6 maart 2017

2 Vandaag deel 1: kort college Design lange versie presentatie komt online te staan deel 2: Jan Dirk Fijnheer Steps to Design a Household Energy Game

3 Ontwerpproces: de activiteiten Envisionment Understanding Evaluation Conceptual Design Physical 3

4 Scenario-based design 4

5 Ontwerp conceptueel ontwerp wat is het voor systeem? logica, functies, structuur en inhoud fysiek ontwerp hoe wordt het systeem gerealiseerd? werking, uiterlijk, interactie 5

6 Ontwerpproces door de tijd Conceptual design Design concepts Physical design Design space discover define develop deliver Norman, DOET, p

7 Ontwerpconcepten Bill Verplank interactieontwerper welke vragen stelt hij? Welke antwoorden / voorbeelden? 7

8 Ontwerpconcepten (Bill Verplank) bijdrage aan exploreren mogelijkheden kennis in de wereld, kennis in het hoofd nadenken over affordances hoe doe je het? (how do you do?) hoe manipuleren we de wereld? handvat continu, drukknop discreet hoe neem je waar? (how do you feel?) Perceptie, betekenis, ook experience (H5) Hot en cool media (McLuhan) hoe weet je dat? (how do you know?) hoe leren we het systeem kennen? pad vs. kaart 8

9 Ontwerpruimte de ontwerpruimte verzameling van alle mogelijke oplossingen er zijn altijd beperkingen geld, users, verwachtingen houd ontwerpruimte zo lang mogelijk groot mogelijk voorkomt vastzitten in locaal optimum globaal (A) en locaal (B) optimum neem onomkeerbare beslissingen zo laat mogelijk 9

10 Ontwerprationale waarom bepaalde beslissingen trade-offs à claims emotify.org onderzoek Anna Aljanaki spelers bepalen emotie muziek lange fragmenten à betere emotie korte fragmenten à meer data NB: GEMS model (categorisch) 10

11 Conceptueel ontwerp Clear conceptual design is central to developing systems that are understandable. to ensure that their conception of the system is easily learned by people and fits with their expectations and preferences. That is so that people can develop a clear mental model of the system. Benyon, p

12 Conceptueel ontwerp conceptueel ontwerp produceert een conceptueel model onderliggende metafoor van het systeem beschrijft hoe dingen (objecten, acties) in het systeem geclassificeerd en georganiseerd zijn gericht op mentale model van de gebruikers Norman, DOET, fig

13 Metafoor letterlijke betekenis transport 13

14 Wat is een metafoor? 14

15 Metafoor letterlijke betekenis: transport concept uit een domein (brondomein) wordt toegepast in een ander (doeldomein) betekenissen, associaties manipulatie, acties

16 Metaforen in dagelijks leven 16

17 Metafoor in het ziekenhuis de nieuwe afdeling is een open plek in het bos 17

18 Een bekende metafoor: droom 18

19 Implicaties droom gevoel spontaan, authentiek individueel, uniek inspiratie onbereikbaar? immersie van droom 19

20 Implicaties droom waarom niet een andere term? ideaal, doel, ambitie wat ondersteunt deze metafoor niet? hard werken, hulp, samenwerking, macht andere culturele betekenissen irrationeel boze machten, bezetenheid The Vision of Tondal omgeving Jheronimus Bosch 20

21 Veel taal is metaforisch ruimdenkend een warme persoonlijkheid het duurt wel weer lang door de bomen het bos niet meer zien een oppervlakkig gesprek het hoogtepunt was de tiramisu hooked on music probeer eens een zin te maken die geen metafoor bevat 21

22 Denken in metaforen experientialism (Lakoff and Johnson) denken begint met ervaring van de ruimte om je heen metaforen rondom ruimte heel fundamenteel voor ons denken ( image schemas ) container, balance, source-path-goal, centreperiphery voorbeelden muzieknoten (en leeftijden) zijn hoog of laag smaken in balans brengen lijn in het betoog waarheen leidt de weg die wij moeten gaan 22

23 Metaforen in de wetenschap evolutieleer, stamboom denken manipuleren van tekens / symbolen computationele modellering een mens is een record een taak is een algoritme is wiskunde de ultieme metafoor? Nobelprijswinnaar François Englert presenteert formule voor massa elementaire deeltjes 23

24 Metaforen in ontwerp toepassing in ontwerp beschrijf iets nieuws in termen van iets bekends ondersteunen mentale modellen benutten kennis in het hoofd metaforen brengen ook eenheid in je ontwerp desktop 24

25 Metafoor als blend metafoor is meer dan eenvoudige mapping elementen uit twee domeinen versmelten nieuwe emergente eigenschappen kan doordat ze op een generiek niveau eigenschappen delen 25

26 Metaforen voor verwijderen bestand 26

27 Metaforen ontwerpen source domain has some features target domain has some concepts and features analyse the relationship between them. too many features in source domain: conceptual baggage too few features may lead to confusion aim for people deriving appropriate expectations. 27

28 Tips voor metafoorontwerp Integratie: coherentie en consistentie Unpacking: is de blend gemakkelijk te begrijpen? Topologie: zijn organisatie en structuur gelijksoortig? Analyse: functionaliteit, evaluatie Ontwerp: representatie van objecten en acties Richt je op het creëren van de juiste verwachtingen 28

29 Dingen classificeren en organiseren 29

30 Scenario s en design Abstract Specificatie van design constraints Formalisering Verhalen Conceptuele scenario s Concrete scenario s Use cases Wat willen en doen mensen Genereren van ideeën en requirements Envisioning en evaluatie Specificatie en implementatie 30

31 Object-actie analyse 1. analyseer afzonderlijke scenario s objecten zelfstandig naamwoorden acties werkwoorden 2. samenvatten per scenario voeg verwante objecten en acties samen 3. verzamel alle objecten en acties van de verschillende scenario s 4. samenvatten voeg nogmaals verwante / identieke acties en objecten samen resultaat: overzicht van van acties en objecten 31

32 Conceptueel model diagram dat object-actie analyse weergeeft verschillende technieken object model entity-relationship (ER) diagram site map laat onderliggende samenhang van systeem zien à mentale model object model ER diagram 32

33 Oefening (Sleepcare) De coach wenst hem goedemorgen en geeft aan dat er nog een vragenlijst is om Leo wat beter te leren kennen, voordat de opdrachten beginnen. Leo maakt de readiness to change vragenlijst. Het blijkt dat Leo in de Precontemplation fase zit. De coach legt uit dat motivatie om de veranderingen door te voeren een belangrijke factor is, en dat het erop lijkt dat Leo nog wat extra motivatie kan gebruiken om te veranderen. De coach stelt voor om een filmpje van andere mensen met slaapproblemen te bekijken. De coach laat een filmpje van lotgenoten zien bepaal objecten en acties 33

34 Oefening (Sleepcare) De coach wenst hem goedemorgen en geeft aan dat er nog een vragenlijst is om Leo wat beter te leren kennen, voordat de opdrachten beginnen. Leo maakt de readiness to change vragenlijst. Het blijkt dat Leo in de Precontemplation fase zit. De coach legt uit dat motivatie om de veranderingen door te voeren een belangrijke factor is, en dat het erop lijkt dat Leo nog wat extra motivatie kan gebruiken om te veranderen. De coach stelt voor om een filmpje van andere mensen met slaapproblemen te bekijken. De coach laat een filmpje van lotgenoten zien ( aantal werkwoorden niet gemarkeerd die niet direct acties zijn...) 34

35 Objecten en acties 35

36 Objectmodel domeinkennis communiceren coach interpreteren clientmodel veranderen client invullen vragenlijst uitvoeren opdracht leren kennen lotgenoten bekijken filmpje 36

37 Fysiek ontwerp Physical design is concerned with how things are going to work and with detailing the look and feel of the product. Physical design is about structuring interactions into logical sequences and about clarifying and presenting the allocation of functions and knowledge between people and devices. Benyon, p

38 Fysiek ontwerp fysiek ontwerp details m.b.t. hoe de dingen werken en de look en feel van het product vertaling van de abstracte representaties van conceptueel model in concreet systeemontwerp onderdelen operationeel ontwerp specificatie van hoe alles werkt representationeel ontwerp kleuren, vormen, groottes, look en feel interactieontwerp verdelen van functies over mens en technologie 38

39 Operationeel ontwerp Benyon geeft niet veel uitleg specificatie van methoden voor zoeken en vergelijken aanbevelen, matchen classificeren interpreteren en natuurlijk ook kennisrepresentatie databases coach interpreteren operationeel ontwerp in Sleepcare scenario domeinkennis clientmodel leren kennen 39

40 Representationeel ontwerp Ontwerptalen bestaan uit elementen: sliders, kleuren, buttons, principes voor samenvoegen van de elementen Verzameling van qualifying situations : invloed van context zie ook college visueel design 40

41 Voorbeeld: Microsoft s Metro Design language voor Windows Phone 7; ook voor Windows 8 niet erg succesvol gebleken wel heel interessante gedachtengang content not chrome GeB7PLbM 41

42 Interactieontwerp Interactiepatronen typen handelingen om het systeem te bedienen eenvoudige voorbeelden muisklikken gestures van touch interface worden samengevoegd tot hoog-niveau patronen, b.v. menu s en submenu s kalenders en klokken 42

43 Interactieontwerp: taakverdeling wat doet de mens, wat de computer taakanalyse: een vak apart Norman s Paradox of Technology Human Factors again - vergeten dingen, verliezen hun aandacht, kunnen niet goed met getallen omgaan, zijn soms chagrijnig + kunnen goed omgaan met ambiguïteit, vaagheid, inconsistentie, incoherentie; hebben humor? hebben emoties 43

44 Taakverdeling dus Øbijv. gebruik mensen als sensoren voor hoog-niveau detectie Øbijv. gebruik een computer voor snelle symboolverwerking weer terug naar de scenario s analyseren, schetsen voortdurend evalueren 44

45 Diagrammen visualiseren van informatiestromen en interactieprocessen data flow diagram state transition network heel veel meer hierover in blok 4, Informatiesystemen 45

46 Casus Hooked! 46

47 Hooked! Serious game, ontwikkeld door onderzoekers UvA en UU doel: uitvinden wat muziek catchy maakt kwestie van lange-termijn geheugen hoe snel herkennen mensen een nummer? snelste herkenning: is dit de muzikale hook? app release bij top-2000 van 2013 (iphone, ipad, ipod Touch) 2000 songs, streaming via Spotify Premium versie voor webbrowser: 47

48 Conceptueel design: het experiment herkennen = correct kunnen meezingen 48

49 Vertaling naar gameplay heleboel physical design gamification interactiepatronen design language ordening widgets 49

50 Storyboard 50

51 Fysiek ontwerp (hoog niveau) 51

52 Resultaat hooks are characterized by the presence of vocals, and components that suggest repetition and conventionality 52

53 Samenvatting algemeen ontwerpconcepten ontwerpruimte conceptueel ontwerp metaforen, blending object-actie analyse conceptuele modellen, diagrammen fysiek ontwerp operationeel ontwerp representationeel ontwerp interactieontwerp ontwerptalen / design language interactiepatronen, diagrammen 53