La narration interactive d’histoires et son application dans l’industrie de la conception Web

Avoir l’élément graphique est la nécessité de chaque site Web de nos jours. Sans l’utilisation appropriée des visuels, vous ne pouvez tout simplement pas transmettre votre message au visiteur, mieux encore, le faire abandonner votre site Web.

Les visuels ont le potentiel d’atteindre l’intérieur de l’esprit du spectateur et de l’attirer vers tout ce que vous essayez d’introduire, de vendre ou d’investir. Pour utiliser les visuels à votre avantage et gagner du trafic le plus rapidement possible, la meilleure méthode pour engager et convertir le visiteur consiste à raconter des histoires interactives.

Pourquoi raconter des histoires ?

Je sais ce qui doit te passer par la tête en ce moment. Qu’est-ce que Cendrillon ou Raiponce ont à voir avec l’expérience visuelle d’un site Web ? Eh bien, la narration d’histoires ne se limite pas aux contes de fées et aux franchises Disney, mais la narration d’histoires est plutôt un moyen efficace dans le mix marketing de tout site Web qui vise à se hisser au sommet de la concurrence.

Comment créer une histoire interactive

Il faut beaucoup de planification et d’essais pour connecter le design à l’histoire, donc lorsque vous l’affichez sur la page de destination de votre site Web, cela ne vous rend pas idiot. Vos visuels n’ont pas besoin d’être un chef-d’œuvre de plusieurs designers et un CGI coûteux. Vous pouvez raconter votre histoire avec une seule bannière d’image bien articulée. Cependant, le défi se présente lorsque votre récit croise l’objectif de votre site Web. De quoi parle votre site Web? Quel est le logo de votre marque et pourquoi vend-elle ce qu’elle vend ? Tout ce que vous expliquez à travers le visuel doit être unique sans un pouce de plagiat. Il doit devenir si convaincant qu’après avoir visité votre site Web une fois, les gens commencent à le partager, à en parler et à le revisiter à nouveau.

Comment ça fonctionne

Il existe une énorme disparité entre un site Web contenant des images, des graphiques et des animations et une plate-forme centrée sur le texte fade que vous appelez un site Web. Il est impossible de juger les gens et avant que vous puissiez avoir une conversation appropriée, ils sont partis. Des éléments multimédias sont injectés pour éviter cela. Lorsqu’un client voit un texte décrivant un produit, il se sent obligé de lire les alphabets et les mots de la déclaration, alors qu’une image, une vidéo ou une animation graphique est tout aussi facile à voir qu’à comprendre.

Vendre un gros produit avec une courte histoire

Une entreprise qui vend des automobiles a beaucoup à remplir avant de pouvoir effectuer des ventes via sa plateforme en ligne. L’achat de voitures en ligne prend beaucoup de courage de la part du client car de grosses sommes sont impliquées. Si le site Web ne parvient pas à attirer l’attention du client, ce ne sont que des ordures flottant sur Internet. Vendre des voitures, des camions ou de la machinerie lourde en ligne sous certains angles de marketing pour exposer les USP (arguments de vente uniques) du produit. Je connais un site Web de voitures qui a utilisé la technique de narration parfaite pour montrer son piquant sur l’écran du client.

Exemple :

Lexusls.asia est une filiale de Toyota qui vend des voitures de luxe. Sur le site Web, les concepteurs ont brillamment utilisé le défilement parallaxe pour présenter la voiture avec juste assez de texte pour faire avancer le visiteur. Puis tout à coup un pneu roule depuis la droite et montre d’autres caractéristiques intéressantes de la voiture. Au fur et à mesure que vous faites défiler vers le bas, le site Web ne vous lâche pas et, avec quelques graphismes sympas, décrit le but et les avantages de la voiture.

Langage visuel

