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

Avez-vous le nouveau site de Citroën ? Le moins que l’on puisse dire est qu’il y a eu comme une montée en gamme avec cette page d’accueil très sophistiquée :

La page d'accueil du nouveau site Citroën

L’univers graphique est étrangement proche de celui du site d’Axa et l’expérience est aussi déstabilisante que sur le site de la SNCF. Comprenez par là que dans une recherche d’image haut de gamme, ils confrontent les internautes à une parodie d’interfaces Apple (avec reflets et cover flow). Je ne suis pas contre le fait d’apporter de la sophistication aux interfaces web (sinon je ne rédigerais pas ce blog depuis plus de deux ans) mais cela doit se faire avec une certaine retenue pour ne pas trop alourdir la navigation et le parcours client. Le site de Ford Vehicles est ainsi un exemple car les pages sont très rapides à chargées et n’imposent pas aux internautes un temps de chargement trop long (ceci est réservé aux mini-sites).

Au niveau des pages intérieures, le raffinement est toujours de rigueur avec un showroom en 3D pour les véhicules (ici la C1) :

Le showroom 3D sur le nouveau site Citroën

Encore une fois même si la réalisation est exemplaire, il y a comme une impression de déjà vu : Fiat UK et Renault propose des showrooms 3D depuis plusieurs années.

Au final nous avons un très beau site qui aurait plus sa place sur des bornes interactives en concession que dans les navigateurs de Mr et Mme tout-le-monde. Loin de moi l’idée de vouloir comparer, mais le site de Peugeot est tout aussi qualitatif mais moins laborieux à parcourir, vous ne trouvez pas ?

Aviez-vous remarqué le carrousel du site Princess tam tam ? Il propose un défilement horizontal en simili 3D plutôt sympa car original sans trop perturber la lecture :

Le carrousel du site de Princesse tam tam

L’astuce est de courber le bas des visuels mais d’aligner le haut. La manipulation se fait de plus en douceur par ce qu’il est possible de faire défiler les visuels de trois façon différentes : avec les flèches sur les côtés de l’écran, avec les touches du clavier ou avec le minuscule curseur en bas de l’écran.

Notez qu’avec une grande sélection ce n’est pas très évident mais heureusement il y a une fonction de prévisualisation au survol de la souris :

La fonction de prévisualisation sur le carrousel du site de Princesse tam tam

Même si je pense que la mise en page n’aurait pas été bouleversée avec une barre de défilement plus haute, cet aperçu de la gamme fonctionne plutôt bien et s’intègre parfaitement à la mise en page épurée du site.

Après la grande vague des années 2000 (Boo.com, Celio…), j’ai comme l’impression que les boutiques en ligne 100% Flash font leur grand retour. Récemment se sont Converse et H&M qui s’y sont mit.

Commençons par le nouveau site de Converse (découvert chez le Capitaine Commerce) qui propose une expérience plus riche que son site satellite Converse Skateboarding. Il y a tout d’abord une page d’accueil avec un large carrousel (sobre sur le cœur de page mais chargée sur le fond et le header) :

La page d'accueil du site de Converse

Le plus intéressant est du côté des pages de liste avec un moteur de filtres très graphique :

La page de liste du site de Converse

Il y a ensuite des pages produit plutôt épurées mais avec un bon zoom :

Le zoom de la page produit du site de Converse

N’hésitez pas à faire un tour sur le configurateur (un grand classique) :

Le configurateur de Converse

Et pour finir il y a également une rubrique éditoriale avec du contenu audio (playlists) et vidéo :

Les contenus vidéo du site de Converse

Au final ils nous proposent une expérience très agréable avec une navigation intuitive, des produits bien mis en scène et surtout des URL lisibles à chaque écran (une bonne pratique).

Autre ambiance pour le nouveau site de H&M avec une mise en page flottante dès la page d’accueil :

La page d'accueil du site de H&M

Si vous cliquez sur l’image et que vous passer l’intro vous tombez alors sur une fonction étonnante, une sorte de navigateur 3D dans la nouvelle collection :

Le navigateur 3D de H&M

La navigation se fait à la souris et les produits défilent d’avant en arrière (de même que sur le côté) de façon anarchique. La manipulation de cette interface est compliquée car la souris réagit très mal (pas de support de la molette ou du clavier). Il y a également un moteur de filtre mais qui s’affiche de façon aléatoire.

