Netflix Stranger Things : un shop à optimiser de la home au panier

Introduction et pop-up intrusif

Pourquoi j’ai voulu analyser ce site ? Parce que je voulais savoir si le site de Netflix pour acheter les produits dérivés était aussi pourri que la dernière saison de Stranger Things, qui est un scandale international. Bravo, Netflix, c’est ce qu’on appelle l’effet démo. On va aller voir si le site est aussi pourri. Et je n’ai pas été déçu, les amis, je vais vous montrer ça tout de suite.

Il y a plein de choses qui ne vont pas. Déjà, on va commencer par un premier point sur le pop-up, ce pop-up intrusif que je me suis pris dans la tronche en arrivant sur le site. Aujourd’hui, je ne comprends pas pourquoi les sites continuent à faire des pop-up comme ça, ça ne sert absolument à rien. L’utilisateur est habitué à fermer ses pop-up, il a le réflexe de le faire. Faites le test vous-même : allez sur des sites de e-commerce et vous allez voir que dès qu’il y a un pop-up qui apparaît, vous le fermez direct. Le but, c’est d’aller tout de suite le plus vite possible à l’essentiel, donc on s’en fout de ces pop-up là.

C’est dommage, parce que c’est un pop-up qui offre 15 % contre un e-mail, ce qui permet de faire du nurturing derrière, mais tout le monde doit le fermer. Généralement, ce genre de pop-up, c’est bien de l’amener un peu plus tard dans le parcours. Par exemple, après avoir parcouru plusieurs pages ou au bout de 30 secondes de navigation. Il y a même d’autres scénarios : on peut l’afficher seulement à un certain type d’utilisateur au bout d’un certain temps. Donc là, ce pop-up ne sert à rien, c’est bien dommage.

La home : dark mode et couleurs

Alors, ensuite, la home du shop. Je suis complètement choqué par cette home, je vais vous expliquer pourquoi. Déjà, il y a un premier truc, ce sont les couleurs utilisées par le site. Vous allez me dire : « Oui, mais ce sont les couleurs de Netflix. » Mais ce que vous voyez, c’est ce qu’on appelle le dark mode, c’est-à-dire avoir du noir dans les sections en background. En fait, ça ne se fait plus. Ça marchait il y a 5 à 10 ans. Il y avait des sites comme celui d’Apple qui le faisaient, le site d’Apple était en full dark mode, mais ils se sont rendu compte que ça ne fonctionnait pas en termes de lisibilité et d’ergonomie de conversion.

Il y a des tests qui ont été effectués là-dessus, et ces tests montrent que ça ne fonctionne pas, ce qui est vraiment dommage. Je sais que Netflix veut appuyer sur sa marque, mais Netflix n’a pas besoin de faire de la notoriété, parce qu’ils sont déjà très forts au niveau du branding. Ils auraient pu faire un site en full white. Pourquoi ? Parce que ça permet de faire ressortir beaucoup plus les images et les textes, donc c’est plus efficace. Ou alors ils auraient pu faire une alternance de noir et de blanc, certaines sections en noir et d’autres en blanc.

Mais malheureusement, c’est quelque chose qui ne se fait plus, et c’est dommage qu’ils n’aient pas fait un test là-dessus pour se rendre compte qu’en fait ça marche beaucoup moins bien. Donc ça, c’était un premier point.

Taux de scroll, hero trop haute et ordre des sections

Le deuxième point que je voulais dire, et qui est vraiment le plus important, c’est le taux de scroll sur la page. Aujourd’hui, le scroll n’est pas du tout optimisé sur la home de Netflix. Ce qu’il faut savoir, c’est que généralement les visiteurs sur mobile scrollent maintenant l’équivalent de trois écrans maximum, pas plus. Je vais faire l’exercice avec vous : 1, 2, 3 écrans. Voilà, en gros on s’arrête ici. Tout ce qui est en dessous ne sert à rien, les utilisateurs ne le voient pas.

