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

Je pense qu’il va falloir vous habituer au fait qu’il ne se passera pas une semaine sans que je parle de fringues ou de bagnoles ! Mais bon… ce n’est pas de ma faute si ce sont les deux secteurs les lus dynamiques en terme d’interfaces riches marchandes.

Autant je pense que l’on a atteint des sommets en terme d’outils d’aide au choix (sélecteur, comparateur…) autant il reste encore de nombreuses innovations possibles pour la représentation des véhicules. Et c’est encore une fois la 3D qui va être à l’honneur avec deux réalisations tout à fait intéressantes.

Il y a tout d’abord ce mini-site sud-africain pour l’Audi A5 qui nous propose une déstructuration très spectaculaire de son modèle en une myriade de facettes pour mieux mettre en évidence les bénéfices du produit :

Déstructuration en cours pour l'Audi A5

Désctructuration achevée pour l'Audi A5

Très impressionnant mais avec un modèle d’interaction plutôt limité. (via Maxdig)

Dans un autre registre il y a également ce site néo-zélandais pour VW Voyage qui propose une page d’accueil très originale :

Mais le plus intéressant est que le site propose deux vues en 3D temps réelle, l’une avec Papervision3D (qui repose sur Flash) :

La 3D avec Flash / Papervision

 L’autre avec le plugin Unity3D :

La 3D avec Unity

Bien évidement si vous n’avez pas le plug-in il ne se passe rien, bien évidement c’est un peu long à charger, mais le rendu graphique est tout simplement somptueux. L’animation est très fluide et les reflets sur le sol ou la carrosserie sont ultra-réaliste. Bref, c’est la Rolls de la 3D (sans mauvais jeu de mot).

Cette dernière réalisation nous montre la maturité et surtout le potentiel du moteur Unity3D qui pourrait bien faire des ravages dans le domaine du casual gaming (via Hebiflux).

C’est avec une très grande joie que j’ai découvert ce WE le très beau site Plus-Belle-Ma-Maison.com lancé par Leroy Merlin. Grande joie car cette réalisation fait honneur au savoir-faire français (Cocorico !).

Bon bref assez parlé, ce mini-site s’ouvre sur une très belle animation miniaturisée avec des zones réactives qui s’animent au survol de la souris :

La page d'accueil de Plus-Belle-Ma-Maison.com

Il y a ensuite les pages d’ambiance représentées sous forme de pampilles qui oscillent au survol de la souris :

La page d'ambiances de Plus-Bell-Ma-Maison.com

Il y a ensuite ces scènes en pseudo 3D où vous changez le point de vue en bougeant la souris à droite et à gauche (vous noterez au passage les focus sur les produits) :

La scène en pseudo 3D

En cliquant sur les produit vous accédez aux fiches avec une vue 360° pour certains articles :

La fiche produit en 360°

Outre ces mises en scène il y a également tout une partie du site où vous pouvez créer votre propre ambiance, mais je vous laisse découvrir tout ça sur cette vidéo :

Nous avons donc au final une superbe réalisation très bien équilibrée entre sophistication de l’interface et temps de chargement (surtout pour les transitions). Le site est de plus intuitif et percutant d’un point de vue purement marchand. Bravo !

Amazon a lancé hier une expérimentation tout à fait inédite de son site : Amazon Window Shop. Il s’agit en fait d’une sélection de nouveautés qui sont classées et représentées dans une interface immersive en simili 3D avec une navigation au clavier :

La nouvelle interface d'Amazon Window Shop

Vous vous déplacer ainsi dans les différents “rayons” en appuyez sur la barre d’espace pour avoir le détail :

La fiche produit d'Amazon Window Shop

Notez que l’ensemble des produits sont proposés avec des médias (vidéo ou audio) pour encore accentuer l’effet immersif. Une initiative intéressante dans la mesure où cette interface ne remplace pas l’autre mais vient compléter l’expérience d’achat. C’est le même principe que propose Ebay avec des sites comme Ebay Express ou Cooqy (cf. Un site pour deux expériences utilisateur différentes).

Tout ceci n’est pas sans rappeler ce que propose Borders sur sa page d’accueil (cf. Borders se lance à l’assaut d’Amazon grâce au rich commerce) ou encore WESC (cf. Connaissez-vous la navigation par clavier ?).

(via Read/Write Web)

