Conception vidéo interactive exemple

Spécificités de la mission Total exploration

Nous avons souhaité vous présenter une partie des travaux réalisés pour Total exploration afin d’illustrer la démarche de conception en matière de gestion des problématiques de contenu et de scénarisation de film interactif.

La mission a été réalisée en 2009.
Visualisez le projet UX Total exploration...

A propos de Total exploration

La branche exploration et production de Total représente la branche la plus importante du groupe en terme d’investissements avec 70% des capitaux investis, et fait parti des activités amont du groupe (exploration et production du pétrole brut et du gaz et activités exercées dans les domaines du gaz et des énergies nouvelles).
La communication de la branche exploration et production compte 4 familles de produits pour lesquelles sont réalisées de nombreuses plaquettes imprimées soignées :

• la communication institutionnelle
• la communication sur les filiales (segmentation géographique)
• la communication sur les savoir-faire
• la communication sur les grands projets

Total exploration et production souhaitait faire évoluer le contenu des brochures issues de la collection “savoir-faire” en mettant en perspective sa capacité d’innovation sur ses projets de recherche et développement.

Problématique digitale de Total exploration

Les brochures imprimées illustrant les savoir-faire de Total exploration et production devaient être refondues et adaptées pour une lecture digitale, afin de promouvoir la capacité d’innovation de l’enseigne, son expertise, ses références technologiques ainsi que ses outils…

Les contenus digitaux devaient être présentés au travers d’une logique de mini-sites, permettant de traiter chacune des problématiques propres à l’exploration production ; ainsi, chaque branche de l’activité exploration-production se devait d’être modélisé sur support digital :

• l’offshore profond
• les bruts extra-lourds
• la valorisation des gaz
• les gaz acides
• la sismique

Au total, 5 brochures composées chacune d’une trentaine de pages très visuelles, se devaient d’être adaptées sur support digital et offrir des possibilités de portabilités sur support blu-ray et optimisé pour des bornes interactives…
Les objectifs du projet consistaient notamment à :

• mettre en perspective les « projets croissance » de Total qui nécessitent la définition et le franchissement de gaps technologiques permettant l’accès à de nouvelles ressources situées aux limites des technologies existantes
• s’adresser dans une logique B2B aux cibles traditionnelles de Total (états, institutions, compagnies pétrolières partenaires, contracteurs, médias…) mais aussi à un public plus large, tel que le grand public intéressé par les savoir faire spectaculaires de Total et par une meilleure compréhension des enjeux stratégiques liés à la production de nouvelle ressources.
• produire des contenus de qualité, s’appuyant sur différents formats : texte, animation, vidéo, infographie… rendant les contenus concret pour une information, une communication percutante et une meilleure compréhension.

Il s’agissait donc de concevoir des supports interactifs très visuels, dans une logique de vitrine des savoir-faire du groupe Total avec une démarche commerciale indirecte pour toile de fond…

Adaptation et rationalisation

5 brochures nécessitaient d’être transposées au travers d’un dispositif interactif dont la dimension principale visait à pouvoir être décliné sur différents supports :

• mini-site internet centralisé autour d’un hub et rattaché à total.com
• support indépendant blu-ray
• borne interactive

Au-delà de la problématique de portabilité du dispositif, il s’agissait de concevoir 5 dispositifs intégrant des médias riches et audio-visuels (animations, vidéos, 3D…), ce qui posait dès le départ la question de la rationalisation de la production… le dispositif devait également intégrer les problématiques multilingues.

Pour répondre à la problématique de portabilité du dispositif, nous avons naturellement pensé à la technologie flash, au travers d’une trame auto-suffisante.

Concernant les enjeux de rationalisation, nous nous sommes orientés en direction de la conception d’un support master, sur la base duquel seraient déclinées les autres brochures…

Il était donc important de concevoir un dispositif à la fois flexible et modulaire, pour traiter les différentes thématiques, mais également balisé autour de fondamentaux afin de cadrer la démarche autour d’éléments tangibles : nombre de chapitres, volume des contenus, durée des séquences audiovisuelles, possibilités d’interaction…

Segmentation des contenus...

Dans un premier temps, nous avons matérialisé de façon imagée, les enjeux du dispositif et ses impacts en matière de conception, afin de fédérer les équipes autour d’une vision commune sur la façon de répondre à la problématique.
Il était indispensable d’adapter les contenus à une logique de consultation répondant aux spécificités de la lecture à l’écran…

Par ailleurs, compte-tenu du fait que le dispositif devait être déployé sur internet, il convenait également de prévoir sa localisation dans la galaxie de sites Total et les différentes modalités d’accès.

Nous tenions à rappeler que le dispositif devait s’adresser à deux types de cibles différentes (experts vs. grand public) pour lesquelles il était nécessaire de prévoir des modalités de consultation spécifiques.

Séquençage des contenus

Pour baliser les problématiques éditoriales, il convenait de définir une trame commune à l’ensemble des brochures, malgré les différences de thématiques abordées par chacune d’elles.
Nous nous sommes donc immergés dans la lecture approfondie des brochures, pour essayer d’extraire une organisation méta en vue de structurer le fonctionnement du support master…

