Design. Ontwerpen van Interactieve Systemen. Frans Wiering, 2 maart 2015

Design

Ontwerpen van Interactieve Systemen Frans Wiering, 2 maart 2015

Nationale Studenten Enquete • Dit is een bonafide landelijke enquete, mede namens onze universiteit

Nationale Studenten Enquete 35%

• Respons tot nu toe:

30% 25% 20% 31%

15% 10% 5% 0%

• Help! Red ons imago! – Deze week laatste kans – Kijk in je mail van 13 januari – Of vraag een nieuwe link

www.nse.nl

18%

22%

24%

Ontwerpproces: de activiteiten Envisionment

Understanding

Evaluation

Conceptual

Physical 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

Overzicht 

algemene ontwerpprincipes  



conceptueel ontwerp   



metaforen conceptueel ontwerp met scenario’s object-actie analyse

fysiek ontwerp  



ontwerpconcepten ontwerpruimte

ontwerptalen interactiepatronen

praktijk: websites  

informatiearchitectuur (wat) navigatieontwerp (hoe)

6

Ontwerpconcepten

   

Bill Verplank interactieontwerper http://www.youtube.com/watch?v=C3rxCLhzmXY welke vragen stelt hij? Welke antwoorden / voorbeelden? 7

Ontwerpconcepten 

Hoe doe je het? (How do you do?)  



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 manipuleren we de wereld? Handvat, drukknop

Hoe leren we het systeem kennen? Bijv. ‘pad vs. kaart’

ontwerp ‘affordances’ bij deze vragen 8

Ontwerpruimte   

er zijn altijd beperkingen (geld, locatie, users, verwachtingen…) voortdurende interactie: brainstorming, (herziening van) scenario’s en requirements … uiteraard wil je hierbij de ontwerpruimte zo groot mogelijk houden 



ontwerprationale (waarom bepaalde beslissingen) 



neem onomkeerbare beslissingen zo laat mogelijk Trade-offs  claims

voorbeeld: emotify.org   

spelers game bepalen emotie muziek lange fragmenten  betere emotie korte fragmenten  meer data

9

Conceptual design 

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 10

Conceptual design 

A good conceptual model comes from 



Considering the underlying metaphor used to provide the structure for design Considering how things are classified and organized.

11

Metaforen in design



letterlijke betekenis ‘transport’ 12

Wat is een metafoor?

http://www.imdb.com/title/tt0110877/?ref_=fn_al_tt_1

13

Dus wat doet een metafoor? 



concept uit een domein (brondomein) wordt toegepast in een ander (doeldomein) suggestief  



betekenissen, associaties manipulatie, acties, taken

toepassing in ontwerp  

beschrijf iets nieuws in termen van iets bekends ondersteunt mentale modellen 14

Metaphors according to Jane Hirshfield

http://www.youtube.com/watch?v=A0edKgL9EgM

15

Metaphors according to Jane Hirshfield 

  



  

Metaphors are a way of talking about one thing by describing something else. Metaphors think with the imagination and the senses. A metaphor isn’t true or untrue in any ordinary sense. Metaphors are art, not science, but they can still feel right or wrong. Metaphors get under your skin by ghosting right past the logical mind. We are used to thinking in images. Similes tend to make you think. Metaphors let you feel things directly. 16

Metaforen in dagelijks leven

17

Een bekende metafoor: droom

18

Implicaties



spontaan gevoel individueel, uniek geen moeite onbereikbaar immersie van droom



waarom niet een andere term?

    





wat ondersteunt deze metafoor niet? 



ideaal, doel, ambitie hard werken, hulp, samenwerking, macht…

andere culturele betekenissen  

irrationeel boze machten, bezetenheid 19

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 probeer eens een zin te maken die geen metafoor bevat 20

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, centre-periphery

voorbeelden    

muzieknoten (en leeftijden) zijn ‘hoog’ of ‘laag’ smaken in balans brengen inhoud van een boek, verhaallijn waarheen leidt de weg die wij moeten gaan… 21

Metaforen in de wetenschap 

gebruik van het ene domein om het andere te begrijpen of te manipuleren



evolutieleer, stambomen 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

22

Metaforen in ontwerp 

toepassing in ontwerp 





beschrijf iets nieuws in termen van iets bekends ondersteunt mentale modellen

metaforen brengen ook eenheid in je ontwerp 

bv. desktop metafoor

23

Metafoor als blend 





Fauconnier en Turner 2002 metafoor is meer dan eenvoudige mapping elementen uit twee domeinen versmelten 



nieuwe ‘emergente’ eigenschappen

kan doordat ze op een generiek niveau eigenschappen delen 24

Metaforen voor weggooien bestanden?

25

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. 26

