Des sous-titres posés sur l'image, sans bandeau gris
· 4 min de lecture
Faites défiler les vidéos courtes que vous regardez vraiment et observez les sous-titres : des mots blancs en gras, posés sur l'image. Les nôtres, jusqu'à cette semaine, vivaient dans un bandeau sombre sous la vidéo, un quart de l'écran du téléphone. En deux jours, ce bandeau est passé du noir, à la page elle-même, puis à rien.
Un bandeau sûr que tout le monde remarquait
Un film 9:16 est un écran de téléphone, et sur un téléphone les sous-titres vivent en bas. C'est justement là que les pages filmées sont les plus chargées : boutons, bandeaux de cookies, pieds de page collants. Nous avions donc construit une scène : la vidéo enregistrée s'arrêtait au-dessus d'un bandeau, et les mots s'y installaient, loin de la page.
Le bandeau montrait notre halo de marque sur un fond presque noir. Il rendait chaque sous-titre lisible, sur chaque site. Il posait aussi une dalle sombre sous chaque plan, et cette dalle était la première chose que l'on voyait, avant le produit lui-même.
Nous voulions les deux : des mots toujours lisibles, et une image qui appartienne entièrement au site filmé.
Première étape : la page elle-même, floutée
Le 2 novembre, nous avons remplacé le halo sombre par l'image de la scène, floutée en larges champs de couleur, comme nos cartes dessinées utilisent déjà une page en fond. La palette du site se prolongeait ainsi sous la vidéo au lieu de s'arrêter sur un bord noir.
Une page claire nous a appris la suite. Derrière le plan de réservation d'un magasin de vélos, le fond flouté était la grille blanche de la boutique, et des sous-titres blancs ont besoin de quelque chose de plus sombre que le blanc derrière eux. Le bandeau a donc reçu son propre voile : transparent sur l'image, puis un aplat de 0,55 depuis le bord inférieur de la scène.
Cette valeur n'est pas une question de goût. C'est le voile qui garde un texte blanc à un contraste de 4,5 pour 1 sur du blanc pur, le seuil d'accessibilité courant, et un test le recalcule à chaque fois.
Puis le bandeau a disparu
Lisible ne voulait pas encore dire beau. En regardant les films côte à côte le lendemain matin, la consigne que nous nous sommes donnée était brève : plus de gris derrière les sous-titres, des sous-titres parfaits. Deux changements ont suivi le jour même.
D'abord, la pastille arrondie sous nos sous-titres maison est partie. Les mots se posent désormais sur la vidéo elle-même. Seul le mot prononcé garde son petit surlignage aux couleurs de la marque, parce que c'est le seul endroit où la couleur aide l'œil à suivre la voix.
Puis la scène est partie à son tour. L'image ne s'arrête plus au-dessus d'un bandeau : la vidéo remplit tout le cadre, et les sous-titres s'y posent, comme dans les vidéos que l'on choisit de regarder.
Comment un sous-titre reste lisible sur n'importe quelle page
Sans bandeau, la lisibilité doit venir des lettres et d'une touche légère sur l'image :
- des mots blancs en gras avec un fin contour sombre et une ombre serrée, pour que chaque lettre porte son propre contraste ;
- un léger voile tout en bas du cadre, un dégradé doux plutôt qu'un bloc ;
- un peu plus de voile derrière un sous-titre remonté, jamais une dalle ;
- un contour plus fin et des mots plus espacés pour notre style minimal ;
- un sous-titre qui couvrirait un bouton bas sur la page passe au-dessus, et le badge des films gratuits lui laisse la place.
Un petit changement a rendu cela possible. Notre moteur de rendu dessinait toujours le même contour très fin, quoi que demande le style. Il lit désormais le contour et l'ombre propres à chaque style, et chacun peut régler son bord.
Les cartes intermédiaires ont eu le même soin
La même revue a regardé les cartes dessinées placées entre les enregistrements. Notre bibliothèque de modèles contient des designs à thème : un rideau de théâtre, une scène de remise de prix, un mariage, un écran de jeu, du sport, un chapitre de podcast. Superbes dans le bon film, déroutants dans le tutoriel d'un atelier de réparation.
Ces modèles à thème ne sont désormais proposés que lorsque la page ou le brief parle de cet univers. Un tutoriel reçoit des cartes qui ressemblent à un tutoriel. Vous pouvez parcourir la bibliothèque sur /animations.
Le contraste dans les lettres, pas derrière
Nous avions traité lisibilité et esthétique comme un compromis, et choisi la lisibilité avec un gros bloc rassurant. La meilleure réponse était de mettre le contraste dans les lettres plutôt que derrière elles.
Désormais, une page d'accueil blanche, un tableau de bord bleu et un en-tête sombre gardent chacun leur image jusqu'au bord inférieur du cadre, et les mots restent lisibles sur les trois. C'est ce qu'un film vertical doit donner : le site en plein écran, avec une voix que l'on peut aussi lire.
Voyez-le sur votre propre site
Collez une page et obtenez la vidéo commentée dont parle ce blog. La première est offerte.
À lire ensuite
