149
1 IKD workshop interaction design #dwmwkid jeudi 9 janvier 14

Wkid03 interfaces interactions

Embed Size (px)

Citation preview

1

IKDworkshop interaction design#dwmwkid

jeudi 9 janvier 14

2

BATARDjeudi 9 janvier 14

3

web design

jeudi 9 janvier 14

internet

3

web designweb design

jeudi 9 janvier 14

interaction design internet

3

web designweb design

jeudi 9 janvier 14

4

interaction design

jeudi 9 janvier 14

5

qu’utilise-t-on pour accrocher une feuille de papier sur un mur?

jeudi 9 janvier 14

6

une punaise.

jeudi 9 janvier 14

7

ouch!

jeudi 9 janvier 14

8

beaucoup mieux

jeudi 9 janvier 14

9

punaise = interaction design

jeudi 9 janvier 14

10

punaise interaction design + storytelling = ?

jeudi 9 janvier 14

11http://dshott.co.uk/nessie-pins

interaction design + storytelling

jeudi 9 janvier 14

12http://dshott.co.uk/nessie-pins

interaction design + storytelling

jeudi 9 janvier 14

13http://dshott.co.uk/nessie-pins

interaction design + storytelling

jeudi 9 janvier 14

14http://dshott.co.uk/realboy

interaction design + storytelling

jeudi 9 janvier 14

15http://dshott.co.uk/realboy

interaction design + storytelling

jeudi 9 janvier 14

16http://dshott.co.uk/realboy

interaction design + storytelling

jeudi 9 janvier 14

17

interaction design + storytelling

jeudi 9 janvier 14

18

interaction design

jeudi 9 janvier 14

interaction design

19

LA CONDITION DE L'UTILISATEURInteraction design détermine la condition humaine. Demande-t-on à notre utilisateur de mettre son bleu de travail, ou son masque de batman? Veut-on qu'il s'immerge dans l'histoire, ou qu'il soit un exécutant de tâches emmerdantes ?

jeudi 9 janvier 14

CECI ?

20MS Wordjeudi 9 janvier 14

chapitre en cours

21iaWriterjeudi 9 janvier 14

interaction design: quel rôle donne-t-on à l 'utilisateur dans le spectacle?

22

OU SUR LE WEB: INTERFACES D'ÉCRITURE

jeudi 9 janvier 14

chapitre en cours

23Wordpress - nouvel article UIjeudi 9 janvier 14

chapitre en cours

24Medium.com - nouvel article UIjeudi 9 janvier 14

le rôle écrit pour l'utilisateur

LE RÔLE DE L'UTILISATEUR

25

IAWRITER / MEDIUM.COM

"l'écriture, c'est toute ta vie."

MS WORD / WORDPRESS

"l'écriture, c'est difficile."

jeudi 9 janvier 14

le rôle écrit pour l'utilisateur

LE RÔLE DE L'UTILISATEUR

25

IAWRITER / MEDIUM.COM

"l'écriture, c'est toute ta vie."

MS WORD / WORDPRESS

"l'écriture, c'est difficile."

Ecrivain

jeudi 9 janvier 14

le rôle écrit pour l'utilisateur

LE RÔLE DE L'UTILISATEUR

25

IAWRITER / MEDIUM.COM

"l'écriture, c'est toute ta vie."

MS WORD / WORDPRESS

"l'écriture, c'est difficile."

Ecrivain Secrétaire ?

jeudi 9 janvier 14

26Habilleras-tu ton utilisateur d'un "bleu de travail"jeudi 9 janvier 14

27... ou lui donnera-tu un costume l'immergeant dans le rôle ?jeudi 9 janvier 14

28... ou lui donnera-tu un costume l'immergeant dans le rôle ?jeudi 9 janvier 14

29... ou lui donnera-tu un costume l'immergeant dans le rôle ?jeudi 9 janvier 14

interaction design

30

jeudi 9 janvier 14

interaction design internet

30

jeudi 9 janvier 14

interaction design internet

30

web design