Aujourd’hui, Netflix propose déjà une hero section qui prend énormément de place, donc on perd énormément en scroll sur cette section, et le reste est quasiment peu vu. C’est vraiment dommage. Les shops n’arrivent pas à se rentrer dans le crâne qu’aujourd’hui il faut des homes plus courtes, avec des sections plus courtes, pour que le visiteur voie tout de suite les différentes sections importantes.

Ce qui me choque aussi, c’est l’ordre des sections sur la home. J’arrive sur le site de Netflix, OK, j’ai les produits de Stranger Things qui sont mis en avant, et je vais avoir quelques produits, mais je n’ai pas les autres licences, comme KPop Demon Hunters, ou d’autres séries comme Emily in Paris, peut-être, qui pourraient vendre du produit. Ces séries, on ne les voit pas. Le problème avec leur page, c’est qu’ils ne mettent pas en avant les collections principales du shop ni les produits les plus achetés.

Il faut vraiment que sur un e-commerce, surtout pour un e-commerce comme Netflix où les utilisateurs connaissent la marque et connaissent les produits, on ait envie d’arriver sur le site et de trouver le plus rapidement possible les produits qui nous correspondent. Là, ça va être une vraie galère, une vraie tannée pour les utilisateurs de trouver le produit qui leur correspond. Quelles franchises sont proposées, quel type de produits sont proposés, quels sont les best-sellers ? Il n’y a rien de tout ça qui remonte.

Un peu plus bas dans la page, on a des sections qui sont intéressantes, je crois, les « shop by title ». Là, elle ne marche pas très bien, je ne sais pas pourquoi. Normalement, sur ces sections, on peut acheter par collection et par type de franchise. Il y a un bug, c’est un peu dommage. C’est ce genre de section qu’il faut un peu plus haut dans la page : les collections principales du site, par type de franchise. Je ne sais pas ce qui se passe là. Bravo Netflix, c’est ce qu’on appelle l’effet démo.

Et puis il y a les best-sellers. Cette section est assez intéressante, même si niveau lisibilité elle n’est pas top : on a du rouge sur rouge, ce n’est pas très lisible. Il aurait fallu avoir une première section où ils mettent en avant les produits Stranger Things, parce que c’est la série du moment, mais avec une section beaucoup plus courte. Ensuite, les best-sellers du shop ou les best-sellers Stranger Things, et tout de suite après les collections principales, ou inversement. Mais il faut vraiment guider l’utilisateur le plus possible, et c’est quelque chose que la home rate complètement. Donc c’est vraiment dommage.

La page collection : scroll, filtres, tri et pagination

Alors, la page collection : il y a plein de trucs qui ne vont pas. Déjà, comme je vous disais, il faut optimiser le taux de scroll, et là on perd énormément en taux de scroll : on a cette première section qui prend beaucoup de place, et donc il y a moins de place pour les produits. Ça, c’est vraiment dommage. Il y a des petits détails qui sont un peu dommages. Par exemple, les filtres : le « trier par », j’ai eu du mal à le trouver, et je pense que les visiteurs ont du mal à le trouver aussi. Il faudrait le sortir des filtres et qu’on le retrouve dehors, ici sur la droite, avec vraiment une partie filtres et une partie « trier par ». Là, c’est difficile à trouver, il est un peu paumé.

En plus, les filtres ne sont pas en sticky. Moi, je suis ici, je veux retrouver les filtres : il faut que je remonte tout en haut de la page. Ça, c’est vraiment dommage. Sachant que, encore une fois, sur ce shop il y a un problème de guidance, comme on l’a vu sur la home. Ici, vous voyez, leur e-merchandising, donc la façon dont ils présentent les produits sur les pages collection, n’est pas optimal. On n’a pas les produits les plus intéressants au début. Moi, j’arrive, je cherche des produits Stranger Things, je ne sais pas du tout quoi acheter. J’ai plein de produits, je n’ai pas les produits les plus vendus, je n’ai pas les collections principales qui remontent.

