Comment concevoir des récits puissants sur mobile

Les histoires ne doivent pas toujours être racontées dans un format Il était une fois…. Regardez des films, par exemple. Certaines histoires sont racontées dans l'ordre chronologique tandis que d'autres sautent dans une chronologie. Il y a des histoires racontées du point de vue du protagoniste tandis que d'autres permettent aux téléspectateurs de voir l'histoire du point de vue de chacun. De plus, les histoires peuvent être tristes, drôles, dramatiques ou tout ce qui précède.

Il y a une tonne de variations dans la façon dont une histoire peut être racontée. Il y a cependant une chose qu'ils doivent tous avoir en commun :

Ils doivent en quelque sorte attirer le lecteur dans le récit.

La narration est un outil très puissant pour les sites Web, mais les mêmes règles s'appliquent. Peu importe la façon dont vous racontez l'histoire, il suffit d'attirer le visiteur.

Aujourd'hui, je vais vous présenter diverses techniques de narration et vous donner quelques idées sur la façon dont vous pouvez concevoir ce type de récits dans vos propres sites Web mobiles ou PWA.

Comment concevoir des récits puissants sur mobile

Le storytelling est un excellent outil pour les sites Web mobiles.

L'une des raisons en est que l'écran plus petit vous oblige à être plus concis avec le récit . Cela signifie que vous pouvez amener les visiteurs plus rapidement au point culminant de votre histoire, ce qui accélérera leur temps de conversion.

Une autre raison pour laquelle la narration fonctionne si bien sur mobile est qu'il est plus facile d'attirer les visiteurs dans l'histoire. Tout ce que vous avez à faire est de donner à votre site une impression de livre et ils s'y plongeront rapidement.

De plus, vous pouvez vraiment laisser les visuels parler le plus et réduire les longues histoires que les fondateurs d'entreprise voudraient autrement raconter à propos de leurs entreprises.

Il y a une industrie, en particulier, qui, je pense, fait un travail exceptionnel de narration de cette manière, et c'est l'industrie de la bière et de l'alcool. Si vous y réfléchissez, ces types d'entreprises ne peuvent pas se permettre de simplement pousser leurs produits à la face des consommateurs. Voici quelques raisons:

1. « Let's get you intoxiqué » n'est pas un argument de vente très fort ou unique. Mais une histoire qui attire le client et l'intègre au récit peut l'être.
2. Pour éviter la paralysie de l'analyse qui accompagne le choix d'un type d'alcool ou de bière parmi des dizaines d'options similaires, les marques utilisent des histoires pour se différencier.
3. Vous pouvez établir plus efficacement des relations durables et fidèles avec vos clients en transformant vos produits en expériences uniques.

Conclusion : Lors de la création de sites pour des produits ou des services dans des espaces hautement concurrentiels, la narration peut vraiment changer la donne. En ce qui concerne la façon dont vous y parvenez grâce à la conception, examinons certaines des techniques de narration les plus courantes et des exemples qui montrent comment elles sont réussies.

Gin d'aviation

Quel genre d'histoire le site raconte-t-il ?
Le voyage guidé

Quels types d'entreprises bénéficient de ce type de narration ?
Ce type de technique de narration convient mieux aux nouvelles entreprises qui ont une forte composante de marque. De cette façon, l'entreprise n'est pas simplement une autre entreprise sosie entrant dans l'espace. Il offre quelque chose de plus divertissant et engageant qui encourage les clients potentiels à sauter le pas, même le premier jour.

La « mascotte » est l'un des meilleurs moyens de faire fonctionner ce type de narration, car elle devient le guide des visiteurs pour explorer le site et tout ce qu'il a à offrir.

Pensez à Flo de Progressive, William Shatner pour Priceline ou The Old Spice Guy. Dès que vous voyez ces mascottes, vous ne pouvez pas vous empêcher de vous demander dans quel genre d'« aventure » elles vont vous emmener ensuite. C'est un moyen fantastique de se fidéliser.