jeudi 9 janvier 14

31

web design

jeudi 9 janvier 14

32

un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.

web design

jeudi 9 janvier 14

33

un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.

Nous ne faisons pas des sites interactifs.

web design

jeudi 9 janvier 14

34

un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.

Nous ne faisons pas des sites interactifs.

Nous ne faisons pas des sites internet.

web design

jeudi 9 janvier 14

35

Nous racontons des histoires

Nous ne faisons pas des sites internet.

un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.

Nous ne faisons pas des sites interactifs.

web design

jeudi 9 janvier 14

36

Nous racontons des histoires

et construisons des expériences

Nous ne faisons pas des sites internet.

un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.

Nous ne faisons pas des sites interactifs.

web design

jeudi 9 janvier 14

37

Nous racontons des histoires

et construisons des exxxpériences

Nous ne faisons pas des sites internet.

un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.

Nous ne faisons pas des sites interactifs.

web design

jeudi 9 janvier 14

38

et construisons des expériences

sur un médium interactif

Nous racontons des histoiresNous ne faisons pas des sites internet.

un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.

Nous ne faisons pas des sites interactifs.

web design

jeudi 9 janvier 14

39

connecté à internet.

sur un médium interactifet construisons des expériences

Nous racontons des histoiresNous ne faisons pas des sites internet.

un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.

Nous ne faisons pas des sites interactifs.

web design

jeudi 9 janvier 14

web design

MEANING FIRST

40

le sens d’abord.

jeudi 9 janvier 14

web design

41

jeudi 9 janvier 14

LA SCÈNE...

42

jeudi 9 janvier 14

43

WINDOWS OF PERCEPTION

jeudi 9 janvier 14

responsive

44

jeudi 9 janvier 14

45

L’ESPACE (INFINI) DE L’ÉCRAN (FINI)

jeudi 9 janvier 14

QU’EST-CE QUE L’ESPACE?

jeudi 9 janvier 14

QU’EST-CE QUE L’ESPACE?

jeudi 9 janvier 14

QU’EST-CE QUE L’ESPACE?

jeudi 9 janvier 14

L’ESPACEjeudi 9 janvier 14

La scène: de l'espace de l'écran

INTER.FACES / INTER.ACTIONS

50

L’écran = la scène

Le curseur = notre invité, l’utilisateur

jeudi 9 janvier 14

51

un canevas infiniperçu via un viewport (hublot) délimitant

un espace fini.

jeudi 9 janvier 14

51

http://www.dino-zara.com/

un canevas infiniperçu via un viewport (hublot) délimitant

un espace fini.

jeudi 9 janvier 14

51

http://www.dino-zara.com/

un canevas infiniperçu via un viewport (hublot) délimitant

un espace fini.

jeudi 9 janvier 14

l'espace de la scène

CONSTRUIRE L’EXPÉRIENCE

• réfléchir à l ‘espace de l’écran dans sa globalité:

