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

Comme démontré récemment dans une étude, les outils visuels (visite guidée, démonstrateurs, configurateurs…) sont fortement appréciés par les internautes et sont surtout synonymes de performance commerciale. C’est dans cette optique que JCPenney propose à ces clientes une fonctionnalités intéressante sur sa collection de maillots de bain : Mix & Match.

L’objectif est d’inspirer les internautes avec à la fois une présentation de la nouvelle collection (avec le Look Book) et la possibilité de visualiser différentes combinaisons de haut et bas :

Le configurateur visuel de maillots de bain chez JCPenney

Différentes combinaisons sont affichées (avec une emphase au centre) et les flèches servent à faire défiler les ensembles. Rien de très révolutionnaire mais une implémentation efficace et surtout bien intégrée avec les autres fonctionnalités du module et du catalogue. L’espace est très bien exploiter et les appels à l’action sont bien hiérarchisés (« View fit guide« , « Details & Buy« …). Je n’aurais pas forcément mis d’autres flèches sur le bord du module pour passer d’un style à un autre (car ça fait beaucoup de flèches sur les cotés) mais l’ensemble est sobre et parfaitement efficace.

C’est tout à fait le type de modules rich commerce qui peuvent booster votre taux de transformation sans toutefois nécessité trop de ressources.

(via Adobe Scene 7 Blog)

Ce n’est pas la première fois que je vous parle de Décathlon car c’est un site que j’aime beaucoup. Je vous propose ce soir de découvrir le nouvel espace Running qui bénéficie d’un traitement particulier notamment au niveau de la sonorisation de l’interface :

La page d'accueil de la section Running de Décathlon

Tous les éléments de l’interface sont associés à des retours sonores (blip, bloup, tic…) qui donnent du relief à cette page et permettent de rythmer la découverte de la page « à tâtons » (en baladant la souris sur l’écran). Il y a un côté très ludique dans cet écran qui me fait penser aux interfaces des jeux vidéo (qui font un usage systématique des retours sonores).

Cette section propose également un assistant au choix très sympa :

L'assistant au choix de Décathlon Running

Des réglettes permettent d’activer des filtres et de réduire la liste de résultats de produits. Simple mais bien réalisé car les boutons et tirettes ont un volume suffisant pour donner envie de les tripoter.

Notez que l’on retrouve le même interface dans l’espace Carpe (ou plutôt « pêche », non ?).

Ce soir je vous propose de (re)découvrir le site de Ferrari. Pourquoi ce site là ? Parce que malgré des produits qui ne demandent qu’à briller, la scuderia fait un usage très discret des interfaces riches. Illustration avec la page d’un modèle (la California) où l’on retrouve sur un même écran une visite guidée, beaucoup de texte et des images 100% statiques :

La page de présentation de la Ferrari California

La visite guidée fonctionne comme une vue à 360° chapitrée avec des zones réactive sur les points d’intérêt du modèle. L’intégration de ces différents éléments dans la page se fait de façon très naturelle et le tout fonctionne à merveille.

Signalons également un configurateur visuel très sobre mais diablement efficace (les différentes options comme les volants sont affichés en second plan) où il est même possible de choisir la couleur de bloc de frein :

Le configurateur sur le site de Ferrari

Signalons également un module très rigolo de présentation de l’évolution du design avec un timeline cliquable et un beau travail de morphing :

Evolution du design chez Ferrari

Enfin pour celles et ceux qui veulent quelque chose de plus immersif, il y a toujours le jeu Ferrari Virtual Race librement téléchargeable  (uniquement sur PC) :

Le jeu Virtual Race de Ferrari

Au final nous avons donc un site beaucoup moins tape-à-l’oeil que celui d’autres constructeurs comme Cadillac ou Jaguar mais qui propose un très subtil dosage de contenus statiques et riches.

Même si les usages de réalité augmentée sont encore embryonnaires, j’ai comme l’impression que cette tendances va prendre de plus en plus d’importance cette année : Réalité augmentée, la revanche de l’Europe sur le Mobile 2.0. Particulièrement impressionante sur mobile, elle trouve néanmoins sa place dans nos ordinateurs avec des applications marchandes tout à fait crédibles : E-commerce + réalité augmentée = Webcam Social Shopping.

S’il y a bien un secteur pour lequel il y a beaucoup de choses à faire, c’est bien l’ameublement, et tout particulièrement les boutiques en ligne de meubles. Difficile en effêt de se décider à commander un meuble en ligne sans pouvoir le toucher et en apprécier les proportions. Bon OK vous pourriez me dire qu’en boutique ça n’est pas forcément mieux puisque l’on ne sais pas comment il va réellement rendre une fois chez vous (il faut faire un gros effort d’imagination).

