Contenu interactif : notions de base, conseils et outils

La plupart des exploitants de sites Web souhaitent informer les visiteurs sur un sujet spécifique ou bien les divertir. Aujourd’hui plus que jamais, il est important de s’appuyer sur un contenu avec des éléments uniques et de grande qualité afin de se démarquer. Ainsi, il est désormais nécessaire de prendre en compte un phénomène qui gagne de plus en plus en importance : le contenu interactif, c’est à dire le contenu qui incite l’utilisateur à participer, à interagir avec le site Internet.

Le contenu interactif séduit les utilisateurs sur plusieurs points. Le visiteur ne se contente pas de lire un texte ou de voir une image, mais il peut influencer, changer un élément directement par son intervention, afin d’activer l’accès à d’autres informations ou bien pour avoir la possibilité de faire connaitre son opinion. Ainsi, le contenu devient une expérience et se mémorise plus longtemps. L’interaction avec le site Web, et au-delà avec les marques et les services qui le composent, est beaucoup plus intense qu’avec une lecture simple. De plus la probabilité que l’utilisateur soit satisfait et réalise une conversion, augmente, tout comme la durée de séjour.

Vous trouverez ci-dessous un aperçu des différents types de contenu interactif et des outils utiles pour pouvoir le réaliser, l’éditer afin de finalement l’intégrer à votre projet Web.

Quels sont les formes de contenu interactif ?

Il existe de nombreux types différents de contenus interactifs qui peuvent être intégrés à votre projet Web avec des niveaux d’investissement et de travail variables. Chaque format ou type de contenu peut nécessiter des connaissances en programmation et des outils différents. En fin de compte, les types de contenu diffèrent aussi fortement en termes de coûts. Le tableau suivant présente quelques-unes des solutions les plus intéressantes et prisées pour le contenu de ces sites Web interactifs :

Type de contenu interactif

Description

Investissement et coûts.

Exemple

Configurateur

Application Web qui permet aux utilisateurs de se familiariser avec un produit et de voir directement les différentes configurations et options possibles.

Très élevé

Configurateur de véhicule d‘Opel

Simulateur

Outil de calcul de prix et simulateur

Élevé jusqu’a très élevé

Calculateur, simulateur de la taxe d’habitation sur le site officiel de la direction générale des Finances publiques

Quiz

Test de connaissances sous la forme de questions-réponses

faible

Le Monde, quiz de connaissance sur un thème d’actualité

Vidéo interactive / clip à 360 degrés

Vidéos dans lesquelles l’utilisateur peut choisir l’angle de vue ou la progression.

Élevé, très élevé

Clip vidéo « Stonemilker » de Björk

Diaporama

Galeries d’images mobiles sur un thème spécifique, « slideshow » ou diaporama

Très faible

Courrier International, Diaporama, 2017 en 25 images

Diagramme interactif. Diaporama, cartes, infographies etc.

Graphiques qui présentent et proposent des données détaillées et des informations complémentaires lorsque l’utilisateur clique dessus.

Élevé

Le Monde, grands formats, Infographie

Jeux

Jeu en ligne ou mobile dont le thème et la créativité sont basés  sur un produit ou une marque.

Très élevé

Magnum « Pleasure Hunt 2 »

Storytelling Interactif

Lien entre différents éléments interactifs afin de raconter une histoire

Elevé

Sevenhills “Nature’s Combinations“

Création de contenus interactifs : voici les meilleurs outils

Tous les contenus présentés ci-dessus exigent beaucoup  plus d’efforts que la réalisation d’une présentation classique d’images et de textes. De plus les coûts sont aussi plus élevés, en particulier concernant les outils et les services nécessaires à la création de tels éléments interactifs. Toute personne qui n’est pas experte en programmation de jeu mais qui souhaite en intégrer un pour son site Web, devra alors forcément recourir aux services d’une agence externe. De même pour la réalisation de vidéos à réalité virtuelle, ou ici le besoin d’équipement pointu et le temps de traitement et de montage peut s’avérer particulièrement long et onéreux et cela même pour quelques minutes de tournage.

