Le document explore la conception d'interfaces narratives, détaillant les différentes modalités d'échanges entre narrateurs et publics, ainsi que les types d'interfaces tels que point-and-click, scrollables et flux parallèles. Il aborde l'importance de l'engagement, de la navigation et de l'adaptabilité des interfaces pour offrir une expérience utilisateur fluide et immersive. Enfin, il propose des principes directeurs pour concevoir efficacement une interface narrative, incluant la définition claire des intentions et l'utilisation d'outils de prototypage.

1. LA CONCEPTION
D’INTERFACES NARRATIVES

2. Benjamin Hoguet
Créateur interactif
http://benhoguet.com

4. QUEL EST LE RÔLE
D’UNE INTERFACE
NARRATIVE ?
CONCEVOIR UNE INTERFACE NARRATIVE

5. Une interface est une modalité d’échanges
entre les porteurs d’une narration
et leur public.

6. ENGAGEMENTCONSULTATION NAVIGATION
A travers une interface,
l’utilisateur peut réaliser 4 actions principales :
PATIENCE

7. CONSULTATION
L’utilisateur consomme du contenu de
façon relativement passive.

8. 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

9. 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

10. CONSULTATION
Apporter un confort et une fluidité améliorés
NSA Files Decoded supprime les « frictions » de l’expérience de lecture classique.

11. NAVIGATION
L’utilisateur fait un ou plusieurs choix
qui façonnent la suite de son expérience.

12. Solution 1 : montrer l’étendue des possibles
NAVIGATION

13. Solution 2 : une navigation « invisible »
NAVIGATION

14. Et dans tous les cas : toujours permettre à l’utilisateur de s’orienter
NAVIGATION

15. ENGAGEMENT
L’utilisateur a le choix de s’engager sur un terrain
plus social, et donc plus personnel.

16. Faciliter le partage
ENGAGEMENT

17. Intégrer le partage dans la narration
ENGAGEMENT

18. Récompenser l’engagement dans l’expérience
ENGAGEMENT

19. Plus l’engagement est exigeant, plus il faut simplifier le processus
ENGAGEMENT

20. PATIENCE
L’utilisateur, confronté à une forme de friction,
n’a pas d’autre choix que d’attendre.

21. PATIENCE
Profiter des temps de chargement

22. PATIENCE
Limiter les interactions inutiles

23. UN PANORAMA DES
INTERFACES
NARRATIVES
CONCEVOIR UNE INTERFACE NARRATIVE

24. Killing Kennedy
LES INTERFACES « POINT-AND-CLICK »

25. 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.

26. Jeu d’Influences
LES INTERFACES « POINT-AND-CLICK »

27. Lifeline
LES INTERFACES « POINT-AND-CLICK »

28. After the Storm
LES INTERFACES SCROLLABLES

29. 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.

30. Phallaina
LES INTERFACES SCROLLABLES

31. NSA Files Decoded
LES INTERFACES SCROLLABLES

32. Out of Sight, Out of Mind
LES TIMELINES

33. 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.

34. LES TIMELINES
I Love Your Work

35. LES TIMELINES
3 Secondes

36. LES ROUES TEMPORELLES
Stainsbeaupays

37. 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 TEMPORELLES
L’utilisateur est placé face à une autre conception du temps : il s’écoule toujours
linéairement, mais sans début et sans fin.

38. LES ROUES TEMPORELLES
24 Hours of Happy

39. LES ÉCRANS PARTAGÉS
Gaza Sderot

40. 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 ».

41. LES ÉCRANS PARTAGÉS
Connected Walls

42. LES FLUX PARALLÈLES
Wei or Die

43. 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ÈLES
Différents flux vidéos progressent simultanément et l’utilisateur peut
« zapper » de l’un à l’autre.

44. LES FLUX PARALLÈLES
Alma

45. LES FLUX PARALLÈLES
Last Hijack

46. LES GALERIES
The {} And

47. 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.

48. LES GALERIES
L’Atelier du Peintre

49. LES GALERIES
Question Bridge

50. LES ENVIRONNEMENTS OUVERTS
Bear 71

51. 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.

52. LES ENVIRONNEMENTS OUVERTS
Circa 1948

53. LES ENVIRONNEMENTS OUVERTS
Californium

54. LES CARTES
Riding the New Silk Road

55. 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.

56. LES CARTES
In Flight

57. LES CARTES
We Are Data

58. LES INTERFACES GESTUELLES
Five Minutes

59. 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 ».

60. LES INTERFACES GESTUELLES
Phi

61. LES INTERFACES GESTUELLES
Sortie en Mer

62. LES INTERFACES TANGIBLES
The Dancing Traffic Light

63. 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 TANGIBLES
En interagissant avec son environnement, l’utilisateur fait progresser une
expérience où la technologie intègre une dimension « palpable ».

64. LES INTERFACES TANGIBLES
World of Yo-Ho

65. LES INTERFACES TANGIBLES
Blabdroid

66. LES QUESTIONS À SE
POSER POUR CONCEVOIR
UNE INTERFACE
CONCEVOIR UNE INTERFACE NARRATIVE

67. QUEL EST LA PREMIÈRE CHOSE QUE JE VOIS ?

68. MON INTERFACE A-T-ELLE BESOIN D’UN TUTORIEL ?

69. LE SIGNAL ET LE FEEDBACK SONT-ILS EFFICACES ?

70. SE REPÈRE-T-ON À TOUT MOMENT ?

71. MON INTERFACE RESTE-T-ELLE COHÉRENTE ?

72. LE PROCESSUS DE
CONCEPTION D’UNE
INTERFACE INTERACTIVE
CONCEVOIR UNE INTERFACE NARRATIVE

73. NOUS VOULONS RACONTER […]
AVEC POUR BUT DE […]
À UN PUBLIC DE […]
1. DÉFINIR L’INTENTION DU PROJET

74. 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

75. 3. POSITIONNER LE PUBLIC
Créateur
De Vinci
Décideur
Démiurge
Explorateur
Magellan
Débatteur
Socrate

76. 4. VISUALISER LA STRUCTURE NARRATIVE

77. 4. VISUALISER LA STRUCTURE NARRATIVE
Un outil :
Twine

78. 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

79. Un outil :
Balsamiq Mockups
5. RÉALISER DES WIREFRAMES

80. Une collecte de sources d’inspiration esthétique et fonctionnelle,
grâce à des outils comme :
Moodboard Pinterest
6. RÉALISER UN MOODBOARD

81. 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