Dans le cadre de mon travail, j’ai constaté régulièrement que malgré la grande popularité de la vidéo sur le Web, aucune solution vraiment efficace n'a été mise en place afin de bien identifier le lien menant à une vidéo. Regardons cela ensemble!
Une des pratiques marketing est d’afficher une «image capture» utilisée en image-lien menant vers la vidéo. D’après mon expérience et certaines études axées sur l'ergonomie, peu de personnes cliquent sur une image-lien. Même soulignée, elle n’est pas très efficace. Pour un lien vidéo, c'est doublement inefficace. Voici un exemple typique qui n'est pas à son meilleur:
Une autre utilisation que plusieurs adorent est d’insérer l’image dans un symbole représentant une télévision. Coté ergonomique, c’est très discutable. Avec tous les styles Web à coins arrondis, il est difficile de bien distinguer cet élément cliquable. De plus, le symbole télévisuel ne tient pas la route pour la génération Internet qui elle, n’associe pas nécessairement vidéo et télévision.
Une autre utilisation un peu plus efficace est de mettre une icône symbolisant une caméra, indiquant que cette image-lien redirigera l'internaute vers une vidéo. Encore là, l’association entre caméra et vidéo n’est pas intuitive à tous. De plus, une icône de ce type est souvent trop petite pour une bonne compréhension.
Il faut donc passer d'un symbole à un pictogramme normalisé, soit celui de l'oeil. Il indique intuitivement que le lien qui suit renverra un élément visuel, et non textuel.
Pourquoi ne pas inscrire directement le fait que ce lien amène vers une vidéo?? Ne serait-ce pas plus efficace, plus simple? Bien sûr. Rajouter cet élément au pictogramme est une solution solide, qui se fait comprendre par tous, autant pour les jeunes, âgés et même les moteurs de recherche.
Question d’accessibilité (afin de ne pas avoir 72 liens indiqués «Liens vidéos»), je vous suggère d’intégrer le titre de la vidéo en le cachant, par exemple: [a href="http://www.com/"]Video link [span class="hidden"]to Pieces in place[/span][/a] et associer une class css: .hidden { display: block; width: 1px; height: 1px; text-indent: -1000px; overflow: hidden; }
Plus plus d'efficacité, ajouter un élément visuel connu comme la touche «Jouez» représenté par un triangle (style youtube.com) en semi-transparence sur l’image-lien:
Pour compléter le tout, il est aussi intéressant de rajouter une mention textuelle à la fin du texte accompagnateur:
Voilà donc simplement et en toute accessibilité, une solution très intéressante à utiliser pour bien mettre en évidence un lien vidéo.