22. L’INTERACTIVITÉ SOCIALE
L’interface est un canal de communication.
L’univers du projet se propage sur les réseaux sociaux.
Le créateur du projet est un entremetteur.
29. Atelier #1
Les types d’interactivité
30’
MACHINE SOCIALE CONTRIBUTIVE
Autour du thème : la manipulation, le pouvoir, la cruauté,
imaginez trois expériences différentes, une pour chaque type d’interactivité :
Présentation en deux minutes maximum !
32. LES COMPOSANTES DE TOUTE HISTOIRE
Personnages
Conflit
Point de vue
Temps du récit
Espace du récit
33. On raconte l’histoire de quelqu’un,
pas de quelque chose.
Un personnage est caractérisé par :
• le but de sa quête
• son passé
• ses motivations
• ses relations
• son physique, etc.
LES PERSONNAGES
37. La quête des personnages est
menacée par des conflits. Leur
résolution constitue la trame du récit.
Un conflit peut être :
• ouvert ou indirect
• violent ou non
• interne ou externe
LES CONFLITS
38. Il n’y a pas d’histoire sans celui
qui la raconte.
La narration peut se faire à :
• la première, la seconde ou la
troisième personne
• par un narrateur unique ou alterné
• par un narrateur externe ou interne
LE POINT DE VUE
56. Le public comme personnage
est placé au coeur de l’action
prend certaines décisions pour le personnage incarné
influe sur le récit et sur les autres personnages
59. Le public comme divinité
n’appartient pas au récit mais en bouleverse le fil
prend des décisions qui dépassent le rôle de témoin
ou de n’importe quel personnage
62. Le public étant lui-même
n’incarne personne
prend des décisions avec ses propres motivations
est (parfois) intégré au récit avec ses données personnelles
68. FAIRE FAIRE DES CHOIX
AU PUBLIC
DE L’IDÉE AU CONCEPT NARRATIF
69. Faire faire des choix, c’est d’abord donner
des objectifs et des informations au public.
Il utilisera les informations à sa disposition pour estimer
si tel ou tel choix le rapprochera ou l’éloignera de ses objectifs.
70. Sans objectif ou informations,
autant lancer un dé pour faire ses choix…
71. Il faut ensuite déterminer les types de choix
qui seront offerts au public.
CHOIX RATIONNELCHOIX EXPLORATOIRE
88. Deux types de personnages
dans une histoire interactive :
NON INCARNÉINCARNÉ
89. Créer un personnage incarné dans une histoire
interactive, c’est imaginer un personnage
« variant » et crédible.
Début
de l’histoire
Fin de
l’histoire
90. Pour que le personnage incarné soit
variant et crédible, il faudra :
ne pas trop « délimiter » le personnage au début
faire évoluer son caractère et ses réactions en fonction de ses choix
faire également évoluer les réactions des autres personnages
92. Faire incarner un personnage, c’est assumer une
contradiction : l’utilisateur a l’air « amnésique ».
93. Pour que le public s’attache à « son »
personnage, il faudra donc
qu’il accepte l’objectif du personnage comme le sien
qu’il comprenne ses motivations (à défaut de les partager)
qu’il puisse le façonner (en partie) à son image
94. Note : le public n’incarne pas toujours quelqu’un,
ou à l’inverse peut incarner plusieurs personnages
Heavy Rain
2010
97. Je vous que l’utilisateur crée son propre parcours
parmi les options offertes
La délinéarisation et la personnalisation sont les
promesses fréquentes de ce type d’expériences.
Faire explorer
L’INTENTION D’UNE L’OEUVRE INTERACTIVE
100. Je veux que l’utilisateur participe au débat ou à la
conversation, autour ou dans une oeuvre.
Les interactions sociales peuvent se dérouler sur une
plateforme ad hoc ou directement sur les réseaux sociaux.
L’INTENTION D’UNE L’OEUVRE INTERACTIVE
Faire réagir
103. Je veux que l’utilisateur soit le co-créateur
de l’oeuvre ou d’une partie de l’oeuvre.
La participation peut être de l’ordre d’une simple idée ou de
contenus plus ou moins complexes (texte, photo, vidéo…).
Faire créer
L’INTENTION D’UNE L’OEUVRE INTERACTIVE
106. Je veux que l’utilisateur fasse des choix qui
transforment le cours de l’histoire.
C’est la posture du jeu et de la fiction
interactive.
Faire décider
L’INTENTION D’UNE L’OEUVRE INTERACTIVE
109. NOUS VOULONS RACONTER […]
AVEC POUR BUT DE FAIRE
[EXPLORER, RÉAGIR, CRÉER, DÉCIDER]
À UN PUBLIC DE […]
L’intention d’un projet peut se schématiser ainsi :
110. donner une impulsion claire au travail collectif
pouvoir y confronter les idées avancées à tout moment
mieux présenter le projet auprès de tiers
Une intention précise et partagée
par le groupe créatif permet de :
111. Identifier ses publics permet :
• de choisir les supports de diffusion pertinents
• d’orienter le ton et le niveau de langage
• de préparer une communication efficace
A PROPOS DU PUBLIC CIBLE
112. Identifier ses publics cibles ne revient pas à :
• dire aux gens ce qu’ils ont envie d’entendre
• sacrifier son intention aux impératifs du marketing
• devoir lisser son discours
A PROPOS DU PUBLIC CIBLE
113. Les publics cibles :
• ne sont pas forcément les gens déjà passionnés par le sujet
• ne peuvent pas être « le grand public » (car il n’existe pas)
A PROPOS DU PUBLIC CIBLE
115. Atelier #2
L’intention
30’
A partir d’une des trois expériences imaginées lors de l’atelier #1,
définissez plus précisément l’intention de cette histoire interactive sur le modèle de :
NOUS VOULONS RACONTER […] AVEC POUR BUT DE FAIRE […]À UN PUBLIC DE […]
Pensez vraiment à votre public (pas juste « les jeunes », « le grand public »…)
117. Navigateur
Avantages
• accessible au plus grand nombre
• facilite la communication sur les
réseaux sociaux
• coûts de développement « faibles »
Inconvénients
• s’adapter aux différents navigateurs
• un rendu moins « maîtrisé »
• penser absolument une version
mobile
118. Mobile
Avantages
• utiliser les fonctionnalités
spécifiques aux mobiles
• simplicité du tactile
• environnements « contrôlé »
Inconvénients
• forte barrière à l’entrée
• nécessité de penser deux versions
(iOS et Android)
• avoir des moyens de communication
/ distribution importants
119. Tablette
Avantages
• support familial
• propice aux expériences de
« canapé »
• lien fort avec le mobile
Inconvénients
• forte barrière à l’entrée
• support moins démocratisé que le
mobile
120. Réseaux sociaux
Avantages
• coût technique (quasi) nul
• un public déjà présent
• une diversité de réseaux aux
sociologie différentes
Inconvénients
• nécessite de surnager dans un
océan de contenus
• s’adapter aux codes et usages
• passer par des influenceurs
121. Réalité virtuelle
Avantages
• un format innovant qui attire
l’attention
• une expérience utilisateur
radicalement différente
Inconvénients
• les coûts importants
• les usages peu clairs
• une multiplicité de supports
• un potentiel de vente limité
128. Atelier #2
Les modes d’interaction
60’
A partir de votre concept interactif et de votre intention,
imaginez une séquence de l’histoire et détaillez la manière dont le public y interagit.
Le plus simple : faire un pas à pas
(je regarde une vidéo > la vidéo s’arrête et deux boutons apparaissent > je clique sur un bouton > etc.)
132. Structure linéaire
Un début, une fin, l’utilisateur influe sur un aspect de la linéarité
Do Not Track
2015
Phallaina
2016
133. Avantages
• rassurant, familier pour l’utilisateur
• contrôle maximal pour l’auteur
• relativement simple à concevoir et à schématiser
Principaux défis
• éviter les interactions inutiles: cliquez pour continuer…
• une possible frustration d’un « manque d’interaction »
Structure linéaire
134. Structure élastique
Un fil narratif principal, des décrochages pour explorer davantage
A Short History of the Highrise
2013
Prison Valley
2009
135. Avantages
• familier pour l’auteur: c’est une forme innovante de « montage »
• préserve le contrôle de l’auteur sur l’histoire en proposant un arc narratif central fort
Principaux défis
• les décrochages trop fréquents peuvent rompre l’immersion dans l’histoire
• la qualité des décrochages est parfois trop faible pour motiver l’exploration
• quelle expérience si l’on interagit pas ?
Structure élastique
137. Avantages
• décompose l’expérience en section plus rapide à « consommer »
• permet à l’utilisateur d’aller vers le contenu qui l’attire davantage
Principaux défis
• l’intention d’auteur peut se diluer en se contentant de « classer » du contenu
• éviter d’avoir une qualité / quantité de contenu inégale entre les sections
• motiver le passage d’une section à l’autre
Structure concentrique
139. Avantages
• permet de confronter les points de vue, les temporalités, les espaces du récit
• donne à l’utilisateur l’opportunité de devenir le « réalisateur »
Principaux défis
• le lien entre les différents « canaux » n’est pas toujours clair
• l’expérience peut se résumer à un zapping peu éclairant
Structure parallèle
140. Structure à embranchements
De multiples choix tirent l’histoire dans des directions différentes
Jeu d’Influences
2013
Lifeline
2015
141. Avantages
• donne une grande (impression de) liberté à l’utilisateur
• l’expérience est « rejouable »
Principaux défis
• maîtriser le nombre d’embranchements
• éviter les faux choix
• proposer de réels dilemmes
• rendre chaque version de l’histoire cohérente et satisfaisante
Structure à embranchements
143. Une visualisation indispensable
« Zoomer » sur un temps de la narration représentatif de l’expérience
Utiliser la méthode du storyboarding
REPRÉSENTER LA STRUCTURE
NARRATIVE INTERACTIVE
149. L’outil idéal pour écrire des histoires
interactives permet :
d’écrire un scénario non-linéaire
de visualiser la structure de ce scénario
d’écrire des dialogues et des conversations non-linéaires
161. Atelier #4
Structuration
45’
A partir de votre concept interactif et de votre première séquence,
utilisez Twine pour décrire les grands mouvements de l’histoire et leur articulation.
http://twinery.org/2
162. Un passage est un mouvement de l’histoire
jusqu’à un embranchement
Pour faire un lien : [[titre du passage]]
Pour un lien avec un nom différent : [[Le texte
affiché pour le lien->titre du passage]]
LES BASES DE TWINE
http://twinery.org/2
165. Leur intérêt
• matérialiser la liberté offerte à l’utilisateur
• marquer clairement le temps du choix (en alternance avec le temps de la consommation)
Leurs enjeux
• inscrire le choix dans une continuité narrative
• scénariser les moments de choix pour ne pas tomber dans le syndrome « menu de DVD »
• donner suffisamment d’informations pour permettre un choix satisfaisant
LES INTERFACES « POINT-AND-CLICK »
L’interface « générique » : plusieurs choix sont offerts à l’écran et
l’utilisateur doit se prononcer pour avancer.
168. Leur intérêt
• permettre la « chorégraphie » linéaire de contenus pouvant être très variés
• laisser à l’utilisateur la « responsabilité » de son rythme de consommation
• faire reposer l’expérience sur un geste naturel (presque inconscient) de la navigation web
Leurs enjeux
• créer un sensation de contrôle de l’histoire chez l’utilisateur
• s’assurer de la fluidité technique du mouvement (sinon les frictions et la fatigue oculaire gâchent
l’expérience)
LES INTERFACES SCROLLABLES
L’utilisateur fait défiler une séquence d’animations et d’évènements.
L’interface combine donc linéarité et interaction.
171. Leur intérêt
• construire un récit s’appuyant sur une chronologie précise d’évènements
• montrer des relations de causalité ou d’échelle temporelle
• donner à l’utilisateur un contrôle sur le passage du temps
Leurs enjeux
• ne pas se réduire à un simple énoncé chronologique des faits sans grande saveur
• parvenir à raconter une histoire avec de « simples dates »
• la conception linéaire du temps n’est pas universelle…
LES TIMELINES
Les mouvements de l’histoire sont proposés chronologiquement et
l’utilisateur peut ainsi naviguer dans le temps.
174. Leur intérêt
• matérialiser dans un même espace une opposition (de points de vue, de temporalité, de
localisation…)
• la grammaire du « split screen » est souvent familière pour l’utilisateur
Leurs enjeux
• rendre le lien entre les contenus à l’écran évident et clair pour l’utilisateur
• le fait de généralement devoir « couper » un contenu pour passer à un autre peut être
contreproductif en termes d’immersion et de compréhension
LES ÉCRANS PARTAGÉS
L’action est repartie sur plusieurs zones de l’écran que
l’utilisateur à le pouvoir « d’activer ».
177. Leur intérêt
• permet de subdiviser l’expérience en sous-parties, plus rapides à consommer
• stimule la sensibilité visuelle de l’utilisateur pour motiver son choix
Leurs enjeux
• éviter de simplement construire un menu un peu fade avec de grandes images
• donner suffisamment d’informations pour motiver le choix de l’utilisateur
• ne pas submerger l’utilisateur par trop de choix à la fois
LES GALERIES
L’utilisateur choisit son point d’entrée parmi un
choix d’options visuelles.
180. Leur intérêt
• donner une grande sensation de liberté à l’utilisateur en lui donnant un rôle d’explorateur
• concrétise une vision moins dirigiste de la narration
• rapproche l’expérience de la grammaire du jeu vidéo
Leurs enjeux
• permettre à l’utilisateur de s’orienter dans un monde qu’il ne connait pas
• parvenir à conduire la narration, même quand l’utilisateur n’interagit pas comme prévu
• les enjeux techniques de modélisation et de gestion de la 3D sont nombreux
LES ENVIRONNEMENTS OUVERTS
L’utilisateur peut déambuler « librement » dans un monde virtuel
qui sert la narration.
183. Leur intérêt
• ancrer le récit dans une dimension spatiale claire (et commune à tous)
• valoriser des contenus géolocalisés
Leurs enjeux
• sortir de l’esthétique de la carte d’école ou de Google Maps
• les cartes sont souvent des instruments « froids » qui mettent une distance entre l’utilisateur et le
sujet
• trouver la place de raconter une histoire
LES CARTES
Les cartes peuvent servir de simples repères ou de « hubs »
permettant à l’utilisateur de choisir son point d’entrée.
186. Leur intérêt
• décoller l’interaction d’une prise de décision rationnelle
• se rapprocher de la grammaire du jeu vidéo
Leurs enjeux
• trouver l’interaction qui plongera l’utilisateur dans l’état émotionnel recherché
• estimer quel est le niveau de dextérité approprié
LES INTERFACES GESTUELLES
Différentes gestuelles permettent de créer une
expérience ludique et « instinctive ».
196. Réaliser des wireframes légendés et commentés
Préciser les déclinaisons de l’interfaces sur les différents supports
La compréhension de la fonction prévaut sur la beauté de l’illustration
DÉCRIRE UNE INTERFACE NARRATIVE
205. Un prototype doit :
Lever les interrogations ou verrous technologiques majeurs
Permettre une meilleure compréhension des usages du public cible
Convaincre des partenaires et des tiers
POURQUOI PROTOTYPER ?
210. AUTRES OUTILS SPÉCIFIQUES
Storymaps JS
Cartes interactives
(open-source)
Odyssey.js
Création de carte interactives
(open-source)
Timeline JS
Création de timelines
(open-source)
212. Atelier #4
Structuration
45’
A partir de votre concept interactif et de votre première séquence,
utilisez Twine pour décrire les grands mouvements de l’histoire et leur articulation.
http://twinery.org/2
213. Un passage est un mouvement de l’histoire
jusqu’à un embranchement
Pour faire un lien : [[titre du passage]]
Pour un lien avec un nom différent : [[Le texte
affiché pour le lien->titre du passage]]
LES BASES DE TWINE
http://twinery.org/2
217. Twine
Ecriture non-linéaire
Modèle économique
Open-source
Avantages
• Visualisation de la structure du
scénario interactif
• Pour réaliser prototype et/ou produits
finis
• Intégration possible de médias
• Large communauté créative
Inconvénients
• Syntaxe parfois complexe
• Pas de sauvegarde automatique
• Pas de formattage (dialogues…)
220. Chatfuel
Robots conversationnels
Modèle économique
Gratuit
Avantages
• Editeur visuel et simple à prendre en
main
• Mise en ligne et test immédiats
• Possibilité de développer des
fonctionnalités supplémentaires
Inconvénients
• Une IA pas si intelligente…
• Davantage pensé pour des services
que pour des histoires
223. InVision
Maquettage « interactif »
Modèle économique
Freemium (0 - 99$ / mois)
Avantages
• Permet la création de maquette
interactive
• Outil en ligne et collaboratif
• Rendu proche du produit fini
Inconvénients
• Prise en main un peu complexe
• Besoin d’un outil de création visuelle
en amont (Photoshop, etc.)
225. Eko Studio
Vidéo interactive
Modèle économique
Gratuit
Avantages
• Prise en main rapide et simple
• Visualisation de la structure du
scénario
• Personnalisation de l’interface
• Publication simple via embed
Inconvénients
• Format unique et « indépassable »
• Temps de téléversement des vidéos
souvent très long
226. Verse
Vidéo interactive
Modèle économique
Gratuit
Avantages
• Versatile, permet de nombreux
formats
• Fonctionnalités inégales en terme
d’expérience utilisateur
• Publication simple via embed
Inconvénients
• Interface peu ou pas personnalisable
• Pas de visualisation de la structure de
la vidéo
228. Atavist
Publications enrichies
Modèle économique
Freemium
Avantages
• Prise en main rapide
• Nombreuses intégrations de services
tiers (réseaux sociaux,
• Responsive design
• Publication vers de nombreux formats
(web, ebook, Facebook Instants
Articles…)
• Monétisation des publications
possible
Inconvénients
• Faible personnalisation de l’interface
• Nombreuses contraintes pour l’export
en ebook
229. Adobe Spark
Publications enrichies
Modèle économique
Gratuit
Avantages
• Simple à prendre en main
• Entièrement mobile
• Intégration à la suite Adobe
• Facilité de publication
Inconvénients
• Personnalisation limitée
231. Oniride
Création d’images 360° via Photoshop Modèle économique
Gratuit (sur demande)
Avantages
• Création à travers un outil bien connu
• Visualisation « live »
• Export vers Facebook ou Unity
Inconvénients
• Ne permet pas d’aller plus loin (en
l’état) qu’une image à 360°