.

Site Web Interactif - Éléments, Avantages, Exemples, et Modules Drupal Pratiques

Les sites web interactifs engagent davantage les utilisateurs. Regarder des vidéos, visualiser des infographies attrayantes ou répondre à des quiz les incitent à passer plus de temps sur votre page. Cela augmente les chances qu'ils se souviennent de votre entreprise et vous contactent. Dans notre article, nous vous montrerons les éléments d'un site web interactif et vous indiquerons quoi utiliser pour en créer un avec Drupal.

Qu'est-ce qu'un site web interactif ?

C'est un site web qui engage activement les utilisateurs. Ils peuvent non seulement lire le contenu, mais aussi interagir avec lui, par exemple jouer des vidéos, cliquer sur certains diagrammes, ou remplir des enquêtes et des formulaires. Le design interactif, qui concerne la création de pages web de manière à stimuler l'implication du visiteur, fait partie de l'expérience utilisateur (UX) - une perception plus large de votre site web et de son utilité. En introduisant les fonctionnalités liées à l'interaction, vous influencez également positivement l'UX.

Le site web interactif vous permet de construire une communication bidirectionnelle avec les utilisateurs. Vous fournissez des informations, et ils peuvent y répondre par diverses actions. De plus, ils sont plus susceptibles de convertir. Par exemple, après avoir regardé une vidéo présentant vos produits ou services, ils seront plus enclins à vous contacter, acheter un produit ou demander un devis. Toutes ces activités augmentent le temps passé sur le site web. Cela montre à Google que les utilisateurs trouvent ce qu'ils recherchent sur votre page. Cela indique que vous fournissez un contenu de haute qualité et peut améliorer votre position de classement.

En analysant les interactions des visiteurs avec votre site web, vous pouvez leur offrir une expérience personnalisée. Vous pouvez utiliser les données collectées dans votre outil d'automatisation marketing, comme Mautic, pour montrer à un utilisateur un message personnalisé la prochaine fois qu'il visitera votre page web.

Éléments de sites web interactifs

Sur le web, vous pouvez trouver des exemples des meilleurs sites web interactifs avec des animations accrocheuses, des vidéos, du son ou même des fonctionnalités de gamification. Si vous avez besoin d'une expérience visuelle riche pour votre page web, vous pouvez utiliser ces designs comme source d'inspiration. Cependant, appliquer seulement les éléments interactifs choisis suffira pour rendre votre site plus engageant pour les utilisateurs. Vous trouverez ci-dessous quelques idées de ce que vous pouvez implémenter.

Contenu puissant et filtres

Le texte est une forme de contenu de base sur le site web qui peut séduire les visiteurs et les encourager à entreprendre une action spécifique, comme cliquer sur un lien. Il est donc crucial de rédiger des articles captivants sur le blog de l'entreprise, qui sont en même temps une source fiable de connaissances. De cette manière, les lecteurs feront confiance à votre site web, reviendront et l'exploreront davantage. Pour simplifier cette activité, vous pouvez ajouter des filtres à votre blog correspondant aux principales catégories de votre contenu.

Les filtres sont l'un des éléments interactifs sur le site web de Droptica

Les filtres sur notre blog aident les utilisateurs à parcourir le contenu.

Dans le cas d'une boutique en ligne, vous aurez besoin de filtres plus avancés, incluant le prix, les caractéristiques des produits, ou la disponibilité, afin que les clients puissent facilement et rapidement trouver ce qu'ils recherchent.

Commentaires, forum, et partage social

Comme mentionné précédemment, le but d'un site web interactif est d'introduire une communication bilatérale entre votre entreprise et les visiteurs. Il existe des moyens simples de le permettre, comme implémenter le système de commentaires. Grâce à cela, vos utilisateurs auront la possibilité de réagir à votre contenu et d'échanger leurs opinions avec d'autres, ce qui vous fournira des insights précieux à leur sujet. Vous pourrez ensuite utiliser ces observations pour créer des articles et des vidéos correspondant à leurs besoins, améliorer certains éléments de votre page, ou réaliser la personnalisation du contenu mentionnée précédemment.

Pour encourager davantage les visiteurs à discuter de leurs sujets, vous pouvez ajouter un forum à votre site. Cela peut aider à construire une communauté autour de vos produits ou services et inciter les utilisateurs à revenir sur votre page pour poser des questions ou aider les autres. Vous devriez également rejoindre cette action pour montrer que votre entreprise se soucie des prospects et des clients et les aide à résoudre leurs problèmes. Vous pouvez également partager du contenu intéressant que vous avez créé pour générer du trafic vers différentes parties de votre site web et augmenter les chances de conversions.

Si vous n'avez pas envie d'ajouter un forum à votre site web, vous pouvez inciter les gens à discuter de vos articles sur des plateformes tierces comme Facebook ou Twitter. Pour ce faire, implémentez des boutons de partage social sur votre page. Le mécanisme qui les sous-tend permet l'intégration entre votre site et un canal de médias sociaux choisi. Une fois qu'un utilisateur partage votre contenu sur une plateforme particulière, ses abonnés peuvent le commenter.

