Fermer

janvier 27, 2020

Comment concevoir des récits puissants sur mobile


À propos de l'auteur

Suzanne Scacca est une ancienne implémentatrice, formatrice et responsable d'agence WordPress qui travaille maintenant comme rédactrice indépendante. Elle est spécialisée dans l'artisanat marketing, web…
En savoir plus sur
Suzanne
Scacca

Vous voulez créer un site Web ou un PWA qui attire un large public et convertit ensuite autant de ce public en clients payants que possible? Si tel est le cas, ce que vous devez faire, c'est utiliser la narration dans votre conception – et il existe de nombreuses façons de le faire. La clé est d'associer l'histoire, l'image de marque et les objectifs de votre client avec le style d'histoire que vous décidez de raconter.

Les histoires ne doivent pas toujours être racontées au format Il était une fois…. Jetez un œil aux films, par exemple. Certaines histoires sont racontées par ordre chronologique tandis que d'autres sautent sur 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 expliquer différentes techniques de narration et vous donner quelques idées sur la façon de concevoir ces types de récits. dans vos propres sites Web mobiles ou PWA.

Comment concevoir de puissants récits sur mobile

La narration est un excellent outil pour les sites Web mobiles.

Une des raisons en est que le petit écran 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'aspirer les visiteurs dans l'histoire. Tout ce que vous avez à faire est de donner à votre site une impression de livre et ils y seront rapidement plongés.

De plus, vous pouvez vraiment laisser les visuels faire la plupart de la conversation et réduire sur les longues histoires que les fondateurs d'entreprises voudraient autrement raconter sur 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 sur le visage des consommateurs. Voici quelques raisons:

  1. "Laissez-vous enivrer" n'est pas un argument de vente très fort ou unique. Mais une histoire qui attire le client et fait de lui une partie du récit peut être.
  2. Pour éviter la paralysie de l'analyse qui vient avec le choix d'un type d'alcool ou de bière parmi des dizaines d'options similaires, les marques utilisent
  3. Vous pouvez établir plus efficacement des relations à long terme et fidèles avec les clients en transformant vos produits en expériences uniques.

Conclusion : lors de la construction de sites pour des produits ou services dans des espaces hautement compétitifs, la narration peut changer la donne. En ce qui concerne la façon dont vous accomplissez cela grâce à la conception, regardons quelques-unes des techniques de narration les plus courantes et des exemples qui montrent comment ils sont réussis.

Aviation Gin

Quel genre d'histoire raconte le site? [19659021] The Guided Journey

Quels types d'entreprises bénéficient de ce type de narration?
Ce type de technique de narration est préférable pour les nouvelles entreprises qui ont une forte composante de marque. De cette façon, l'entreprise n'est pas seulement une autre entreprise similaire qui entre dans l'espace. Il offre quelque chose de plus divertissant et engageant qui encourage les clients potentiels à sauter le long de la balade – même le jour 1.

La «mascotte» est l'un des meilleurs moyens de faire fonctionner ce type de narration car ils deviennent le guide du visiteur pour explorer le site et tout ce qu'il a à offrir.

Pensez à Flo de Progressive, William Shatner pour Priceline ou The Old Spice Guy. La seconde où vous verrez ces mascottes, vous ne pouvez pas vous empêcher de vous demander sur quel genre «d'aventure» elles vont vous mener ensuite.

À quoi ressemble la méthode de narration de The Guided Journey?
Dans le cas de Aviation Gin le copropriétaire Ryan Reynolds n'a pas seulement

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

 Vidéo de Ryan Reynolds sur le site mobile Aviation Gin
Ryan Reynolds initie les visiteurs mobiles à Aviation Gin avec son humour de marque. (Source: Gin d'aviation ) ( Grand aperçu )

La vidéo (et la citation ridicule en dessous) est ce que vous attendez de Reynolds, faisant des blagues tout en présentant aux visiteurs un monde absurde qu'il a sans doute inventé sur place. C'est aussi court, au point et laissera sans aucun doute les visiteurs penser:

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

Faites défiler vers le bas une fois, et vous trouverez cette invitation à vous connecter avec Reynolds via l'aviation Bulletin d'information sur le Gin:

 Gin pour l'aviation - Ryan Reynolds
Gin pour l'aviation utilise Ryan Reynolds comme pilote pour son parcours de marque. (Source: Gin d'aviation ) ( Grand aperçu )

