O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

La conception d'interfaces narratives

912 visualizações

Publicada em

Support de formation sur les nouvelles écritures et les nouveaux médias.

Publicada em: Internet
  • Entre para ver os comentários

La conception d'interfaces narratives

  1. 1. LA CONCEPTION D’INTERFACES NARRATIVES
  2. 2. Benjamin Hoguet Créateur interactif http://benhoguet.com
  3. 3. QUEL EST LE RÔLE D’UNE INTERFACE NARRATIVE ? CONCEVOIR UNE INTERFACE NARRATIVE
  4. 4. Une interface est une modalité d’échanges entre les porteurs d’une narration et leur public.
  5. 5. ENGAGEMENTCONSULTATION NAVIGATION A travers une interface, l’utilisateur peut réaliser 4 actions principales : PATIENCE
  6. 6. CONSULTATION L’utilisateur consomme du contenu de façon relativement passive.
  7. 7. 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
  8. 8. 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
  9. 9. CONSULTATION Apporter un confort et une fluidité améliorés NSA Files Decoded supprime les « frictions » de l’expérience de lecture classique.
  10. 10. NAVIGATION L’utilisateur fait un ou plusieurs choix qui façonnent la suite de son expérience.
  11. 11. Solution 1 : montrer l’étendue des possibles NAVIGATION
  12. 12. Solution 2 : une navigation « invisible » NAVIGATION
  13. 13. Et dans tous les cas : toujours permettre à l’utilisateur de s’orienter NAVIGATION
  14. 14. ENGAGEMENT L’utilisateur a le choix de s’engager sur un terrain plus social, et donc plus personnel.
  15. 15. Faciliter le partage ENGAGEMENT
  16. 16. Intégrer le partage dans la narration ENGAGEMENT
  17. 17. Récompenser l’engagement dans l’expérience ENGAGEMENT
  18. 18. Plus l’engagement est exigeant, plus il faut simplifier le processus ENGAGEMENT
  19. 19. PATIENCE L’utilisateur, confronté à une forme de friction, n’a pas d’autre choix que d’attendre.
  20. 20. PATIENCE Profiter des temps de chargement
  21. 21. PATIENCE Limiter les interactions inutiles
  22. 22. UN PANORAMA DES INTERFACES NARRATIVES CONCEVOIR UNE INTERFACE NARRATIVE
  23. 23. Killing Kennedy LES INTERFACES « POINT-AND-CLICK »
  24. 24. 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.
  25. 25. Jeu d’Influences LES INTERFACES « POINT-AND-CLICK »
  26. 26. Lifeline LES INTERFACES « POINT-AND-CLICK »
  27. 27. After the Storm LES INTERFACES SCROLLABLES
  28. 28. 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.
  29. 29. Phallaina LES INTERFACES SCROLLABLES
  30. 30. NSA Files Decoded LES INTERFACES SCROLLABLES
  31. 31. Out of Sight, Out of Mind LES TIMELINES
  32. 32. 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.
  33. 33. LES TIMELINES I Love Your Work
  34. 34. LES TIMELINES 3 Secondes
  35. 35. LES ROUES TEMPORELLES Stainsbeaupays
  36. 36. 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.
  37. 37. LES ROUES TEMPORELLES 24 Hours of Happy
  38. 38. LES ÉCRANS PARTAGÉS Gaza Sderot
  39. 39. 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 ».
  40. 40. LES ÉCRANS PARTAGÉS Connected Walls
  41. 41. LES FLUX PARALLÈLES Wei or Die
  42. 42. 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.
  43. 43. LES FLUX PARALLÈLES Alma
  44. 44. LES FLUX PARALLÈLES Last Hijack
  45. 45. LES GALERIES The {} And
  46. 46. 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.
  47. 47. LES GALERIES L’Atelier du Peintre
  48. 48. LES GALERIES Question Bridge
  49. 49. LES ENVIRONNEMENTS OUVERTS Bear 71
  50. 50. 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.
  51. 51. LES ENVIRONNEMENTS OUVERTS Circa 1948
  52. 52. LES ENVIRONNEMENTS OUVERTS Californium
  53. 53. LES CARTES Riding the New Silk Road
  54. 54. 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.
  55. 55. LES CARTES In Flight
  56. 56. LES CARTES We Are Data
  57. 57. LES INTERFACES GESTUELLES Five Minutes
  58. 58. 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 ».
  59. 59. LES INTERFACES GESTUELLES Phi
  60. 60. LES INTERFACES GESTUELLES Sortie en Mer
  61. 61. LES INTERFACES TANGIBLES The Dancing Traffic Light
  62. 62. 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 ».
  63. 63. LES INTERFACES TANGIBLES World of Yo-Ho
  64. 64. LES INTERFACES TANGIBLES Blabdroid
  65. 65. LES QUESTIONS À SE POSER POUR CONCEVOIR UNE INTERFACE CONCEVOIR UNE INTERFACE NARRATIVE
  66. 66. QUEL EST LA PREMIÈRE CHOSE QUE JE VOIS ?
  67. 67. MON INTERFACE A-T-ELLE BESOIN D’UN TUTORIEL ?
  68. 68. LE SIGNAL ET LE FEEDBACK SONT-ILS EFFICACES ?
  69. 69. SE REPÈRE-T-ON À TOUT MOMENT ?
  70. 70. MON INTERFACE RESTE-T-ELLE COHÉRENTE ?
  71. 71. LE PROCESSUS DE CONCEPTION D’UNE INTERFACE INTERACTIVE CONCEVOIR UNE INTERFACE NARRATIVE
  72. 72. NOUS VOULONS RACONTER […] AVEC POUR BUT DE […] À UN PUBLIC DE […] 1. DÉFINIR L’INTENTION DU PROJET
  73. 73. 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
  74. 74. 3. POSITIONNER LE PUBLIC Créateur De Vinci Décideur Démiurge Explorateur Magellan Débatteur Socrate
  75. 75. 4. VISUALISER LA STRUCTURE NARRATIVE
  76. 76. 4. VISUALISER LA STRUCTURE NARRATIVE Un outil : Twine
  77. 77. 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
  78. 78. Un outil : Balsamiq Mockups 5. RÉALISER DES WIREFRAMES
  79. 79. Une collecte de sources d’inspiration esthétique et fonctionnelle, grâce à des outils comme : Moodboard Pinterest 6. RÉALISER UN MOODBOARD
  80. 80. 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

×