Il y a plusieurs choses à faire. Déjà, avoir les filtres en sticky, comme je disais : ils restent collés à l’écran. Il faudrait aussi avoir potentiellement les best-sellers qui montent en premier. Comme ça, tout de suite je vois les best-sellers, et si ce sont des best-sellers, ce sont des produits plus achetés, donc a priori ce sont ceux qui vont m’intéresser. Ça peut être malin. Et pourquoi pas avoir ici une section avec des petites bulles qui montrent les catégories principales de Stranger Things : par exemple les t-shirts, les hoodies, les casquettes et cetera. Ça m’aiderait à aller plus rapidement vers un type de produit qui me plaît.

Petit détail aussi, ici, au niveau de la pagination. Généralement, ce genre de pagination ne marche pas très bien. En A/B test, c’est plutôt un infinite scroll qui va marcher, ou alors un infinite scroll avec le nombre de produits restants. Une pagination comme ça, où je vois 23 pages, du coup ça me fait peur : j’ai ce qu’on appelle la paralysie du choix. Je ne sais plus quel est le terme en anglais, c’est le choice paralysis ou quelque chose comme ça. En gros, on voit qu’il y a beaucoup de pages, donc on est un peu freiné, on a un peu peur de tout ce choix et du coup on est un peu paralysé. Ça, pareil, ce n’est pas optimal.

Donc sur la page catégorie, on n’est vraiment pas au top, et c’est dommage, même au niveau des filtres. Je crois qu’il n’y en a pas par taille ou par couleur : là, j’ai « product type », ce n’est pas mal, mais je n’ai pas de filtre par taille ni par couleur. Ça, c’est dommage aussi. « Style », c’est intéressant. « Title », c’est la franchise, je m’en fiche parce que c’est Stranger Things, uniquement les produits Stranger Things. On voit qu’ils utilisent des filtres un peu template sur toutes leurs pages collection, et c’est un peu dommage.

La page produit : galerie, avis et guide des tailles

Alors, les pages produit ne sont pas trop mal, mais il y a quand même des trucs à optimiser. Je ne peux pas cliquer sur l’image pour zoomer dessus et apprécier un peu la qualité du tissu. Ce n’est pas possible. Et pareil, la première section d’une page produit, la hero section, est vraiment la section la plus importante. Quand on fait des sessions de test et qu’on analyse un peu les comportements utilisateurs sur ces pages, on voit que toute l’activité des visiteurs se concentre sur cette section, et beaucoup sur l’image. Il faut donc vraiment que cette partie soit impeccable.

Quand j’arrive sur la page, j’ai déjà les petites vignettes qui apparaissent, mais ce n’est pas très lisible : on ne voit pas qu’on peut scroller sur le côté, et je pense que tout le monde ne le fait pas. Ici, il faudrait pouvoir cliquer sur l’image et qu’une visionneuse apparaisse pour qu’on puisse zoomer sur l’image et apprécier les détails du produit. Il y a tout un travail à faire sur cette partie qui n’est pas fait. Donc c’est ni fait ni à faire. Carton rouge, Netflix.

Ici, ce n’est pas trop mal. Ce qui est dommage, c’est qu’il y a déjà des avis à zéro. Principe de base : quand il n’y a pas d’avis sur une page produit, on évite d’afficher ces petites étoiles, parce que du coup on se dit que s’il y a zéro avis, personne n’achète le produit. Je ne vais pas être le premier bolosse à acheter ce produit. C’est vraiment dommage qu’ils l’affichent. Il faudrait ne pas l’afficher et mettre une règle comme quoi on l’affiche à partir du moment où il y a, je ne sais pas, 10 avis ou 15 avis par exemple.

Ici, le size guide n’est pas très lisible, alors que le guide des tailles est hyper important pour ce type d’e-commerce qui vend des vêtements. Je sais que c’est une très grosse problématique pour les vendeurs de vêtements de se retrouver avec beaucoup de retours produit parce que la taille ne va pas. Là-dessus, c’est vraiment dommage. Du coup, il faudrait le faire ressortir un peu plus, avec une couleur peut-être un peu plus prononcée, peut-être avec un contour blanc. Ce guide en blanc, je ne sais pas, mais il faudrait qu’on le voie un peu plus.

