logo IAFACTORY
conseil en design UX
conseil en ergonomie
architecture IA - UX
icone conception UX design

Le scénario interactif fait partie des techniques de conception UX design.
Découvrez des exemples illustrés et des ressources pour scénariser votre projet digital.
Des modèles de scénarios UX et de scénarisation interactive sont disponibles en accès payant.

Le scénario interactif

Révisé en Janvier 2023

Histoires de scénarisation interactive...

scenario interactif, scenarisation interactive

Les Scenario interactif, scénarios ux et scenarisation interactive permettent de scenariser votre dispositif digital. L'écriture interactive et le scenario interactif sont effectivement des clés de voûte du design d'expérience utilisateur.

C'est quoi un scénario interactif ?
Comment faire pour scénariser des contenus interactifs ?
A quoi peut servir la scénarisation des séquences interactives ?
Dans cet article, vous trouverez des réponses sur les méthodes qui permettent de scénariser un contenu dans un contexte d'interactivité. C'est un travail qui relève du design d'interaction.

D'abord, il y a écriture, et écriture pour le web. Ce n'est pas tout à fait la même chose. Ecrire des contenus pour un support imprimé (print) ne relève pas du même registre que l'écriture pour les dispositifs digitaux. L'attention est différente, le médium n'est pas le même, le confort de lecture est variable... L'expérience de lecture web est différente, tout simplement. Notre propos vise ici la notion dynamique de l'écriture dans un contexte interactif : les contenus peuvent être animés et activés à la demande de l'utilisateur final, dans le cadre d'un module élaboré ou d'un film interactif.

On parle d'écriture interactive pour qualifier l'action de scénariser un contenu dans une séquence animée. L'écriture interactive, ce n'est pas l'écriture pour le web. Il ne s'agit pas d'écrire un texte mais de scénariser un contenu animé, qui peut être visualisé sous la forme d'un film interactif, d'une animation, d'une illustration animée, d'un contenu séquencé. En bref, l'écriture interactive concerne tous les contenus qui se donnent à voir dans un flot, dans un enchaînement d'écran, dans une séquence animée, dans un jeu.

Ces contenus interactifs sont particuliers car ils doivent être scénarisés. La narration est animée et optionnellement interactive. Elle implique un travail de scénarisation pour définir l'apparition des textes, les séquences donnant lieues à des interactions...

Scénariser les contenus ?

Les codes de l’écriture interactive s’imposent lorsque vos messages, vos discours, vos contenus, doivent dépasser la logique de consultation traditionnelle. Certaines formes de contenus doivent prendre une forme interactionnelle et visuelle pour séduire, présenter une information de façon pédagogique, fragmenter des données potentiellement complexes...

Il convient alors, pour les contenus qui ne relèvent pas du simple article d’adapter la narration, le format, la présentation et donc le traitement des contenus dans une logique animée.
Le travail d'écriture interactive consiste à "chapitrer" et à adapter une partie des contenus en vue d'une séquence animée. Quelques exemples de contenus interactifs :

  • Un jeu pour apprendre aux enfants à compter : on alterne des explications, de petits exercices...
  • Une séquence 3D présentant un prototype de moteur électrique.
  • Une animation scénarisant les étapes de la fabrication du chocolat.
  • Un film interactif dans lequel l'utilisateur peut effecteur des choix dans le déroulé de l'histoire.
  • Un dispositif digital immersif alternant des vidéos interactives et des séquences instructives.
  • Un support pédagogique construit autour d'un enchaînement de contenus vidéo.

Narration interactive

Qui dit narration dit déroulement. Et dans la notion de déroulement, il y a celle des étapes. Il ne s'agit pas de se raconter des histoires :).
Un contenu, au sens du design d'interaction, doit être considéré comme un immense rouleau de papyrus. Ce format n'est jamais adapté à une expérience avec un support digital. Il faut prendre la tronçonneuse, et découper les contenus, pour les proposer de façon progressive (on veillera à proposer des repères de localisation : barre de progression, chargement...). On parle de chapitre, comme dans un livre : chapitrage des contenus en vue d'une narration interactive. Tels sont les enjeux de la scénarisation interactive de séquences animées.

Concrètement, il s’agit de poser les bases de la trame animée autour de grands tableaux, autour des grandes séquences de contenu. Chaque séquence de contenu peut potentiellement proposer des actions permettant à l'utilisateur final d'interagir. Les actions permettent de se déplacer dans la séquence, pour réaliser différentes tâches, comme dans un jeu, ou dans l'orientation de la narration d'un film interactif (l'utilisateur choisit comment l'histoire se déroule à des moments clés).

Le travail de scénarisation vise à établir un canevas, on parle aussi d'ossature, sur lesquels vont être affectés les différents contenus multimédias. On scénarise donc une thématique éditoriale potentiellement dense, dont on essaye de réduire l'envergure et le périmètre autour de thèmes plus ciblés. Ces contenus sont placés sur une ligne de temps - timeline, pour visualiser le déroulé de la séquence.
Il s'agit ensuite d'affecter les contenus multimédias et les zones d'interaction sur la timeline. Le travail d’affinage des contenus et des éléments multimédias à faire figurer (visuels, sonores, animations, 3D, séquences vidéo, mini-jeu) se matérialise progressivement pour déboucher sur un scénario interactif complet.

