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

J’ai déjà eu de nombreuses occasions de vous parler de la 3D associée au commerce en ligne. La 3D a de nombreuses qualités (immersion…), certes, mais elle est capricieuse car elle ne tolère pas la médiocrité. Comprenez par là que la 3D ne fonctionne que si elle est parfaitement réaliste. Ce n’est ainsi pas un hasard si le cinéma en 3D n’est réellement devenu crédible qu’avec les récentes avancées technologiques de ces dernières années.

J’ai déjà mentionné quelques expérimentations intéressantes (Et on reparle du shopping 3D, Des galeries marchandes en 3D avec Enjoy3D) mais elles ne tiennent pas réellement la route car elle ne plonge pas l’internaute dans un environnement réellement immersif (dû aux limitations technologiques) mais ne sont que de piètres alternatives aux systèmes de navigation traditionnels (menus, moteurs de recherche).

Dernièrement nous avons assisté au lancement de MaBoutique3D, dont il existe une interview du patron :

Exemple de boutique en 3D

L’idée est intéressante, mais la réalisation est encore loin de pouvoir susciter l’envie. Idem pour la Breizh Banque avec son hall en forme de soucoupe volante aux couleurs bretonnes :

La page d'accueil de la Breizh Banque

Même si l’on peut saluer l’exploit technologique derrière cette réalisation, je ne comprends pas bien le recours à la 3D dans ce cas, surtout en page d’accueil !

Ces deux réalisations reposent sur des technologies propriétaires encore lourdes à manier et qui n’apportent pas grand chose à l’expérience utilisateur car le réalisme n’est pas encore au rendez-vous. Pour le moment le meilleur moyen de valoriser votre marque en 3D est encore de le faire dans un contexte choisi par les utilisateurs, par exemple dans des univers virtuels offrant un niveau de réalisme suffisant (cf. Vers des univers virtuels HD ?). Cette solution est intéressante car elle vous permet de monter en compétences sur une troisième dimension et d’attendre que des technologies comme WebGL soient normalisées (cf. WebGL, le nouveau standard de la 3D sur le web) et que le marché soit également un peu plus mature (De la 3D à toutes les sauces pour 2010 ?).

Entendons-nous bien : Ce discours n’est valable que pour les environnements 3D en temps réel, car il est possible de faire des choses tout à fait immersives avec de la vidéo ou de valoriser vos produits au travers de démonstrateurs ou configurateurs 3D comme par exemple chez NRJ mobile :

Démonstrateur 3D chez NRJ Mobile

Donc oui, 3D et e-commerce sont compatibles mais sous réserve de bien faire les choses (intégration élégante, temps de chargement courts, pas de technologie propriétaire, prise en main intuitive…). Quand on y pense, la 3D se retrouve dans la position de la vidéo il y a quelques années : Laborieuse et maladroite. Inutile donc de s’y plonger aveuglement, ma recommandation serait de n’utiliser que ce qui présente le plus de valeur aux yeux des prospects / clients en fonction du contexte et non de cherche l’exploit technologique.

…

…

…

…

…

…

…

Bon OK ça fiat un peu enfonçage de porte ouverte, mais le but de cet article est avant tout de bien faire la part des choses et de na pas jeter le bébé avec l’eau du bain.

Avez-vous le nouveau site de Citroën ? Le moins que l’on puisse dire est qu’il y a eu comme une montée en gamme avec cette page d’accueil très sophistiquée :

La page d'accueil du nouveau site Citroën

L’univers graphique est étrangement proche de celui du site d’Axa et l’expérience est aussi déstabilisante que sur le site de la SNCF. Comprenez par là que dans une recherche d’image haut de gamme, ils confrontent les internautes à une parodie d’interfaces Apple (avec reflets et cover flow). Je ne suis pas contre le fait d’apporter de la sophistication aux interfaces web (sinon je ne rédigerais pas ce blog depuis plus de deux ans) mais cela doit se faire avec une certaine retenue pour ne pas trop alourdir la navigation et le parcours client. Le site de Ford Vehicles est ainsi un exemple car les pages sont très rapides à chargées et n’imposent pas aux internautes un temps de chargement trop long (ceci est réservé aux mini-sites).

Au niveau des pages intérieures, le raffinement est toujours de rigueur avec un showroom en 3D pour les véhicules (ici la C1) :

Le showroom 3D sur le nouveau site Citroën

Encore une fois même si la réalisation est exemplaire, il y a comme une impression de déjà vu : Fiat UK et Renault propose des showrooms 3D depuis plusieurs années.

Au final nous avons un très beau site qui aurait plus sa place sur des bornes interactives en concession que dans les navigateurs de Mr et Mme tout-le-monde. Loin de moi l’idée de vouloir comparer, mais le site de Peugeot est tout aussi qualitatif mais moins laborieux à parcourir, vous ne trouvez pas ?

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)

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…

