Module 04 - Systèmes de contenu et clarté sur la page

Optimiser les images, la vidéo et YouTube pour la découverte

Publier des médias qui expliquent une décision, fonctionnent pour tous les utilisateurs et donnent aux plateformes un contexte précis sur ce que contient l'actif.

Dernière mise à jour

Leçon 15Systèmes de contenu et clarté sur la page · Cours pratique
42% du cours42 % tout au long du cours

Ce que vous apprendrez

Les médias gagnent leur place lorsqu'ils aident quelqu'un à voir, comparer, apprendre ou accomplir une tâche mieux que le texte seul. Une image peut montrer l'ajustement et les détails. Une vidéo peut démontrer un processus. Une transcription peut rendre une explication orale consultable et accessible. Le nom du fichier est la partie la moins importante de ce travail.

À la fin de cette leçon : Vous pouvez planifier, publier et maintenir des images et des vidéos en tenant compte d'un objectif clair, d'un contexte descriptif, de l'accessibilité, des performances et de la visibilité.

Pourquoi ce travail est important : Optimisez les images, la vidéo et YouTube pour la découverte

01

Un bel atout sans contexte est difficile à interpréter. Une photo de produit sans dimensions ni texte alternatif n'aide pas un utilisateur de lecteur d'écran. Une vidéo utile sans titre, chapitre, transcription ou contexte de page est difficile à trouver et à réutiliser. Les médias ont besoin du même soin éditorial que le contenu écrit.

02

Les médias peuvent également créer des coûts techniques. Des images énormes, une vidéo à lecture automatique, des sous-titres bloqués, des contrôles inaccessibles et des intégrations tierces peuvent rendre une page plus lente et moins utilisable. Une bonne optimisation protège la tâche du client plutôt que de courir après une fonction de vignette.

Gardez la limite claire : N'utilisez pas le texte alternatif comme liste de mots-clés et prétendez que le balisage d'image ou de vidéo garantit un résultat visuel. Le texte alternatif est principalement une description de l'accessibilité ; l'éligibilité de la plate-forme change au fil du temps.

Idées clés : Optimiser les images, la vidéo et YouTube pour la découverte

01

Les médias devraient répondre à une question

Choisissez une image, un diagramme, une capture d'écran, un tableau de comparaison, une démonstration ou une vidéo, car cela rend un point spécifique plus clair. Les biens décoratifs peuvent être précieux pour le ton, mais ils ne devraient pas être la seule preuve derrière une affirmation factuelle ou un produit.

Utilisez-le quand : Qu'est-ce que le client peut comprendre de cet actif que le texte seul n'expliquerait pas aussi clairement ?

02

Le contexte donne un sens à un atout

Utilisez un titre descriptif, un titre à proximité, une légende si utile, une explication environnante et des liens pertinents. Une galerie de produits a besoin d'un contexte de variante et de dimension ; une vidéo tutorielle a besoin de la tâche, de la version et du résultat ; un graphique a besoin d'une source et d'une méthode.

Utilisez-le quand : Une personne qui trouve cet actif en dehors de la page pourrait-elle comprendre ce qu'elle montre et pourquoi elle est importante ?

03

L'accessibilité fait partie de l'atout

Écrivez un texte alternatif qui communique le contenu ou la fonction significative d'une image. Fournissez des légendes et des transcriptions pour la vidéo d'instruction, des commandes utilisables, des états de mise au point clairs et suffisamment de contraste. Ne répétez pas le texte à proximité lorsque l'image n'ajoute pas de nouvelles informations.

Utilisez-le quand : Un personne qui ne peut pas voir, entendre ou facilement utiliser les médias peut-elle recevoir les mêmes informations essentielles ?

04

La livraison affecte l'expérience

Utilisez des dimensions raisonnables, des formats réactifs, la compression, un chargement paresseux pour le contenu sous le pli, un espace de mise en page réservé et un plan pour les intégrations. Mesurez si le média retarde la tâche de la page principale, en particulier sur les réseaux mobiles.

Utilisez-le quand : Cet actif aide-t-il plus qu'il ne coûte en termes de temps de chargement, de stabilité de la mise en page et d'interaction ?

