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

Voilà bien longtemps que je n’ai pas parlé d’American Eagle (ma boutique en ligne préférée). Le lancement de trois nouveaux modules marchands me permet d’y remédier.

Commençons avec cette séquence vidéo interactive où les produits mit en scène sont accessibles en 1 clic sur les info-bulles qui jalonnent la timeline :

La vidéo interactive d'Ameriacn Eagle

Il y a ensuite une toute nouvelle boutique 77 Kids avec une sélection d’ensembles présentés en vidéo (7 gotta-have outfits) :

La page de présentation de la gamme

Une fois que vous avez choisi un ensemble, une autre vidéo se lance avec le détail des produits :

La page de présentation d'un ensemble

C’est encore une soif très simple d’utilisation, efficace mais avec juste ce qu’il faut de raffinement graphique pour en faire une expérience d’achat agréable.

Vous noterez au passage la remarquable mise en page des fiches produit en “Quick Look” :

La page produit

Pour finir nous avons l’animation autour des Jonas Brother (un concert exclusif) :

L'animation avec les Jonas Brothers

Et la possibilité de se créer des petits avatars qui seront affichés sur un mur géant lors du concert et donc certains seront dédicacés par les Jonas Brothers :

Les pseudo-avatars

Je suis toujours en admiration devant l’efficacité des modules marchands implémentés par cette boutique : à la fois sophistiqués mais toujours simples à manipuler.

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)

Vu sur le site de JCPenney :

A voir directement sur le site : tout est animé. Le mannequin central vient vers vous, et les petites imagettes, sur le côté, s’animent régulièrement, pour vous inviter à “venir voir”.

Mis en œuvre avec Scene7.

Voila, presque tout est dans le titre !

Ce blog est short listé dans la catégorie “Blog e-commerce“, aux côté de Capitaine commerce, Rhooo.com, Michel de Guilhermier, OliverBlog, ILoveWeb et Daniel Broche.

Réponse définitive le 27 novembre.

Vous devez très certainement vous souvenir de la mode du porno chic, mais connaissez-vous le porno gothique ? Il semble visiblement que la marque de ingerie Agent Provocateur se soit lancée à fond dans cette tendance avec un nouveau site à l’ambiance immersive très particulière : Agent Provocateur Experience.

Ça commence avec une intro mystérieuse où l’on invite l’internaute à plonger dans une boule de crystal :

L'intro du mini-site

Vous rentrez ensuite dans le mini-site en lui-même qui est composée d’une vidéo plein écran à la narration complètement déstructurée avec une succession de plans un peu glauques :

La vidéo en plein écran

Il y a ensuite l’accès au catalogue avec une belle collection de sorcières :

La page catalogue

Un retour visuel au survol de la souris permet de comprendre qu’il est possible de cliquer sur les sillouhettes. Le tout nous même aux ensembles :

La page des ensembles

Il est ensuite possible d’accéder à la page produit qui est un  peu plus “classique” :

La fiche produit

Vous noterez également que le dispositif est relayé en page d’accueil avec un autre tableau porno gothique :

La page d'accueil

Au final nous avons donc une boutique en ligne hors normes au design extrêmement sophistiqué mais qui respecte les minima quand il s’agit de présenter les produits. Bon, entre nous je doute qu’une autre marque qu’Agent Provocateur puisse se permettre ce genre de disgression (peut-être Diesel) mais cet excercice de style reste tout de même très… inspirationnel.

(via Emakina Blog)

Pour faire des interfaces riches, dans le navigateur (RIA) ou en dehors (RDA), il faut des technologies et des outils adaptés.

Côté Adobe, actualité très chaude, avec le renouvellement complet de toute la gamme CS (CS pour Créative Suite) : CS4 !

La version US vient de sortir, et la version Française sera disponible en descembre.

CS, c’est un ensemble très complets d’outils, qui couvrent des domaines assez large : montage vidéo, dessin, dessin vectoriel, édition Web…

Autre actualité chez Adobe : la sortie de Flash player 10.

On ne s’en rend pas forcément compte, mais la sortie d’un nouveau player Flash, c’est un peu une révolution… et un challenge pour Adobe : rendez vous compte, ce player est plus répandu que n’importe quel navigateur internet !

Le player doit donc :

• être parfaitement compatible avec les anciennes versions de flash,
• apporter son lot de nouveautés (sinon, pourquoi changer ?),
• être compatible avec tous les environnements (OS, Hard, navigateur Internet).

Adobe a bien raison d’avancer vite, parce que la place est convoitée…

Par exemple par Microsoft, qui a sorti sa nouvelle mouture de Silverlight, concurrent direct de Flash !

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)

Connaissez-vous Anthropologie ? Il s’agit d’une marque US particulièrement créative qui soigne toujours la mise en scène de ses produits. Et puisque l’on parle de mise en scène, je vous propose de découvrir le module “Walktrhough” :

Le Walkthrough d'Anthropologie

Il s’agit d’une visite guidée des nouveautés au travers d’une succession de tableaux où les produits sont mit en scène de façon valorisante (par le choix des couleurs, de la lumière ou de l’aménagement intérieur).

Les tableaux ne se suivent pas réellement mais sont superposés façon collage (qui n’est pas sans rappeler le mini-site de Canon). Il est possible de basculer d’un tableau à un autre en cliquant sur les numéros en haut de page.

Des invites visuelles (petite croix) indiquent à l’utilisateur que le détail des produits est disponible au clic (ouverture d’un panneau flottant) :

La fiche produit d'Anthropologie

Il y a aussi les Wonderlands, des frises verticales où les produits sont associés par couleurs :

La frise verticale d'Anthropologie

Vous avez ensuite le module Look Closer avec d’autres groupes de produits où il est possible de zoomer pour avoir une vue rapprochée :

La vue d'ensemble

La vue rapprochée

J’hésite à vous parler du module Spectra car il est assez déroutant : un clic sur un produit provoque un phénomène de répulsion des autres produits qui flottent dans une sorte de bulle (c’est très étrange et je doute de l’efficacité de ce truc) :

Le très étrange module Spectra

Au final nous avons donc un dispositif immersif tout à fait convainquant et valorisant pour les produits. J’adore, même si la prise en main de site est quand même globalement déroutante : l’usage de typos spécifiques et de couleurs décrépies ne facilite pas le repérage et nuit à la lisibilité (mais ça doit faire partie du “brand building“).

(via Signal vs Noise)