Uitgangspunten 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 27

Oefening 

kies een metafoor die je kent uit het computerdomein



wat is het brondomein? welke nieuwe eigenschap(pen) ontstaan door het versmelten van de beide domeinen?



28

Conceptual design 

A good conceptual model comes from 



Considering the underlying metaphor used to provide the structure for design Considering how things are classified and organized.

29

Scenario’s en design

Abstract

Verhalen

Wat willen en doen mensen

Specificatie van design constraints

Conceptuele scenario’s

Genereren van ideeën en requirements

Formalisering

Concrete scenario’s

Use cases

Envisioning en evaluatie

Specificatie en implementatie

30

Object-actie analyse 1.

2.

3.

4.

analyseer individuele scenario’s: onderscheid specifieke en algemene, hoog-niveau acties opsomming van objecten en acties in elk scenario verzamel alle objecten en acties van de verschillende scenario’s voeg acties en objecten samen (als ze identiek zijn)

31

Stap 1: analyseer scenario

32

Stap 3: verzamel alle acties

33

Diagram van het conceptuele model





gekozen model: entity-relationship (ER) diagram ander opties: object model, site map… 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 en 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, schets diagram 35

uitwerking 

objecten      



geef conclusie

coach cliënt vragenlijst filmpje motivatie fase

acties     

invullen uitleggen voorstellen bekijken veranderen

coach

communiceren invullen client

vragenlijst

bekijken geef conclusie film

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 ontwerp in concreet ontwerp

onderdelen 

operationeel ontwerp 



representationeel ontwerp 



specificatie van hoe alles werkt kleuren, vormen, groottes, look en feel

interactie ontwerp 

allocatie van functies naar mensen of technologie

38

Twee belangrijke ontwerpideeën 

Ontwerptalen bestaan uit   



elementen: sliders, kleuren, buttons, … principes voor compositie van de elementen Verzameling van ‘qualifying situations’: invloed van context

Interactiepatronen https://www.youtube.com/watch?v=Yw-GeB7PLbM (tot 3:10)

39

Example: Microsoft’s “Metro” 



Metro is a term used by Microsoft to describe one of its key “design languages”. This means that although each product designed using Metro is individual and has its own specific appearance, there are common themes that mean there’s a consistent look and feel. Microsoft’s smartphone operating system Windows Phone 7. It will become even more prominent later this year when it is used for one of the two main looks (and the default starting set-up) for Windows 8, including on desktop computers. http://www.rocketmill.co.uk/what-is-metro-design-what-are-its-principles 40

What design language is not let’s look at what the common misconceptions about Design Language (and design) are from the engineer’s perspective. Here are some common statements I hear:  

 

“You’re just making it look pretty. Our customers don’t care.” “This just makes my product more expensive and doesn’t add value.” “This is just more work for me.” And of course words are not needed for this classic (no offense to pigs):

http://www.m3design.com/m3-design-journal/design-language-for-engineers-101/ 41

What design language is not 

is nothing more than a cosmetic addition to a product to make it look pretty, …



"looking good" is merely the by-product of Design Language’s carefully considered approach to the overall usability and functionality of the product. Repeat as necessary. Be consistent and persistent!

http://www.m3design.com/m3-design-journal/design-language-for-engineers-101/ 42

Twee belangrijke ontwerpideeën 

Ontwerptalen bestaan uit   



elementen: sliders, kleuren, buttons, … principes voor compositie van de elementen Verzameling van “qualifying situation”s: invloed van context

Interactiepatronen  

 

typen handelingen om het systeem te bedienen eenvoudige voorbeelden: muisklikken, gestures van touch interface worden samengevoegd tot hoog-niveau patronen bv. menu’s en submenu’s; kalenders en klokken 43

Interactieontwerp: geschiktheid 

taken verdelen tussen mens en computer 



taakanalyse is vak apart

mensen - 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, …  

bijv. gebruik mensen als sensoren voor hoog niveau detectie bijv. gebruik een computer voor snelle symboolverwerking 44

Diagrammen visualiseren van informatiestromen en processen

data flow diagram

state transition network

45

Ontwerpen websites 

toepassing van conceptueel en fysiek design 

binnen eigen designruimte van het Web

46

Garrett’s framework

2002, 2e ed. 2011 

visie  



ontwerp is meer dan de juiste functionaliteit bouwen (wat het doet) user experience gaat ook over: hoe werkt het voor de gebruiker

lijkt sterk op Benyon’s ‘human-centred design’

47

De vragen die je moet stellen 

Surface 



Skeleton 



How will the pieces of the site fit together and behave?

Scope 



What components will enable people to use the site?

Structure 



What will the finished product look like?

What features will the site need to include?