L’industrie automobile est décidément une source quasi infinie de bonnes pratiques en termes d’interfaces riches dans un contexte marchand. À défaut de “sites marchands”, nous pourrions plutôt parler de “sites participant activement au cycle de vente”, mais le résultat est toujours très agréable à regarder et à manipuler.

Commençons avec Toyota qui débute la commercialisation de la troisième génération de sa Prius avec ce mini-site qui met en scène les différentes qualités du véhicule et notamment sa forme aérodynamique :

La simulation d'aérodynamisme de la Prius

Des “particules” (pétales de fleurs ?) sont ainsi projetées sur l’avant de différentes silhouettes de voiture. Dans la cas de la Prius, ces dernières flottent de façon harmonieuse autour de la carrosserie alors qu’avec les autres silhouettes elles se dispersent de façon disgracieuse. Ce n’est pas une vidéo mais bien une animation en temps réel qui rajoute un effet hypnotique à ce démonstrateur.

Il y a également cette simulation de températures extrêmes pour mettre en valeur le toit solaire qui capte l’énergie et la transforme en air frais :

La simulation de températures extrêmes de la Prius

C’est beau, ludique et informatif.

Autre exemple dans un style complètement différent avec le mini-site de la Toyota iQ : Virtual Test Drive. Les internautes sont ainsi invités à tester la petite dernière de la gamme sur différents circuits qui mettent en valeur les qualités du véhicule (ici le circuit “sécurité”) :

La piste sécurité de la Toyota iQ

Vous apprécierez le style graphique très particulier (qui me fait penser au film Tron) de ce démonstrateur 3D où la voiture évolue dans un décor fixe (écran par écran). Le rendu est excellent et l’on passe beaucoup de temps à optimiser ses trajectoires et éviter les obstacles.

Bref, encore une fois c’est propre, beau, ludique et ça permet de capter l’attention des internautes. À rajouter à ma longue liste de bonnes pratiques.

(via Away 3D blog)

Jusque là Autodesk était plus connu pour ces outils de conception 3D que pour des applications grand public. Les choses sont visiblement en train de changer puisqu’ils expérimentent depuis quelques temps le modèle SaaS à destination des cuisinistes et fabriquant / distributeurs de meubles avec deux produits : Showroom et DragonFly. L’idée étant pour Autodesk de préparer la révolution de l’industrie du logiciel en commençant à recycler ces outils en services en ligne facturables.

Cette approche se traduit donc pas deux services librement accessibles au grand public. Le premier étant DragonFly un service en ligne qui permet de modéliser des intérieurs et d’en avoir une représentation en 3D isométrique :

Transformez vos plans 2D en représentations 3D

L’interface est assez bien conçue et vous avez la possibilité de partager vos créations sur FlickR, Facebook…

L'interface de DragonFly

Plus intéressant, Showroom est un outil de configuration d’aménagements intérieurs en ligne. C’est en gros la même chose que DragonFly mais avec moins de possibilités (vous choisissez les meubles / équipements disponibles dans la liste) et un rendu photoréaliste : Project Showroom 1.0.16 Now Available.

L'interface de Showroom

Il n’est donc pas possible de configurer votre propre pièce (avec vos dimensions) mais la qualité du rendu est tout simplement saisissante (cf. Life Imitates Art). Ce service est normalement destiné aux professionnels (cuisinistes…) qui souhaitent fournir à leurs clients un outil de visualisation puissant offrant un premier niveau d’interactivité.

Notez qu’il existe également une version iPhone, idéale pour les vendeurs en déplacement :

Pour le moment ce service est destiné aux cuisinistes et autres fabricants de salle de bain mais nous tout à fait imaginer les possibilités pour d’autres secteurs…

Voilà bien longtemps que je ne vous ai pas parlé des avatars 3D. Pour rouvrir ce “dossier” je vous propose dans un premier temps de lire cet article : Would You Give A Search Engine a 3D Model of Your Body?. L’auteur (un spécialiste du référencement) nous décrit un futur proche où les utilisateurs pourraient soumettre à un agent intelligent leur avatar 3D (reprenant leurs mensurations) ainsi que leurs goûts et envies pour se faire suggérer des vêtements et des ensembles. Ce scénario vous semble délirant ? Et bien figurez-vous que nous n’en sommes pas loin.

Il y a tout d’abord Yahoo! qui a récemment déposé un brevet très similaire (”Method for Search and Marketing Fashion Garments Online“) où il est question d’avatars, de vêtements et d’accessoires virtuels. Un quelconque rapport avec les Yahoo! Avatars ? Oui très certainement car les marques y ont déjà fait leur apparition depuis longtemps :

Essayage virtuel chez Yahoo! Avatars

Plus d’infos ici : Yahoo Looking to Revolutionize Fashion eCommerce?.

Il y a ensuite la nouvelle version de Frenzoo, un pseudo univers virtuel dédié à la mode où vous créez un avatar pour pouvoir lui faire essayer toutes sortes de vêtements de créateurs :

La mode virtuelle avec Frenzoo

(via Hebiflux)