Vous connaissiez les configurateurs 3D, mais connaissiez-vous les morpho-configurateurs ? Et qui plus est en 3D temps réel ? Je vous propose alors de tester de toute urgence le nouveau mini-site de la Twingo Total Perso.

Le mini-site s’ouvre sur une page d’accueil un peu déroutante où l’on vous propose de personnaliser votre Twingo en fonction de la morphologie de votre visage :

La page d'accueil de Twingo Total Perso

Vous choisissez alors une forme de visage, une coupe de cheveux, une bouche, des yeux… :

Choisissez un visage...

Et vous arrivez enfin à la Twingo qui vous ressemble le plus :

... et voilà une Twingo à votre image !

Passé le côté surprenant de cet assistant au choix (puisque c’est un peu la philosophie), vous vous retrouvez avec une vue en 3D temps réel qui repose sur la librairie Papervision3D. Tout l’intérêt de cette librairie Flash est de pouvoir laisser une liberté de mouvement totale aux utilisateurs qui peuvent bouger le véhicule dans tous les sens (horizontal comme vertical) et qui peuvent ainsi inspecter les détails de la carrosserie sous tous les angles.

La 3D en temps réel de Papervision3D en action

Quel bonheur de pouvoir changer le niveau de finition et la couleur puis de faire tourner le véhicule et admirer les reflets sur la carrosserie ou l’effet de transparence dans l’habitacle. Ayant indirectement participé à ce projet (sur un prototype technique), je peux vous assurer que le résultat final est très convainquant, bravo à l’équipe de Fullsix pour cette réalisation qui visiblement bénéficie grandement de la V.10 du player Flash (j’aimerais bien avoir confirmation de ce point).

(via Daily Papervision3D)

Fous… mais tellement créatifs ! Je suis tombé cette semaine sur deux boutiques en ligne complètement folles mais incroyablement addictives dont j’aimerais vous faire part.

Il y a tout d’abord Uniqlo, un vendeur de pulls qui nous propose un incroyable voyage :

La vue d'ensemble de Uniqlo

Vous survolez ainsi ce somptueux paysage lainaire (à ne pas confondre avec lunaires) aux milieux de plaines de pulls et au détour de canyons de cols roulés :

La vue rapprochée

En cliquant sur les pastilles de couleur vous avez accès à une vue plus “classique” avec des vignettes.

Le catalogue

Wow, quelle claque visuelle ! Je serais bien incapable de vous dire l’impact réel sur le taux de transformation mais l’effet est saisissant. (merci à Laurent pour le lien)

Autre boutique très étrange, celle de Newneu (un designeur il me semble). Une boutique très longue à charger mais avec un catalogue intéressant où les produits sont représentés sous forme de dalles qui flottent dans une mini-tempête (c’est dur à expliquer avec des mots) :

Le catalogue de Newneu

Il y a également la vue “Variation” où l’on peut superposer des visuels sur des sacs :

Le démonstrateur

Et finalement la galerie où différents visuels gravitent autour d’une planète :

La galerie

Encore une fois je ne sais pas trop quoi penser de cette boutique, mais je me dois de saluer l’effort créatif. (via le Capitaine Commerce)

Terminons maintenant avec cet improbable mini-site pour Diesel en Suède : Diesel Genes (vous noterez au passage le jeu de mot entre “Diesel Genes” et “Diesel Jeans”). Il y est question d’un concours artistique avec des jeunes dans un entrepôt (vidéo en plein écran) :

La page d'accueil de Diesel Genes

Il est ensuite possible d’admirer les créations des internautes (les “genes“) :

La création d'un internaute

Sinon vous pouvez aussi vous lancer dans la création d’un “artwork” :

Ma création

Là encore je ne sais pas trop quoi penser de ce mini-site si ce n’est qu’il se démarque des autres par son ultra-originalité. (via Brice)

Vous aimez ?

Vous connaissez AMG ? Mais si enfin : le préparateur allemand qui s’amuse à gaver les Mercedes de chevaux et de chrome ! Bon bref, tout ça pour dire qu’ils n’ont pas la main leste, ni sur le nombre de chevaux ni sur leurs mini-sites. Il faut dire que la “marchandise” est belle et qu’il faut donc la mettre en valeur. La preuve avec ce mini-site pour la SL 65 Black Series.

Le mini-site ouvre sur une superbe vue à 360° en plein écran :