Chat web

Même si vous fournissez un contenu solide, la possibilité de commenter ou d'ajouter un post sur un forum, les utilisateurs peuvent encore avoir des questions supplémentaires ou un besoin de vous joindre rapidement. Un chat web leur permettra de poser des questions en temps réel. Ils peuvent dans un premier temps consulter des articles de type 'comment faire', un lien vers une page FAQ, ou votre centre d'aide. Si ces ressources ne répondent pas à leur problème, la partie live chat apparaît, et ils peuvent parler avec votre service clientèle, votre représentant commercial ou marketing. Lorsqu'ils ne sont pas disponibles, l'utilisateur peut être redirigé vers un centre d'aide ou un formulaire de contact. Aussi, au lieu d'impliquer vos spécialistes, vous pouvez utiliser un chatbot. Il peut comprendre le besoin du visiteur, fournir des informations de base (sur la disponibilité d'un produit ou le statut d'une commande) ou répondre aux questions fréquemment posées.

Formulaires de feedback et évaluations

Un autre moyen d'introduire de l'interaction sur votre site web est d'implémenter des formulaires de feedback. Ils seront un point de départ de votre communication avec un utilisateur, découvrant ses problèmes, besoins, et suggestions d'amélioration pour votre page, produit, ou service. Si une personne vous contactant accepte que vous publiiez plus tard son avis sur votre site web, ce sera une preuve sociale (confirmation de la valeur de votre produit ou service) pour vos prospects.

En plus de fournir une zone de texte pour laisser un feedback, vous pouvez également ajouter une évaluation par étoiles à côté. Grâce à cela, les personnes parcourant votre site n'auront qu'à jeter un œil aux évaluations sans avoir besoin de lire les avis. Vous pouvez donner aux utilisateurs le choix d'ajouter des évaluations sans le feedback, ce qui sera particulièrement utile sur les plateformes de commerce électronique, où les visiteurs commencent généralement par regarder les étoiles avant de prendre connaissance des avis.

Pour en savoir plus sur l'expérience client avec votre site web ou votre offre, vous pouvez créer des enquêtes qui sont des formulaires plus complexes avec des réponses à choix multiples, longues, ou à remplir. Vous pouvez également opter pour une forme encore plus interactive de collecte de feedback - les quiz. Ils permettent à votre client de jouer avec des photos et des illustrations, ou de résoudre des énigmes pour savoir par exemple s'ils ont besoin d'un nouveau site web ou si leur page est correctement optimisée.

Un exemple de quiz sur le site web de Kristen Poborsky

Quiz pour découvrir le contenu adapté à une entreprise particulière sur le site web de Kristen Poborsky.

Gifs, infographies interactives, et vidéos

Les gifs peuvent attirer l'attention des utilisateurs alors qu'ils défilent, par exemple votre article de blog. Ces éléments visuels ont pour but de faire rire ou étonner et de montrer un côté moins sérieux de votre marque. Lire un article peut être un peu monotone, donc un élément en mouvement peut réveiller l'utilisateur et le motiver à découvrir le reste de ce contenu. Ce dernier objectif s'applique également aux illustrations animées et infographies interactives. Le premier élément peut être déclenché par l'effet de survol ou en faisant défiler la page. De nouvelles parties de l'illustration apparaissent à mesure que l'utilisateur fait défiler la page, ce qui le maintient intéressé et impliqué dans la découverte de l'histoire complète. Les infographies interactives renforcent également l'engagement. Elles peuvent contenir des cartes interactives et des visualisations de données et encourager les lecteurs à cliquer sur différents éléments. Quel autre contenu garde les gens captivés?

L'enquête mondiale a montré que plus de 25% des répondants passaient plus de 10 heures par semaine à regarder des vidéos en ligne en 2020. Puis en intégrant ce type de contenu sur votre site web ou en l'intégrant en arrière-plan de certaines pages, vous aurez très probablement l'attention des utilisateurs.

Éléments interactifs dans Drupal

Avec Drupal, vous pouvez facilement créer des sites web interactifs grâce à divers éléments et modules prêts à l'emploi. Nous vous en présenterons quelques-uns.

Vidéo et carrousel

Par défaut, vous pouvez intégrer une vidéo (par exemple, depuis YouTube ou Vimeo) sur votre page ou l'utiliser en arrière-plan, grâce à la présence du module Media dans le noyau de Drupal. Vous devrez peut-être effectuer un peu de travail de programmation ou demander de l'aide à un développeur pour configurer les éléments multimédias. Vous pouvez également utiliser une solution prête à l'emploi dans Droopler, une distribution Drupal.

Video file

Vidéo en arrière-plan sur la page d'accueil de Droptica ajoutée avec Droopler.

Un autre élément utile dans le noyau est le carrousel qui fournit un diaporama en boucle que l'utilisateur peut contrôler. En l'utilisant, vous pouvez par exemple afficher vos produits, services, ou logos des entreprises avec lesquelles vous collaborez.