À quoi ressemble la méthode de narration The Guided Journey ?
Dans le cas d'Aviation Gin, le copropriétaire Ryan Reynolds a non seulement prêté son pouvoir de star, mais aussi le sens de l'humour avant-gardiste pour lequel il est bien connu à la marque.

En entrant sur le site mobile, le visage de Reynolds est la première chose que les visiteurs voient :

La vidéo (et la citation ridicule en dessous) est ce que vous attendez de Reynolds, faisant des blagues tout en introduisant les visiteurs dans un monde absurde qu'il a probablement inventé sur place. Il est également court, va droit au but et laissera sans aucun doute les visiteurs penser :

D'accord, d'accord, je dois essayer ce gin.

Faites défiler une fois vers le bas et vous trouverez cette invitation à vous connecter avec Reynolds via la newsletter Aviation Gin :

Bien que cela réduise un peu l'humour de Reynolds, cela continue de le présenter comme le pilote de ce voyage que les visiteurs sont sur le point de faire. Et si nous savons quoi que ce soit sur ce que veulent nos utilisateurs, c'est une décision brillante. Reynolds n'est pas simplement suspendu devant eux avec une publicité occasionnelle (comme le font tant d'entreprises avec leurs porte-parole). Il est en fait intégré à l'expérience.

De plus, Aviation Gin a construit le reste du site Web pour qu'il se déroule comme un vol, avec des jeux de mots astucieux et des graphismes pertinents.

Ce site Web d'une page est si bien fait du début à la fin, et une grande partie de cela est due à l'histoire à laquelle ils se sont engagés :

• Nous sommes Aviation Gin.
• Ryan Reynolds vous conduira à votre destination.
• Vous ne voulez pas venir faire un tour ?

C'est un grand récit. Et pour ceux qui ne savent pas qui est Ryan Reynolds, le site Web boutonné avec ses analogies de vol et ses jeux de mots devrait également suffire à les attirer.

Pacto-Navio

Quel genre d'histoire le site raconte-t-il ?
Le conte immersif

Quels types d'entreprises bénéficient de ce type de narration ?
Il s'agit d'une autre approche efficace de la narration si vous créez un site pour une nouvelle entreprise. Dans ce cas, cependant, il n'y a pas de personnage réel qui puisse les accompagner dans le voyage de la marque. Au lieu de cela, vous devez vous fier à la force de la marque et à votre capacité à concevoir quelque chose qui semble immersif.

Cela va être particulièrement utile si l'entreprise n'existe pas depuis longtemps et que vous n'avez pas beaucoup d'histoire ou de distinctions sur lesquelles vous appuyer. Assurez-vous simplement d'avoir un objectif clair pour votre histoire, afin que les visiteurs n'essaient pas de s'écarter du chemin que vous avez créé pour eux.

À quoi ressemble la méthode de narration The Immersive Tale ?
Pour construire un conte immersif sur un site Web mobile, vous devez le présenter comme une aventure. De cette façon, les visiteurs ne pensent même pas au bouton de menu. Au lieu de cela, ils sont prêts à jouer le jeu et vous permettent de les guider sur le site.

Pacto-Navio gère bien ce genre de storytelling. Il y a un certain nombre de raisons pour lesquelles cela fonctionne aussi.

Tout d'abord, chaque partie de l'histoire a une pleine page dédiée :

Ceci, par exemple, est la page d'accueil. Au début, les visiteurs ne voient que la boussole, mais ensuite les deux aiguilles se déplacent de l'est (France) et de l'ouest (Cuba) pour symboliser les deux pays d'où provient le rhum.

C'est une autre raison pour laquelle ce site porno semble si immersif. Dès le début, le site Web déplace activement les visiteurs du point d'entrée vers leur destination. Et je veux dire cela littéralement .

Le site regorge d'animations. Ils ne sont ni accablants ni inutiles. Chacun des éléments mobiles (même les transitions entre les retournements de page horizontaux) est subtil mais pertinent.