La vue à 360° en plein écran

En bougeant la souris à droite à gauche il est possible de “tourner” autour de la voiture (une vingtaine d’image en 3D pré-calculée). Il y a également la possibilité d’afficher les détails techniques sur certains écrans-clés :

Les détails techniques

Enfin en cliquant sur “elements” (le thème du mini-site), vous obtenez une vue aérienne des différents points forts de la voiture avec des fiches qui tourne en 3D en temps réel (grâce à Papervision 3D) :

Enfin de la 3D en temps réel

Inutile d’y aller par 4 chemins : ce site est vraiment très impressionnant, tout comme les autres de la marque. C’est propre et efficace. Par contre, il faut aimer la bagnole, sinon c’est l’écoeurement assuré !

(via Daily Papervision3D)

Après les expandable banner et les boutiques déportées, voici venir une nouvelle génération de bannière “riche” : la bannière 3D. Et c’est Jeep qui ouvre le bal en proposant un carré qui se déplie au survol de la souris :

La bannière 3D de Jeep

Il y a ensuite différentes possibilités : une vue à 360° en situation avec la possibilité de changer la couleur de la carrosserie :

Vue à 360° de la bannière 3D de Jeep

Et il y a surtout ce simulateur en vue aérienne où une Jeep parcourt une carte topographique avec un très bel effet 3D :

Le simulateur 3D de Jeep

C’est propre, spectaculaire, pas trop long à charger. Par contre la prise en main est plus qu’approximative, l’idée est bonne mais la surface exploitée est tellement petite que l’on a du mal à se repérer…

(via Daily Papervision3D)

Le site Renault.fr fait enfin peau neuve, et il y a du nouveau par rapport aux autres versions européennes (par exemple le Renault.es) : l’apparition de la 3D. Et pas n’importe quelle 3D, un déluge, une avalanche, un festival de la 3D !

Il y a tout d’abord un carrousel géant dès la page d’accueil :

Si vous cliquez sur un modèle  vous aurez alors droit à une petite cinématique où la voiture vient se ranger dans une file avec les différentes versions :

Et si vous cliquez sur un modèle en particulier vous avez droit à une dernière vue en 360° :

De jolies vues et cinématiques pour nous mettre dans l’ambiance. Dans l’ambiance de quoi ? Dans l’ambiance de l’Univers Renault.

Changement d’ambiance et surtout changement de modèle de navigation et de présentation pour ce showroom virtuel géant où les visiteurs (résidents) sont invités à visiter les plateaux de présentations des modèles :

Le visiteur est accueilli par une cinématique tout en 3D ainsi que par différents acteurs (PNJ ?) qui sont là pour nous présenter les bénéfices du produit.

Il y a également d’autres zones (financement, occasion…) qui fonctionnent sur le même principe (cinématique + acteur) :

Ouf, que de 3D ! Mon jugement est très certainement brouillé par mon côté chauvin mais avouez que ça fait du bien de voir une réalisation de cette envergure enfin chez nous !

Potoroze propose des fonctions pour aménager virtuellement votre intérieur :

Observez en particulier la facilité pour placer un meuble (2/3 de la vidéo environ) ou la façon dont on déplace une horloge murale, qui “sait” rester “aimanté” contre le mur !

Bravo Sébastien pour cette nouvelle démonstration !

Vous connaissez Hello Kitty ? Vous connaissez la Smart ? Non ? Ce n’est pas grâve, je vous invite tout de même à aller voir le nouveau site de la Smart au Japon : Play Smart. Après un (très) long téléchargement vous aurez alors le plaisir de pouvoir admirer la Smart dans une superbe réalisation en 3D temps réel (via une librairie Flash et sans plug-in) où vous aurez le loisir de pouvoir décorer votre Smart dans toutes les couleurs :

Il est également possible de participer à des courses sur circuit :

Ces circuits sont en fait des formes géométriques que votre voiture dessine au fur et à mesure (sur le principe des pointillés) :

Bon… je dois bien avouer que la trace noire comme métaphore de l’empreinte carbone laissée par la voiture est un peu limite… ça va que cette voiture est propulsée par un des plus petits moteurs du monde sinon nous nagerions en plein mauvis goût !

Toujours est-il que nous avons là une réalisation tout à fait ludique et parfaitement réalisée (très kawai). J’adore !