RichCommerce.fr Tout savoir sur les interfaces riches appliquées au e-Commerce

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

Aviez-vous remarqué que pour certaines activités, les sites et boutiques en ligne proposent toutes des fonctionnalités « standards ». Dans l’automobile par exemple vous retrouvez presque systématiquement une vue à 360° et un teintier. Dans les boutiques de fringues c’est à peu près la même chose, surtout pour celles qui vendent des jeans : on retrouve toujours un « Fit Guide » pour aider le client à choisir la forme de son jean.

Illustration chez Gap avec le module Fit Spotlight qui aligne une série de modèles (H/F) animés :

L'assistant au choix de jean de Gap

Lorsque vous passez la souris sur un modèle, celui-ci s’avance :

L'assistant au choix de jean de Gap avec un zoom sur un modèle

En cliquant sur ce modèle, vous avez accès à une vidéo explicative du designeur (il explique le pourquoi du comment) ainsi qu’une vue à 360° avec des points d’intérêt :

La vue détaillée d'un modèle de jean chez Gap

Vous avez aussi un moteur d’inspiration avec 3 déclinaisons possibles par modèles et une belle séquence animée :

Le moteur d'inspiration de Gap

Vous pouvez trouver à peut près la même chose chez 77kids (American Eagle) mais en moins sophistiqué :

L'assistant au choix de jean chez 77kids

J’ai une préférence pour l’assistant de Gap car il propose plus de contenus mais les deux fonctionnent bien. Avez-vous d’autres exemples ?

Les chaussures de sport ont toujours été un enjeu de taille pour les jeunes en quête d’appartenance identitaire ou de reconnaissance sociale, mais également pour les marques en quêtes de… de pognon en fait ! Bon bref, tout ça pour dire que les marques rivalisent de créativité pour séduire une clientèle sur-sollicité. Contrairement à l’univers graphique très « destroy » et urbain du skate, les sites web des différentes marques sont plutôt sobres (à l’image d’Airwalk ou de Nike Skateboarding) avec une part très importante accordée aux vidéos (principal médium de la skate / surf  /snow culture).

Mais la palme de la sobriété revient à Converse Skateboarding avec un site à la limite de l’austérité. Sur la page d’accueil on ne trouve qu’une immense photo d’ambiance (toute floue), quelques liens et un logo en bas à gauche :

La page d'accueil de Converse Skateboarding

L’intérieur du site n’est pas en reste avec une structure extrêmement légère et de belles transitions. La boutique est elle aussi très minimaliste :

La page produit sur Converse Skateboarding

Il y a également un peu de contenus multimédia dans la partie Ambassadors (textes, photos et vidéos). Vous noterez au passage l’effort pour épurer au maximum le player vidéo :

Le player vidéo minimaliste de Converse Sketeboarding

Nous avons donc au final un site à la sobriété extrême faisant un usage très subtil des interfaces riches (transitions…) mais qui procure une expérience très relaxante et surtout apaisante (ça fait du bien autant de blanc sur la page).

Sinon il y a des choses plus fournies sur Converse.com avec du contenu un peu plus « destroy » et même un configurateur de chaussure :

La page d'accueil de Converse

Et tant qu’on y est, n’hésitez pas à faire un tour sur Skate Like a Punk, la campagne virale en cours (avec une vidéo très réussie).

J’ai déjà eu l’occasion de vous parler de différents moteurs pour faire des zooms ultra-puissants, mais il s’agit avant tout de fonctions de zooms sur des photos, pas sur des documents. C’est donc sur ce créneau que se positionne Zoomorama. Cet acteur français propose ainsi une solution de publication et de partage mais surtout une solution orientée e-commerce : Zoomorama Pro.

L’idée est donc de proposer un moteur de zoom ultra-puissant mélangée à une fonction de catalogue électronique. Illustration avec ce test sur un catalogue Louis Vuitton :

Zoomorama en action sur ce produit Louis Vuitton

Le rendu est très propre, le fonctionnement intuitif et c’est plutôt rapide à charger. Autre exemple avec e-Tiquities, la référence des boutiques en ligne d’objets d’antiquité : World’s Leading Antiquities e-Commerce Store Launches with Zoomorama.

Zoomorama en action chez e-Tiquities

Voici donc un concurrent pour Microsoft et sa technologie Seadragon que l’on retrouve dans le module Deep Zoom de Silverlight. Pour ceux qui souhaitent avoir des infos techniques plus détaillées, Zoomorama fonctionne avec Flash mais avec des spécificités qui m’échappent : La technologie Zoomorama.