La conception du site dans son ensemble devrait donner aux visiteurs l'impression de lire un récit d'aventure épique. Mais c'est un site Web; pas un livre qui se limite à raconter une histoire sur les pages.

Le site mobile Pacto-Navio permet aux visiteurs de décider quand ils veulent s'arrêter et explorer davantage. Et quand ils le font, plus de l'histoire est révélée:

En un sens, ce style de site Web - où chaque page est représentée par une seule carte et où elles peuvent être feuilletées comme les pages d'un livre - est l'un des moyens les plus attrayants de raconter une histoire.

Chaque page et le graphique correspondant sont servis un à la fois. Ensuite, lorsque les visiteurs choisissent d'explorer davantage, l'histoire est brièvement racontée tandis que de petites animations les maintiennent concentrés sur le déplacement vers le bas de la page. On a vraiment l'impression de lire un livre.

Samuel Adams

Quel genre d'histoire le site raconte-t-il ?
La lettre d'amour

Quels types d'entreprises bénéficient de ce type de narration ?
Si vous avez déjà lu un livre ou regardé un film où l'emplacement physique (généralement une ville) a un rôle à jouer dans l'histoire, alors vous savez à quel point cela peut devenir émouvant.

Prenez n'importe lequel des films de Woody Allen, par exemple. Beaucoup d'entre eux se déroulent à New York ou dans des villes luxuriantes d'Europe – et on a l'impression que les villes elles-mêmes sont des personnages. Il en va de même pour les livres. Stephen King le fait beaucoup, comme avec l'Overlook Hotel dans The Shining ou la prison de Shawshank dans The Shawshank Redemption . Les lieux jouent un rôle tout aussi important que les personnes dans les histoires.

Croyez-le ou non, c'est quelque chose que vous pouvez faire avec votre site mobile s'il s'agit d'une entreprise ayant des liens étroits avec une zone géographique.

À quoi ressemble la méthode de narration The Love Letter ?
Samuel Adams est une brasserie ayant des liens profonds avec Boston, Massachusetts.

Les habitants de Boston ont tendance à être des champions farouchement fidèles des marques et des entreprises locales - et la relation qu'ils entretiennent avec cette brasserie n'est pas différente. C'est pourquoi il n'est pas surprenant que le site Web de Samuel Adams soit dédié à :

1. La ville de Boston,
2. Les habitants de Boston.

Considérez-le comme une lettre d'amour à tout ce qui concerne Boston.

Le site mobile commence par ce qui suit :

Il n'y a aucune mention de la bière de Samuel Adams dans cette image de héros. Il s'agit d'un appel à l'action : Toast Someone .

Cette vidéo montre des comédiens portant un toast aux personnes qui ont changé leur vie et leur ont donné les moyens de faire ce qu'ils font. C'est une façon vraiment sincère de lancer les gens dans leur voyage avec Samuel Adams.

Un peu plus loin dans la page, la brasserie explique pourquoi elle a demandé aux comédiens de faire ces toasts en premier lieu :

Mais ce ne sont pas seulement les célébrités que la marque a invitées à participer à son toast collectif. La prochaine vidéo est une ode à la ville de Boston et à ses habitants.

Les visiteurs voient des habitants célèbres de Boston (comme Big Papi des Red Sox de Boston donner leur amour et leur respect à la ville), mais il n'y a pas que des personnalités célèbres qui s'expriment dans la vidéo :

En plus de voir de beaux clichés de la ville de Boston, vous pourrez voir les vrais habitants de la ville. Dans la capture d'écran ci-dessus se trouve l'un des survivants de l'attentat du marathon de Boston. Mais vous pouvez également voir une équipe de rameurs se diriger vers la Charles River, un salon de coiffure et des gens boxer dans une salle de sport.

