Wkid03 interfaces interactions

1
IKD
workshop interaction design
#dwmwkid
jeudi 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

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

jeudi 9 janvier 14

14http://dshott.co.uk/realboy
jeudi 9 janvier 14

jeudi 9 janvier 14

17
jeudi 9 janvier 14

18
interaction design
jeudi 9 janvier 14

interaction design
19
LA CONDITION DE L'UTILISATEUR
Interaction 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 Word
jeudi 9 janvier 14

chapitre en cours
21iaWriter
jeudi 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 UI
jeudi 9 janvier 14

chapitre en cours
24Medium.com - nouvel article UI
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."
jeudi 9 janvier 14

25
MS WORD / WORDPRESS
Ecrivain
jeudi 9 janvier 14

25
MS WORD / WORDPRESS
Ecrivain Secrétaire ?
jeudi 9 janvier 14

26
Habilleras-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
jeudi 9 janvier 14

29
jeudi 9 janvier 14

interaction design
30
jeudi 9 janvier 14

30
jeudi 9 janvier 14

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
Nous ne faisons pas des sites interactifs.
web design
jeudi 9 janvier 14

34
Nous ne faisons pas des sites internet.
web design
jeudi 9 janvier 14

35
Nous racontons des histoires
web design
jeudi 9 janvier 14

36
et construisons des expériences
web design
jeudi 9 janvier 14

37
et construisons des exxxpériences
web design
jeudi 9 janvier 14

38
sur un médium interactif
web design
jeudi 9 janvier 14

39
connecté à internet.
sur un médium interactif
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

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 inﬁni
perçu via un viewport (hublot) délimitant
un espace ﬁni.
jeudi 9 janvier 14

51
http://www.dino-zara.com/
un canevas inﬁni
perçu via un viewport (hublot) délimitant
un espace ﬁni.
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

ESPACE À 1 DIMENSION: LA LIGNE
54
x
dimension 1
jeudi 9 janvier 14

ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14

y
dimension 2
jeudi 9 janvier 14

x
y
dimension 2
jeudi 9 janvier 14

x
y
46
220
dimension 2
jeudi 9 janvier 14

x
y
viewport
46
220
dimension 2
jeudi 9 janvier 14

x
y
canevas illimité : le "document"
viewport
46
220
dimension 2
jeudi 9 janvier 14

x
y
canevas illimité : le "document"
viewport
zones
46
220
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’air bien
« je m’en vais »
tiens, ce bouton ne marche pas
que de fautes d’orthographe!
pas terrible, je
jette
« 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’air bien
« je m’en vais »
ah ah! chouette idée!
quelle créativité!
il me semble intéressant, contactons-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

70
L'utilisateur,
sur la scène,
déclenche des événements.
jeudi 9 janvier 14

onkeypress
keydown
keyup
click
hover
mousedown
mouseup
mousemove
71
événements à votre disposition
js: setTimeOut()
css: animation keyframe
window scroll
Domready
loading
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

• souris
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• keyup, keydown, keystroke
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
• toucher, swipe, «tap»
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
• autre?
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
• autre?
• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
• autre?
• Taille de la fenêtre: (media queries)
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
• autre?
• écoulement du temps (setTimeout, enterFrame,...)
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
• autre?
• webcam (réalité augmentée)
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
• autre?
• wii, joystick, kinect, microphone, accéléromètre...
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
• autre?
• ....
72
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
• autre?
• ....
72
voir doc jquery pour liste exhaustive
http://devdocs.io/
jeudi 9 janvier 14

• souris
• clavier
• tactile
• autre?
• ....
72
voir doc jquery pour liste exhaustive
http://devdocs.io/
Toutes les docs dont vous rêvez, en local
jeudi 9 janvier 14

73
ces événements sont votre nouveau
vocabulaire. 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 repeat
75
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

• 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

• TOUJOURS Déterminer un temps limite pour chaque tâche.
78
jeudi 9 janvier 14

• sois doux avec les gens, mais dur avec les faits.
78
jeudi 9 janvier 14

• communiquer sur vos horaires, vos obligations extra-scolaires ces 14 prochains jours
78
jeudi 9 janvier 14

• Définissez une procédure pour prévenir de vos éventuels retards.
78
jeudi 9 janvier 14

• 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

• 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

79
https://trello.com
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
• racontée en 5 moments
80
fin
accueil/amorce
fin
fin
jeudi 9 janvier 14

la punition
BRIEFING
• depuis X points de vue. X = nombre d'étudiants du groupe
80
fin
accueil/amorce
fin
fin
jeudi 9 janvier 14

la punition
BRIEFING
• 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
• 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
• 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
• 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 quidégouline surl'écran
peur: son de
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
master
branch
fonctionnalité
A
bug 2432
fonctionnalité
B
branches
copies locale du master. ("clone")
Lorsque terminée > fusion dans master
( = "merge")
version
"live"
ton serveur ton repository sur github ton ordinateur
Master
copies 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
MASTER
version
"live"
Dossier du
personnage B
Dossier du
personnage C
Dossier du
personnage D
Dossier du
personnage A
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 FICHU
http://www.teehanlax.com/blog/github-fundamentals/
99
jeudi 9 janvier 14

chapitre en cours
100
jeudi 9 janvier 14

Wkid03 interfaces interactions

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Wkid03 interfaces interactions

Ähnlich wie Wkid03 interfaces interactions (20)

Wkid03 interfaces interactions