Mais il est souvent possible de créer certains types de contenu interactif comme des graphiques, des quiz ou des diaporamas sans l’aide de fournisseurs de services externes. Il suffit en effet bien souvent d’un bon concept et d’un outil adapté. Nous vous présentons ci-dessous certains des outils les plus intéressants. 

ThingLink

En 2011, la société finlandaise ThingLink a lancé le logiciel Rich Media Tags, qui relie les images sur les sites Web et les plateformes de réseaux sociaux. Depuis lors, l’équipe de développement a continué à développer l’application Web qui porte désormais le nom de l’entreprise : ThingLink. Cette application peut être utilisée pour éditer des images et des graphiques avec des éléments supplémentaires comme des boîtes de texte, de la musique, des images, des vidéos ou des liens. A cet effet, l’utilisateur dispose d’un éditeur Web intuitif dans lequel le graphique ou l’image source peut être facilement importé par glisser-déposer. Les boutons ajoutés, qui sont personnalisables individuellement, signalent ensuite au visiteur ou le contenu interactif se trouve.

La version de base gratuite de l’éditeur d’image peut être utilisée gratuitement, cependant pour signaler un élément interactif, elle ne propose qu’un bouton standard en différentes couleurs. De plus, le nombre d’accès mensuels à l’image ou graphique est limité à 10.000 vues. Si vous souhaitez personnaliser la conception du bouton et les informations supplémentaires, vous pouvez utiliser le package « Professional » (20 $ par mois pour un utilisateur et 100.000 visites). Ce dernier apporte aussi des statistiques d’analyse détaillées et permet de supprimer la marque ou logo ThingLink du graphique interactif. Le forfait « Premium » (125 $ par mois pour cinq utilisateurs et 1 million de vues) permet aussi de créer des images et vidéos à 360 degrés avec un contenu interactif. 

Avantages Inconvénients
✔ Liens simples et intuitifs de contenus externes ✘ Interface disponible uniquement en anglais
✔ Le contenu est automatiquement responsif ✘ Les vidéos interactives ne peuvent être créées qu’avec l’édition « Premium «
✔ Version de base gratuite, idéale pour tester le contenu interactif  

Infogram

Si vous souhaitez présenter vos données de manière attrayante et vous appuyez sur des éléments interactifs, Infogram est l’outil idéal. Il appartient désormais à Prezi, qui propose aussi un logiciel de présentation du même nom. L’application Infogram offre divers modèles et éléments de base pour la création d’infographies, de cartes ou de diagrammes interactifs. Ils peuvent être complétés manuellement ou via une fonction d’importation avec vos données y compris avec les interfaces de Google Drive, Dropbox et OneDrive qui sont notamment disponibles. Les graphiques terminés peuvent être intégrés par la suite dans votre propre projet Web via un code embarqué ou bien peuvent être téléchargés sous forme de fichiers JPG ou PNG (uniquement avec les versions payantes).

La version de base d’Infogram peut être utilisée gratuitement afin de créer du contenu interactif. Cependant dans ce cas, l’accès au logiciel est assez limité : il n’existe que peu de cartes (dont l’Europe, l’Afrique et les Etats-Unis) et une sélection restreinte d’icônes et d’images. En outre, le projet concerné doit être stocké et rendu accessible au public. Afin de créer des projets privés et accéder à plus d’un million d’images et d’icônes, il est nécessaire de souscrire à une version payante comme « Pro » (jusqu’à 100 projets à partir de 19 $ par mois), « Business » (jusqu’à 1000 projets à partir de 67 $ par mois) ou « Enterprise » (nombre de projets illimité ; prix sur demande). Les versions « Business » et « Entreprise » vous permettent également d’utiliser votre propre logo et de retirer la référence à Infogram qui est présente en temps normal sur les diagrammes ou cartes.

Avantages Inconvénients
✔ Plus de 35 modèles de diagramme disponibles ✘ Interface utilisateur uniquement en anglais
✔ Les graphiques crées peuvent être facilement intégrés grâce au code embarqué ✘ Dans la version gratuite, les projets ne peuvent être enregistrés que publiquement
✔ Différentes interfaces disponibles pour importer ses propres jeux de données ✘ Le logo d’infogram ne peut être retiré qu’à partir de la version « Business »

Qzzr

