L’effet Parallaxe dans l’univers du luxe ?

En surfant sur internet, j’ai découvert récemment l’effet « Parallaxe » (ou Parallax), utilisé sur certains sites internet. Et je me suis demandée si cela serait intéressant de l’utiliser pour les sites des marques de luxe.

Qu’est-ce que l’effet Parallaxe ?

Il s’agit d’une technique qui permet de donner l’illusion que les différents éléments graphiques d’une page web réagissent aux mouvements de la souris ou au scroll. On a alors l’impression que les images bougent. Cela permet de donner un effet de profondeur aux image permettant ainsi de mettre en avant certains éléments. Lorsqu’il est bien utilisé, celui-ci peut apporter une expérience utilisateur riche.

Quelques exemples de sites utilisant le parallaxe

Mercedes

C’est en me baladant sur ce site que j’ai découvert pour la première fois cette technique, un peu déroutante au début je l’avoue.

Ainsi, sur le mini-site de la nouvelle Classe A, vous serez invités à vous « balader » dans une rue…pour le moins déserte ! A chaque scroll de la souris, vous avancerez et découvrirez les photos, vidéos et autres informations utiles concernant la voiture. Et pour ceux qui ont du mal avec cet effet parallaxe, vous aurez toujours la possibilité d’afficher le menu à droite pour accéder directement au contenu.

Mercedes Classe A

Je trouve néanmoins que la qualité d’image reste mauvaise au fur et à mesure du défilement (il faut attendre que l’image se charge complètement). C’est un peu dommage à mon avis. Je n’ai malheureusement pas d’iPad pour tester l’application et vivre une « expérience extra-ordinaire »…donc chers possesseurs d’iPad, n’hésitez pas à nous en faire part dans les commentaires ! 🙂

Pour visiter le site de Mercedes, cliquez ici !

Volkswagen

Je reste dans l’univers des voitures avec Volkswagen, qui a créé un mini-site pour nous faire découvrir sa toute nouvelle voiture : la « Beetle », une réincarnation de sa voiture phare !

Là encore, il suffit de scroller pour découvrir toutes les facettes de cette nouvelle voiture (performances, intérieur/extérieur…). On la voit évoluer dans différents univers. On peut même changer le décors si on le souhaite. N’oubliez pas non plus de cliquer sur les éléments parfois « cachés » sur les côtés.

Volkswagen Beetle

Ce que j’aime ici, c’est la diversité des informations présentées et la manière dont elles sont présentées. A la fois, la marque automobile nous rappelle d’où elle vient, mais elle nous montre aussi qu’elle est avant tout une marque moderne, innovante…et fun ! Elle n’oublie pas non plus de nous présenter sa plateforme musicale Veenue (le saviez-vous ?) qui permet aux artistes du monde entier de collaborer à distance. Voici une petite vidéo explicative.

Ce que j’aime le moins, c’est là encore le graphisme/les images qui ne sont pas parfaits à mon goût. On constate que fréquemment, les images « buguent »  et se superposent. La navigation manque de fluidité. Je pense que la variété des tailles d’écran (ordinateur, mobile, tablettes…) apporte beaucoup de contraintes dans la mise en place de cette technologie.

Volkswagen Beetle

Pour tester le site, c’est ici !

Harrods

C’est la première fois que j’ai l’occasion de parler d’Harrods sur E-Luxe et j’en suis ravie car je pars dans quelques jours à Londres et je vais certainement passer dans le coin ! 😉

Harrods a récemment refondu son site pour présenter les différents univers de son e-commerce en utilisant le parallaxe. Le grand magasin a pour l’occasion déployé une grande campagne visuelle autour de l’univers de la gastronomie. Ainsi, dès la homepage, on peut scroller pour découvrir une image « culinaire » se référant aux différentes sections du site.

Harrods

L’effet est ici un peu plus simple que sur les sites de Mercedes et Volkswagen (moins d’éléments en jeu) mais cela rend la navigation plus agréable. Et pour ceux qui sont réticents à utiliser cette technogie, vous avez toujours la possibilité d’accéder au contenu de manière plus « traditionnelle ».

Pour tester le site, c’est ici !

Digital Hands

Je sors de l’univers du luxe/haut de gamme pour vous présenter un site qui utilise très bien l’effet parallaxe. Ici, on ne scrolle pas. Ce sont les mouvements de la souris qui font bouger les images. Cela reste simple mais efficace. Je pense qu’il pourrait être intéressant de développer ce genre d’effet pour présenter un produit sur internet. Je vous laisse tester ici !

Digital Hands

Conclusion

Je pense que cette technologie est particulièrement intéressante pour mettre en avant un élément dans une image (par exemple pour vendre un produit). Néanmoins, il faut que le graphisme et la résolution d’image soient parfaits pour avoir l’effet escompté, sinon, la navigation devient vite désagréable. A mon avis, il vaut mieux rester simple dans l’utilisation du parallaxe. Enfin, dernier inconvénient, plus technique cette fois : l’effet parallaxe est souvent réalisé sous la technologie flash qui génère des difficultés d’accessibilité (affichage) et de référencement. Néanmoins, L’HTML 5 peut résoudre en partie ces inconvénients.