Étapes pratiques : Optimisez les images, les vidéos et YouTube pour la découverte

  1. 01

    Définir le travail des médias

    Écrivez la question à laquelle l'actif répondra et l'action du client qu'il doit prendre en charge. Cela facilite la décision de créer une image, une vidéo, un diagramme ou pas d'actif.

  2. 02

    Créer des preuves originales ou autorisées

    Utilisez vos propres photographies, enregistrements d'écran, démonstrations, ensembles de données, diagrammes ou matériel correctement autorisé. Enregistrez la source, les droits, l'attribution, la version et l'état d'approbation.

  3. 03

    Placez-le dans une section de page utile

    Placez l'actif à côté de la décision qu'il soutient, avec un titre et une explication qui disent au lecteur ce qu'il faut remarquer. Évitez les galeries qui obligent les utilisateurs à déduire le point.

  4. 04

    Ajouter des descriptions accessibles

    Rédigez du texte alternatif, des légendes, une transcription, des marqueurs de chapitre, des étiquettes et des alternatives audio ou visuelles en fonction de l'actif et du public.

  5. 05

    Optimiser la livraison

    Générez des tailles réactives, réservez les dimensions de la mise en page, différez les intégrations non critiques, testez les légendes et les contrôles, et vérifiez l'actif dans des conditions mobiles restreintes.

  6. 06

    Maintenir l'évolution des médias

    Passez en revue les captures d'écran des produits, les vidéos d'instructions, les comparaisons, les prix, les références aux politiques et les liens de chapitres chaque fois que le produit sous-jacent ou la source change.

Atelier guidé

Planifier les médias qui aident un client à effectuer la tâche de la page

Votre livrable : Un mémoire multimédia accessible pour les images, les vidéos, les diagrammes, les transcriptions, les légendes, les fichiers sources et les liens vers la prochaine action utile.

Scénario de pratique

Scénario pratique : Une entreprise de fabrication a d'excellentes vidéos de produits, mais elles sont stockées sur une plate-forme vidéo avec des titres vagues et aucune transcription. Les pages de produits intégrent le même clip sans contexte, les diagrammes utilisent de minuscules étiquettes et les étapes de sécurité importantes n'apparaissent que sous forme d'instructions parlées.

L'équipe choisit un parcours d'installation de produit. Il définit ce qu'une image peut montrer, ce qu'une vidéo doit démontrer et ce qui doit également apparaître en texte clair. Il donne à chaque actif un objectif, un titre, une description, des alternatives accessibles et un emplacement dans le parcours client.

Le nouveau mémoire ne traite pas les médias comme une décoration. Cela rend les preuves visuelles plus faciles à trouver, à comprendre et à utiliser pour les personnes ayant différents appareils, vitesses de connexion et besoins d'accès.

Construisez-le étape par étape

01

Donnez à chaque actif un travail

Décidez si l'actif doit s'orienter, comparer, démontrer, rassurer, documenter ou aider quelqu'un à prendre des mesures. Supprimez les médias qui ne prennent pas en charge la tâche client de la page.

Enregistrement
Une liste d'objectifs d'actifs
Décision qu'il soutient
Quel média appartient à la page
Risque à vérifier
Ajouter des visuels de stock qui rendent la page plus longue mais pas plus claire
02

Écrivez d'abord la couche de texte

Créez l'explication clé, les étiquettes, les étapes et le résultat en texte brut avant de vous fier à une image ou à une vidéo. Le texte aide les lecteurs à scanner, prend en charge l'accessibilité et reste utile lorsque les médias ne se chargent pas.

Enregistrement
Un compagnon de texte pour chaque actif
Décision qu'il soutient
Ce qui doit rester compréhensible sans le visuel
Risque à vérifier
Mettre une instruction critique uniquement à l'intérieur d'une vidéo
03

Concevoir des images et des diagrammes pour les petits écrans

Utilisez des étiquettes lisibles, suffisamment de contraste, une hiérarchie visuelle simple et une idée principale par diagramme. Testez l'image à la plus petite fenêtre d'affichage attendue avant de la considérer comme complète.

Enregistrement
Un contrôle visuel mobile
Décision qu'il soutient
Si le visuel clarifie ou submerge le lecteur
Risque à vérifier
Réduire un diagramme de bureau dense et l'appeler prêt pour les mobiles
04

Vidéo du paquet avec contexte

Donnez à la vidéo un titre spécifique, un résumé, des indices de chapitre si utiles, des légendes, une transcription, un contexte de conférencier ou de source, et une réponse écrite à proximité. Expliquez pourquoi une personne devrait regarder et ce qu'elle va apprendre.

Enregistrement
Une vidéo de métadonnées et un résumé de la transcription
Décision qu'il soutient
Si la vidéo prend en charge la découverte et l'achèvement
Risque à vérifier
Intégrer une vidéo sans explication ni alternative
05

Rendre les médias techniquement fiables

Utilisez des tailles de fichiers raisonnables, une livraison réactive, des noms de fichiers descriptifs le cas échéant, des intégrations stables et des replis testés. Vérifiez que les médias ne bloquent pas la réponse principale, les liens ou l'action sur les connexions lentes.

Enregistrement
Une note de livraison et de secours
Décision qu'il soutient
Quels actifs ont besoin d'une optimisation ou d'un placement plus sûr
Risque à vérifier
Placer une vidéo de héros lourd devant le contenu essentiel de la page
06