Le carrousel, un élément interactif, permet aux utilisateurs de parcourir les éléments en utilisant des flèches

Le carrousel sur le site web de Droptica. Lorsque vous survolez un élément particulier, vous verrez une lueur autour de lui.

Module de commentaires

Le noyau de Drupal inclut également le module de commentaires qui permet aux utilisateurs de laisser leurs opinions sous votre contenu. En tant qu'administrateur du site web, vous recevrez des notifications concernant les nouveaux commentaires. Si vous souhaitez que vos lecteurs les reçoivent également, vous devrez installer l'un des modules de notification de commentaires.

Boutons de partage sur les réseaux sociaux avec le module AddToAny

Comme mentionné précédemment, les boutons de partage social permettent à vos utilisateurs de publier rapidement un lien vers votre contenu sur des plateformes populaires. Dans Drupal, une telle option n'est pas disponible par défaut, mais vous pouvez installer le module AddToAny à cet effet. Il fournit plusieurs boutons de partage comme Twitter, Facebook, LinkedIn, et Reddit, ainsi que quelques fonctionnalités pratiques supplémentaires, telles que des barres de partage flottantes pour les ordinateurs de bureau et les appareils mobiles, ou une intégration avec Google Analytics.

Votre propre communauté en ligne avec Open Social

Si au lieu de permettre aux utilisateurs de partager votre contenu sur des plateformes tierces, vous souhaitez créer votre propre communauté en ligne, essayez Open Social. C'est une distribution Drupal destinée à créer un espace de partage de connaissances et de communication. Les personnes qui rejoignent votre plateforme auront la possibilité de:

  • créer et rejoindre des groupes,
  • taguer et mentionner d'autres membres,
  • organiser et gérer des événements,
  • suivre ce qui se passe actuellement dans la communauté.
Holmesglen - une communauté en ligne créée avec Open Social, une distribution Drupal.

Holmesglen - un exemple de site web communautaire créé avec Open Social.

Sites web interactifs dans Drupal - exemples

Il existe des sites web qui utilisent avec succès les éléments interactifs décrits ci-dessus ainsi que d'autres. Découvrons ces pages et les emplacements exacts de ces éléments.

911day.org

Sur le site 911day.org, toute personne désireuse d'aider peut trouver un service bénévole pour elle-même. Ces activités sont organisées par la fondation MyGoodDeed, ses partenaires, et toute personne désireuse de le faire, en hommage aux personnes blessées et tuées le 11 septembre 2001. Sur la page principale, vous pouvez voir la vidéo en arrière-plan. En cliquant sur le bouton Regardez nos projets en action, vous pouvez regarder la vidéo complète avec le son. Cet élément sur la page 911day.org montre les bénévoles en action pour inciter les visiteurs du site à les rejoindre.

Vidéo en arrière-plan sur la page d'accueil de 911day.org

Source: 911day.org

Here.com

Cette entreprise fournit des technologies de cartographie et de localisation qui sont présentées avec précision dans une vidéo en arrière-plan dynamique sur la page d'accueil de Here.com. Cependant, ce n'est pas le seul endroit à avoir une vidéo. Certaines d'entre elles sont intégrées dans les paragraphes de l'onglet Plateforme. Grâce à cela, le prospect peut voir les fonctionnalités de cette plateforme en pratique.

Video file

Les vidéos dans les paragraphes rendent le contenu plus attractif pour les utilisateurs.

PZPN - une plateforme de tournoi et une bibliothèque

PZPN est l'Association Polonaise de Football. Leur plateforme Du Terrain de Jeu au Stade est dédiée au plus grand tournoi de football pour enfants en Europe. Le site web contient des vidéos racontant les histoires de jeunes footballeurs et des enregistrements des matchs dans l'onglet Multimédia. Un autre élément engageant est la carte interactive de la Pologne. En cliquant sur une région particulière, vous pouvez voir le nombre d'équipes qui s'y trouvent ainsi que leurs noms.

La carte interactive sur le site web Du Terrain de Jeu au Stade

Avec la carte interactive, un utilisateur peut découvrir les équipes de football locales pour enfants. Source: le site web du tournoi.

L'association dispose également de la plateforme La Balle Nous Connecte. Elle rassemble les actualités du football polonais, les résultats des matchs, et les enregistrements. Dans la bibliothèque PZPN, vous pouvez trouver les enregistrements des derniers matchs et d'autres historiques.

La bibliothèque PZPN est un site web interactif contenant de nombreux enregistrements des matchs

Source: La bibliothèque PZPN

Création facile d'un site web interactif

Comme nous l'avons présenté, vous n'avez pas besoin des éléments complexes pour créer un site web interactif qui engagera les utilisateurs. Les commentaires, les boutons de partage social, les forums, et les vidéos les impliqueront déjà sur votre page. Vous pouvez facilement ajouter ces options à Drupal en utilisant les modules dédiés. Cependant, si vous ne savez pas lequel choisir ou comment exactement les implémenter, nos développeurs Drupal peuvent vous donner un coup de main.

2. SEO for a Drupal website