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

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

Je fais suite à un précédent billet sur les boutiques en ligne japonaises les plus folles pour vous présenter deux concept stores en ligne qui valent le détour.

Il y a tout d’abord Tutuanna, une boutique ne ligne très kawaï qui vend des t-shirts et sous-vêtements. L’interface se présente sous la forme d’une large mosaïque de produits avec des options de recherche visuelle réparties sur deux bandes latérales. Sur l’exemple ci-dessous, la recherche se fait sur des chaussettes et t-shirts bleus (les pictos sont “allumés”) :

La recherche visuelle chez Tutuanna

Il y a également la possibilité de filtrer les produits en fonction de motifs sur la bande latérale droite (ici uniquement les produits avec des rayures) :

Une autre recherche sur Tatuanna

Autant dire que l’ambiance japonisante de cette boutique (avec des coeurs partout et une musique façon manga) ne doit plaire qu’aux japonais, mais tout de même, il doit bien y avoir quelques idées à prendre.

Deuxième exemple beaucoup plus radical avec Qbic, une boutique d’objets d’art qui propose une interface de recherche visuelle sous forme de diagramme (une sorte de Yahoo! Pipes du e-commerce). Le principe est de raccorder des pictos (qui sont autant de filtres : par prix, artistes…) entre-eux afin de former une équation de recherche :

L'incroyable interface de recherche de Qbic

Chaque flux de recherche se termine par un mini-browser où l’on peut voir les résultats, les produits peuvent ensuite être ajoutés au panier (sur le bas de la page). S’il existe des contenus additionnels (ici l’interview de deux créateurs), une boîte supplémentaire est affichée et reliée au produit correspondant.

Bon OK c’est très certainement le moteur de recherche le plus complexe qu’il m’est été donné de voir ces 10 dernières années, mais l’expérience est saisissante. Bref, une très bonne façon pour se démarquer dans un marché visiblement ultra-compétitif.

(via Hebi flux)

Les advergames sont des supports très puissants pour attirer et concentrer l’attention d’un internaute. Il existe quantité d’exemples que vous pouvez trouver sur le blog Advergame.fr, mais deux campagnes récentes ont retenues mon attention.

Il y a tout d’abord le site de promotion du dernier album d’Eminem : The Relapse. Le principe de ce mini-site est de vous faire participer à une sorte de jeu d’aventure en parcourant différentes pièces :

La pièce d'entrée de The Relapse

Le site propose une interface très imerssive en 3D temps réel (la caméra bouge en fonction des mouvements de la souris). Il n’y a pas grand chose à faire dans cette aventure si ce n’est toucher à tout et parcourir les différentes pièces où l’on peut même croiser des PNJ (ici je pense que c’est censé être Slim Shady en plein délire) :

Mais qui est ce type sur le lit ?

Vous apprécierez l’ambiance très glauque (façon Silent Hill) qui colle bien avec les paroles de la chanson (qui tourne en boucle) :

C'est quoi ces traces de sang au sol ?

Outre la 3D, nous sommes bien en présence d’un jeu de style Point & Click, qui ont eu leur heure de gloire dans les années 80. Un dispositif très intéressant pour bien capter l’attention des internautes / joueurs. Plus d’exemples ici : Interactions, jeux, vidéo et 3D chez Coraline.

Et puisque l’on parle des Point & Clicks des années 80, comment ne pas évoquer la série Monkey Island qui a marqué nombre de joueurs… joueurs qui ont maintenant grandi, occupent des postes à responsabilité, pour certain dans l’informatique (en bon fans des jeux vidéo), et sont donc la cible idéale pour la campagne ServerQuest Games de Microsoft et sa dernière réalisation : ServerQuest II.

La page d'accueil de ServerQuest II

Tout est fait pour faire vibrer la corde de la nostalgie dans cette réalisation : les graphismes pixélisés, la musique, le gameplay… Au début de l’aventure, vous choisissez votre personnage (Matt ou Alicia), sa spécialité (hardware, base de données…) et vous débute votre journée :

Le premier chapitre du jeu

L’aventure est divisée en chapitres du quotidien où votre personnage doit accomplir différentes tâches en rapport ave sa spécialité (ici il faut récupérer des paquets de  données éparpillés) :

Exemple de mini-jeu dans ServerQuest II

Les jeux sont prétextes à mettre en valeur les produits de Microsoft, de même que les séquences entre les chapitres où les fonctionnalités des derniers produits de la marque sont présentées de façon ludique.

Bref, c’est subtil, très bien réalisé et surtout extrêmement bien ciblé. Un carton ! Vivement le troisième épisode…