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

Depuis le début de l’année Shisheido est en train d’expérimenter à Tokyo un dispositif de réalité augmentée pour tester du maquillage en quelques secondes. Ce dispositif utilise un miroir digital qui superpose une couche de maquillage virtuelle sur votre visage :

Les premiers retours sont visiblement positifs et les autres acteurs du marché ne veulent pas se laisser distancer. L’Oréal a donc décidé de se lancer à son tours (de même que Boots and Walmart) avec un kiosk proposé dès cet été en Angleterre : L’Oréal weighs up digital mirror kiosks.

La technologie utilisée est celle de EZface qui propose aussi une version web appelée Virtual Miror. Cette application vous permet d’uploader votre photo et d’appliquer dessus du maquillage de différentes marques :

Le maquillage virtuel d'EZface

Même si je n’apprécie pas du tout les choix graphiques de l’interface, cette application fonctionne plutôt bien et on s’amuse vite à expérimenter plusieurs sortes de poudres, blush, mascara, rouges à lèvres, eye-liner… Je retiens deux fonctionnalités particulièrement intéressantes : La réglette avant/après (sous la photo) et les Hot Looks qui permettent d’appliquer en 1 clic un maquillage complet en choisissant dans une liste de mannequins. Vous avez également la possibilité de sauvegarder, imprimer, envoyer et partager vos photos retouchées.

Cette application est disponible chez L’Oréal (en page d’accueil) avec une interface aux couleurs plus harmonieuses : Mon Maquillage Virtuel.

Maquillage virtuel chez L'Oréal

J’apprécie particulièrement la possibilité de voir le résultat sur une moitié de visage à l’aide de la réglette. (merci à Puche pour le lien).

(via Springwise)

Ce mois-ci Olympus nous sort le grand jeu pour faire la promotion de son tout nouvel appareil photo numérique (le E-PL1) avec une très belle application de réalité augmentée. L’idée est d’utiliser la webcam des internautes pour tester et manipuler l’appareil. Ici une vidéo de démonstration :

Le principe consiste donc à imprimer une petite carte avec un marqueur qui sera repérer par la webcam :

Une simple carte permet de simuler un appareil photo

Un plug-in se charge ensuite d’incruster l’appareil mais également de gérer les animations comme la sortie du flash, le changement de l’objectif (en cliquant sur les pastilles jaunes) :

La réalité augmentée en action chez Olympus

Encore plus fort : Il est également possible de prendre des photos (virtuelles) avec cet appareil (virtuel) et de les partager sur Facebook. De même, si vous retourner l’appareil, vous pouvez tester l’interface et ses menus.

Bref, une très belle réalisation propulsée par la technologie française de Total Immersion, Cocorico !

(via Virtual Worlds News)

Inutile de vous présenter l’iPad et de vous venter les vertus de la toute dernière machine d’Apple. Par contre je vous propose de vous intéresser à deux applications qui vous concernent directement puisqu’il s’agit des showrooms de deux marques bien connues.

Commençons par Gap qui a été la première marque à lancer une application marchande sur l’iPad : Gap makes shopping more social with iPad app. Dès la page d’accueil l’utilisateur est plongé dans une mosaïque de contenus dans laquelle il navigue avec le doigt :

La mosaïque de l'application iPad de GAP

Les contenus s’ouvrent dans une fenêtre qui se superpose à la mosaïque (ici une vidéo) :

Une vidéo sur l'application iPad de GAP

Il y a également une partie “boutique” avec des catégories (onglets en haut de page) et une mise en page minimaliste :

La galerie de produits de l'application iPad de GAP

En cliquant sur “Buy” vous pouvez choisir la taille et ajouter au panier :

L'ajout au panier de l'application iPad de GAP

L’application est très intuitive et surtout très réactive comme en témoigne cette vidéo trouvée sur ClickZ :

Dans le même esprit mais en mode portrait (vertical), il y a également l’application de La Redoute découverte chez Laurent : La Redoute lance son appli iPad. La page d’accueil de l’application est tout à fait surprenante car elle reprend les codes graphiques des magazines mais utilise une vidéo pour le mannequin :

La page d'accueil de l'application iPad de La Redoute

Nous retrouvons dans cette application un certain nombre de contenus comme la rubrique “Relooking” :

La rubrique Relooking de l'application iPad de La Redoute

La navigation au sein des contenus se fait avec une mosaïque (comme chez GAP) :

La mosaïque des contenus de l'application iPad de La Redoute

L’ensemble est tout à fait plaisant mais ne permet pas de commander directement dans l’application (il faut passer par le site) :

Tout ceci est très encourageant car nous commençons à voir fleurir un certain nombre d’applications oscillant entre commerce et showroom (comme par exemple celle de Cadillac). Au vue des premières expérimentations il est clair que le potentiel de ces applications est énorme (immersion, récurrence des visites…) mais qu’il va falloir être très prudent quand à l’ergonomie et la prise en main. D’ailleurs ce n’est pas un hasard si l’IAB a déjà commencé à se pencher sur la question avec sa dernière étude (Tabvertising: iPad and other tablets).

Comme dit le proverbe : “Tout vient à point à qui sait attendre“. Je ne sais pas si beaucoup d’internautes l’attendaient, mais Tati vient d’ouvrir sa boutique en ligne. Au programme : Une mise en page d’une grande sobriété et quelques raffinements d’interface qui viennent améliorer l’expérience sans toutefois faire dans le spectaculaire.

Nous avons ainsi une page d’accueil tout en sobriété qui a fait le choix de ne pas utiliser un carrousel comme éléments principal mais un visuel statique (ce sont les vignettes de la deuxième rangée qui sont mise à jour toutes les 3 secondes) :

La page d'accueil du site de Tati

En passant votre souris sur les intitulés de navigation vous avez accès à un menu XL comme on peut en voir ailleurs (cf. Navandising, le merchandising appliqué à la navigation) :

Le menu de navigation XL du site de Tati

Sur les pages de catégorie vous trouverez également un système de filtres avec rafraîchissements silencieux :

Le moteur de recherche par filtres du site de Tati

D’autres fonctionnalités vues ailleurs sont également proposées : Zoom automatiques, catalogues interactifs… Rien de très neuf, mais une implémentation parfaitement propre et sobre.

Donc comme vous l’aurez compris, nous sommes bien loin des fonctionnalités avancées comme les configurateurs 3D, les univers immersifs, les vidéos narratives… mais cette boutique n’en reste pas moins terriblement efficace (notamment grâce à des photos de très bonnes qualité). Finalement est-ce que ce n’est pas ça l’avenir du rich commerce : Des enrichissements sobres utilisés avec parcimonie, pas nécessairement pour rehausser l’expérience mais plutôt pour faciliter la navigation et la prise de décision. Un rich commerce raisonné en quelque sorte…

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…).