Bonnes pratiques pour réussir la création d'une story Web

Les stories Web sont un format de narration immersif, exploitable et qui peut facilement être partagé. Elles sont créées à l'aide d'un sous-secteur du framework AMP. Les stories Web sont l'occasion pour les créateurs et les éditeurs de structurer le contenu dans une expérience plein écran, visuellement riche et attrayante pour les utilisateurs.

Les stories Web sont de petits délices et les lecteurs aiment les bouchées rapides lors de leurs micromoments. Attendre le métro ou prendre un café ouvre des possibilités de consommation de contenu condensé. Assurez-vous que chaque bouchée engage et ravisse en suivant ces bonnes pratiques pour créer une story Web agréable à consommer.

En un coup d’œil

Les principaux points à retenir pour créer une story Web agréable à grignoter :

• Racontez une story complète et intéressante.
• Maximisez l'impact de votre page de couverture avec des images de haute qualité et un titre accrocheur.
• Rendez-la visuelle avec des vidéos et des images qui s'adaptent et remplissent l'écran de l'utilisateur.
• Vous pouvez en dire beaucoup, avec moins, en particulier lorsque vous utilisez des images visuelles. Essayez de garder la taille du texte en dessous de 10 mots par page.
• Lorsque vous utilisez des vidéos, les plus courtes sont les meilleures, alors essayez de vous en tenir à moins de 15 secondes.
• Certaines personnes et certaines situations nécessitent une visualisation sans son. Gardez le contenu inclusif en ajoutant des légendes aux vidéos.
• Donnez aux lecteurs quelque chose à exploiter. Une longueur moyenne de 10 à 20 pages permet à la plupart des auteurs de raconter un bon récit.
• N'abusez pas des animations et ne les intégrez pas, et faites attention au moment de la transition.

Maîtrisez votre récit

Planifiez l'introduction de la story, créez un arc et construisez un récit complet. Une fois que vous savez ce que vous voulez dire, subdivisez l'ensemble. Chaque page de la story Web doit véhiculer une idée unique qui fonctionne de manière cohérente avec les autres.

Contenu de bon goût et suffisant

Chaque story Web doit comporter au minimum 4 pages et, idéalement, moins de 30. Les stories Web doivent être bien racontées et faciles à consommer. Si nécessaire pour votre récit, dépassez 30.

Habillage "Choisissez-moi !"

Votre page de garde est l'habillage de votre story Web. C'est la première chose que les visiteurs verront et, s'ils ne l'ouvrent pas, la seule chose qu'ils verront. Assurez-vous qu'elle soit attrayante ! Une bonne page de couverture comporte deux éléments, des images accrocheuses et un titre bref et mémorable.

Images

Utilisez une image ou une vidéo de portrait de haute qualité qui s'adapte au plein écran. Faites savoir à vos fans qu'il s'agit de votre marque en incluant un favicon et un logo.

Titre

Gardez le titre clair et net, idéalement moins de 10 mots en moins de 40 caractères. Incluez le nom de l'auteur et de la publication et ajoutez une date de publication si la story est sensible.

Marque et date

Le lecteur a besoin de savoir qui a publié la story Web et quand. Incluez une attribution de marque et une date de publication sur la page de garde. Cela favorise la confiance et, si un utilisateur aime votre contenu, la fidélité. Cette story Web de CNN sur les voyages en Italie permet de voir en un coup d'œil qui a publié la story et à quel point elle est récente.

Plaisir visuel

Attirez les lecteurs avec des visuels de qualité qui captivent leur attention et des textes qu'ils peuvent lire facilement et rapidement. Utilisez principalement des vidéos et des images de haute qualité, mais ajoutez un peu d'animation là où cela a du sens.

Toutes les images et vidéos doivent occuper tout l'écran avec une utilisation minimale de la boîte aux lettres là où cela s'avère pertinent.

Vidéo

Les vidéos sont très attrayantes pour les lecteurs, incluez-en autant que possible dans votre story Web. Visez des vidéos de moins de 15 secondes. Si vous avez une vidéo plus longue, divisez-la en plusieurs morceaux.

Les stories Web sont utilisées en mode portrait, gardez donc à l'esprit les points suivants :

• Enregistrez vos vidéos sur des appareils mobiles haut de gamme lorsque cela est possible.
• Enregistrez vos vidéos en 480p.
• Enregistrez vos vidéos en au moins 24 images par seconde.

Assurez-vous que votre contenu est accessible. Redimensionnez les vidéos pour faire de la place pour le texte et les légendes situées en-dessous. Tous les lecteurs ne pourront pas ou ne voudront pas entendre le contenu vidéo.

Images

Utilisez des portraits en plein écran avec une bonne résolution (828 x 1792).

Évitez les photos recadrées en mode paysage.

Recadrez logiquement

Restez concentré(e) sur ce qui est important. Coupez les éléments inutiles ou gênants et assurez-vous que le sujet clé de la photo est net et complet. N'oubliez pas que le haut et le bas peuvent être rognés sur certains appareils, veuillez donc tester en conséquence.

À FAIRE	À ÉVITER
Cette image est recadrée pour s'aligner sur le contenu de la page et prend en charge l'idée principale.	Avec ce recadrage, on ne sait pas où doit se concentrer le lecteur et quelle idée l'image entend véhiculer.

Texte

Assurez-vous que le texte est lisible. Utilisez au moins une police de taille 24, mais vous pouvez la rendre aussi grande et lisible que possible. Faites contraster la couleur du texte avec l'arrière-plan ou l'image de la page de la story. N'incluez pas d'images ou de vidéos contenant uniquement du texte.

