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

La nouvelle est tombée la semaine dernière sans prévenir : Autoreduc, le site d’achat groupé de véhicules, va proposer un showroom virtuel  (Une concession automobile multi-marques en 3D interactif, enfin !). Intrigué par cette annonce, je décide faire un tour sur ce site, mais la promesse est loin d’être tenue. À défaut de showroom virtuel, la page d’accueil propose un lien très discret sous certains modèles pour « découvrir la voiture sous tous les angles« .

La page d'accueil d'Autoreduc

Effectivement, le site propose alors une interface de visualisation permettant d’accéder à une vue extérieure à 360°, un teintier et la possibilité de zoomer sur certains détails du véhicule :

La vue extérieure à 360° chez Autoreduc

Vous avez également accès à une vue intérieure, toujours en 360° :

La vue intérieure à 360° d'Autoreduc

Les prises de vue sont de qualité, le temps de chargement est plus qu’acceptable, l’interface réagit bien. Donc de ce côté-là il n’y a pas de problème, car le véhicule est très bien mis en valeur. Par contre, la promesse d’un showroom virtuel en 3D n’est pas du tout tenue, car il est surtout question d’une vue à 360° à l’aide d’une vingtaine de clichés. L’interface est donc tout à fait agréable, mais l’annonce est plus que décevante. D’autant plus que les showrooms virtuels ont déjà été exploités par d’autres marques depuis bien longtemps, avec des univers réellement immersifs comme ceux de Fiat ou Renault (respectivement en 2007 et 2008).

Dans l’absolu, je ne suis pas certain que la métaphore du showroom virtuel soit une bonne idée, d’une part car ce sont des expériences souvent décevantes (comme la fausse boutique 3D de Zegna) et souvent complexes à appréhender (comme le très déroutant site de Citroën). En théorie il n’y a maintenant plus de contraintes techniques pour proposer de la vraie 3D en temps réel dans le navigateur, la DS3 du moteur Minko affiche ainsi près de 300.000 polygones haut la main), de même que la configurateur 3D de la Nissan Juk, mais le coût de production du modèle 3D doit être prohibitif.

Au final Autoreduc aurait plutôt dû jouer la carte du réalisme et annoncer de très belles vues à 360° plutôt que de nous promettre un showroom en 3D (virtuel). Encore une fois, ce n’est pas la 3D que je condamne, mais plutôt la surpromesse. Il est ainsi tout à fait possible de parfaitement valoriser des véhicules avec des belles photos, comme les sites de Chevrolet ou VW, et de proposer en prime une vue  à360° et éventuellement une vue 3D. Pourquoi critiquer l’expérience des autres sites ?

Les applications de commerce en ligne sur l’iPad ne sont pas neuves (Votre showroom au bout des doigts avec les touchbooks), mais je commence à voir des choses tout à fait intéressantes sur le touchbook d’Apple. Jusqu’à présent, la plateforme de référence est iAd, qui permet de faire de très belles publicités interactives, notamment sur des magazines en linge comme Wired ou Project, mais le ticket d’entrée est très élevé (il me semble que c’est aux alentours de 50.000$, à confirmer).

Pour contourner ce problème de prix et proposer des fonctionnalités plus avancées, le mieux est encore de proposer votre propre application. C’est le cas par exemple de Subaru qui propose des applications pour iPad : Subaru taps iPad interface to promote 2011 vehicles. La marque japonaise propose ainsi des applications pour trois de ses modèles (Outback, Forester et WRX/STI) qui reprennent les contenus de son site web.

On retrouve ainsi dans ces applications des visites guidées avec vidéos :

Visite guidée interactive de votre Subaru sur iPad

De même qu’un démonstrateur intérieur pour les différents niveaux de finition :

Choix du niveau de finition intérieur de votre Subaru sur iPad

Ainsi qu’un teintier extérieur avec vue à 360° :

Choisissez la couleur de votre Subaru sur votre iPad

Rien de très révolutionnaire, car nous sommes dans les « standards » de ce que proposent les constructeurs habituellement. Par contre, la possibilité de visionner les vidéos et manipuler le véhicule sur un écran tactile semble bien plaire aux utilisateurs : Rich media ads on iPad outperforming iOS, Android devices. Une étude de Medialets annonce ainsi un taux d’engagement de 12,5% pour les bannières enrichies (avec un pic à 26% pour le secteur automobile).

