DESIGN Ontwerpen van Interactieve Systemen Frans Wiering 6 maart 2017
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
Ontwerpproces: de activiteiten Envisionment Understanding Evaluation Conceptual Design Physical 3
Scenario-based design 4
Ontwerp conceptueel ontwerp wat is het voor systeem? logica, functies, structuur en inhoud fysiek ontwerp hoe wordt het systeem gerealiseerd? werking, uiterlijk, interactie 5
Ontwerpproces door de tijd Conceptual design Design concepts Physical design Design space discover define develop deliver Norman, DOET, p. 220 6
Ontwerpconcepten Bill Verplank interactieontwerper http://www.youtube.com/watch?v=c3rxclhzmxy welke vragen stelt hij? Welke antwoorden / voorbeelden? 7
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
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
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
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. 188 11
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. 1.11 12
Metafoor letterlijke betekenis transport 13
Wat is een metafoor? http://www.imdb.com/title/tt0110877/?ref_=fn_al_tt_1 14
Metafoor letterlijke betekenis: transport concept uit een domein (brondomein) wordt toegepast in een ander (doeldomein) betekenissen, associaties manipulatie, acties https://riesouwerkerk.wordpress.com/2015/05/17/de-kracht-van-een-metafoor/ http://www.psyblog.nl/2012/10/24/metaforen-in-taal-en-handelen-je-zonden-wegwassen-kan-dat/ 15
Metaforen in dagelijks leven 16
Metafoor in het ziekenhuis de nieuwe afdeling is een open plek in het bos 17
Een bekende metafoor: droom 18
Implicaties droom gevoel spontaan, authentiek individueel, uniek inspiratie onbereikbaar? immersie van droom 19
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 http://www.apollo-magazine.com/dreams/ 20
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
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
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 http://home.web.cern.ch/about/updates/2014/02/nobel-laureates-formula-universe 23
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
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
Metaforen voor verwijderen bestand 26
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
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
Dingen classificeren en organiseren 29
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
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
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
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
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
Objecten en acties 35
Objectmodel domeinkennis communiceren coach interpreteren clientmodel veranderen client invullen vragenlijst uitvoeren opdracht leren kennen lotgenoten bekijken filmpje 36
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. 202 37
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
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
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 http://www.conceptdraw.com/solution-park/software-mac-os-user-interface 40
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 https://www.youtube.com/watch?v=yw- GeB7PLbM http://www.rocketmill.co.uk/what-is-metro-design-what-are-its-principles 41
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
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
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
Diagrammen visualiseren van informatiestromen en interactieprocessen data flow diagram state transition network heel veel meer hierover in blok 4, Informatiesystemen 45
Casus Hooked! 46
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: http://www.hookedgame.nl/ 47
Conceptueel design: het experiment herkennen = correct kunnen meezingen 48
Vertaling naar gameplay heleboel physical design gamification interactiepatronen design language ordening widgets 49
Storyboard 50
Fysiek ontwerp (hoog niveau) 51
Resultaat hooks are characterized by the presence of vocals, and components that suggest repetition and conventionality https://www.youtube.com/watch?v=gjliif15wjq 52
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