Nous vous recommandons de procéder à un découpage de vos contenus en vue de la conception d’un scenario interactif dans les cas suivants :

  • Projet de film interactif pédagogique, éducatif, ludique, corporate.
  • Transposition d’un contenu print sous forme multimédia et interactive.
  • Formatage des contenus inadaptés aux codes audiovisuels.
  • Volonté de rythmer une narration par une séquence animée et interactive.

Scénario UX design

Le scénario UX design pose les bases des parcours utilisateurs et des parcours clients. Le concepteur ou l'UX designer scénarise le cheminement idéal des visiteurs afin d'optimiser les performances du dispositif digital. La scénarisation interactive, dans la logique du design d'expérience utilisateur, est une tâche relativement complexe car la nature des parcours est souvent fragmentée.

Objectifs de l'écriture interactive

Scénariser les contenus et les séquencer

L’objectif du scénario interactif est d'esquisser la séquence interactive à produire pour cadrer le travail de réalisation.
Il s’agit d’identifier et de scénariser :

  • Les possibilités d’actions pour les utilisateurs dans le cadre de films interactifs.
  • Les transitions.
  • Le fonctionnement de l’interface.
  • La mise en scène des contenus et des visuels.
  • La trame vidéo et les thématiques à illustrer.
  • L’ambiance sonore, etc.

Le travail de scénarisation interactive d'un sujet éditorial implique une connaissance approfondie de tous les contenus rattachés au thème. Le concepteur et le designer d'interaction ne peuvent pas se contenter d'une connaissance superficielle du sujet, car le scénario interactif repose sur le contenu. Contrairement à un travail de wireframing traditionnel qui repose sur la dimension fonctionnelle, le séquençage de contenus interactifs relève d'abord de la dimension éditoriale.

Un scénario interactif permet de visualiser le déroulement de la trame narrative, les moments critiques auxquels sont délivrées les informations, l'apparition des zones d'interaction... Un scénario interactif bien conçu facilite la communication et la compréhension réciproque entre tous les acteurs impliqués dans la production.

Le scénario interactif décrit les grandes séquences sans nécessairement éclaircir le détail de chacune des scènes. Ce n'est pas un storyboard, mais un tracé du déroulement de la séquence narrative... La forme du scénario interactif dépendra du concepteur. Il doit être suffisamment explicite pour préparer le travail de production de chaque acteur (design graphique, rédaction, motion design, couche interactionnelle, développement...). Le scénario animé ne donne pas d'indication sur la représentation graphique et visuelle des éléments. Il montre la voie mais, dans ce cas, on préfèrera s'appuyer sur la créativité des designers pour figurer le design.

Des wireframes détaillés de chaque scène peuvent être réalisés, comme un storyboard de cinéma. Mais cette étape intervient après le tracé régulateur de la grande séquence animée. Il faut effectivement d'abord écrire le scénario avant d'en illustrer chacune des scènes...

Exemples de scenarios interactifs

exemple de scenario interactif exemple de scenario interactif
ux Total exploration
iafactory - Julien MUCKENSTURM
modèle de scénario scénario ux
pour scénariser des interactions
iafactory - Julien MUCKENSTURM
exemple d'écriture interactive écriture et scénarisation interactive
scénarisation des contenus
iafactory - Julien MUCKENSTURM

Méthode de scenarisation interactive

Commencer par découper les contenus...

Passez d'abord du temps à bien comprendre le sujet sur lequel vous travaillez, particulièrement s'il relève d'un domaine technique : lecture de magazine, articles de presse, vulgarisation, publication, site web, livres...
Epluchez la documentation à disposition lorsqu’elle existe. Un bon brief est aussi une source particulièrement utile. Affinez votre connaissance du sujet. Tout le monde ne maîtrise pas les tableaux électriques, par exemple...
Vous serez plus à l'aise pour écrire le scénario d'un sujet que vous maîtrisez. C'est évident, mais beaucoup de contenus animés sont mal mis en scène du fait d'un défaut de connaissance du scénariste... Impardonnable pour un film de cinéma du réel comme un documentaire. Moins pour un site web, hélas...

Lorsque vous maîtrisez bien le sujet, c'est le moment de dégrossir l'ensemble autour de thèmes plus précis. On parle aussi de tableaux (comme dans un jeu vidéo). Voire de séquences.
Bref, vous définissez les grands thèmes éditoriaux en opérant une restriction du volume pour maîtriser la densité. Exactement ce que vous auriez aimé avoir entre les mains au moment de vous approprier le sujet. Il s'agit de découper la problématique éditoriale autour de thématique : définissez 5, 6, 7 thèmes. Plus si nécessaire, mais au-delà d'une dizaine, il faut faire des sous-niveaux. Et là on part dans les arborescences...