C’est donc une très bonne nouvelle pour les annonceurs qui peuvent trouver dans l’iPad (et les touchbooks en général) des supports très efficaces pour valoriser leurs produits. L’absence de Flash sur l’iPad complique par contre la portabilité des contenus car il faut tout recréer avec l’éditeur iAd Producer ou avec le langage natif d’iOS (Objective C).

Mais ce n’est pas non plus une fatalité, car certains plugins sont autorisés sur la tablette d’Apple dont les très intéressant Cooliris qui permet d’améliorer le rendu des murs d’images et de la 3D. Cet éditeur propose ainsi son programme Immersive Ads en partenariat avec la régie InMobi qui permet de faire des bannières 3D très impressionnantes :

De même, ils proposent également la solution Decks pour repackager un catalogue dans une version adaptée aux spécificités de l’iPad (déjà utilisé par Groupon et Zappos) :

Une nouvelle expérience de commerce électronique tactile avec Decks sur iPad

Certes, le marché est encore très réduit (un peu plus de 500.000 iPads vendus en France), mais il concerne des clients à fort pouvoir d’achat (tout comme l’iPhone à ses débuts). De plus, l’important n’est pas forcément d’être présent sur l’iPad, mais plutôt d’acquérir de l’expérience sur la meilleure façon de valoriser vos produits au travers d’une interface tactile. Une fois cette expérience acquise, vous pourrez partir à la conquête des autres touchbooks et notamment des tablets low-cost propulsées par Android qui arriveront d’ici la fin de l’année (et qui permettront d’afficher des contenus Flash).

Malgré plusieurs tentatives infructueuses (e-commerce et 3D sont-ils compatibles ?), la 3D continue de fasciner les annonceurs qui y voient un bon moyen de se démarquer de la concurrence et de sublimer leurs produits. Dernier exemple en date, Zegna (le couturier italien) a décidé de se lancer à son tour dans l’aventure : Nous lançons la première « e-boutique » de luxe en trois dimensions.

Déjà équipé d’une boutique en ligne, Ermenegildo Zegna a profité de l’ouverture d’une boutique à Paris pour annoncer le lancement de Zegna in Store, un magasin en ligne en 3D. Présenté comme « le premier site de luxe en trois dimensions« , ce magasin permet aux internautes de « faire leurs courses comme s’il marchait dans un magasin« . Le site se présente effectivement comme un environnement 3D avec un étonnant concept de boutique flottant au-dessus de Central Park. La boutique en elle même n’est pas très grande, mais offre différents espaces faciles à repérer :

La boutique en 3D de Zegna

La boutique est répartie sur deux étages et utilise Flash pour faire de la simili 3D, en fait un assemblage de séquences vidéo comme en faisait Novacom à l’époque (on me signale dans mon oreillette qu’ils en font encore plein). Pour vous aider dans la découverte de cette boutique, vous pouvez « invoquer » l’aide en ligne assurer par Milla Jovovich.

Vous pouvez accéder au détail des produits en cliquant sur les mannequins qui trainent dans la boutique, une fenêtre vous propose alors des infos complémentaires et une vue à 360° :

Le détail des produits dans la boutique 3D de Zegna

Pour celles et ceux qui trouvent la navigation au clavier trop laborieuse, vous avez également la possibilité d’utiliser les raccourcis en bas de page :

Les raccourcis pour accéder directement aux zones de la boutique

Au final nous avons donc une boutique en fausse 3D qui propose une expérience très limitée. En fait le problème ne vient pas trop de la boutique, mais plutôt de la promesse. Il aurait été à mon sens bien plus intéressant de proposer :

• Une boutique en ligne traditionnelle, mais optimisée (l’actuelle souffre de grosses lacunes ergonomiques) ;
• Des vues à 360° des produits ou des mannequins (comme peuvent le proposer Fits.me ou Styku) accessibles depuis les pages produit ;
• Des modules riches pour présenter les nouvelles collections (comme le fait Wrangler) ;
• Des vidéos ou animations inspirationnelles pour mieux restituer les valeurs de la marque (comme le fait Lipton).

Ou alors, proposer une boutique avec de la vraie 3D (rendue possible grâce aux derniers progrès de la 3D dans Flash). Mais dans tous les cas de figure, ce site laisse un sentiment de déception, car la réalisation n’est pas à la hauteur de l’ambition annoncée.

J’ai déjà eu de nombreuses occasion de vous parler des différentes réalisations de Decathlon et des marques qui gravitent autour (ici, là, une autre ici, et une là, et puis là, et même là et enfin là). Je vais continuer cette série avec les dernières réalisations de Oxelo, la marque de sports de glisse du groupe.