C’est là où rentre en scène la réalité augmentée avec la possibilité d’incruster des meubles dans une photo de votre intérieur. IKEA le propose déjà en Allemagne avec une application pour mobile (IKEA Uses Mobile Augmented Reality To Engage Shoppers’ Imagination), mais les français d’AchatDesign semblent avoir une longueur d’avance avec une application pour ordinateur : Visualisez nos meubles chez vous.

Le principe est très simple :

1. Vous posez un magazine sur le sol de votre pièce
2. Vous prenez votre pièce en photo
3. Vous envoyez cette photo sur le site en précisant où se situent les limites du magazine
4. Vous visualisez les meubles dans votre pièce avec la bonne proportion

En fait l’utilisation du magazine est cruciale pour avoir une représentation 3D fiable des meubles, elle permet de donner des indications sur l’angle de la prise de vue et surtout les proportions. Voilà ce que ça donne dans mon salon :

Un fauteuil virtuel devant ma bibliothèque

Une fois le meuble généré en 3D, vous pouvez le déplacer et le faire pivoter, ça fonctionne bien et l’application est rapide à mettre en oeuvre (moins d’une minute pour envoyer la photo, désigner les coins du magazine et commencer à jouer avec les meubles).

Idéalement il faudrait pouvoir directement uploader vos photos depuis votre téléphone portable (si vous n’avez pas d’appareil photo numérique avec une carte mémoire) de même qu’une couche sociale (partage de vos photos sur Facebook & cie) mais la fonctionnalité est tout de même très efficace en l’état.

Pour le moment la catalogue de meubles du marchand est encore restreint mais j’imagine le potentiel d’une telle application avec une enseigne multi-marques d’envergure (BHV ?) ou un portail regroupant les catalogues de différents marchands. Et pourquoi pas un opérateur en marque blanche qui apporterait la technologie et le service de modélisation 3D des meubles…

Vous avez forcément entendu parler de la Panamera, le nouveau modèle 4 places de Porsche. Je vous propose aujourd’hui de découvrir le mini-site qui va avec la voiture. Premières impressions : ce mini-site ne ressemble à aucun autre (un peu comme la voiture d’ailleurs). La page d’accueil propose ainsi un embranchement entre la découverte du modèle ou le magazine dédié :

La page d'accueil du site de la Panamera

En optant pour la découverte du modèle, vous arrivez sur un cube en 3D composés de couches de contenus :

L'accès aux contenus au travers des éditions en cube 3D

Le cube change de perspective selon les déplacements de la souris. Un clic sur une case vous permet d’en dévoiler le contenu (ici la vue à 360°) :

La vue à 360° de la Panamera

Vous avez également la possibilité de naviguer dans les contenus en fonction de leur lieu géographique (je ne vois pas trop l’intérêt) :

La vue géographique des contenus

De même, vous pouvez « vivre l’expérience » de la Panamera selon la chronologie de sa génèse :

La mosaïque chronologique de la Panamera

Il y a finalement la fameuse vue « Magazine » du début qui est assez proche de la mosaïque vu ci-dessus :

Le magazine en ligne de la Panamera

J’imagine qu’ils ont choisi un fond noir parce que ça fiat plus classe (ils manquent de finesse sur ce coup là).

Au final nous avons un site singulier qui favorise une découverte empirique des contenus. Empirique est ici un euphémisme pour décrire un mode de navigation complètement aléatoire où l’on saute d’un contenu à l’autre. Pourquoi pas… si le tout n’était pas si lent à charger.

Vous connaissez Dunlop ? Mais si enfin, la marque fétiche du suédois Björn Borg (ha non mince c’est Donnay). Bon bref, ils ont besoin de se refaire un image et pour cela, rien de tel que le buzz. OK, mais pour cela il faut de la matière première… et ils ont visiblement choisi de miser sur la Volley, une chaussure mythique des années 40. Il y a donc une campagne décalée savamment orchestrée (cf. Les Dunlop Volley sont-elles les chaussures les plus hype du monde ?) et surtout un site un peu loufoque pour assurer la promotion de cette chaussure de sport.

Nous avons donc un site expérimental où se mélangent pixel design et mise en page irrationnelle avec un prime un démonstrateur de chaussure :

Le démonstrateur de la Volley

L’idée étant de pouvoir choisir son fond d’écran, son pantalon, le modèle mais également la saleté de ce dernier (j’espère que c’est de la terre battue) :

Choisissez le niveau de saleté de votre chaussure

Et comme ils sont joueurs ils proposent également des choix décalés comme cette patte de squelette sur fond d’usine à déchets :

