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 ?

Connaissez-vous les imprimantes 3D ? Mais si enfin, ces imprimantes de nouvelle génération qui utilisent différentes techniques (résine à séchage ultra-rapide, impression par couches…) à la place de l’encre. Bref, c’est une révolution, mais ça coûte encore une blinde ! Le marché n’étant pas encore mûre pour équiper chaque foyer de sa petite imprimante 3D (mais ça ne serait tarder), des intermédiaires d’un nouveau type vous propose d’imprimer, donc de matérialiser, vos créations. C’est ainsi le cas de My Robot Nation, un service de conception de robots : Startup launches a robot invasion with 3D printing and WebGL.

Le site n’a visiblement pas investi des montagnes d’argent dans la charte graphique, car la page d’accueil est… perfectible.

La page d'accueil de My Robot Nation

Qu’importe cette page d’accueil vieillote, vous êtes très rapidement orienté vers l’interface de conception des robots qui n’est pas sans rappeler l’atelier de Spore Creatures. Non seulement cette interface est très intuitive et fun, mais en plus elle est réalisée avec WebGL, la technologie standardisée pour faire de la 3D dans le navigateur.

L'interface de création de My Nation Robot

Vous allez ainsi pouvoir créer votre robot en quelques minutes : choix des formes des membres, des proportions, des décorations et ustensiles, des couleurs… Le résultat est immédiatement visible à l’écran et vous pouvez manipuler votre robot dans tous les sens avec un rendu parfait et une fluidité exemplaire. Tout ceci est possible grâce à WebGL qui permet de « confier » le rendu 3D à la puce graphique et non au processeur (d’où des performances bien meilleures).

Pour vous rendre compte du nombre infini de combinaisons, je vous engage à regarder la galerie des créations.

Les différentes créations des utilisateurs

Les configurateurs 3D ne sont pas neufs, mais celui-ci est particulièrement bien réalisé et surtout très intuitif et performant. Et pour cause : l’éditeur du service reconnait que ce Robot Nation n’est qu’un galop d’essai vers une plateforme de conception beaucoup plus ambitieuse. Les robots étaient, selon eux, une thématique intéressante pour faire comprendre au grand public l’intérêt des imprimantes 3D : My Robot Nation aims for personal 3D printing for all.

Vivement la suite !

Après le très impressionnant Styku, ce sont les espagnols de Crearmoda qui nous proposent un module de personnalisation des habits en 3D : In Spain, design your own clothing via 3D simulator.

L'interface de personnalisation de Crearmoda

Pour le moment le choix d’habits est limité (t-shirt, sweat à capuche, foulard…) mais l’interface de personnalisation est très performante : le rendu visuel est bon, le mannequin se manipule avec fluidité et surtout les motifs épousent parfaitement les formes du corps pour plus de réalisme.

La technologie utilisée pour ce module est Unity3D qui dans sa dernière version exploite le moteur physique PhysX de NVidia. Particulièrement performant dans la gestion des vêtements, le Unity Player hérite des propriétés Interactive Cloth et Skinned Cloth, ce qui explique le réalisme du rendu.

Une fois vos créations achevées, vous pouvez les commander et les partager avec la communauté. De ce point de vue là, rien de très neuf.

Voici donc un très beau module de personnalisation qui laisse présager toujours plus de réalisme des les outils de simulation et les démonstrateurs.

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.

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)

Hasard du calendrier, deux grandes marques sortent quasiment en même temps une campagne « transmedia » (je crois que c’est comme ça que disent les pubards) avec un concept commun pour le spot TV, l’affichage et le site web.

Commençons par Diesel qui propose un spot TV qui sent bon le charleston à la sauce 2010 pour sa nouvelle collection :

Ce spot est ensuite reprit sur le site web sous forme de vidéo interactive (A Hundred Lovers) qui se met en pause au survol de la souris et permet de repérer les zones actives (généralement des liens vers la fiche produit des vêtements) :

Vidéo interactive chez Diesel

Même principe chez BMW avec ce film diffusé pour le lancement de la nouvelle série 5 :

Le mini-site BMW-cinétique propose une expérience similaire mais plus immersive puisqu’il est possible de manipuler les billes (représentation en 3D temps réel) et même de créer / partager vos créations :

Représentation en 3D temps réel chez BMW

Dans les deux cas nous avons un concept créatif fort qui est décliné da façon originale et accrocheuse sur le web.

(merci à Albin pour le lien)

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 fait 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 ne 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…