Ils avaient l’année dernière mis en ligne un mini-site intéressant pour le Diabolo (un modèle de roller-blade) car il exploitait à la fois la réalité augmentée ainsi qu’une vue à 360° avec des animations interactives pour expliquer le mécanisme de freinage (principal critère de différenciation du produit) :

Les animations interactives du mini-site Oxelo

Un mini-jeu façon Frogger était également proposé pour mettre en scène les rollers dans une situation qui exploite bien l’USP du produit (le système de freinage) :

Le mini-jeu du mini-site d'Oxelo

Ils ont récemment décidé de s’appuyer sur les médias sociaux pour promouvoir et commercialiser leurs produits avec notamment un showroom sur Facebook proposant des vues à 360° des produits :

La vue à 360° des produits sur Facebook

Le social commerce est un vaste sujet qui a déjà été débattu sur mon autre blog (Les pratiques de commerce en ligne sur Facebook gagnent en maturité, Les pratiques de commerce en ligne sur Facebook ou F-commerce gagnent-elles vraiment en maturité ? et Social shopping : Il faut arrêter de se focaliser sur les boutiques Facebook). Cette boutique sur Facebook présente-t-elle un intérêt ? Non et oui. Non, car Facebook est une plateforme encore très restrictive pour y faire du commerce en ligne dans de bonnes conditions. Oui, car ce dont nous parlons n’est pas réellement une boutique en ligne, mais plutôt un showroom où l’on peut découvrir les produits en détail (un module en Flash abusivement placé dans un onglet « Shop« ).

Dans cette configuration, nous pouvons tout à fait envisager une page ciblant une communauté en particulier (ici les pratiquants de glisse urbaine) avec du contenu, des discussions… et un peu de promotion pour les produits. Il y a bien évidemment les photos pour cela, mais si vous avez la possibilité de montrer plus, alors pourquoi s’en priver ? D’autres le font très bien (cf. Des vidéos interactives sur Facebook pour Burberry). D’autant plus si la vente peut se faire dans une « vraie » boutique en ligne avec tous les éléments et techniques d’incitation, réassurance…

Et tant qu’on y est, je ne résiste pas à partager avec vous la dernière vidéo que la marque publie sur YouTube :

Vous pourriez me dire qu’il n’y a rien de très « riche » ou interactif dans cette vidéo. Et je vous répondrais que de belles images sont la base de toute activité commerciale. Et s’il y a une touche d’exotisme en plus… Il ne manque plus qu’une pincée de nudité et c’est le Nirvana !

Généralement des fonctionnalités comme les simulateurs ou les vues à 360° sont réservées à des secteurs comme l’habillement ou l’automobile. Je vous propose de (re)découvrir ces fonctionnalités, mais en prenant l’air chez Truffaut qui propose un outil de composition de plantes et pots.

Le principe est de laisser les internautes choisir une combinaison de pot et plante et de l’afficher à l’échelle :

L'écran de configuration de votre plante

L’important dans cette fonctionnalité n’est pas de représenter visuellement les plantes et pots, mais surtout de le faire à l’échelle. Une règle sur le côté gauche de l’écran permet ainsi d’évaluer la taille totale de l’ensemble.

Certaines combinaisons sont même bloquées pour vous éviter de commander une plante trop petite par rapport à son pot :

Le même écran avec une autre plante

Le site offre également une vue à 360° pour les plantes et pour les pots :

La vue à 360° d'une plante

Cette solution (proposée par Kujjuk) permettrait d’améliorer le taux de transformation (entre +50% et +80%) et de diminuer le taux de retour (-12%). Une promesse particulièrement alléchante, d’autant que le prestataire se charge des prises de vue (une opération visiblement compliquée, sauf si vous avez un Packshot Creator ou équivalent).

Cette fonctionnalité vient juste d’être lancée, mais j’adorerais avoir un retour d’expérience sur l’impact (temps de visite, taux de transformation…), et je suis sûr que vous aussi bande de curieux !

Il y a quelque temps Google avait fait sensation avec un prototype de voiture à pilotage automatique (Test Driving Google’s Driverless Car). Visiblement cette idée a fait des émules, car Mitsubishi a lancé le mois dernier une campagne tout à fait remarquable pour son nouveau modèle d’Outlander Sport : un dispositif qui permet aux internautes de conduire la voiture (Mitsubishi Live Drive Offers Online Test Drive).

Bien évidemment sur ce site il y a les grands classiques de l’industrie automobile : une galerie d’images XL, un teintier, un configurateur et même une très belle vue à 360° avec les nuages qui défilent en arrière-plan.