Livraison, bundle et bouton d’ajout au panier

Ici, après, sur le reste, ce sont des petits détails. Par exemple, pour la livraison, c’est bien qu’ils mettent la date de livraison estimée. En revanche, ils parlent de « shipping calculated at checkout », donc de coûts de livraison qui sont calculés au checkout. Ça, carton rouge. Ce n’est pas possible aujourd’hui de ne pas mettre d’informations de paiement et de livraison, de ne pas mettre d’infos sur le prix de la livraison. Moi, j’aurais bien aimé, en cliquant sur « shipping », tomber sur un pop-up qui m’affiche les prix de la livraison. Mais non, là je bascule carrément sur une autre page. Donc là, clairement, ce n’est pas possible.

Je pense que […], mais j’imagine qu’ici il y a une grosse fuite des utilisateurs à ce niveau-là, parce que j’arrive sur cette page et du coup je ne vais pas forcément revenir en arrière. Je suis sur mon téléphone, c’est galère. Donc là, c’est dommage : il faudrait qu’en cliquant sur ce petit lien, on ait un pop-up qui affiche les prix estimés de la livraison en fonction de là où on se trouve. C’est hyper important, parce que le coût de la livraison, ou le fait de manquer d’information sur la livraison, c’est un des plus gros pain points généralement relevés par les utilisateurs dans les abandons de panier. C’est vraiment la livraison qui pose problème, son prix et le manque d’information dessus. Il faut donc vraiment que, dès la page produit, on mette un maximum d’infos.

Et puis après, il y avait un truc que je ne comprenais pas trop, au niveau du prix. J’ai un prix à 32,95 sur ce produit, et je retrouve ce prix dans le bundle kit. C’est une section qui propose un bundle. Normalement, on a un prix sur un bundle, mais là, du coup, j’ai trois produits avec le même prix que le produit de base. Je n’ai donc pas de prix avantageux si j’achète ces trois produits. Ça, c’est un peu dommage.

Voilà. Sinon, sur le reste, il y a aussi cette petite flèche sur le sticky add to cart : on ne comprend pas trop ce que c’est, et pourtant c’est important, ça affiche les tailles. C’est la sélection de la taille avant d’ajouter le produit à son panier. Ça ne respecte pas trop les standards UX : il aurait fallu avoir la flèche peut-être inversée, ou alors pas de flèche, et en cliquant sur « Add to cart », je suis renvoyé vers cette section et là je dois choisir ma taille.

Panier, upsell et bilan

Je crois que je voulais vous montrer un dernier truc, c’est sur l’add to cart. Ici, c’est dommage, je n’ai pas d’upsell, ça pourrait être intéressant. Je n’ai pas de barre de progression m’indiquant que je peux avoir la livraison gratuite à partir de tant, ce qui permettrait d’augmenter le panier moyen. Ici, j’ai encore l’information comme quoi la livraison sera calculée plus tard. Ça, c’est un gros pain point pour moi, parce que du coup là je n’ai aucune idée de la sauce à laquelle je vais être mangé. Je ne sais pas ce que je vais payer pour la livraison, donc du coup je quitte le site. Et là, le subtotal appuie un peu cet argument : ça montre que je n’ai pas encore tout le montant de mon panier d’affiché, et ça peut freiner.

Voilà, les amis, je pense que j’ai remonté un peu tous les problèmes qu’il y avait. C’est vraiment dommage, parce que le shop en soi a une bonne base, mais il y a plein de petits trucs à optimiser. C’est quand même Netflix, ils pourraient optimiser leur shop sur plein de petits détails comme ça. En plus, je vois qu’ils ne font pas d’A/B testing, et ça, carton rouge. Ce n’est pas possible, pour ce genre de site avec plusieurs centaines de milliers, voire millions, d’utilisateurs par mois, de ne pas avoir d’A/B test qui tourne régulièrement sur le site. Donc ça, c’est vraiment dommage.