Qzzr est l’un des meilleurs outils pour créer des quiz personnalisés, des enquêtes, des classements ou des top listes. Le logiciel compte aujourd’hui plus de 270 000 utilisateurs dont des institutions et des sociétés renommés comme HBO et ESPN, la plateforme vidéo Vimeo ou encore le fabricant de boissons énergisantes Red Bull. Avec cet outil, vous pouvez rapidement créer des questions et les réponses, des descriptions et explications ainsi que des conseils et enfin y ajouter des images, vidéos ou encore des fichiers audio pour améliorer L’interactivité du contenu. Le contenu terminé peut-être lié et intégré à un projet Web via un code embarqué ou bien partagé en un clic sur les différents réseaux sociaux et sont toujours optimisés automatiquement pour les appareils mobiles.

Qzzr vous permet non seulement de créer du contenu interactif, mais aussi de fournir des statistiques détaillés sur l‘activité des utilisateurs. Par exemple, vous pouvez savoir combien d’utilisateurs ont répondu à un questionnaire ou ont participé à une enquête, combien de temps fut en moyenne nécessaire et connaitre jusque ou ils ont répondu au questionnaire ou à l’enquête (taux de performance), en effet quiconque combine un Call-to-action avec le contenu peut ainsi connaitre le taux de conversion.

 Si vous n’avez besoin que d’un simple quiz ou que d’une petite enquête pour votre site Web, vous pouvez utiliser la version de base gratuite. Cependant, pour un contenu professionnel et plus interactif, vous devez alors souscrire à l’abonnement « Pro » (299 $ par année). Dans cette dernière version, le quizz ne contient qu’une petite mention sur Qzzr (alors que dans la version de base, par exemple, le logo apparait aussi dans le contenu partagé). Vous pouvez aussi désactiver la recommandation automatique d’autres questionnaires et enquêtes du réseau Qzzr. Si vous ne voulez pas faire de référence à l’outil ou au fournisseur, cela n’est possible que via la version « Entreprise », dont le prix est probablement encore plus élevé que celui de la version « Pro ». Il n’y pas de prix forfaitaire pour eux, un devis doit en effet être établi.

Avantages Inconvénients
✔ Même avec la version gratuite, vous pouvez créer un nombre illimité de quiz ✘ Interface utilisateur uniquement en anglais
✔ Etroitement lié aux fonctionnalités d’analyse et de Lead-management ✘ Suppression du logo ou de la référence à Qzzr disponible uniquement avec la version Entreprise
✔ Intégration facile d’éléments médiatiques comme des images, vidéos ou des GIFS  

Cincopa

Créé en 2006, le fournisseur de plateformes multimédia Cincopa propose des solutions d’intégration et la gestion de contenus multimédias dans des projets Web. Les utilisateurs peuvent étendre leur site Web avec des portails vidéo, podcasts ou diaporamas personnalisés. Pour cela, Cincopa met à disposition des éditeurs Web spécialisés avec lesquels il est possible de créer le contenu interactif souhaité. De plus, la société apporte aussi des ressources d’hébergement nécessaires pour les fichiers multimédias utilisés (audio, vidéo, images etc.). En outre, il existe plusieurs options pour intégrer le contenu une fois ce dernier terminé comme par exemple via un code HTML, une page de destination, un lien ou un plugin spécifique au CMS (y compris WordPress, Joomla, Blogger, Drupal, Wix).

L’utilisateur de Cincopa peut choisir parmi différents modèles pour concevoir du contenu multimédia interactif. Par exemple, il existe des modèles pour les collages, les diaporamas, les lecteurs vidéo, les listes de lecture ou les timelines qui sont disponibles dans la version gratuite. Cependant, cette version de base est limitée à un domaine, 50 images et trois fichiers audio, trois fichiers vidéo ainsi qu’à un gigaoctet de trafic. De plus le logo « Powered by Cincopa » est aussi visible dans le contenu créé. Ainsi ceux qui souhaitent créer et publier régulièrement du contenu interactif doivent choisir parmi l’une des versions payantes : « Startup »  (1 domaine, 5 fichiers vidéo/audio, 1500 images, 10 Go de trafic pour 99 $), « Plus » (5 domaines, 100 fichiers vidéo/audio, 3500 images, 100 Go de trafic pour 25 $ par mois) ou « Corporate » (nombre illimité de domaines, 1000 vidéos, 5000 fichiers audio, 10 000 images, 400 Go de trafic pour 99 $ par mois).