La vue à 360° de la Mitsubishi Outlander

Rien de très révolutionnaire si ce n’est ce petit lien étrange en bas de page : « Live Drive« . Indisponible en dehors des USA, cette fonctionnalité permet ainsi de prendre le volant de cette voiture et de la voir évoluer dans un espace clos :

Conduite en ligne en temps réel

Une campagne de recrutement a ainsi été organisée le mois dernier et près de 5.000 conducteurs virtuels ont pu « conduire » le véhicule grâce à la rediffusion en direct des nombreuses webcams embarquées à bord. Un franc succès pour cette campagne qui a permis de battre le record du monde de distance parcourue par un véhicule contrôlé à distance : Mitsubishi Live Drive campaign nabs new world record.

C’est donc une très belle prouesse technique réalisée par les équipes de Mitsubishi et une belle campagne de recrutement :

(via FWA)

Voilà près de 3 ans que je parle de rich commerce sur ce blog. Trois années où j’ai pu aborder un certain nombre de sujets : les démonstrateurs, la 3D, les vues à 360°, la vidéo, l’immersion… Et bien figurez vous que je crois avoir trouvé le site marchand qui combine quasiment toutes les pratiques : Le guide d’achat TV de Philips.

Ce site propose donc de vous assister dans le choix de votre téléviseur avec un assistant à étapes qui débute par une vue immersive par dessus votre épaule pour vous aider à choisir la bonne taille d’écran en fonction de la distance de visionnage (deux réglettes permettent d’ajuster la simulation) :

Choisissez la bonne taille d'écran en fonction de la distance

Puis vous choisissez le type de design qui vous plait à l’aide de vidéos chapitrées :

Gros plan sur le design des modèles

Ensuite l’assistant vous propose une première sélection de TV dont vous pouvez voir les caractéristiques en vous rapprochant (belle transition en 3D). Cette vue rapprochée permet notamment de regarder la TV selon différents angles de vue alors qu’une vidéo est en train de tourner à l’écran :

Vue à 360° d'un modèle de TV

Vous pouvez enfin affiner votre choix en précisant votre budget, l’assistant vous propose alors deux alternatives en fonction de la taille de l’écran ou de la pertinence selon vos choix précédents :

Précisez votre budget à l'aide de la réglette

Et vous êtes alors de retour dans votre salon en train de regarder la TV qui vous correspond le mieux à vos attentes et votre budget (vous pouvez changer de chaîne, allumer ou éteindre l’éclairage arrière, déplier le panneau avec la comparaison des modèles…) :

Jouez avec votre future TV dans ce salon virtuel

Au final nous avons donc un site très complet… mais surtout très long à charger et trop gourmand en ressources. Il en résulte des saccades dans les animations et une piètre réactivité de l’interface. Même sil a démonstration technique est impressionnante, la fluidité et l’expérience utilisateur doivent-elles être sacrifiées pour autant ? Peut-être qu’une version haut et bas débit permettrait de pallier ce problème en apportant d’un côté une information riche et de l’autre une ambiance immersive.

(via Hebiflux)

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.

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 ?

Pour accompagner son actualité commerciale l’enseigne Leroy Merlin a prit l’habitude de sortir des mini-sites hauts en couleurs. Dernier en date : CommentReleverSaCuisine.com où l’accent est mit sur le spectacle, à l’image de cette page d’accueil avec une navigation minimaliste afin de laisser un maximum de place au visuel principal :

La page d'accueil de CommentReleverSaCuisine.com

Les internautes sont donc accueillis dans cet univers « cuisine » miniaturisé avec une belle cinématique d’ouverture et une sonorisation très légèrement décalée (une musique un peu kitsch et un bruit de salière sur kes items de navigation). La courbure de ce tableau renforce l’impression de miniaturisation (effet fish-eye) et les différents éléments présents à l’écran s’animent au survol de la souris.

Au niveau des pages intérieures, les différentes cuisines sont détaillées au travers de vues à 360° avec plusieurs positions de caméra (cf. le plan sur la partie gauche) et des infos-bulles géantes sur les points d’intérêt :

La vue à 360° des cuisines

Le site propose également des fiches pratiques animées avec une version imprimable :

Les fiches pratiques animées

L’interactivité dans ce mini-site est assez limitée mais pour les bricolos en herbe il existe un logiciel de configuration 3D à télécharger sur le site principal (pourquoi ne pas proposer un outils en ligne ?).

Au final nous avons donc un site très spectaculaire visuellement avec un temps de chargement optimisé. Que demandez de plus : des bricogirls ?