Rich Commerce Tout savoir sur les interfaces riches appliquées au e-Commerce

Souvenez-vous, à l’ouverture de ce blog en début d’année dernière je vous avait parlé de Koodza, une boutique de la galaxie Decathlon qui expérimentait un certain nombre de fonctionnalités “riches” : Koodza, une boutique riche pour Decathlon. Et bien figurez-vous que l’exercice à dû être concluant car c’est maintenant le site principal Decathlon qui intègre toutes ces fonctionnalités, à commencer par un menu sur-dimensionné (”Choisissez votre sport”), un panier dépliant ainsi qu’une frise à catégories :

La page catégorie de Decathlon.fr

Mais il y a aussi de très belles pages liste avec des filtres à rafraichissements silencieux, des infos bulles géants (au survol de “+ d’infos”) et le choix de la vue :

La page liste de Decathlon.fr

Un site d’une sobriété exemplaire qui prouve que l’on peut tout à fait proposer des raffinements au niveau de l’interface quand on s’adresse à un large public. Oubliez donc vos histoire de “Est-ce que ma grand-mère saurait l’utiliser ?” et réfléchissez plutôt à ce que cela peut apporter en terme de confort d’usage.

Voilà près de 12 ans que je travaille dans le monde du web et 12 ans que j’entends parler des galeries marchandes en 3D, que se soient des solutions pour avatars en 3D, des portails de shopping avec des produits en 3D ou des magasins en 3D. J’ai toujours été très sceptique quand à l’intérêt de reproduire une galerie marchande en 3 dimensions car vous reproduisez par la même les contraintes physiques de gestion de l’espace, de merchandising. Et pourtant… certains y croient toujours à l’image d’Enjoy3D, une start-up qui développe une série de briques technologiques pour construire des galeries 3D. Ils proposent ainsi différents magasins-test en allant piocher dans le catalogue d’Amazon.

Premier exemple avec ce magasin de T-shirts :

Une boutique de T-shirts en 3D

Pas besoin de plug-in puisque le rendu 3D est assuré par la librairie Papervision3D et Flash. La navigation se fait au clavier ou à la souris. Les produits sont affichées dans des rayons et on accède à la fiche en s’approchant ou en cliquant dessus.

Deuxième exemple avec ce magasin de jouets :

Un magasin de jouets en 3D

Ce magasin propose en plus une navigation avec des “ancres” (pour vous déplacer rapidement d’un rayon à un autre) ainsi qu’un moteur de recherche.

Dernier exemple un peu plus sophistiqué (et exploitant une autre base de données) la galerie FlickR :

Galerie de photos en 3D

Les textures sont un peu plus travaillées, il y a un reflet sur le sol et on peut même apercevoir des nuages qui défilent au travers de la verrière.

Tout ceci n’est pas très concluant et mérite encore un peu de travail pour proposer des briques technologiques plus immersive. Chose surprenante : cette start-up est financée par le programme BizSpark de Microsoft. Donc c’est Microsoft qui paye pour développer des briques technologiques qui reposent sur Flash… Encore plus surprenant : la fiche d’Enjoy3D précise que leurs briques fonctionnent également avec Unity3D ou O3D, aucune mention de Silverlight !

(via Papervision Showcase)

Après le rachat de Zappos il y a quelques mois, Amazon se diversifie en Angleterre avec le lancement d’une boutique de chaussures et de sacs à main : Javari.co.uk. En fait il s’agit de la version européenisée du site japonais Jivari.jp (lancé en début d’année) qui est lui-même la version japonisée d’Endless.com, vous suivez ? Pour plus d’infos : Amazon Launches Javari Shoe Site in England and Japan.

Le nouveau site Jivari lancé par Amazon en Angleterre

Au niveau de la structure et du thème graphique nous sommes donc très TRÈS proche d’Endless :

La version originale US (Endless.com)

Mais qui s’en plaindra dans la mesure où ce site a fait ses preuves et que je vous encourage vivement à tester la très bonne interface de recherche (avec de nombreux filtres et des rafraichissements silencieux) :

L'interface de recherche de Jivari

Mais ce que je trouve particulièrement intéressant dans ce site est le souci d’éviter aux visiteurs le moindre clic. Illustration avec la fiche produit où il suffit de survoler les vignettes pour changer la couleur ou la vue et de survoler la photo pour activer le zoom automatique :

Moins de clics sur la fiche produit de Jivari

Pas de fioritures, juste ce qu’il faut d’interactivité sur les pages et une très grosse dose de réassurance font de cette boutique une référence en la matière. (Notez que l’on retrouve la même chose chez Sarenza)

Après de nombreuses années d’hésitation, Zara – la célèbre marque espagnole, se décide enfin à lancer sa boutique en ligne. Bon OK, à défaut de boutique marchande il s’agit plus d’un showroom un peu plus complet que dans la précédente version du site.

Nous avons donc  une page d’accueil avec une navigation à vignette verticale et une vidéo de fond de page (déjà vu ailleurs) :

La page d'accueil de Zara

Il y a ensuite le catalogue sous forme d’une frise horizontale (aucun intérêt) :

La page catalogue de Zara

De même que la collection, une sorte de défilé de vêtements sur portants (redites par rapport à la précédente section) :

La collection Zara

Puis nous avons le Look Book pour découvrir des ensembles (très bien mais où sont les accès aux produits ?) :

Le look book de Zara

Il y a aussi les pages “inspiration” avec des croquis à l’apparition scénarisée façon showreel (et alors ?) :

La page inspiration de Zara

Et c’est tout.

Un catalogue très pauvre avec une profondeur de gamme ridicule, très peu d’interactivité et des pages produit dramatiquement vides (ils auraient au moins pu repasser ce t-shirt) :

Une page produit de Zara

Avouez que c’est tout de même extrêmement décevant, non ? Dire que je suis déçu de cette boutique est un euphémisme. Nous avons ici le parfait exemple de ce qu’il ne faut pas faire : utiliser des technologies “riches” pour palier à un manque de contenu. Au vue du degré d’interaction du site, l’expérience utilisateur serait rigoureusement la même avec des pages HTML.

Pourtant ils ont l’exemple de Zara Home, une véritable boutique en ligne qui propose une très agréable expérience d’achat avec le bon niveau d’information et des pages HTML qui fonctionnent bien mieux.

La page produit de Zara Home

Vu dans la section “Femmes” du site JCPenney, un défilé vidéo avec les tendances de la rentrée (Runaway show) :

Le défilé vidéo de JCPenney

L’interface propose en haut de l’écran une frise avec les différents modèles répartis par catégorie. Le modèle défile devant vous et vous pouvez passez au suivant ou lui demander de tourner sur elle-même (toujours en vidéo). Il y a bien évidement sur le côté de l’écran les détails et liens pour acheter l’ensemble.

Vous avez aussi une vue d’ensemble avec des vignettes animées et un zoom au survol de la souris :

La vue d'ensemble des modèles

Et vous avez également la traditionnelle interview des stylistes sous forme de vidéo :

L'interview vidéo des stylistes

Rien de très spectaculaire dans ces fonctionnalités mais une très bonne réalisation, une bonne intégration dans le catalogue et les fonctions marchandes ainsi que des temps de chargement raisonnables. Que demander de plus ?