Utilisez le parallax scrolling avec précaution

Connaissez-vous le parallax scrolling ? Mais si enfin, c’est une technique de codage qui permet de faire défiler des éléments sur plusieurs plans à des vitesses différentes pour donne une impression de profondeur :

Très utilisée au siècle dernier dans les jeux vidéo, cette technique a été recyclée et détournée pour être utilisée sur des sites web “aspirationnels” (ex : Spotify). Pas particulièrement complexe à mettre en oeuvre ni très lourde à charger, cette technique est en train d’être adaptée aux sites de grandes marques pour leur donner du caractère. Le problème est que si elle est mal implémentée, elle apporte plus de confusion que de caractère. Illustration avec le site de Harrod’s où les pages de catégorie sont empilées les unes au-dessus des autres et s’animent avec la molette de la souris.

Quand le panneau catégorie est correctement calé en hauteur ça fonctionne plutôt bien, mais si vous utilisez un écran trop grand ou trop petit, c’est assez complexe à manipuler. Idem pour le site de Lois Jeans, l’effet est visuellement très réussi, mais encore faut-il faire défiler la page vers le bas à une vitesse régulière. Implémenter ce type de technique sur une page d’accueil est pour moi un risque inutile. Vous pouvez éventuellement vous y risquer sur des pages intérieures (Range Rover Evoque) ou sur une page expérimentale comme Chanel Premiere Experience.

Cette technique est donc à utiliser avec précaution et je rejoins tout à fait l’avis de l’auteur de cet article qui nous propose une série de meilleures et pires pratiques : 6 of the Best and Worst Parallax Scrolling Websites for Design Agencies. Je pense que le plus perturbant dans ces sites est de ne plus trop savoir où l’on en est et jusqu’où la page défile. Pour y remédier, le site de Bagigia propose un indicateur visuel en bas de page qui est de plus en harmonie avec le produit (une fermeture éclair) :

Vous remarquerez qu’en fait il n’y a pas un, mais deux indicateurs visuels : la “barre de progression” en bas de page et les puces sur le côté droit pour vous aider à caler les panneaux. Idéalement, puisque le calage vertical des panneaux est un souci, il faudrait proposer une invit visuelle à chaque étape, comme sur le site du Chromebook Pixel (les petites flèches en dessous de chaque panneau).

Encore mieux, HTML5 vous permet de déclencher des événements selon un timing précis, donc le plus efficace est de prendre la main et de dérouler votre histoire / argumentaire comme chez Ketchup où le contenu est scénarisé.

Encore une fois, je ne critique pas la technique en elle-même, mais plutôt les implémentations hasardeuses (approximatives) qui en sont faites. Si vous avez d’autres exemples, n’hésitez pas à les mentionner dans les commentaires.