Ensuite, rédigez un premier jet de synopsis.
Le fait de résumer la séquence interactive sous forme de synopsis vous aide à clarifier vos idées sur la trame éditoriale et fonctionnelle du projet...

Posez une trame sous forme de timeline...

Matérialisez la trame et posez la séquence animée avant de partir tête baissée en production... Vous gagnez à poser le grand scénario de la séquence pour orienter la conception et préparer la production...

Chaque thème doit faire l’objet d’un approfondissement et se matérialise par une trame de contenu, de sons, d’éléments visuels, d’animations et de vidéos ainsi que par des possibilités d’actions : le tout est formalisé sous forme de timeline.

Le travail d’affinage porte sur le temps à allouer à chaque scène et les possibilités d’interaction à proposer dans chaque tableau.

Storyboardez les scènes, si besoin...

Il s'agit d'habiller chaque scène autour des grandes thématiques clés à illustrer... Suite à la définition de la trame de la séquence interactive (chapitrage, thématique, séquençage des événements sur une timeline), déroulez les écrans sous forme de storyboard pour les principaux tableaux de chaque trame.

Si nécessaire, vous pouvez approfondir et affiner les détails de chacune des scènes de tous les tableaux sous forme de storyboard détaillé (conception des écrans fixes). Cette étape est utile avant de passer à la réalisation des séquences animées car elle permet de préfigurer l'aspect général sur le plan visuel de chacune des scènes à créer, dans la lignée d'un wireframe. Ce travail implique d'avoir une connaissance des médias à disposition.

Le document final peut-être matérialisé par des esquisses de storyboard (c'est à dire la succession de chaque écran du wireframe) au travers d'une présentation powerpoint animée de 20 à 200 diapositives… Vous pouvez utiliser tout type de logiciel pour figurer votre storyboard, l'essentiel à considérer étant les facilités de partage avec les équipes.

Le travail de scénarisation pas à pas

  • Rédiger un synopsis.
  • Définir les conteneurs et les modalités de présentation des contenus.
  • Formater et mettre aux normes les contenus en vue d’une séquence animée.
  • Organiser les contenus par thématique et par chapitre.
  • Synthétiser les informations clés à délivrer.
  • Mettre à plat une timeline narrative.
  • Clarifier les interactions visuelles, sonores, narratives et interactives.
  • Définir les actions et les possibilités d’interaction sur la timeline.
  • Synthétiser tous les événements sur la timeline.
  • Esquisser l’interface, le lecteur et la mise en scène des actions.
  • Amorcer les principes de transition.
  • Spécifier les comportements, les contenus sonores, visuels, animés.
  • Définir les modalités d’interaction et de fonctionnement de l’interface.
  • Préfigurer la trame du film interactif et storyboarder le déroulement.

Démarche pour scénariser votre projet

Des travaux de scénarisation interactive suivent les étapes suivantes :

  • Acculturation projet et maîtrise du sujet.
  • Rédaction d’un synopsis.
  • Séquençage des contenus et de la timeline des événements.
  • Définition des ambiances, narratives, visuelles, sonores, interactives.
  • Scénario de la trame du film et storyboard détaillé des principaux tableaux.
  • Spécification des éléments constitutifs de la séquence (son, contenu, etc.).
  • Itérations avec les équipes créatives de production.
  • Production.

Ces méthodes de scénarisation interactive s'appliquent pour des animations courtes comme pour des moyens métrages interactifs.

Travaux complémentaires au scenario interactif

Pour initialiser le travail de scénarisation, on peut commencer par écrire un résumé des grands enjeux de la séquence animée à produire : le synopsis de site web est l'outil approprié.
Un scénario interactif peut donner lieu à un maquettage de chacune des scènes autour d'un storyboard : la technique du wireframing répond à ce besoin.

Le travail de scénarisation interactive peut déboucher sur un prototype fonctionnel dans le cadre d'un projet interactif de très grande envergure fonctionnelle et éditoriale.

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressources de scenario interactif

APPROFONDIR
la scénarisation

Livre : Mapping websites, Paul Khan
Mapping websites, Paul Khan

Aller plus loin pour scénariser votre projet

Formation vidéo à visionner :

Livrables à télécharger :

Études de cas à lire :

Travaux à visualiser :

Compétences métier pour la scénarisation :

Fiche métier :

Autres ressources sur le web :

  • Un outil gratuit pour créer des diagrammes en ligne : diagramic
  • Signalez nous des ressources autour du scenario interactif via les commentaires !
Plus de techniques de conception
ENVERGURE FONCTIONNELLE
Résumé synthétique des intentions du dispositif digital et des parcours des utilisateurs.
synopsis
CONCEPTION D'INTERFACE
Esquisse d'interface utilisateur, projection des contenus et fonctionnalités à l'écran.
wireframing
CONCEPTION D'INTERFACE
Storyboard des écrans : approche scénarisée de l'enchainement des écrans illustrant un parcours.
prototypage