Avantages Inconvénients
✔ Différents modèles pour un contenu personnalisé audio, vidéo ou d’images ✘ Interface utilisateur disponible uniquement en anglais✔ Intuitive Web-Editoren
✔ Editeur Web intuitif ✘ Hébergement des données sur des serveurs aux Etats-Unis
✔ Possibilité de changer de forfait à tout moment  

Adobe Spark

Adobe est particulièrement connu pour son Flash Player et son Creative Cloud (anciennement Creative Suite). Avec Adobe Spark, l’éditeur de logiciels propose également une solution interne pour du storytelling interactif sur Internet. Le pack créatif se compose des trois outils : Spark Post (Pour un contenu d’image simple), Spark Video (pour des vidéos interactives) et Spark Page (pour des web stories ou web documentaires). L’utilisateur peut ainsi choisir librement, par exemple, s’il souhaite optimiser une photo avec des filtres textes et design, créer des publicités ou des clips de haute qualité ou raconter une histoire interactive. Les clients de Creative Cloud, Adobe Stock ou Lightroom ont la possibilité de les relier à Spark Web Apps. 

Pour enrichir vos projets avec du contenu, il est bien évidemment possible de télécharger et d’utiliser vos propres images. De plus, les titres, blocs de textes et boutons peuvent être crées et positionnés selon vos souhaits dans les articles Web. Le choix d’un thème peut aussi influencer le design. Afin d’importer des clips, il suffit simplement de spécifier l’URL. Le contenu peut être partagé via le lien généré automatiquement (fonctions intégrées pour Facebook et Twitter), envoyé par email ou intégré dans votre propre site Web via un code. L’utilisation des applications Spark, ces dernières sont aussi disponibles en tant qu’applications iOS, est totalement gratuite, mais les abonnés du cloud créatif peuvent notamment par exemple supprimer le logo, la référence au logiciel.

Avantages Inconvénients
✔ Utilisation simple et intuitive ✘ Le contenu ne peut pas être téléchargé mais doit être hébergé par Adobe
✔ Applications iOS disponibles ✘ Options de conception assez limités (par exemple la taille de police n’est pas réglable)
✔ Peut-être combiné avec Creative Cloud ✘ Interface utilisateur uniquement en anglais

RacontR

La société crée en 2011 a lancé, après 3 ans de développement, en 2014 une plateforme afin de créer, éditer et publier des contenus interactifs. Avec RacontR, la société française propose aussi une boite à outils pratique et utile pour la création d’une grande variété de formats de contenu interactif (web documentaires, infographies, vidéos interactives etc.) et aide à la création de nombreux types d’actions et d’animations interactives sur des images et des vidéos. Le logiciel est facile à manier et il n’est pas nécessaire d’avoir des connaissances en développement ou en programmation pour l’utiliser.

RacontR n’est pas entièrement responsive design. Enfin l’outil offre l’insert d’un plan Google et le partage sur les réseaux sociaux comme Twitter ou Facebook par exemple. Il existe trois versions de l’outil dont la version « FREE »  qui comme son nom l’indique est gratuite. Avec cette version de base, la diffusion du projet est possible juste sur RacontR.com, mais offre 30 Mo fixes de stockages. Il existe enfin la version « FREELANCE » adapté plutôt pour les indépendants, seulement avec un accès utilisateur unique, 200 Mo de stockage mensuel mais la marque RacontR disparait et les projets sont duplicables et la diffusion possible. Enfin, la version « Premium » à partir de 299 euros par mois autorise un accès utilisateur multiples, comporte un support premium et apporte un stockage jusqu’a 100 Go mensuel. A noter qu’il existe aussi une solution business personnalisable sur devis uniquement.

Avantages Avantages
✔ Société française, outil disponible en anglais et en français ✘ Lacunes au niveau du responsive design
✔ Logiciel intuitif et facile à utiliser  

Mapme