Le langage visuel a la capacité de puiser dans les fondements mêmes de la conception centrée sur l’humain. Le langage visuel remonte à loin et même avant l’invention de tout alphabet, car les peintures rupestres étaient le moyen de communication de base. Les peintures rupestres ont servi de source de narration, de guide pour survivre et éviter les dangers potentiels qui faisaient partie de cette période. Plus ou moins, les dessins rupestres sont la forme la plus ancienne de données visuelles.

Nous savons que les images et les vidéos détiennent un grand pouvoir de communication, comment exploiter ce pouvoir à travers les pixels ?

Exemple :

C’est alors que votre propre imagination entre en jeu. Ajoutez des images et des vidéos avec le bon mélange de texte pour que votre site Web parle de lui-même.

Bellroy.com vend ses portefeuilles en cuir avec la garantie d’un plus grand espace avec des designs plus minces. Comment ils le montrent à travers un élégant curseur avec des images HD de l’un de leur portefeuille contre un autre. Au fur et à mesure que le curseur se déplace, l’histoire le fait aussi et dans les 10 images, le même nombre de cartes est inséré dans leur portefeuille de marque tout en déformant l’autre portefeuille plus qu’il ne l’est réellement. Ici la conclusion est saisissante et avec une morale à revendre.

Concevoir l’histoire

C’est assez similaire à l’écriture d’une pièce de théâtre lorsque vous concevez une histoire visuelle. Tous les aspects et éléments de la pièce sont présents sur votre site et s’entremêlent avec une telle intimité qu’ils se confondent complètement avec l’histoire que vous avez introduite. Votre histoire commence par la configuration que vous avez arrangée, puis se dirige vers le conflit et se termine par une résolution.

Ce site a par exemple une façon unique de prendre le visiteur par le bras et de l’inviter à un bal rempli d’émotions et de plaisirs visuels.

Les utilisateurs doivent être bien conscients de l’histoire car elle les conduit à leur destination. Et c’est là que le visiteur devient le prospect, et le prospect devient le client. Il est juste que le produit ou le service que vous envisagez de présenter dans le cadre du processus de narration ait quelque chose dont l’utilisateur a besoin, une fonctionnalité unique ou une marge de prix que le client recherche.

Exemple :

Bagigia.com donne d’abord au visiteur une présentation du détaillant, suivie d’une imagerie 3D simple mais profonde du produit lui-même avec un texte émotionnel pour garder l’histoire en mouvement. Le large espacement blanc dans la conception aide l’utilisateur à se concentrer car le produit se démarque au centre, amenant l’histoire à l’action et à la résolution.

Utiliser l’histoire animée à votre avantage

C’est vrai. L’animation de sites Web a été victime d’une surutilisation sans aucun respect des conventions ou des normes et c’est la principale raison de sa chute au cours des 5 dernières années. Ironiquement, très peu de concepteurs savent comment l’utilisation d’une animation intelligente et précise peut transformer votre histoire en film Dark Knight. L’animation est conçue pour couvrir ce que les images statiques ne peuvent pas compléter, tout en ajoutant de l’amusement à la conception elle-même.

Exemple :

En parlant de DarkKnight, cette application pour iOS sur benthebodyguard.com vous permet de sécuriser et de crypter les informations de votre site Web qui présente une animation pas à pas (littéralement) lorsque vous descendez avec « Ben » au milieu, le garde du corps qui a juré de protéger vos informations avec une formidable réputation. Ce site Web a illustré comment l’animation peut être utilisée au mieux pour produire l’histoire idéale pour un produit.

Traduire le message de conception

N’êtes-vous pas surpris de voir comment un design qui est simplement un mélange d’arts visuels et de graphisme peut produire de l’empathie en vous ? Je sais que j’ai. En tant qu’êtres humains, nous réagissons à nos sens animaux autant que tout autre organisme qui est fidèle à sa nature. Quand nous voyons une idole, nous faisons comme prévu. En capitalisant sur cette caractéristique du comportement humain, votre histoire ne doit pas toujours faire le buzz sur votre manifeste et vos produits, car c’est probablement ce que tous les autres propriétaires de sites Web ont en tête ces jours-ci. Lorsque vous ajoutez un sens du sentiment, de l’esprit et de la morale, votre histoire se transforme en message.