Mesurer l'utilité, pas seulement jouer

Observez si l'actif aide les gens à accomplir la tâche, réduit les questions d'assistance répétées, passe à l'étape suivante ou comprend un concept complexe. Combinez les signaux quantitatifs avec les commentaires des utilisateurs.

Enregistrement
Un examen de l'utilité des médias
Décision qu'il soutient
Qu'il s'agisse de conserver, d'améliorer, de déplacer ou de retirer l'actif
Risque à vérifier
Traiter les opinions comme la preuve qu'une vidéo a aidé

Modèle de travail

  1. Emploi d'actif : Indiquez la question ou l'action du client que cette image, cette vidéo ou ce diagramme prend en charge. Un responsable de page devrait être en mesure de supprimer des actifs sans tâche claire.
  2. Compagnon de texte : Écrivez l'explication essentielle, les étapes ou les étiquettes qui doivent rester disponibles sans médias. Un réviseur d'accessibilité devrait être en mesure d'évaluer la page sans jouer l'actif.
  3. Spécification visuelle : Format d'enregistrement, mise au point, étiquettes, contraste, contraintes mobiles et exigences de source. Un concepteur devrait savoir quelle idée le visuel doit expliquer.
  4. Contexte de la vidéo : Ajoutez le titre, le résumé, les légendes, la transcription, les chapitres, le contexte de l'orateur et la prochaine action à proximité. Un réviseur de contenu devrait voir pourquoi la vidéo appartient à cette page.
  5. Retour de livraison : Décrivez le chargement réactif, l'état d'échec et ce qu'un visiteur peut faire si le média n'est pas disponible. Un ingénieur devrait être en mesure de tester l'expérience sur une connexion lente.
  6. Signal d'utilité : Choisissez un signal d'achèvement de la tâche, de compréhension, de soutien ou de prochaine étape à revoir plus tard. L'équipe ne devrait pas se fier uniquement au nombre de jeux.

Examen de la qualité avant l'expédition

  1. Affichez la page avec des images désactivées ou sur un écran étroit. Le lecteur doit toujours comprendre la décision de base ; les visuels doivent clarifier, comparer ou démontrer plutôt que de porter une affirmation inexpliquée essentielle.
  2. Pour chaque image ou vidéo, écrivez la question du client qu'elle résout et les preuves qui la sous-tend. S'il ne fait que décorer la page, supprimez-la ou donnez-lui un rôle explicatif significatif avant que l'effort de production ne augmente.
  3. Vérifiez les droits, le consentement, le texte d'accessibilité, les légendes, les performances des fichiers et la propriété des futures mises à jour avant de publier. Un visuel utile devient une responsabilité si le produit, le client ou le contexte juridique change sans chemin d'examen.

Règles de décision pour le monde réel

Un diagramme a trop de texte

Faire : Divisez-le en visuels plus petits ou déplacez les détails à l'appui dans la copie environnante.

Éviter : Ne réduisez pas la taille de la police jusqu'à ce que l'idée devienne illisible.

Une vidéo répète la page mot pour mot

Faire : Utilisez-le pour démontrer, afficher le contexte ou fournir un mode d'apprentissage différent.

Éviter : N'ajoutez pas de vidéo simplement parce que la page a besoin de multimédia.

Une vidéo contient des directives réglementées ou de sécurité

Faire : Fournissez une transcription révisée, une date, une source et une limite claire près du contenu.

Éviter : Ne laissez pas les instructions à enjeux élevés uniquement sous forme orale.

Les médias se chargent lentement

Faire : Protégez le contenu principal et utilisez une affiche légère, une intégration différée ou un itinéraire alternatif.

Éviter : Il ne faites pas attendre la décoration à un visiteur avant qu'il puisse agir.

Notes de l'entraîneur

  • Les meilleurs médias raccourcissent la distance entre une question et une prochaine étape confiante.
  • Le texte accessible améliore le visuel. Cela donne à chaque lecteur un moyen de vérifier ce qu'il a vu.
  • Un diagramme clair peut souvent remplacer plusieurs paragraphes d'explication vague.

Exemple travaillé : un tutoriel de logiciel de gestion de projet

L'entreprise a un long article de blog expliquant comment créer un modèle de projet récurrent. Il s'insère une vidéo de 20 minutes en haut sans chapitre, sans transcription et une vignette montrant un bureau générique. Les utilisateurs mobiles attendent le lecteur avant de pouvoir voir les étapes écrites.

L'équipe fait un enregistrement de deux minutes axé sur la tâche, montre d'abord le modèle terminé, ajoute des chapitres pour chaque étape, publie une transcription liée à la version du produit et place des captures d'écran annotées à côté des instructions écrites. La vidéo se charge après la réponse écrite concise et le lecteur a des commandes accessibles.

