la conception d'interfaces narratives
TRANSCRIPT
LA CONCEPTION D’INTERFACES NARRATIVES
QUEL EST LE RÔLE D’UNE INTERFACE NARRATIVE ?
CONCEVOIR UNE INTERFACE NARRATIVE
Une interface est une modalité d’échanges
entre les porteurs d’une narration
et leur public.
ENGAGEMENTCONSULTATION NAVIGATION
A travers une interface, l’utilisateur peut réaliser 4 actions principales :
PATIENCE
CONSULTATIONL’utilisateur consomme du contenu de
façon relativement passive.
Reprendre les codes existants de la consommation de contenus en ligne.
Do Not Track donne l’impression de regarder une vidéo en ligne (même si le contenu est généré dynamiquement).
CONSULTATION
Introduire de la personnalisation « invisible » dans un contenu d’apparence linéaire
Regarder un clip, toujours le même… mais jamais le même.
CONSULTATION
CONSULTATIONApporter un confort et une fluidité améliorés
NSA Files Decoded supprime les « frictions » de l’expérience de lecture classique.
NAVIGATIONL’utilisateur fait un ou plusieurs choix
qui façonnent la suite de son expérience.
Solution 1 : montrer l’étendue des possibles
NAVIGATION
Solution 2 : une navigation « invisible »
NAVIGATION
Et dans tous les cas : toujours permettre à l’utilisateur de s’orienter
NAVIGATION
ENGAGEMENTL’utilisateur a le choix de s’engager sur un terrain
plus social, et donc plus personnel.
Faciliter le partageENGAGEMENT
Intégrer le partage dans la narration
ENGAGEMENT
Récompenser l’engagement dans l’expérience
ENGAGEMENT
Plus l’engagement est exigeant, plus il faut simplifier le processus
ENGAGEMENT
PATIENCEL’utilisateur, confronté à une forme de friction,
n’a pas d’autre choix que d’attendre.
PATIENCEProfiter des temps de chargement
PATIENCELimiter les interactions inutiles
UN PANORAMA DES INTERFACES NARRATIVES
CONCEVOIR UNE INTERFACE NARRATIVE
Killing KennedyLES INTERFACES « POINT-AND-CLICK »
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.
Jeu d’InfluencesLES INTERFACES « POINT-AND-CLICK »
LifelineLES INTERFACES « POINT-AND-CLICK »
After the StormLES INTERFACES SCROLLABLES
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 SCROLLABLESL’utilisateur fait défiler une séquence d’animations et d’évènements.
L’interface combine donc linéarité et interaction.
PhallainaLES INTERFACES SCROLLABLES
NSA Files DecodedLES INTERFACES SCROLLABLES
Out of Sight, Out of MindLES TIMELINES
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 TIMELINESLes mouvements de l’histoire sont proposés chronologiquement et
l’utilisateur peut ainsi naviguer dans le temps.
LES TIMELINESI Love Your Work
LES TIMELINES3 Secondes
LES ROUES TEMPORELLESStainsbeaupays
Leur intérêt • donner une représentation du temps sans un début et une fin bien précis • se démarquer d’une timeline linéaire plus classique
Leurs enjeux • un maniement plus complexe pour l’utilisateur car moins usuel • une « mise en page » et des contraintes techniques plus complexes à concevoir
LES ROUES TEMPORELLESL’utilisateur est placé face à une autre conception du temps : il s’écoule toujours
linéairement, mais sans début et sans fin.
LES ROUES TEMPORELLES24 Hours of Happy
LES ÉCRANS PARTAGÉSGaza Sderot
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ÉSL’action est repartie sur plusieurs zones de l’écran que
l’utilisateur à le pouvoir « d’activer ».
LES ÉCRANS PARTAGÉSConnected Walls
LES FLUX PARALLÈLESWei or Die
Leur intérêt • montrer une opposition ou une complémentarité de points de vue de façon dynamique • permettre à l’utilisateur de devenir le réalisateur de sa propre expérience • cultiver chez l’utilisateur l’impression de « manquer » quelque chose s’il n’interagit pas
Leurs enjeux • rendre les transitions les plus fluides possibles • rendre le lien entre les flux évidents et éclairants pour l’utilisateur • choisir le bon « déclencheur » pour l’utilisateur (clic, scroll, survol, swipe…)
LES FLUX PARALLÈLESDifférents flux vidéos progressent simultanément et l’utilisateur peut
« zapper » de l’un à l’autre.
LES FLUX PARALLÈLESAlma
LES FLUX PARALLÈLESLast Hijack
LES GALERIESThe {} And
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 GALERIESL’utilisateur choisit son point d’entrée parmi un
choix d’options visuelles.
LES GALERIESL’Atelier du Peintre
LES GALERIESQuestion Bridge
LES ENVIRONNEMENTS OUVERTSBear 71
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 OUVERTSL’utilisateur peut déambuler « librement » dans un monde virtuel
qui sert la narration.
LES ENVIRONNEMENTS OUVERTSCirca 1948
LES ENVIRONNEMENTS OUVERTSCalifornium
LES CARTESRiding the New Silk Road
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 CARTESLes cartes peuvent servir de simples repères ou de « hubs »
permettant à l’utilisateur de choisir son point d’entrée.
LES CARTESIn Flight
LES CARTESWe Are Data
LES INTERFACES GESTUELLESFive Minutes
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 GESTUELLESDifférentes gestuelles permettent de créer une
expérience ludique et « instinctive ».
LES INTERFACES GESTUELLESPhi
LES INTERFACES GESTUELLESSortie en Mer
LES INTERFACES TANGIBLESThe Dancing Traffic Light
Leur intérêt • ancrer l’interaction dans le monde réel, palpable, et la rendre plus naturelle ou immersive • conjuguer la technologie avec un environnement qui renforce une dimension « réelle »
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 TANGIBLESEn interagissant avec son environnement, l’utilisateur fait progresser une
expérience où la technologie intègre une dimension « palpable ».
LES INTERFACES TANGIBLESWorld of Yo-Ho
LES INTERFACES TANGIBLESBlabdroid
LES QUESTIONS À SE POSER POUR CONCEVOIR UNE INTERFACE
CONCEVOIR UNE INTERFACE NARRATIVE
QUEL EST LA PREMIÈRE CHOSE QUE JE VOIS ?
MON INTERFACE A-T-ELLE BESOIN D’UN TUTORIEL ?
LE SIGNAL ET LE FEEDBACK SONT-ILS EFFICACES ?
SE REPÈRE-T-ON À TOUT MOMENT ?
MON INTERFACE RESTE-T-ELLE COHÉRENTE ?
LE PROCESSUS DE CONCEPTION D’UNE INTERFACE INTERACTIVE
CONCEVOIR UNE INTERFACE NARRATIVE
NOUS VOULONS RACONTER […]
AVEC POUR BUT DE […]
À UN PUBLIC DE […]
1. DÉFINIR L’INTENTION DU PROJET
En fonction :
des publics cibles et de leurs usages
des contraintes d’accessibilité
des possibilités budgétaires
des opportunités technologiques et humaines
2. CHOISIR LES BONS SUPPORTS
3. POSITIONNER LE PUBLIC
Créateur De Vinci
Décideur Démiurge
Explorateur Magellan
Débatteur Socrate
4. VISUALISER LA STRUCTURE NARRATIVE
Décrire l’interface schématiquement, sans la distraction des formes et des couleurs pour ne penser qu’à l’expérience utilisateur.
5. RÉALISER DES WIREFRAMES
Un outil : Balsamiq Mockups
5. RÉALISER DES WIREFRAMES
Une collecte de sources d’inspiration esthétique et fonctionnelle, grâce à des outils comme :
Moodboard Pinterest
6. RÉALISER UN MOODBOARD
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
6. PROTOTYPER, TESTER, RECOMMENCER