Bien sûr, les bouteilles de bière de Sam Adams peuvent être vues dans les toasts que les gens portent, mais c'est toujours une vidéo touchante et une belle ode à la ville de Boston. Et parce que ce site est complètement séparé du magasin Samuel Adams, il aide à garder l'attention des gens sur le projet de toast et le sentiment positif qui en découle.

Wintrip Brew Co.

Quel genre d'histoire le site raconte-t-il ?
Le roman graphique

Quels types d'entreprises bénéficient de ce type de narration ?
Il existe des tonnes d'exemples de romans graphiques et de bandes dessinées qui sont devenus plus tard des films ou des émissions de télévision à succès :

• Les morts qui marchent
• Veilleurs
• Ville du péché
• V pour Vendetta
• Fantôme dans la coquille

À vrai dire, ce style de narration ne fonctionnera pas pour la plupart des marques car il nécessite qu'une marque soit énervée, sombre ou repousse les limites pour que cela fonctionne. Elle a également besoin d'une marque qui se concentre à 100% sur son produit. Cela ne signifie pas qu'il ne peut pas avoir sa propre histoire originale ou inspirante à raconter, mais le rythme d'une histoire comme celle-ci doit vraiment rester concentré sur ce que vous vendez.

Si c'est quelque chose avec lequel vous travaillez et que vous avez les côtelettes créatives pour concevoir un site qui représente les pages rapides et dramatiques d'un roman graphique, c'est un moyen infernal de capter et de retenir l'attention de votre public.

"

À quoi ressemble la méthode de narration The Graphic Novel ?
Il n'y a pas qu'une seule façon de concevoir des sites Web en utilisant cette méthode de narration. C'est parce qu'il y a tellement de variations dans la façon dont les romans graphiques et les bandes dessinées sont conçus. Batman , par exemple, est sombre et maussade. Watchmen est tout au sujet du design rétro exagéré. Et puis, il y a The Walking Dead qui semble juste sale.

Vous devez décider du type d'"avantage" que vous souhaitez donner à votre site. Mais une chose est sûre : il doit avoir un contraste saisissant entre l'obscurité et la lumière.

Voici le site mobile de Wintrip Brew Co. :

Si vous ne saviez pas mieux, vous pourriez penser qu'il s'agissait d'un site pour un roman graphique ou même un jeu vidéo.

Mais c'est en effet la façon dont Wintrip Brew Co. accueille ses visiteurs - et c'est une excellente première impression à faire. Après tout, qui diable se donnerait la peine de concevoir une page d'accueil ressemblant à un roman graphique si le reste du site n'allait pas emboîter le pas ?

Il n'y a aucune raison pour que les visiteurs ne veuillent pas continuer à trébucher sur ce chemin.

Chaque centimètre de ce site ressemble à un roman graphique. Il y a des personnages étranges dispersés partout, invitant les visiteurs à explorer davantage chaque page (comme le chef aux yeux de zombie ci-dessus).

Ensuite, il y a l'histoire réelle racontée sur les pages :

La typographie reste simple et pourtant le contraste saisissant des couleurs lui donne un avantage. Si les visiteurs ne captent pas les indices subtils que la conception de la police dégage, alors les mots pleins d'attitude le feront certainement.

Bien que j'aimerais vous montrer comment la page "Bière" est conçue, les mots qu'elle contient sont incroyablement risqués. Qu'il suffise de dire que ce que vous voyez ci-dessus n'est que la pointe de l'iceberg en termes de dépassement des limites.

Mais ce n'est pas grave car c'est de cela qu'il s'agit. Il est évident, même dans la façon dont ils ont brassé leurs bières, qu'ils veulent plaire aux buveurs de bière qui recherchent quelque chose de plus sombre et de plus avant-gardiste. Et la conception de ce site Web a donné le ton parfait pour cela.

Yuengling

Quel genre d'histoire le site raconte-t-il ?
La chronologie