Signalons également d’autres fonctionnalités comme le Style Guide qui fonctionne comme un magazine en ligne :

Le Style Guide de H&M

Dans la même série il y a aussi le Fashion Studio qui vous permet de composer votre look :

Composez votre look dans le Fashion Studio

Il y a enfin une rubrique éditoriale avec des interviews de stylistes et des reportages d’ambiance :

Les Fashion Video de H&M

Force est de constater que la forme l’emporte trop sur le fond. Comprenez par là que même si le contenu est intéressant, la mise en page flottante (menu, cœur de page…) et les fonds de page ne facilite pas le repérage et nuisent fortement à la lisibilité. J’aurais beaucoup de mal à défendre ce site car il semble sorti d’une autre époque, celle où l’on cherchait l’exploit technologique avant l’efficacité marchande ou la valorisation des produits. Bref, un contre-exemple.

Si vous n’êtes pas allez voir le nouveau site de la Camif alors je vous engage à le faire, ne serait-ce que pour le module d’essayage virtuel de matelas. Vous avez ainsi le choix entre 3 mannequins et 5 matelas :

Test du matelas en position assise

De petites séquences vidéo vous permette de tester ou de faire tester le matelas dans diverses positions et angles de vue :

Seconde vue pour la position assise

Vous pouvez aussi avoir des vues plus techniques comme le dessin de la colonne vertébrale dans la position allongée ou une animation 3D pour montrer l’intérieur du matelas :

La position allongée

Il y a enfin une vue en gros plan pour tâter l’épaisseur du matelas et apprécier le grain de la matière :

La vue rapprochée

Une réalisation sobre mais efficace au service du produit, rien à redire. Dommage qu’il n’y ai pas plus de produit en démonstration…

(merci à Julien pour le lien)

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.

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 ?

Vu chez Crate & Barrel ce panier en bas de page pour avoir une vision d’ensemble sur les produits ajoutés :

Le panier de bas de page chez Crate & Barrel

Comme l’emplacement n’est pas évident, une petite cinématique permet de mieux comprendre son fonctionnement : lorsque vous ajoutez un produit, la barre de bas de page flash en bleu et les produits déjà présent se poussent pour laisser de la place au nouveau produit.

Petit détail sympathique, la possibilité de modifier les quantités au survol de la souris :

Le changement de quantité du panier de Crate & Barrel

Un bon exemple de remis en question des “conventions” communément admises pour les boutiques en ligne avec un panier toujours en haut à droite.

(via I Love Web)

Avoir la possibilité de zoomer sur une photo est à mon sens une fonctionnalité essentielle à toute boutique en ligne, et plus particulièrement pour celles qui vendent des vêtements, sacs ou autres articles qui ont besoin d’être touchés pour être achetés. Avec un zoom performant il est ainsi possible de procurer une sensation proche du touché en permettant aux internautes d’observer le produit dans ses moindres détails et surtout de mieux appréhender la texture des matériaux.

C’est dans cette optique d’étude au microscope que je vous propose de découvrir ces quelques exemples de zooms assistés : Delve Into the Details with Guided Zoom. Le principe est de fournir aux internautes des points de détails à observer comme sur la boutique de Exofficio :

La page produit d'Exofficio

Un clic sur la photo et vous avez la fonction de zoom (propulsée par Scene7) et une série de vignettes sur le côté qui vous amènent directement sur les points d’intérêts avec un beau scrolling :

La fonction de zoom assisté chez Exofficio

Vous remarquerez que les vignettes changent aussi de couleur quand vous cliquez sur les vignettes en bas de page.

Autre exemple avec Telescope.com où les vignettes sont affichées en superposition de la fenêtre de visualisation directement dans la fiche produit :

Le zoom assisté chez Telescope.com

Cette seconde solution est peut-être un peu perturbante pour l’utilisateur car cela surcharge la page. Idéalement il faudrait faire apparaitre les vignettes au survol de la souris et proposer un bouton pour afficher le zoom dans une fenêtre à part.

Mise à jour (17/09/2009) : Laurent Jouanneau me précise que Zoomorama propose une fonctionnalité similaire sur le site de Darty (uniquement sur la gamme appareils photo reflex) :

Le zoom assisté chez Darty