Bien qu'il réduise un peu l'humour de Reynolds, il continue de le dépeindre comme le pilote de ce voyage que les visiteurs sont sur le point prendre. Et si nous savons quelque chose 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 beaucoup d'entreprises le font 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 jouer comme un vol, avec des jeux astucieux sur les mots et les graphiques pertinents.

 Jeu de mots et images liés au vol Aviation Gin [19659030] Aviation Gin joue son nom de marque et guide les visiteurs à travers le site avec des jeux de mots et des images liés au vol. (Source: <a href= Gin d'aviation ) ( Grand aperçu )

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 ils se sont engagés à:

  • Nous sommes Aviation Gin.
  • Ryan Reynolds vous emmènera à votre destination.
  • Vous ne voulez pas venir pour la balade?

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 son jeu de mots devrait également suffire à les attirer.

Pacto-Navio

Quel genre d'histoire fait le site
The Immersive Tale

Quels types d'entreprises bénéficient de ce type de narration?
C'est une autre approche efficace de la narration si vous construisez un site pour une nouvelle entreprise. Dans ce cas, cependant, aucun personnage réel ne peut les accompagner dans le parcours 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 à utiliser. Assurez-vous simplement d'avoir une vision claire de 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 de The Immersive Tale?
construire un conte immersif sur un site mobile, il faut le cadrer 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 parcourir à travers le site.

Pacto-Navio gère bien ce type de narration.

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

 Animation de la page d'accueil de Pacto-Navio
Pacto-Navio présente aux visiteurs le site mobile avec une animation de l'Ouest rencontrant l'Est. (Source: Pacto-Navio ) ( Grand aperçu )

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

C'est une autre raison pour laquelle ce site se sent tellement immersif. Dès le début, le site Web déplace activement les visiteurs du point d'entrée à leur destination. Et je veux dire ceci littéralement .

Le site est plein d'animations. Ils ne sont ni écrasants ni inutiles. Chacun des éléments en mouvement (même les transitions entre les sauts de page horizontaux) est subtil mais pertinent.

 Pages du livre de contes Pacto-Navio
Les visiteurs du site Web de Pacto-Navio restent engagés dans l'histoire grâce à une animation subtile et des retournements de page. (Source: Pacto-Navio ) ( Grand aperçu )

La conception du site dans son ensemble devrait donner aux visiteurs l'impression de lire une histoire épique d'aventure. Mais ceci 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 en explorer davantage. Et quand ils le font, une plus grande partie de l'histoire est révélée:

 L'histoire de Pacto-Navio
Le site Web mobile de Pacto-Navio ressemble à un livre d'aventure. (Source: Pacto-Navio ) ( Grand aperçu )

Dans un sens, ce style de site Web – où chaque page est représentée par une seule carte et peut être consultée comme les pages d'un livre – est l'une des façons les plus engageantes de raconter une histoire.

Chaque page et chaque graphique correspondant sont affichés un par un. Ensuite, lorsque les visiteurs choisissent d'explorer davantage, l'histoire est brièvement racontée tandis que de petites animations les concentrent 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 raconte le site?
La lettre d'amour

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

Prenez l'un 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 fait beaucoup cela, comme avec l'hôtel Overlook dans The Shining ou la prison Shawshank dans The Shawshank Redemption . Les lieux jouent un rôle tout aussi important que les gens dans les histoires.

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

À quoi ressemble la méthode de narration de la lettre d'amour?
Samuel Adams est une brasserie ayant des liens étroits avec Boston, Massachusetts.

Les gens de Boston ont tendance à être des champions farouchement fidèles pour les locaux les marques et les entreprises – 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 touche à Boston.

Le mobile le site commence par ce qui suit:

 Campagne Samuel Adams Toast Someone
Le site mobile Samuel Adams encourage les visiteurs à "Toast Someone". (Source: Samuel Adams ) ( Grand aperçu )

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

Cette vidéo montre des comédiens qui font griller les gens qui ont changé leur vie et qui leur ont donné le pouvoir de faire ce qu'ils font. C'est une manière très sincère de faire démarrer les gens dans leur voyage avec Samuel Adams.

Un peu plus loin, la brasserie explique pourquoi des comédiens ont fait ces toasts en premier lieu:

 Samuel Adams Toast Someone Project [19659030] Samuel Adams consacre sa page d'accueil à son projet Toast Someone. (Source: <a href= Samuel Adams ) ( Grand aperçu )

Mais ce n'est pas seulement des personnes célèbres que la marque a demandé de participer à son toast collectif. La vidéo suivante est une ode à la ville de Boston et à ses habitants.

 Samuel Adams Les habitants de Boston portent un toast
Samuel Adams a des résidents bien connus portant un toast dans cette vidéo de la page d'accueil. (Source: Samuel Adams ) ( Grand aperçu )

Les visiteurs voient de célèbres habitants de Boston (comme les Big Papi des Red Sox de Boston témoignent leur amour et leur respect à la ville), mais ce ne sont pas seulement les grands noms qui s'expriment dans la vidéo:

 Les vrais visages de Samuel Adams Boston
Samuel Adams montre les vrais visages des habitants de Boston dans cette vidéo Toast. (Source: Samuel Adams ) ( Grand aperçu )

En plus de voir de beaux clichés de la ville de Boston, vous pouvez voir les vrais gens de la ville. Dans la capture d'écran ci-dessus est l'un des survivants de l'attentat à la bombe du Marathon de Boston. Mais vous pouvez également voir une équipe de rameurs se diriger vers la rivière Charles, un salon de coiffure et des gens qui boxent 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 donnent, 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 raconte le site? [19659021] 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 par la suite des films ou des émissions de télévision à succès:

  • The Walking Dead
  • Watchmen
  • Sin City
  • V pour Vendetta
  • Ghost in the Shell

À 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 repoussant les limites pour qu'elle fonctionne. Elle a également besoin d'une marque centrée à 100% sur son produit. Cela ne signifie pas qu'il ne peut pas avoir une histoire originale ou inspirante à raconter, mais le rythme d'une histoire comme celle-ci devrait vraiment rester concentré sur ce que vous vendez.

Si c'est quelque chose que vous travaillez avec et vous avez les atouts créatifs pour concevoir un site qui représente les pages rapides et dramatiques d'un roman graphique, c'est une façon infernale de capter et de retenir l'attention de votre public.

à quoi ressemble la méthode de narration graphique?
Il n'y a pas 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 conception des romans graphiques et des bandes dessinées. Batman par exemple, est sombre et de mauvaise humeur. Watchmen est tout au sujet du design rétro exagéré. Et puis, il y a The Walking Dead qui est tout simplement crasseux.

Vous devez décider quel type de "bord" vous voulez donner à votre site. Mais une chose est sûre: il doit y avoir un contraste saisissant entre le noir et le clair.

Ceci est le site mobile de Wintrip Brew Co. :

 Wintrip Brew Co. site mobile [19659030] Wintrip Brew Co. accueille les visiteurs sur son site mobile avec une conception graphique roman désolée. (Source: <a href= Wintrip Brew Co. ) ( Grand aperçu )

Si vous ne saviez pas mieux, vous pourriez penser que c'était le site d'un roman graphique ou même d'un jeu vidéo.

Mais c'est bien ainsi que 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 pour ressembler à un roman graphique si le reste du site n'allait pas emboîter le pas?

Il n'y a aucune raison pour laquelle les visiteurs ne voudraient pas garder

 Personnages de Wintrip Brew Co.
Le site Web de Wintrip Brew Co. a sa propre distribution de personnages uniques et bizarres. (Source: Wintrip Brew Co. ) ( Grand aperçu )

Chaque pouce de ce site ressemble à un roman graphique. Il y a des personnages étranges dispersés à travers elle, invitant les visiteurs à explorer plus de chaque page (comme le chef aux yeux de zombies ci-dessus).

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

 Typographie de Wintrip Brew Co. [19659030] Wintrip Brew Co. maintient une conception typographique simple pour que l'attitude dans les mots puisse se démarquer. (Source: <a href= Wintrip Brew Co. ) ( Grand aperçu )

La typographie est simple et pourtant le contraste des couleurs saisissant lui donne un avantage. Si les visiteurs ne saisissent pas les indices subtils de la conception des polices, alors les mots pleins d'attitude le feront certainement.

Bien que j'aimerais vous montrer comment la page "Beer" est conçue, la les mots dessus sont incroyablement risqués. Il suffit de dire que ce que vous voyez ci-dessus n'est que la pointe de l'iceberg en termes de repoussage des limites.

Mais ça va parce que c'est de cela que parle cette marque. 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 raconte le site?
La chronologie

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

Vous n'en obtiendrez peut-être pas beaucoup, mais lorsque vous le faites, The Timeline est une belle façon de dire à une entreprise (et leurs fidèles clients).

Quant à savoir pourquoi vous opteriez 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 d'essayer de concevoir quelque chose comme ça et un test majeur de la patience de vos visiteurs. [19659005] 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 de la chronologie?
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 proposé 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 la société commence par un seul paragraphe d'introduction et une vidéo:

 Histoire du site mobile Yuengling
Le site mobile Yuengling présente de nouveaux et anciens clients à son histoire. (Source: Yuengling ) ( Grand aperçu )

Les visiteurs qui veulent prendre du temps pour obtenir cette introduction peuvent le faire facilement. Le reste peut passer à la chronologie qui commence avec la création de la société en 1829.

 La chronologie de Yuengling commence
Yuengling raconte son histoire avec des visuels accrocheurs et de courts extraits de texte sur une chronologie. (Source: Yuengling ) ( Grand aperçu )

Ce qui est toujours agréable dans la chronologie d'une entreprise, c'est de voir à quel point elle a été cohérente dès le début. Même si une entreprise a changé de mains ou a changé de nom, le design de sa marque ou le produit lui-même restent souvent inchangés.

Vous pouvez en voir un aperçu ci-dessus avec le design Porter, qui n'est pas sans rappeler le design actuel de certains des 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.

 Yuengling raconte une histoire honnête
Yuengling utilise la chronologie de son site Web pour montrer aux clients comment ils ont pris en compte les décisions de l'entreprise. (Source: Yuengling ) ( Grand aperçu )

C'est finalement ce que l'objectif devrait être de concevoir 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. 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 dit:

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 en dehors de la zone locale.

C'est exactement le genre de chose que les clients veulent voir lorsqu'ils recherchent des marques pour 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 qui aurait pu facilement être fait).

Conclusion

Comme vous pouvez le voir, il existe de nombreuses façons de dire à un histoire à travers le design. Et bien que les sites Web ci-dessus soient beaux lorsqu'ils sont vus sur des écrans plus grands, où ils brillent vraiment est mobile. C'est parce que les concepteurs sont capables de créer des expériences qui donnent plus l'impression de tourner les pages d'un livre au lieu de devoir 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 pris (ou au détour qu'ils effectuent aujourd'hui).

Article connexe sur SmashingMag

Les utilisateurs ont de nombreuses attentes lorsqu'ils venez sur votre site. Placer vos utilisateurs dans le contexte d'une histoire vous aide à comprendre ces attentes et leurs motivations. Vous verrez ce qu'ils veulent et attendent, mais aussi ce dont ils ont besoin. Une fois que vous connaissez leurs besoins, vous pouvez répondre à ces besoins. En savoir plus sur un article écrit par John Rhea →

 Éditorial fracassant (ra, yk, il)




Source link