Au final, en collaboration avec les équipes Total, nous nous sommes accordés autour du fait que 4 à 5 chapitres récurrents permettraient de traiter les thématiques de chacune des brochures… il s’agissait :

• introduction
• grands-projets
• savoir-faire
• défis
• engagements et responsabilité

Chacun des chapitres faisant l’objet de mini-découpages spécifiques (interviews, infographie… permettant d’illustrer et développer le chapitre en question).
Sur la base d’une structure éditoriale pérenne, nous avons commencé à travailler sur une brochure en particulier (grands fonds), pour déboucher sur la rédaction d’un synopsis général visant la transposition des contenus en dispositif interactif… il prévoyait un fonctionnement comme suit :

• jingle de présentation de la branche exploration production
• choix de la langue
• introduction vidéo
• menu présentant les chapitres
• en option : accès à une médiathèque
• en option : accès à un lexique
• lecture multimédia permettant d’activer un chapitre

Chacun des cinq chapitres comportait une voix off assurant la narration, soutenue par un déroulement vidéo ou animé à partir de visuels ; en complément de la séquence narrative, des modules éditoriaux pouvaient apparaître, et faire l’objet d’une consultation spécifique pour approfondir une thématique : la cinématique devait alors passée en mode pause…

A la fin de chacun des chapitres, le film interactif marquait une pause permettant à l’utilisateur d’accéder à tous les modules éditoriaux présentés dans la séquence animée…

Sans action de la part de l’utilisateur pendant les temps de pause, le film interactif se poursuivait et déroulait une séquence complète enchainant les cinq chapitres (le support pouvait donc fonctionner en lecture autonome).

Fonctionnalités

Sur la base du synopsis, les modalités de fonctionnement général du film interactif ont pu être matérialisés sous la forme d’une trame de scénario (scénarisation des contenus, temps des séquences, possibilités d’interaction).
Nous avons ensuite listé les fonctionnalités que devaient embarquer l’interface ainsi que les registres de médias à disposition sur la base desquels les conteneurs des modules éditoriaux ont pu être modélisés.

Scenarisation

Nous avions suffisamment d’éléments à disposition pour modéliser le zoning général de l’interface, en veillant à matérialiser deux modes de consultation pour les publics experts et grands public, et enfin définir les zones d’interaction : celles-ci devaient être grandes dans l’optique de l’adaptation du dispositif à une borne interactive et à des interactions tactiles.
Pour guider le travail de scénarisation du fonctionnement détaillé du film interactif, nous avons commencé par adapter le synopsis écrit sous forme d’enchainements d’écrans…

Le travail de scénarisation a permis de modéliser l’intégralité du dispositif grands fonds, en esquissant les contenus audiovisuels à intégrer et en modélisant les écrans statiques permettant d’approfondir les informations (media-center, lexique, module éditoriaux permettant de visualiser une infographie, une animation 3D, de lire une interview ou un article simple…).

Inventaire

Enfin, nous avons relevé l’intégralité des écrans scénarisés au sein d’un inventaire fonctionnel et éditorial, afin de déterminer la structure finale du film interactif en vue de la rationalisation de la production et de la déclinaison des 4 autres brochures.

Bilan de la mission réalisée pour Total exploration

Le produit final a été une véritable réussite, les équipes créatives ont su insuffler un vraie dimension esthétique au produit, et chacun des films interactifs réalisés proposaient une expérience de consultation riche, spectaculaire et véritablement immersive (grâce à l’utilisation de la vidéo et au recours à une interface liquide exploitant tout l’espace de l’écran).

Les équipes Total furent ravis du résultat, et nous aussi !

Cette mission illustre une façon de matérialiser le fonctionnement et le scénario d’un film interactif, ainsi que des techniques pragmatiques permettant de transposer une problématique éditoriale offline statique en dispositif interactif riche et animé.

Cette expérience est une référence intéressante pour tout projet impliquant des dimensions immersives et expérientielles, en matière de méthodologie et de conception.

Écrit par Julien Muckensturm

Approfondir la conception

Techniques utilisées :

• Inventaire des contenus
• Segmentation des contenus
• Scénarisation
• Calibrage des contenus
• Conception des gabarits éditoriaux
• Conception du zoning
• Wireframing
• Prototypage

Formation vidéo à visionner :

• Formation UX design en ligne

Livrables à télécharger :

• Kit ultime projet 150 modèles de livrables à télécharger
• Kit ultime conception 160 écrans de wireframes à télécharger
• Kit UX design 25 modèles à télécharger

Etudes de cas à lire :

• Etude de cas Somfy
• Etude de cas Cacharel Amorlab
• Etude de cas Technip

Travaux à visualiser :

• Zoning
• Design de navigation
• Arborescence
• Cartographie

Compétences métier évoquées dans ce projet :

• Stratégie éditoriale
• Architecture de l'information
• Design émotionnel
• Design de l'interaction
• Design de l'information
• UI design conception d'interface

Autres ressources sur le web :

• Signalez nous des ressources sympas autour des thèmes abordés dans cette étude de cas UX design en utilisant les commentaires !