• «viewport» («hublot») vs. «canvas» (ex: http://www.dino-zara.com/ )

• en 2D (X, Y) : zones (ex: http://madethought.com/ )

• en 3D ( X, Y, Z: profondeur): couches (ex: www.balhar.com )

• en 4D (X, Y, Z, time) :réfléchir à la séquence des écrans et des interactions (clic, mouseover, etc.). Construire l’expérience. (ex: http://wearehunted.com/ )

52

jeudi 9 janvier 14

dimension 0

ESPACE À 0 DIMENSION: LE POINT

53

jeudi 9 janvier 14

dimension 0

ESPACE À 0 DIMENSION: LE POINT

53

jeudi 9 janvier 14

ESPACE À 1 DIMENSION: LA LIGNE

54

x

dimension 1

jeudi 9 janvier 14

ESPACE À 2 DIMENSIONS

dimension 2

jeudi 9 janvier 14

y

ESPACE À 2 DIMENSIONS

dimension 2

jeudi 9 janvier 14

x

y

ESPACE À 2 DIMENSIONS

dimension 2

jeudi 9 janvier 14

x

y

46

220

ESPACE À 2 DIMENSIONS

dimension 2

jeudi 9 janvier 14

x

y

viewport46

220

ESPACE À 2 DIMENSIONS

dimension 2

jeudi 9 janvier 14

x

ycanevas illimité : le "document"

viewport46

220

ESPACE À 2 DIMENSIONS

dimension 2

jeudi 9 janvier 14

x

ycanevas illimité : le "document"

viewport

zones

46

220

ESPACE À 2 DIMENSIONS

dimension 2

jeudi 9 janvier 14

x

ycanevas illimité : le "document"

viewport

zones

46

220

ESPACE À 2 DIMENSIONS

dimension 2

jeudi 9 janvier 14

ESPACE À 3 DIMENSIONS: SUPERPOSITIONS DE COUCHES

56

dimension 3: la profondeur

jeudi 9 janvier 14

dimension 4 : le temps

ESPACE À 4 DIMENSIONS: LE TEMPS

57

jeudi 9 janvier 14

TEMPS: GRAPHIQUE DU PLAISIR DÉÇU

58

qualité perçue

temps

arrivée sur le

site

ce site a l’a

ir bien

« je m’en vais »

tiens, ce bouton ne marche pas

que de fautes d’orth

ographe!

pas terrib

le, je je

tte

« je l’engage »

00:01 00:08 00:17 00:23 00:29

seuil de conversion

seuil d’abandon

inter.face: l’espace de l’écran: 4D

jeudi 9 janvier 14

TEMPS: GRAPHIQUE DU PLAISIR ATTEINT

59

qualité perçue

temps

arrivée sur le

site

ce site a l’a

ir bien

« je m’en vais »

ah ah! chouette

idée!

quelle créativité!

il me semble intéressant, c

ontactons-le

« je l’engage »

00:01 00:08 00:17 00:23 00:29

seuil d’abandon

seuil de conversion

inter.face: l’espace de l’écran: 4D

jeudi 9 janvier 14

gestion de l'espace de l'écran

EXEMPLES DE GESTION CRÉATIVE DE L’ESPACE• Scrolling _ http://wicky.nillia.ms/headroom.js/

• Simon Collison (UI réactif)http://www.colly.com/

• LAb[au] (grille: alt + G )http://lab-au.com

• Impress.js (css animations, gestion de l’écran)http://bartaz.github.com/impress.js/

• Toujours pas compris? http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

60

jeudi 9 janvier 14

chapitre en cours

61

jeudi 9 janvier 14

chapitre en cours

jeudi 9 janvier 14

63

http://www.frankchimero.com/writing/2012/everything-was-made/

jeudi 9 janvier 14

chapitre en cours

64

jeudi 9 janvier 14

Des effets.

65Le secret des effets: ne les utiliser que si ils augmentent l'expérience du sens. Pas de poudre aux yeux.

Just because you can doesn't mean you should.

– English proverb.

jeudi 9 janvier 14

INTER.ACTIONS

66

jeudi 9 janvier 14

67

interaction design: coller son chewing gum sur le logo du

pire fournisseur.

jeudi 9 janvier 14

68

INTERACTIVITE≅COMPORTEMENT

jeudi 9 janvier 14

69

un utilisateur

sur

une scène

jeudi 9 janvier 14

69

un utilisateur

sur

une scène

jeudi 9 janvier 14

69

un utilisateur

sur

une scène

jeudi 9 janvier 14

70

L'utilisateur, sur la scène,

déclenche des événements.

jeudi 9 janvier 14

onkeypresskeydownkeyup

clickhovermousedownmouseupmousemove

71

événements à votre disposition

js: setTimeOut()css: animation keyframe

window scrollDomreadyloading

waypoints.js...

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

• toucher, swipe, «tap»

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

• toucher, swipe, «tap»

• autre?

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

• toucher, swipe, «tap»

• autre?

• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

• toucher, swipe, «tap»

• autre?

• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.

• Taille de la fenêtre: (media queries)

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

• toucher, swipe, «tap»

• autre?

• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.

• Taille de la fenêtre: (media queries)

• écoulement du temps (setTimeout, enterFrame,...)

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

• toucher, swipe, «tap»

• autre?

• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.

• Taille de la fenêtre: (media queries)

• écoulement du temps (setTimeout, enterFrame,...)

• webcam (réalité augmentée)

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

• toucher, swipe, «tap»

• autre?

• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.

• Taille de la fenêtre: (media queries)

• écoulement du temps (setTimeout, enterFrame,...)

• webcam (réalité augmentée)

• wii, joystick, kinect, microphone, accéléromètre...

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

• toucher, swipe, «tap»

• autre?

• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.

• Taille de la fenêtre: (media queries)

• écoulement du temps (setTimeout, enterFrame,...)

• webcam (réalité augmentée)

• wii, joystick, kinect, microphone, accéléromètre...

• ....

72

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

• toucher, swipe, «tap»

• autre?

• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.

• Taille de la fenêtre: (media queries)

• écoulement du temps (setTimeout, enterFrame,...)

• webcam (réalité augmentée)

• wii, joystick, kinect, microphone, accéléromètre...

• ....

72

voir doc jquery pour liste exhaustive

inter.actions: le dialogue homme-machine

http://devdocs.io/

jeudi 9 janvier 14

QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris

• click, mouseover, mouseenter, mousemove, mouseleave...

• clavier

• keyup, keydown, keystroke

• tactile

• toucher, swipe, «tap»

• autre?

• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.

• Taille de la fenêtre: (media queries)

• écoulement du temps (setTimeout, enterFrame,...)

• webcam (réalité augmentée)

• wii, joystick, kinect, microphone, accéléromètre...

• ....

72

voir doc jquery pour liste exhaustive

inter.actions: le dialogue homme-machine

http://devdocs.io/Toutes les docs dont vous rêvez, en local

jeudi 9 janvier 14

73

ces événements sont votre nouveauvocabulaire. Apprenez à vous exprimer

à travers eux.

jeudi 9 janvier 14

COMMENT ON VA FAIRE?

74

jeudi 9 janvier 14

processus de travail de l’interaction designer

PROCESSUS DE TRAVAIL DE L’INTERACTION DESIGNER

1. WHO _ public-cible

2. WHAT _ objectifs & contenus préexistants. Quelle sera l'histoire?

3. HOW

1. Recherche

1. sketches: papier, crayons

2. storyboard / sens.flux: avoir la vision globale

3. style guides / tiles

2. Exécution

1. prototypes papier > test > ajustement > rince and repeat

2. prototypes html/css > test > ajustement > rince and repeat

3. grid

4. layout & mockups

5. intégration finale > test > ajustement > rince and repeat75

jeudi 9 janvier 14

76

fin

jeudi 9 janvier 14

LE BRIEFING

BRIEFING

77

wkid03: une histoire sur un médium interactif connecté à l’internet

jeudi 9 janvier 14

travailler en groupe

CONSEILS SUR LE TRAVAIL EN GROUPE

78

jeudi 9 janvier 14

travailler en groupe

CONSEILS SUR LE TRAVAIL EN GROUPE

• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.

78

jeudi 9 janvier 14

travailler en groupe

CONSEILS SUR LE TRAVAIL EN GROUPE

• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.

• TOUJOURS Déterminer un temps limite pour chaque tâche.

78

jeudi 9 janvier 14

travailler en groupe

CONSEILS SUR LE TRAVAIL EN GROUPE

• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.

• TOUJOURS Déterminer un temps limite pour chaque tâche.

• sois doux avec les gens, mais dur avec les faits.

78

jeudi 9 janvier 14

travailler en groupe

CONSEILS SUR LE TRAVAIL EN GROUPE

• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.

• TOUJOURS Déterminer un temps limite pour chaque tâche.

• sois doux avec les gens, mais dur avec les faits.

• communiquer sur vos horaires, vos obligations extra-scolaires ces 14 prochains jours

78

jeudi 9 janvier 14

travailler en groupe

CONSEILS SUR LE TRAVAIL EN GROUPE

• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.

• TOUJOURS Déterminer un temps limite pour chaque tâche.

• sois doux avec les gens, mais dur avec les faits.

• communiquer sur vos horaires, vos obligations extra-scolaires ces 14 prochains jours

• Définissez une procédure pour prévenir de vos éventuels retards.

78

jeudi 9 janvier 14

travailler en groupe

CONSEILS SUR LE TRAVAIL EN GROUPE

• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.

• TOUJOURS Déterminer un temps limite pour chaque tâche.

• sois doux avec les gens, mais dur avec les faits.

• communiquer sur vos horaires, vos obligations extra-scolaires ces 14 prochains jours

• Définissez une procédure pour prévenir de vos éventuels retards.

• rappel: vous êtes tou(te)s sensés être présent durant toute la durée du workshop. Toute absence est à vos risques et périls.

78

jeudi 9 janvier 14

travailler en groupe

CONSEILS SUR LE TRAVAIL EN GROUPE

• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.

• TOUJOURS Déterminer un temps limite pour chaque tâche.

• sois doux avec les gens, mais dur avec les faits.

• communiquer sur vos horaires, vos obligations extra-scolaires ces 14 prochains jours

• Définissez une procédure pour prévenir de vos éventuels retards.

• rappel: vous êtes tou(te)s sensés être présent durant toute la durée du workshop. Toute absence est à vos risques et périls.

• Utilisez un outil tel que Trello pour gérer les tâches.

78

jeudi 9 janvier 14

la punition

BRIEFING

80

fin

accueil/amorce

fin

fin

jeudi 9 janvier 14

la punition

BRIEFING

• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet

80

fin

accueil/amorce

fin

fin

jeudi 9 janvier 14

la punition

BRIEFING

• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet

• racontée en 5 moments

80

fin

accueil/amorce

fin

fin

jeudi 9 janvier 14

la punition

BRIEFING

• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet

• racontée en 5 moments

• depuis X points de vue. X = nombre d'étudiants du groupe

80

fin

accueil/amorce

fin

fin

jeudi 9 janvier 14

la punition

BRIEFING

• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet

• racontée en 5 moments

• depuis X points de vue. X = nombre d'étudiants du groupe

• Chaque moment d'un point de vue permet de passer à chaque autre point de vue. Pas forcément au même moment.

80

fin

accueil/amorce

fin

fin

jeudi 9 janvier 14

la punition

BRIEFING

• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet

• racontée en 5 moments

• depuis X points de vue. X = nombre d'étudiants du groupe

• Chaque moment d'un point de vue permet de passer à chaque autre point de vue. Pas forcément au même moment.

• Chaque moment exploite une interaction comportementale (click, touch, scroll, ...) articulant la narration.

80

fin

accueil/amorce

fin

fin

jeudi 9 janvier 14

la punition

BRIEFING

• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet

• racontée en 5 moments

• depuis X points de vue. X = nombre d'étudiants du groupe

• Chaque moment d'un point de vue permet de passer à chaque autre point de vue. Pas forcément au même moment.

• Chaque moment exploite une interaction comportementale (click, touch, scroll, ...) articulant la narration.

• Chaque point de vue aura son système graphique cohérent. La réalisation des 5 moments de ce personnage sera réalisé par un seul étudiant. L'échange de savoir est autorisé, l'échange de services interdit.

80

fin

accueil/amorce

fin

fin

jeudi 9 janvier 14

la punition

BRIEFING

• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet

• racontée en 5 moments

• depuis X points de vue. X = nombre d'étudiants du groupe

• Chaque moment d'un point de vue permet de passer à chaque autre point de vue. Pas forcément au même moment.

• Chaque moment exploite une interaction comportementale (click, touch, scroll, ...) articulant la narration.

• Chaque point de vue aura son système graphique cohérent. La réalisation des 5 moments de ce personnage sera réalisé par un seul étudiant. L'échange de savoir est autorisé, l'échange de services interdit.

• Pas de menu de navigation. Seule la page d'accueil donne accès au making-of et crédits. Toutes les pages ont un footer avec le logo DWM + le titre de l'histoire comme lien vers la page d'accueil. stou. Logo (dimension: 40px de haut): https://dl.dropboxusercontent.com/u/150457/logo-dwm-white.ai )

80

fin

accueil/amorce

fin

fin

jeudi 9 janvier 14

briefing : évaluation

CRITÈRES D'ÉVALUATION

• réfléchir au système interactif.

Exemple:

- comment indiquer à l'utilisateur ce qui est interactif? > cohérence du système tout au long de l'expérience.

• Cohérence du système graphique & interactif pour chaque point de vue

• respect des deadlines pour chaque délivrable

81

jeudi 9 janvier 14

DÉLIVRABLES

82

jeudi 9 janvier 14

délivrables

DÉLIVRABLES

• L'histoire de 5x X(*) écrans (html, css+ javascript)

• Making-of: votre méthodologie, en 5 moments & X (*) points de vue. Format: une page web.

• Une page d'accueil, servant d'amorce à l'histoire et menant vers les X (*) points de vue, au Making-of, et à la page A Propos (titre libre).

• La page A Propos explique ce dont il s'agit.

• Une affiche A3 portrait comme accroche, pour l’expo.

• Ecran cible: 1024x768. (paysage). PAS RESPONSIVE.

83* (X = nombre d'étudiants du groupe).

jeudi 9 janvier 14

tortue ou lièvre ?

ÉCHÉANCIER

• J01_ lundi: répartition des groupes. Méthodologie de travail. Reconstruire un nouvel iceberg. > Se poser pleins de questions. Quels sont les faits, quels sont les points de vue déjà développés? Quels points de vue n’ont pas été développés? Comment? Pourquoi ? Qui? Quoi?

• J02_ mardi soir: Création et mise en place du sens.flux, vide.

• J03_ mercredi : Réflexion sur les moments du sens.flux: content choreography. Fin de journée, sens.flux version 1. Sketching d’écrans

• J04_ jeudi : sens.flux & wireframing terminés.

• J05_ vendredi: début du dev

• J08_ mercredi, fin de journée: chaque étudiant a terminé ses 5 écrans.

• J09_ jeudi: mise en commun. Réalisation de la Page d'accueil, making-of et affiche.

• J10_ vendredi, 11h00: affiche affichée, stand de présentation prêt à la cafétéria.

84

jeudi 9 janvier 14

SENS.FLUX

85

jeudi 9 janvier 14

86

Perso A Perso B Perso C Perso D

A1

A2

A3

A4

A5

B1

B2

B3

B4

B5

C1

C2

C3

C4

C5

D1

D2

D3

D4

D5

registre graphique A registre graphique B registre graphique C registre graphique D

jeudi 9 janvier 14

87

LE SENSCOMMENT D1

LES LIENS

B2 A1 C2

une horloge qui fonctionne

à l'envers

Nicole sort de la voiture. Sonnée. Elle emmène son bébé à la plaine de jeu en espérant calmer ses pleurs.

Notes complémentaires

jeudi 9 janvier 14

87

LE SENSCOMMENT D1

LES LIENS

B2 A1 C2

une horloge qui fonctionne

à l'envers

anim d'un

enfant sur

une balançoire

du sang qui dégouline sur l'écran

peur: son d

e

porte qui

claque ?

Nicole sort de la voiture. Sonnée. Elle emmène son bébé à la plaine de jeu en espérant calmer ses pleurs.

Notes complémentaires

jeudi 9 janvier 14

SENS.FLUX

88

CROISEMENT DE 2 LIGNES

AMBIGU

> < ou X ?

SOLUTION 1

placer une ligne «en dessous» de l’autre

SOLUTION 2, de l’électricien

placer une ligne «en dessous» de l’autre, celle du dessus «saute» au dessus de la ligne du dessous.

jeudi 9 janvier 14

viewport, canevas, interaction design, web design, événements, comportements, responsive design, bleu de travail, l'espace de l'écran, la 4ème dimension, parallax, souris, click, mouseover, mouseenter, bâtard, mousemove, mouseleave, clavier, keyup,

keydown, keystroke, tactile, toucher, swipe, «tap», manipulation du DOM _ voir jquery : live(), ready(), window.resize(), media queries, écoulement du temps, setTimeout,

enterFrame, webcam (réalité augmentée), wii, joystick, kinect, microphone, accéléromètre.......

89

BON WORKSHOP !

jeudi 9 janvier 14

github

90

DÉVELOPPER COMME UN BÂTARD AVEC OU SUR GITHUB

jeudi 9 janvier 14

github

POURQUOI C'EST COOL ?

• grace à Git vous pouvez travailler sur plusieurs parties du projet de façon complètement isolée les unes des autres et sans risque de "casser" ce qu'ont fait les autres.

• backup automatique, permettant de revenir à toutes les versions précédentes du projet ("versioning").

• fonctionne pour tout, pas que pour le code: fichiers toshop, slides, contrats, documents word...

• C'est aussi un réseau social autour du partage de code open source, un bon endroit pour apprendre, comme stackoverflow.com

91

jeudi 9 janvier 14

github

SCÉNARIO 1 : VOUS TRAVAILLEZ SUR LES MÊMES FICHIERS

92

jeudi 9 janvier 14

fonctionnement de github

FONCTIONNEMENT

93

masterbranch

fonctionnalité A

bug 2432

fonctionnalité B

branchescopies locale du master. ("clone")Lorsque terminée > fusion dans master ( = "merge")

version "live"

ton serveur ton repository sur github ton ordinateur

Mastercopies locale du master. ("clone")(version la + avancée et débuggée)

jeudi 9 janvier 14

github simplifié

PLUS SIMPLE: SANS BRANCHE, CHACUN DANS UN DOSSIER SÉPARÉ, AINSI PAS DE RISQUE DE "CONFLITS".

94

jeudi 9 janvier 14

95

fonctionnement de github

MASTERversion "live"

Dossier du personnage B

Dossier du personnage C

Dossier du personnage D

Dossier du personnage A

jeudi 9 janvier 14

95

fonctionnement de github

MASTERversion "live"

Dossier du personnage B

Dossier du personnage C

Dossier du personnage D

Dossier du personnage A

jeudi 9 janvier 14

96

jeudi 9 janvier 14

github

MISE EN PLACE

• se créer un compte sur github.com (gratuit si tu es ok que ton code soit visible publiquement)

• chaque étudiant télécharge et installe l'application https://help.github.com/articles/set-up-git#platform-mac

• décidez qui est le "capitaine". Les autres sont les soldats. Le capitaine gèrera la branche "master".

• Le capitaine crée le "repository" (= espace sur github qui contiendra le projet) et, sur github, désigne les autres membres (qui se seront auparavant créé un compte) comme "collaborateurs".

• Les autres dev font des copies locales (des "clone")

• ils font leur dev d'une fonctionnalité du projet en local et travaillent tous sur des fichiers différents à l'intérieur du "master".

• A chaque fois que qque chose est terminé > sync to master

• Régulièrement, synchronise ta copie locale avec le master, ainsi tu peux voir le taf des autres sur ta machine.

97

jeudi 9 janvier 14

github

TA JOURNÉE DE TRAVAIL SUR GITHUB

• récupérer la dernière version

• tu codes, codes, codes...

• quand c'est bon, tu "commit" les changements sur github.

98

jeudi 9 janvier 14

fin du début de ta vie de n3rd.

ALLER PLUS LOIN AVEC GITHUB

• ARTICLE TRES BIEN FICHUhttp://www.teehanlax.com/blog/github-fundamentals/

99

jeudi 9 janvier 14

chapitre en cours

100

jeudi 9 janvier 14