Dans les sites internet, un tendance importante actuellement est de valoriser au maximum l’image pour transmettre un message explicite ou implicite. Images de grande taille, diaporamas, vidéos constituent des éléments essentiels pour une bonne « expérience utilisateur ». Encore peu utilisée, la vidéo en fond d’écran conduit le visiteur dans une ambiance toute particulière.
La vidéo en fond de la page web, ou en « background », est possible dans les version récentes des navigateurs internet, en adoptant les technologies plus récentes comme le HTML5. Il s’agit d’afficher une vidéo en fond de page, au lieu d’une couleur, d’une image ou d’un dégradé. L’impact visuel peut être important : surprendre, capturer l’attention, conduire le visiteur dans une ambiance toute particulière.
« L’expérience utilisateur » est un concept qui désigne la qualité de l’expérience vécue par l’utilisateur dans l’interaction avec une interface, dans notre cas la page internet. Différentes composantes entrent en jeu : l’ergonomie d’utilisation, la rapidité pour trouver l’information souhaité, et aussi l’impact émotionnel ressenti lors de la navigation. C’est une bonne expérience utilisateur qui fait cliquer sur les liens pour poursuivre la navigation, qui rassure et encourage à acheter un produit, qui fait mémoriser la page dans ses favoris pour y revenir plus tard.
L’utilisation de la vidéo peut avoir un impact très fort sur l’aspect émotionnel lors de la visite d’un site internet.
Pour chaque application, l’outil adapté
Actuellement l’utilisation de cette technologie semble plutôt controversée : adoptée dans des réalisation d’envergure et souvent abandonnée peu de temps après, déployée largement et ensuite redimensionnée, parfois valorisée au maximum avec succès. Peut être parce que c’est une technique dont l’utilisation est encore assez récente, les conditions de succès ou d’échec ne sont pas toujours évidentes comprendre et à mettre en œuvre.
Certainement, comme pour toute chose, c’est l’outil adapté qu’il faut choisir pour chaque application. Et la vidéo, c’est un outil super, encore faut-il qu’il soit adapté à notre site.
Certes, pour une application d’annuaire, où des utilisateurs habitués ont besoin de retrouver le plus rapidement possible une information précise, il vaut mieux d’investir dans un bon moteur de recherche que dans une vidéo longue à charger et sans apport particulier d’information pertinente.
Mais quand l’aspect artistique, l’empathie ou l’ambiance du contexte compte beaucoup, la vidéo peut représenter une solution d’une grande efficacité.
Des points d’attention
Dans mon expérience deux points d’attention majeurs sont à prendre en compte : l’adaptation au type de média et la distinction entre le fond et les messages.
Le type de média
La vidéo fonctionne bien sur un écran d’ordinateur, mais elle ne s’affiche pas sur les médias mobiles comme les tablettes et les smartphones. Actuellement c’est une limitation technique incontournable.
Pour prendre en compte ce fait, la vidéo est doublée par une image de fond, qui s’affiche quand la vidéo ne peut pas être visionnée. L’image doit être de bonne qualité, et choisie pour qu’elle s’intègre correctement à la page, participant à la même ambiance que la vidéo.
La distinction entre le fond et le message
La vidéo constitue une trame de fond animée, sur laquelle les différents éléments constituant le contenu du site sont affichés. Il est fortement déconseillé d’afficher des textes ou d’autres éléments de contenu directement dans la vidéo : en effet le point évoqué précédemment fait que ces éléments seraient perdus sur les médias mobiles.
De plus, les temps de chargements variables et les éventuelles lenteurs dans la connexion retarderaient de façon non maîtrisée l’affichage de ces éléments.
Et finalement, tous ces éléments de contenus ne seraient pas reconnaissables par les outils d’aide à la lecture utilisés par les mal voyants. De même, les moteurs de recherche ne pourraient pas lire et référencer le site par rapport à ces contenus.
Le diaporama sur la vidéo
Pour prendre en compte les limitations évoquées, une technique qui me semble efficace consiste à dérouler un diaporama en dessus de la vidéo. Le fond du diaporama est transparent, et seulement les éléments de contenu sont affichés dans la page : les titres, les liens, les pictogrammes, les boutons de navigation.
Si la vidéo retarde car la lenteur de la connexion fait que le chargement prend plusieurs secondes, cela n’empêche pas au diaporama de démarrer aussitôt, et en mode dégradé, sans vidéo mais avec l’image de fond, le diaporama se déroule aussi efficacement.
Quelques exemples
Arrtica : une agence web qui veut bien montrer ce dont elle est capable : http://arttica.is/
Lear Corporation : la vidéo assombrie pour mettre en valeur les éléments de contenu : http://lear.com/
Lois Jeans : pour le fashion… no comment : http://www.loisjeans.com/web2013/en
Et finalement, humblement mais neanmoins fier d’en avoir été le concepteur, le site de l’Economie de communion en France : http://economie-de-communion.fr/