Strategy  

What do we want to get out of the site? What do our users want?

http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf

48

Strategy 

wat willen we met deze site bereiken?  product objectives 



business goals, brand identity, success metrics

wat willen onze gebruikers ermee bereiken?  user needs   

market research contextual inquiry en andere methoden voor understanding persona’s voor verschillende ‘user segments’ vgl. Benyon: Understanding 49

Scope 

vertaalslag  

  

waarom maken we dit naar wat maken we precies dus ook: wat maken we niet

uitdrukken in scenario’s functionele specificaties: wat kun je met de site doen? content requirements: wat moet er op de site te vinden zijn?   

verschillende media content inventory hoe wordt de content onderhouden?



(Garrett heeft het niet over niet-functionele requirements)



duidelijke prioriteiten stellen 

relatie met strategie

vgl Benyon: Envisionment

50

Structure (1) 





creëren van ‘a conceptual structure of the site’ how will the pieces of the site fit together and behave? interaction design  

conceptuele modellen gebruik conventies en metaforen 



G. is geen grote fan van metaforen

afhandeling fouten

vgl. Benyon: Conceptual Design, ook elementen Physical Design 51

Structure (2) 

information architecture   



structuur van de content classificatie, ordening naamgeving

gerelateerd aan menselijke cognitie 

hoe ordenen mensen informatie

52

Classificatie 



hoe conceptualiseren mensen de content van de site  welke terminologie, welke relaties kun je formaliseren in een ontologie  objectief  



maar veel is subjectief en/of ingewikkeld 



taak, doelgroep, onderwerp, betekenis…

consistentie, eenduidig vocabulaire 



alfabetisch, chronologisch, geografisch niet altijd even nuttig

voor systeem, bedrijf én gebruiker

belang metadata die de content beschrijven

53

Faceted browsing 

beschrijft content via 3 aspecten  





zoeksystemen voor begrensde domeinen  



dimensies (hoofdconcepten uit ontologie) per dimensie aantal facetten (attributen, eigenschappen) per facet aantal waarden

online stores musea

beperkt mogelijkheid fouten maken

https://www.rijksmuseum.nl/nl/zoeken

54

Structuren 

hoe organiseer je de content? 

hierarchisch 



matrix 





kan ‘organisch’ voelen, maar oriëntatie is lastig

lineair

wat is het voornaamste organiserende principe 



meer dan 3 dimensies is onoverzichtelijk

netwerk 



vaak passen dingen op meerdere plaatsen

specialist? klant?

architectuur vastleggen in diagram 

vele systemen 55

Skeleton 

concreet maken conceptuele structuur 

information design: communiceren van ideeën 



interface design: elementen voor interactie 







widgets

navigation design: elementen voor navigeren door content 



o.a. visualisatie van informatie

verschillende typen navigatie menselijke navigatiestrategieën

er is natuurlijk overlap…

alles afwegen in wireframes  

schematisch ontwerp webpagina hier komt veel in samen

vgl. Benyon: Physical Design, Interface Design 56

Voorbeelden van wireframes

57

Navigatie 

menselijke overwegingen  

lost in cyberspace: ruimtemetafoor schiet tekort navigatiegedrag    



information foraging, berrypicking breadth- of depth-first information scent zoeken of browsen

hoe ondersteun je de oriëntatie   

labelling navigation support searching

58

Navigatie-ontwerp volgens Garrett 

global navigation  



local navigation 



hyperlinking in document

courtesy navigation 



shortcuts

contextual navigatie 



directe omgeving in architectuur

supplementary navigation 



toegang tot hele site typisch via vast menu

naar standaard voorzieningen

remote navigation tools  

sitemap index

59

navigatie UU master site

60

navigatie UU master site

courtesy

global

remote: search

local

remote: faceted search

supplementary

61

Surface  

visual design, sensory design visueel ontwerp best begrepen   



hoe bewegen je ogen over het interface? wat trekt de aandacht? esthetiek

een paar principes 

contrast gebruiken voor aandacht en onderscheid 

  



en uniformiteit waar contrast niet nodig is

grid-gebaseerde layout consistentie tussen design elementen kleuren en fonts zorgvuldig kiezen

design comp(osite): visuele mockup 

deel documentatie style guide 62

Samenvatting 

conceptueel ontwerp     



ontwerpconcepten ontwerpruimte metaforen, blending object-actie analyse conceptuele modellen, diagrammen

fysiek ontwerp     

operationeel ontwerp representationeel ontwerlp interactieontwerp ontwerptalen interactiepatronen



website ontwerp      



Garrett’s 5 planes informatiearchitectuur classificatie, ontologie faceted browsing wireframes information foraging, information scent navigatieontwerp

63