Même si nous ne sommes pas tout à fait dans le scénario imaginé par l’auteur du début, nous avons avec ces deux services (et d’autres comme le mannequin 3D de La Redoute ou le portail Potoroze) un embryon de solution pour celles et ceux qui veulent expérimenter une nouvelle forme de shopping en ligne.

Loin de moi l’idée de vouloir faire des jeux de mots à 30 centimes mais je trouve que le luxe est secteur qui se prête bien aux modules rich commerce. Les précurseurs en la matière sont des ténors comme Louis Vuitton ou Gucci mais nous commençons à voir des acteurs de taille plus modeste faire des choses tout à fait intéressantes.

Premier exemple avec Luigi Bormioli, un vaisselier italien déniché par Maxdig qui propose un très bon système de navigation par bandeau latéral :

Le bandeau de navigation latérale de Luigi Bormioli

Deuxième exemple ave Vimercati, un fabriquant de meubles italien (découvert par le Capitaine Commerce) qui nous plonge dans un carrousel 3D qui donne le tournis :

Le carrousel 3D de Vimercati

Rassurez-vous il y a aussi de très belles photos en pleine largeur qui rattrape cette intro un peu déstabilisante.

Dernier exemple avec Gestaltung, un fabriquant de cuisines anglais qui met en scène ses réalisations dans des environnement en simili 3D (via Hebiflux) :

Les scènes 3D de Gestaltung

Je précise tout de même que le luxe n’est bien évidémenr pas le seul secteur d’activité qui a tout intérêt à mettre en oeuvre les interfaces riches. Je rêve par exemple d’un supermarché en ligne en Flash (ou en Ajax)…

Connaissez-vous TheWatchAvenue ? Il s’agit d’une boutique de luxe dédiée aux montres. L’idée derrière ce site st de proposer une nouvelle expérience d’achat en ligne. Cette fameuse expérience démarre avec une intro dans un endroit imaginaire qui ressemble à la place Vendôme (en référence aux grandes marques de luxe qui y ont élu domicile) où une hôtesse vous accueille en incrustation vidéo :

La page d'accueil de WatchAvenue

Vous accédez ensuite à l’avenue des montres où se succèdent les boutiques des grands horlogers, idem que précédemment avec une vue en simili 3D pour un environnement particulièrement immersif :

La fameuse avenue des montres avec les boutiques des grandes marques

En cliquant sur l’une des devantures de l’avenue, vous rentrez dans les boutiques où une nouvelle hôtesse vous accueille et où il est possible de jouer avec différents éléments interactifs :

L'intérieur d'une boutique

Un concept ludique et intéressant (une version enrichie de Eluxury) mais qui pêche pour le moment par con manque de contenu : seuls quelques boutiques sont ouvertes et on ne peut pas manipuler beaucoup de montres. Où sont les vues 3D ? Où sont les zooms ? Où sont les animations pédagogiques sur le fonctionnement des mécanismes ? Où sont les configurateurs ?

Bref, il y a un gros potentiel derrière cette boutique en ligne, encore faut-il qu’elle s’étoffe et investisse dans des modules marchands plus convaincants.

Mais j’aime bien l’idée quand même…

Une fois n’est pas coutume, je vous propose de découvrir deux très bonnes réalisation qui font un usage intensif de la 3D, mais pas dans le secteur automobile, dans la chaussure de sport.

Bien évidement vous vous doutez que je vais vous parler de Nike, et effectivement puisqu’ils viennent de sortir un nouveau site sur le thème des baskets où il est possible de créer son propre modèle et de le soumettre à la communauté dans des battles : Nike Dunk: Kicks Creator.

L’idée du configurateur de chaussure n’est pas neuve mais c’est dans la réalisation que ce site se distingue avec une superbe vue en 3D temps réel qui repose sur Papervision3D. Cliquez ainsi sur l’une des entrées du Top5 pour pouvoir vous amusez avec :

Le showroom en 3D de Nike Dunk

Mais les choses sérieuses commencent réellement avec le configurateur qui tourne également sur le même moteur :

Le configurateur 3D de Nike Dunk

Rien à redire, c’est rapide à charger et terriblement efficace.

(via DoesNotCompute)

Autre exemple radicalement différent avec FootLocker qui propose un dispositif tout à fait original pour le modèle Bounce d’Adidas mit en scène dans un environnement urbain : Footlocker Bounce.

Le principe est simple : vous êtes immergé dans une vue à 360° dont vous contrôlez la caméra. Le but du jeu est de parvenir à suivre le jeune homme qui saute partout :

L'interface immersive de Foot Locker Bounce

Le mouvement de la caméra est fluide et l’on se surprend à jouer à cache-cache avec ce type qui court dans tous les sens.

(via DailyPapervision3D)

Deux exemples qui illustrent mon propos sur le recours de plus en plus fréquent à la 3D temps réel, tendance lourde de cette fin d‘année qui va très certainement se renforcer avec la dernière mouture du Flash player 10 (et peut-être même Silverlight 3).