Avec l’éditeur Web Mapme, des cartes interactives de grande qualité peuvent être crées et cela sans avoir besoin de connaissances en programmation. L’utilisateur peut ainsi choisir parmi huit styles de cartes différents, comme l’image satellite, le réseau routier ou bien naturel. Quel que soit le type de carte, il est possible d’y ajouter des broches afin de marquer un emplacement spécifique et de fournir des informations à propos de ce dernier. De plus, il est aussi possible de personnaliser l’apparence de la broche (dans les packages Premium, il est possible d’utiliser vos propres icones) et d’ajouter des images, des fichiers audio et vidéo ainsi que des boutons pour les réseaux sociaux. En fonction de la disposition sélectionnée, le contenu des broches interactives apparait dans un menu déroulant dans la partie inférieure de la carte (Slider Style) ou bien dans une liste sur le côté gauche de la carte (List Style). 

Si vous souhaitez utiliser Mapme pour créer du contenu interactif pour votre site Web, vous devez alors recourir à l’un des services payants. En effet la version gratuite de l’application Web est uniquement disponible à titre de démonstration et n’offre pas par exemple, la possibilité de publier ou d’intégrer les cartes créées. Les utilisateurs peuvent aisément choisir entre les trois versions Premium : « Basic » (à partir de 19 $ par mois), « Standard » (à partir de 29 $ par mois) et « Plus » (à partir de 49 $ par mois). Cette dernière vous permet non seulement d’épingler un nombre illimité d’emplacements, mais donne aussi accès à des effets 3D pour une conception de carte bien plus intéressante. Les détenteurs de la licence « Plus » peuvent également personnaliser la carte à l’aide de CSS. 

Avantages Inconvénients
✔ Les épingles d’emplacement peuvent être conçues de manière individuelle ✘ Interface utilisateur uniquement en anglais
✔ Toutes les cartes sont automatiques optimisés pour les appareils mobiles ✘ Les cartes ne peuvent pas être publiées ou exportées avec la version gratuite
✔ Tutoriel d’introduction intégré  

Projets Internet avec un contenu interactif : exemples et bonnes pratiques

Les outils présentés ici offrent différentes options pour rendre votre projet Internet plus interactif via des outils simples et un budget léger. Toutefois, les grandes entreprises avec un budget conséquent ont bien évidemment la possibilité de faire appel à des agences extérieures afin de s’occuper de la création et de l’actualisation du contenu des sites Web interactifs. Dans tous les cas, un contenu interactif rend un site Web encore plus attractif, si cela est utilisé dans un emplacement approprié et s’il n’éloigne pas le visiteur du produit ou service recherché. Ainsi, il est important de créer le cadre approprié pour le bon contenu interactif et de trouver un juste équilibre entre l’information et le divertissement, cela a notamment été brillamment maitrisé sur le sites suivants :

  • Airbnb : dans une interactive infographie avec plusieurs images, dessins, animations et cartes, la plateforme communautaire de location présente l’impact économique de ses services sur l’économie berlinoise avec des animations et des cartes interactives.

  • Fillory : avec une impressionnante carte interactive, le site Internet welcometofillory.com présente le monde fantastique Fillory de la série de Syfy « The magicians »  (basé sur la trilogie du même nom de Lev Grossman). Vous pouvez aussi y trouver des informations détaillées sur les personnages principaux ainsi que divers mini-jeux et quiz sous la forme de rubrique « Quests ». A l’occasion de la deuxième saison de la série, l’émission a fait réaliser le site Web par le studio de production UNIT9.

  • Sézanne : le site officiel de la boutique parisienne de mode sézanne est un bon exemple de la valeur des diaporamas pour l’e-commerce. En plus d’une bonne présentation des produits, il existe un court storytelling interactif ou les visiteurs peuvent découvrir d’une manière originale des produits sélectionnés.

  • Mymuesli : avec le configurateur en ligne de mymuesli, l’utilisateur peut créer son propre muesli à partir de différents ingrédients. Vous pouvez sélectionner une base de muesli et l’enrichir avec des fruits, des noix, des graines ou encore du chocolat, il est ensuite possible de commander directement le mélange, de l’enregistrer et même de la partager avec d’autres utilisateurs.