À FAIRE	À ÉVITER
Un contraste élevé rend les mots faciles à voir.	Avec un faible contraste, vos mots et vos images peuvent se mélanger, rendant les mots difficiles à lire et la story plus difficile à suivre.
La mise en évidence du texte peut faire ressortir les mots et aider vos lecteurs à rester concentrés sur votre story.	L'utilisation d'un texte clair sur une image chargée rend les mots difficiles à lire.

Mots à grignoter

Le texte doit venir en petites portions à grignoter, pas en masse. Essayez de ne pas dépasser 200 caractères par page.

Traitez les détails comme une liste d'ingrédients, rendez-les disponibles, mais uniquement si les utilisateurs les demandent. Incluez du contenu textuel plus long dans une pièce jointe de page. Les pièces jointes aux pages indiquent à l'utilisateur qu'il y a davantage à lire. Ils peuvent glisser vers le haut sur leur appareil s'ils sont intéressés.

Une page avec un contenu texte plus long qu'une phrase peut être inévitable. Essayez de ne pas les laisser occuper plus de 10 % du total des pages de la story.

À FAIRE	À ÉVITER
Essayez de garder le texte sur l'essentiel. La variation de la taille et du style du texte pour séparer des blocs de texte peut augmenter la capacité de numérisation.	Un grand mur de texte comme celui-ci peut être difficile à lire et peut décourager l'engagement avec votre story.

Animations

Les animations sont appétissantes lorsqu'elles sont faites avec un but précis, comme ajouter du mouvement à des images statiques. Vous pouvez animer des images et des éléments avec des effets de survol, de rotation ou de fondu.

À FAIRE	À ÉVITER
Le mouvement de cet exemple aide à soutenir l'idée principale et ajoute un élément dynamique à la page.	Cette page statique est fonctionnelle, mais elle manque peut-être une occasion d'être plus attrayante pour les lecteurs.

Toutefois, utilisez-les avec parcimonie, car les animations peuvent devenir peu recommandables si elles sont surutilisées. Évitez d'ajouter trop de saveurs et d'épices en fournissant vos animations avec parcimonie.

Le timing est essentiel

Les pages doivent défiler rapidement (une animation ne doit pas empêcher un utilisateur de passer à la page suivante), mais pas trop vite ! Il est important de proposer la bonne combinaison de style et de durée. Par exemple, les animations simples devraient prendre moins de 500 millisecondes, mais le panoramique sur une image d'arrière-plan devrait durer plus longtemps.

Pensez à faire preuve de créativité avec le mouvement. Animez plusieurs objets dans une séquence, plutôt que de les faire bouger ensemble en un seul effet. Les éléments peuvent avoir différents effets et durées qui contribuent à une animation cohérente.

Accords parfaits

Associez votre style d'animation à l'esthétique de votre story. Utilisez la bibliothèque d'animations Web Story disponible pour vous aider à trouver un style et une intensité qui vous conviennent sans vous distraire du contenu.

Envie de plus

Permettez aux utilisateurs d'explorer davantage votre sujet en intégrant du contenu tiers, en joignant des informations supplémentaires et en établissant des liens vers de nouveaux emplacements.

Intégrations stratégiques

Les intégrations fournissent une dimension supplémentaire là où elles sont pertinentes et présentées de manière agréable. Incluez du contenu pertinent à côté de l'intégration afin qu'il s'agisse d'un élément intégré de la story. Vous devrez peut-être activer l'interactivité pour votre intégration.

À FAIRE	À ÉVITER
L'intégration sur cette page s'intègre bien avec le reste de la mise en page. Les graphiques de titre, de date et d'arrière-plan contribuent à améliorer le visuel.	Mettre l'intégration seule sur la page semble inachevée et ne s'intègre pas bien à la story complète.

Joindre du contenu supplémentaire

Rationalisez votre story Web en plaçant le contenu associé dans les pièces jointes. De cette façon, les lecteurs peuvent creuser plus profondément s'ils veulent en savoir plus sur votre story. Les lecteurs naviguent plus facilement dans une story lorsqu'un contenu supplémentaire est joint aux pages pertinentes.

Les pièces jointes fonctionnent bien avec de longs blocs de texte, ou si votre story contient une vidéo de mise en vedette, vous pouvez inclure la vidéo complète en tant que pièce jointe.

Lien vers de nouveaux emplacements

Vous pouvez ajouter des liens n'importe où sur une page de story Web. Si vous appuyez sur un lien, une info-bulle apparaît. Cela indique à l'utilisateur la destination du lien et lui permet de confirmer l'action avant de quitter la story.

À FAIRE	À ÉVITER
Les liens sur cette page sont clairement indiqués et entourés de contenu connexe. Ils n'interfèrent pas avec la navigation dans la story.	Les liens sur cette page bloquent complètement la navigation. Les lecteurs ne pourront pas accéder facilement à la page précédente ou suivante.

Pensez stratégiquement à la taille, à l'emplacement et à la fréquence d'apparition de vos liens. Trop d'éléments activables peuvent compliquer la navigation et frustrer les lecteurs.

Coder ou créer

Les stories Web peuvent être entièrement codées à la main ou créées en utilisant les outils de création.

Si vous codez à la main une story Web, vous la créez à partir de zéro en utilisant le framework AMP. Consultez la section Créer votre première story Web pour commencer. Après avoir créé votre story Web, assurez-vous qu'elle est valide pour AMP. Vous pouvez tester la validité avec le validateur AMP. Lisez les détails techniques des stories Web pour plus d'informations.

• Written by @CrystalOnScript