Le pouvoir de l’image : comment rendre un visuel attractif ?
1. Le pouvoir de l’image dans l’expérience utilisateur et dans le produit
Si vous ne captez pas l’attention de l’utilisateur en 90 secondes, celui-ci perdra son intérêt et passera à autre chose !
Sachant que nous avons si peu de temps pour capter l’intérêt, les images deviennent le moyen le plus efficace et convaincant qui permettra à l’utilisateur de trouver le contenu parfait, le plus rapidement possible.
L'utilité de produire des visuels sur-mesure
Les sources fournies par les les studios ou développées pour d’autres contextes ne sont pas toujours adaptées aux besoins d’un produit.
Produire un visuel sur-mesure permet d’améliorer la perception. L’image est recomposée, le titre est brandé, et le visuel général retravaillé pour l’occasion.
Ci-dessous, un exemple de différence entre les visuels M6, travaillés et réfléchis, et ceux de France TV Pluzz (2017).
We discovered that the images mattered almost four times more than the text describing the storyline.
— Nail Hunt, Chief Product Officer at Netflix
Ce type de traitement favorise une meilleure impression de la marque et une plus grande facilité à parcourir le contenu pour l’utilisateur.
Sans avoir besoin de “lire”, il “perçoit” le titre.
Using better images to represent content significantly increased overall streaming hours and engagement.
— Nick Nelson, Global Manager at Netflix
L'enseignement le plus important à retenir
Ces visuels donnent l’impression à l’utilisateur que le contenu est de plus grande qualité ce qui convertit mieux, mais surtout augmente la durée de lecture (vidéo, articles) de 20 à 30% !!
2. Les différentes typologies des visuels
Des formats d’images différents peuvent être utilisées en fonction des choix éditoriaux.
Les choix des formats peuvent aussi être influencés par la device utilisée. Par exemple sur mobile on va privilégier des formats verticaux, compte tenu de la taille de l'écran.
Sur l'exemple ci-dessous, les mises en avant prennent une place plus importante, et un format qui diffèrent des vignettes vidéos classiques.
Comment nous avons pensé le projet France.tv ?
Nous avons utilisé plusieurs types d'images :
👉🏻 Les visuels dédiés aux programmes (vignettes) au format : 16/9e (1920x1080), affiche (1080x1620), carré (1080x1080)
👉🏻 Les visuels dédiés aux fonds, qui doivent faire transparaître l'univers et le thème de l'émission, au format : 16/9e (2800x1575)
👉🏻 Les incarnations de personnages (utilisée pour la partie jeunesse) au format : rond (inscrit dans un carré de 1080x1080)
👉🏻 Les logos en blanc et en couleur qui doivent occuper une hauteur de 385px OU une largeur de 1080px maximum.
Ci dessous 2 exemples de l'iconographie pensés pour France.tv, un exemple d'émission et une exemple jeunesse dans lesquels le pouvoir de l'image prend tout son sens.
3. Rendre un visuel attractif par l'esthétique
Une image est un travail vu de tous, qui engagera les utilisateurs à cliquer ou non pour poursuivre sa recherche.
Nous avons répertorié plusieurs raisons pour lesquelles les gens regardent une chose plutôt qu’une autre.
Trois protagonistes ou moins
Une étude de Netflix a découvert que l’intérêt avait tendance à tomber lorsqu’une image vantant un film ou un spectacle contenait plus de 3 personnes.
L’utilisateur aurait du mal à se concentrer et ne serait pas capable d’analyser les indices du scénario.
Transmettre l’émotion
Les études montrent également que l’humain à tendance à se concentrer davantage sur un personnage affichant des expressions complexes plutôt que stoïques ou neutre.
Ces images émotives doivent être capable de transmettre des détails subtils d’un film ou d’une série, d’attirer les utilisateurs dans le scénario et de les inciter à regarder.
Faire parler l’image
Le rôle premier d’une image dans le domaine de l’audiovisuel et de le télévision est de retranscrire l’identité d’un programme et son univers.
Les visuels doivent pouvoir raconter ce qu’il se passe dans l’émission, les émotions qui en ressortent sans pour autant avoir du texte à lire.Il faut savoir se mettre à la place d’un utilisateur qui ne connaitrait pas le sujet d’une émission.
Star Wars can be a princess movie to some users.
— Dantley Davis, Design Director at Netflix
Attention aux faux-amis !
Certains visuels sont cependant inappropriés.
Premier exemple : Il y a trop de protagonistes. L'œil est perdu, et l'écran surchargé.
Ce visuel n'aide pas à la compréhension de l'émission et perd l'utilisateur. Il ne donne pas envie.
Second exemple : Ci-dessous un seul protagonniste et une image qualitative. Cependant, à elle seul elle ne dessert par l'émission ou la série en question.
L' image engageante, et esthétique.
Si je connaissais pas cette émission, est-ce que je comprendrais de quoi il s'agit à première vue ?
Spontanément, nous aurions tendance à penser qu'il s'agit d'une émission historique, compte tenu du costume de l'actrice.Hors il s'agit de 10 pour cent, une série comique et dramatique, qui décrit la vie d'une agence artistique.
4. Donner du pouvoir à l'image par les codes cinématographiques
Le cinéma à ses propres codes couleurs qui vous aideront à transmettre un message par un visuel.
Voici un bon article qui décrit le sens des couleurs et leurs usages : http://www.efap-etudiants.org/signification-couleurs-cinema/
Un second article qui explique très bien quels sont les codes sur les affiches de cinéma : https://leplus.nouvelobs.com/contribution/214947-code-couleur-graphisme-pourquoi-les-affiches-de-films-se-ressemblent-toutes.html
L'image a ses propres codes. Ainsi vous privilégieriez le bleu pour des images liées à la nature, à l'environnement ou aux documentaires. Le rouge va être la couleur de la séduction, le jaune celle du film indépendant.
Votre objectif ne sera pas de faire un beau visuel, mais un visuel efficace.
Background flou et regards fuyants
Il en va de même pour une étude effectuée par Tinder sur l’effet de l’attitude masculine sur les rencontres homme/femmes.
Il est montré qu’un regard fuyant engage d'avantage.
OkCupid, le plus grand site de rencontre US a démontré que les photos de dating les plus performantes étaient également celles qui contenaient un flou d’arrière plan. Un enseignement repris par de nombreux médias et par Tinder.
5. L'importance de l'emplacement des logos ou titres
Souvent les visuels sont amenés à cohabiter ensembles dans un même espace.
Ainsi, tout bon graphiste voudra harmoniser les choses et les aligner pour atteindre la perfection.
L’harmonisation n’est pas toujours la bonne solution.
Dans le cas ci-dessous, le non-alignement des logos permet de créer du rythme et de rendre les visuels davantage engageants.
Les cas incorrects
Même respectant ces différents points, le visuel créé peut s’avérer faux, obsolète ou non conforme.
Nos avons repertorié différents cas :
👉🏻 Le logo n’est pas le bon : il faut s’assurer que le logo correspond bien à celui qui est actuellement sur les antennes
👉🏻 Mauvais personnage ou mauvais héros : un programme s’identifie avant tout par son héros, ses personnages clés. Ainsi, les personnages peuvent changer dans des saisons différentes comme une émission peut aussi changer de présentateurs.
👉🏻 Mauvaise perception du sujet : le visuel ne transmet pas l’univers du programme, son identité, son sujet
Les zones d'encombrement
Chez france.tv, nous avons respecté des zones d'encombrement qui devaient être respectées afin que les éléments ne se chevauchent pas entre eux.
Pour cela nous avons créé des gabarits, spécifiques à chaque formats.
Cependant, pour éviter que les visuels ne soient centrés vers le bas, il est possible de couper une partie de l'image sous la zone d'encombrement (cheveux, haut de tête,...)
6. A/B tester les visuels pour vérifier leur attractivité
Le meilleur moyen de savoir si un visuel est pertinent et de le confronter aux utilisateurs.
Ainsi, via les données récupérées on peut se baser sur les choix de la communauté pour optimiser l'expérience globale.
Le principe est simple : il suffit de diviser vos utilisateurs en un certain nombre de panels, et de soumettre chaque panel à une expérience un peu différente (ici on parle de visuels qui diffèrent. La solution qui affiche les meilleurs résultats sera la solution adoptée.)
Dans ce cadre là on peut ainsi déterminer la vignette qui sera la plus cliquée, mais surtout celle qui entraînera le plus d'engagement de la part des utilisateurs.
Car il ne suffit pas de cliquer, il faut que les utilisateurs visionnent le contenu.