Exemple :

Ce site Web everylastdrop.co.uk vous emmène dans un voyage de votre utilisation quotidienne de l’eau dans votre maison et ses environs. Lire des faits sur la quantité d’eau gaspillée chaque jour est trop courant et n’est souvent jamais pris au sérieux. Ce petit gars innocent qui utilise l’eau sans discernement dans son emploi du temps quotidien souligne non seulement l’importance de l’eau, mais la met également en contraste avec ceux qui en ont le plus besoin dans les régions difficiles du monde. Cela grandit tellement dans l’esprit du spectateur qu’il réfléchirait probablement à deux fois avant de gaspiller une autre goutte d’eau la prochaine fois.

Utiliser des éléments sombres

Les romans sont amusants à lire et avec les récentes ascensions technologiques, il est maintenant nécessaire qu’ils soient lus à partir de livres. Même à ce jour, une grande majorité d’utilisateurs en ligne préfèrent toujours juger le livre par sa couverture plutôt que de lire le prologue. Pour s’attaquer à ces utilisateurs en ligne et les attirer vers le produit, de nombreux écrivains engagent souvent des développeurs pour créer des sites Web dédiés à leurs romans. Une répétition pas à pas du roman avec des séquences animées donnera non seulement à l’histoire le feu d’artifice dont elle a besoin, mais incitera également l’internaute à la lire.

Exemple :

Utilisant le même principe et la même structure, la nouvelle acclamée de Nam Le « The Boat » a été convertie en un roman graphique interactif en créant un monde de tempête ravageant l’océan forçant un bateau à échapper aux terreurs de la guerre du Vietnam. La meilleure chose que n’importe qui puisse faire dans sa fête de la narration est d’ajouter du son à sa conception. C’est le superlatif du storytelling animé pour acquérir l’UX. Voir ici.

Engagé et rempli d’illustrations, c’est vraiment la preuve de la façon dont vous pouvez gérer un produit en créant un design qui bouge au fur et à mesure que vous interagissez avec lui.

Unification du défilement traversant

Dans l’industrie du commerce électronique, les gens sont souvent intéressés à obtenir les avantages d’un produit qui peut être utilisé sur plusieurs instances mais pour la même raison. D’une part, cela leur facilite grandement la vie, et d’autre part, cela fait partie de l’ère technologique. Mais avec tant de choses à apprendre et à reconnaître sur une entreprise comme celle-ci, il est très peu probable que les clients prennent un risque dans quelque chose qui a des implications futuristes et sert leur objectif trop facilement, ce qui le rend trop beau pour être vrai. J’ai vu des entreprises qui ont essayé de vendre de tels produits avec trop d’accord et le résultat a été un abandon tragique.

Exemple :

Cependant, ce produit parvient non seulement à se vendre, mais tient également ce qu’il promet à ses clients. Ce produit sur onlycoin.com est une carte unique qui contient toutes vos cartes de crédit. Le processus de narration aide le spectateur à comprendre la complication de transporter trop de cartes dans votre portefeuille avec un raisonnement, mais avec l’affichage graphique de l’optimisation étape par étape de la carte et le transport compact, il devient difficile d’être en désaccord avec les applications promises du produit.

Conclusion

La narration ne se limite pas à un produit ou à un objectif ; il est ouvert à toutes sortes d’exercices de commerce électronique qui aident les visiteurs à obtenir l’UX idéale sans compromettre la fonctionnalité de la conception. Apprendre à maîtriser cela pour vos propres produits et services via des sites Web de commerce électronique est impératif à l’ère du marketing électronique. Sans lire l’état d’esprit du consommateur, vous ne pouvez tout simplement pas lancer votre produit, et sans demande, il n’y a pas de production. Comme le dit Tim O’brien, « La narration est l’activité humaine essentielle, plus la situation est difficile, plus elle est essentielle », et croyez-moi, la situation ne devient jamais plus facile.