La classe !

Il y a en prime un autre démonstrateur mais pour le laçage :

Le démonstrateur de laçage de la Volley

Voilà, précisons qu’il s’agit du site australien de la marque. Un site sans trop de prétentions mais un bon moment à passer pour interagir avec cette chaussure mythique (je me demande si je ne vais pas me laisser tenter…).

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)

Oyé oyé braves gens, Uniqlo – la célèbre marque japonaise fashion à petits prix – lance une offensive sur notre hexagone : Uniqlo débarque en France. Non content de finaliser l’ouverture d’un super-store en plein cœur de Paris, ils nous gratifient d’un très beau site web : uniqlo.com/fr.

Le site donne le ton avec une page d’accueil au format mosaïque :

La page d'accueil d'Uniqlo

Ils proposent une page très originale d’introduction à la marque et aux produits sous forme d’une image page déroulante :

La page d'introduction à Uniqlo

Il y a ensuite la page des collections avec sa galerie de modèles :

La page des collections d'Uniqlo

Et même s’il n’y a pas (encore) de fonctionnalités marchandes, j’apprécie particulièrement l’Explorateur :

L'explorateur de produits d'Uniqlo

Mais il y a également une mini-boutique dédiée aux T-shirts (Uniqlo UT) ainsi que son interface exploratrice (UT Zoom) :

La mini-boutique de T-shirts d'Uniqlo

Signalons enfin le très beau calendrier animé avec ses musiques cheap et ses films en tilt-shift :

Le calendrier d'Uniqlo

Non seulement ce calendrier vous renseigne sur le temps (possibilité d’en faire votre économiseur d’écran) mais il vous permet également de découvrir la collection :

La collection au sein du calendrier Uniqlo

Bref, c’est une incroyable immersion dans l’univers coloré et trendy de la marque et un concentré de bonnes pratiques.

Puma s’apprête à lancer une nouvelle ligne de sous-vêtements et pour faire parler d’elle, la marque au félin a décidé de miser sur le charme pour promouvoir ses produits. Ils lancent donc le Puma Index (pas encore ouvert), un site où les mannequins se déshabillent en fonction des indices boursiers :

Une campagne qui repose avant tout sur des séquences vidéo et de jolies filles :

L'index de Puma en action

Il y a en tout 3 filles pour 3 indices (Dow-Jones, Dax et S&P/ASX 200) :

Les 3 indices du Puma Index

Et ils ont même prévu une version iPhone avec en prime un modèle mâle :

La version iPhone du Puma Index

Cerise sur le gâteau : montrez votre application iPhone à un vendeur et vous bénéficierez d’une réduction de 20%.

Redoutable.

(via Amnesia)

La réalité est décidément une thématique à la mode. De nombreux constructeurs automobile ont ainsi eu recours à ce procédé pour donner une seconde vie aux brochures (Citroën, BMW, Toyot, Mini…), de même que certaines boutiques en ligne de vente de lunettes comme YouAreTheModel dont nous avions déjà parlé dans un précédent billet.

Nous n’en sommes encore qu’au tout début mais la généralisation des webcams semble ouvrir la voie à de nombreuses expérimentations dont la dernière en date est particulièrement innovante : Zugara Launches Online Shopping App Utilizing Augmented Reality And Motion Capture.

Le principe est simple :

1. Vous imprimez le petit logo
2. Vous vous mettez devant votre webcam
3. Le système superpose la photo d’un vêtement sur votre image

Dans les faits ça ressemble à ça :

Essayage en ligne grâce à Zagura

Là où ça devient très intéressant c’est que vous pouvez changer de couleur ou de modèle ou utilisant les pictos grâce au principe de motion capture :

Changez de modèles avec le motion capture

Une fois que vous avez trouvé le bon ensemble, vous pouvez vous prendre en photo (puis la partager avec vos amis sur Facebook) ou ajouter le tout au panier. Démonstration avec cette vidéo :

Le rendu n’est pas exceptionnel (loin de là) mais l’idée est suffisamment bonne pour que l’on y réfléchisse à deux fois. J’imagine que ce dispositif couplé à des communautés d’acheteurs comme Polyvore ou des communautés d’avatars « trendy » comme Frenzoo (cf. ) pourrait donner tout son potentiel.

Même si cela peut vous sembler un peu farfelu pour du commerce en ligne (rien ne vaut au bon vieux zoom ou une vue à 360°), la réalité augmentée est en passe de devenir LE phénomène de l’année 2009. Attendez-vous ainsi à un véritable raz-de-marée pour Noël (cf. Mattel’s New Web-Enabled « Avatar » Toys Will Offer Augmented Reality).