La conception d'interfaces narratives
-
Upload
benjamin-hoguet -
Category
Internet
-
view
333 -
download
0
Transcript of La conception d'interfaces narratives
![Page 1: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/1.jpg)
LA CONCEPTION D’INTERFACES NARRATIVES
![Page 3: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/3.jpg)
![Page 4: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/4.jpg)
QUEL EST LE RÔLE D’UNE INTERFACE NARRATIVE ?
CONCEVOIR UNE INTERFACE NARRATIVE
![Page 5: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/5.jpg)
Une interface est une modalité d’échanges
entre les porteurs d’une narration
et leur public.
![Page 6: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/6.jpg)
ENGAGEMENTCONSULTATION NAVIGATION
A travers une interface, l’utilisateur peut réaliser 4 actions principales :
PATIENCE
![Page 7: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/7.jpg)
CONSULTATIONL’utilisateur consomme du contenu de
façon relativement passive.
![Page 8: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/8.jpg)
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
![Page 9: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/9.jpg)
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
![Page 10: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/10.jpg)
CONSULTATIONApporter un confort et une fluidité améliorés
NSA Files Decoded supprime les « frictions » de l’expérience de lecture classique.
![Page 11: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/11.jpg)
NAVIGATIONL’utilisateur fait un ou plusieurs choix
qui façonnent la suite de son expérience.
![Page 12: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/12.jpg)
Solution 1 : montrer l’étendue des possibles
NAVIGATION
![Page 13: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/13.jpg)
Solution 2 : une navigation « invisible »
NAVIGATION
![Page 14: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/14.jpg)
Et dans tous les cas : toujours permettre à l’utilisateur de s’orienter
NAVIGATION
![Page 15: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/15.jpg)
ENGAGEMENTL’utilisateur a le choix de s’engager sur un terrain
plus social, et donc plus personnel.
![Page 16: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/16.jpg)
Faciliter le partageENGAGEMENT
![Page 17: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/17.jpg)
Intégrer le partage dans la narration
ENGAGEMENT
![Page 18: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/18.jpg)
Récompenser l’engagement dans l’expérience
ENGAGEMENT
![Page 19: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/19.jpg)
Plus l’engagement est exigeant, plus il faut simplifier le processus
ENGAGEMENT
![Page 20: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/20.jpg)
PATIENCEL’utilisateur, confronté à une forme de friction,
n’a pas d’autre choix que d’attendre.
![Page 21: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/21.jpg)
PATIENCEProfiter des temps de chargement
![Page 22: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/22.jpg)
PATIENCELimiter les interactions inutiles
![Page 23: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/23.jpg)
UN PANORAMA DES INTERFACES NARRATIVES
CONCEVOIR UNE INTERFACE NARRATIVE
![Page 24: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/24.jpg)
Killing KennedyLES INTERFACES « POINT-AND-CLICK »
![Page 25: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/25.jpg)
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.
![Page 26: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/26.jpg)
Jeu d’InfluencesLES INTERFACES « POINT-AND-CLICK »
![Page 27: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/27.jpg)
LifelineLES INTERFACES « POINT-AND-CLICK »
![Page 28: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/28.jpg)
After the StormLES INTERFACES SCROLLABLES
![Page 29: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/29.jpg)
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.
![Page 30: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/30.jpg)
PhallainaLES INTERFACES SCROLLABLES
![Page 31: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/31.jpg)
NSA Files DecodedLES INTERFACES SCROLLABLES
![Page 32: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/32.jpg)
Out of Sight, Out of MindLES TIMELINES
![Page 33: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/33.jpg)
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.
![Page 34: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/34.jpg)
LES TIMELINESI Love Your Work
![Page 35: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/35.jpg)
LES TIMELINES3 Secondes
![Page 36: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/36.jpg)
LES ROUES TEMPORELLESStainsbeaupays
![Page 37: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/37.jpg)
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.
![Page 38: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/38.jpg)
LES ROUES TEMPORELLES24 Hours of Happy
![Page 39: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/39.jpg)
LES ÉCRANS PARTAGÉSGaza Sderot
![Page 40: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/40.jpg)
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 ».
![Page 41: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/41.jpg)
LES ÉCRANS PARTAGÉSConnected Walls
![Page 42: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/42.jpg)
LES FLUX PARALLÈLESWei or Die
![Page 43: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/43.jpg)
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.
![Page 44: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/44.jpg)
LES FLUX PARALLÈLESAlma
![Page 45: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/45.jpg)
LES FLUX PARALLÈLESLast Hijack
![Page 46: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/46.jpg)
LES GALERIESThe {} And
![Page 47: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/47.jpg)
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.
![Page 48: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/48.jpg)
LES GALERIESL’Atelier du Peintre
![Page 49: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/49.jpg)
LES GALERIESQuestion Bridge
![Page 50: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/50.jpg)
LES ENVIRONNEMENTS OUVERTSBear 71
![Page 51: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/51.jpg)
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.
![Page 52: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/52.jpg)
LES ENVIRONNEMENTS OUVERTSCirca 1948
![Page 53: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/53.jpg)
LES ENVIRONNEMENTS OUVERTSCalifornium
![Page 54: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/54.jpg)
LES CARTESRiding the New Silk Road
![Page 55: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/55.jpg)
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.
![Page 56: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/56.jpg)
LES CARTESIn Flight
![Page 57: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/57.jpg)
LES CARTESWe Are Data
![Page 58: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/58.jpg)
LES INTERFACES GESTUELLESFive Minutes
![Page 59: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/59.jpg)
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 ».
![Page 60: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/60.jpg)
LES INTERFACES GESTUELLESPhi
![Page 61: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/61.jpg)
LES INTERFACES GESTUELLESSortie en Mer
![Page 62: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/62.jpg)
LES INTERFACES TANGIBLESThe Dancing Traffic Light
![Page 63: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/63.jpg)
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 ».
![Page 64: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/64.jpg)
LES INTERFACES TANGIBLESWorld of Yo-Ho
![Page 65: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/65.jpg)
LES INTERFACES TANGIBLESBlabdroid
![Page 66: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/66.jpg)
LES QUESTIONS À SE POSER POUR CONCEVOIR UNE INTERFACE
CONCEVOIR UNE INTERFACE NARRATIVE
![Page 67: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/67.jpg)
QUEL EST LA PREMIÈRE CHOSE QUE JE VOIS ?
![Page 68: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/68.jpg)
MON INTERFACE A-T-ELLE BESOIN D’UN TUTORIEL ?
![Page 69: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/69.jpg)
LE SIGNAL ET LE FEEDBACK SONT-ILS EFFICACES ?
![Page 70: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/70.jpg)
SE REPÈRE-T-ON À TOUT MOMENT ?
![Page 71: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/71.jpg)
MON INTERFACE RESTE-T-ELLE COHÉRENTE ?
![Page 72: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/72.jpg)
LE PROCESSUS DE CONCEPTION D’UNE INTERFACE INTERACTIVE
CONCEVOIR UNE INTERFACE NARRATIVE
![Page 73: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/73.jpg)
NOUS VOULONS RACONTER […]
AVEC POUR BUT DE […]
À UN PUBLIC DE […]
1. DÉFINIR L’INTENTION DU PROJET
![Page 74: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/74.jpg)
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
![Page 75: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/75.jpg)
3. POSITIONNER LE PUBLIC
Créateur De Vinci
Décideur Démiurge
Explorateur Magellan
Débatteur Socrate
![Page 76: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/76.jpg)
4. VISUALISER LA STRUCTURE NARRATIVE
![Page 78: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/78.jpg)
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
![Page 79: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/79.jpg)
Un outil : Balsamiq Mockups
5. RÉALISER DES WIREFRAMES
![Page 80: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/80.jpg)
Une collecte de sources d’inspiration esthétique et fonctionnelle, grâce à des outils comme :
Moodboard Pinterest
6. RÉALISER UN MOODBOARD
![Page 81: La conception d'interfaces narratives](https://reader036.fdocuments.in/reader036/viewer/2022081520/587fd8341a28ab58248b5cc5/html5/thumbnails/81.jpg)
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