Ce qui a changé : Le tutoriel fonctionne maintenant pour les lecteurs, les téléspectateurs, les utilisateurs de lecteurs d'écran et les clients qui ont besoin d'une réponse rapide. Les médias rendent la tâche plus claire sans bloquer la page.

Améliorer le résultat : Optimiser les images, les vidéos et YouTube pour la découverte

Utiliser un registre d'actifs

Pour les médias importants, suivez l'URL, les droits, les fichiers sources, la version du produit ou du contenu, la transcription, le texte alternatif, les dimensions, le responsable, la date d'examen et les pages où il apparaît. Cela rend une refonte ou une mise à jour du produit beaucoup plus sûre.

Traitez YouTube comme une surface d'audience distincte

Planifiez un titre utile, une ouverture, une séquence de chapitres, une description, un itinéraire de lien, des légendes et une vignette pour la plate-forme vidéo. Il ne téléchargez pas un enregistrement de page Web et supposez qu'il servira un spectateur qui commence sur YouTube.

Faites en sorte que les graphiques s'expliquent

Les graphiques ont besoin d'unités, de période, de source, de méthode, de découverte clé et d'un résumé de texte. Un graphique coloré sans ces détails est un théâtre de preuves, pas un soutien à la décision.

Orientations actuelles

Utilisez Discover uniquement là où il convient

Discover peut aider une marque axée sur le contenu à atteindre les lecteurs intéressés, mais il s'agit d'un flux supplémentaire, et non d'une prévision de trafic fiable ou d'une exigence pour chaque entreprise.

  • Une page est éligible à Discover lorsqu'elle est indexée et suit les politiques Discover. Il n'y a pas de balisage Discover spécial qui garantisse l'inclusion.
  • Utilisez un titre et un titre précis. Évitez les clickbait, les aperçus exagérés et le cadrage sensationnel. Les histoires d'heure et les informations vraiment utiles correspondent le mieux.
  • Lorsqu'une page a besoin d'une image de héros, utilisez une image pertinente et de haute qualité d'au moins 1 200 pixels de large et de plus de 300 000 pixels. Prévoyez une récolte sûre 16:9.
  • Activez `max-image-preview:large` et fournissez un `og:image` ou un balisage d'image représentatif. D'utilisation d'un logo générique ou d'une image à forte teneur en texte comme aperçu préféré.
  • Signaler Découvrez les impressions, les clics et le CTR séparément. Promettez pas une prévision stable à partir d'un flux basé sur l'intérêt.

Utilisez ceci avant de publier

  • Cette page a un réel avantage pour le lecteur au-delà d'un pic de trafic.
  • L'image d'aperçu préférée explique toujours la page après un recadrage paysage.
  • Les performances de Discover sont signalées séparément du trafic de recherche basé sur les mots-clés.

livrable de leçon

Sans écrit média accessible

Améliorez un actif multimédia existant ou planifiez-en un nouveau pour une véritable tâche client.

Emploi d'actif : Indiquez la décision ou l'action à l'aider, le public et le point qu'un lecteur devrait retirer.

Contexte et preuves : Écrivez le titre environnant, une brève explication, une note de source ou de méthode, et toute condition de produit ou de fait qui s'applique.

Accessibilité : Rédiger un texte alternatif significatif ou un plan de transcription et de légendes. Décrivez comment les utilisateurs du clavier et du mobile feront fonctionner l'actif.

Livraison et entretien : Choisissez la taille, le comportement de chargement, la réservation de mise en page, le responsable, le déclencheur de version et un moyen de tester si l'actif nuit à l'expérience de base de la page.

Fait ressemble à ceci : Votre actif a un objectif pédagogique clair, des alternatives accessibles, un contexte utile et un itinéraire de maintenance.

Avant de passer à autre chose

  • Chaque actif important soutient une question ou une décision spécifique du client.
  • Les médias apparaissent à côté de l'explication qui lui donne un contexte.
  • Le texte alternatif, les légendes, les transcriptions et les contrôles répondent à l'objectif réel de l'actif.
  • La livraison est testée pour les performances mobiles et la stabilité de la mise en page.
  • La source, les droits, la version et la propriété de l'avis sont documentés.

Progression de la leçon

Vous avez terminé cette leçon ?

Enregistrez votre progression sur cet appareil pour reprendre facilement là où vous vous êtes arrêté.

Cette leçon n'est pas encore marquée comme terminée.

Mettez la leçon en pratique.

Créez un compte Spacebrain gratuit et utilisez la suite SEO avec vos propres fournisseurs de données.

Commencer gratuitement