Quels types d'entreprises bénéficient de ce type de narration ?
La chronologie est mieux utilisée par les marques qui ont une longue histoire. Ce sont des entreprises qui existent depuis plus de 100 ans. Cela s'appliquerait également aux entreprises qui ont des dizaines de jalons qu'elles ont accumulés au fil des ans.

Vous n'en aurez peut-être pas beaucoup qui passeront devant vous, mais lorsque vous le ferez, The Timeline est une belle façon de raconter l'histoire d'une entreprise (et de ses fidèles clients).

Quant à savoir pourquoi vous optez pour cette méthode de narration, c'est l'un des moyens les plus efficaces de le faire. Sinon, vous vous retrouveriez avec des pages incroyablement longues essayant de récapituler tout ce qu'une marque a accompli au fil des ans - et ce serait une perte de temps à essayer de concevoir quelque chose comme ça et un test majeur de la patience de vos visiteurs.

Au lieu de cela, une chronologie découpe une histoire en petits morceaux digestes et toujours très impressionnants.

À quoi ressemble la méthode de narration The Timeline ?
Celui-ci est évident. Vous allez commencer par le tout début de l'histoire de la marque (généralement comment les fondateurs se sont rencontrés ou ont trouvé leur idée) et terminer avec aujourd'hui. En cours de route, vous allez partager quelques mots et des images accrocheuses pour mettre en évidence les jalons.

Prenons l'exemple de Yuengling, qui est la plus ancienne brasserie des États-Unis. La chronologie de l'entreprise commence par un seul paragraphe d'introduction et une vidéo :

Les visiteurs qui souhaitent prendre le temps d'obtenir cette introduction peuvent le faire facilement. Le reste peut passer à la chronologie qui commence avec la fondation de l'entreprise en 1829.

Ce qui est toujours agréable dans le calendrier d'une entreprise, c'est de pouvoir voir à quel point il a été cohérent depuis le tout début. Même si une entreprise a changé de mains ou subi des changements de nom, la conception de son image de marque ou du produit lui-même reste souvent inchangée.

Vous pouvez en voir un aperçu ci-dessus avec le design Porter, qui n'est pas sans rappeler le design actuel de certains emballages de Yuengling.

Au fil de l'histoire, les visiteurs en apprennent davantage sur l'entreprise - ses gains, ses pertes et les changements qu'elle a apportés pour le bien de ses clients.

C'est finalement ce que devrait être l'objectif dans la conception de l'histoire d'une marque dans une chronologie. Cela ne devrait pas être le cas pour que vous puissiez afficher récompense après récompense reçue. Si vous voulez garder les visiteurs engagés et les transformer en clients à la fin, vous devez leur montrer comment ils prennent en compte l'histoire.

Dans la capture d'écran ci-dessus, le résumé de 1996 indique :

La demande de Yuengling commence en fait à dépasser la capacité de la brasserie. La décision est prise de se retirer des marchés extérieurs à la zone locale.

C'est exactement le genre de chose que les clients veulent voir lorsqu'ils recherchent des marques auxquelles rester fidèles. Cela démontre la fidélité de la marque à fournir aux clients un produit de haute qualité au lieu de s'enrichir (ce qu'elle aurait pu facilement faire).

Emballer

Comme vous pouvez le voir, il existe des tonnes de façons de raconter une histoire à travers le design. Et bien que les sites Web ci-dessus aient l'air bien lorsqu'ils sont visualisés sur des écrans plus grands, ils brillent vraiment sur mobile. En effet, les concepteurs sont capables de créer des expériences qui donnent l'impression que vous tournez les pages d'un livre au lieu d'être invité à faire défiler des quantités infinies de texte sur le Web.

La liste ci-dessus n'est en aucun cas exhaustive car vous pouvez raconter des histoires de toutes sortes de façons pour les entreprises. Écoutez simplement ce que vos clients ont à dire sur leur entreprise, puis créez un parcours qui correspond à celui qu'ils ont emprunté (ou au détour qu'ils font aujourd'hui).