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

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 !

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)

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 ?

Connaissez-vous les sacs Crumpler ? Mais si, ces sacs avec une petite grenouille dessus… bon bref, ce n’est pas des sacs dont je veux vous parler mais plutôt de leur boutique en ligne : CrumplerBags.com.

Qui dit marque atypique dit boutique en ligne atypique (ne fonctionne pas pour toutes les marques), Crumpler nous propose donc un site à l’ambiance tout à fait particulière : tout en ombrage et en textures dégradées.

La page de présentation de la gamme est ainsi assez déroutante avec son rayonnage très classique et ces options de filtre bizarrement positionnées en bas :

Heureusement la page produit est plus traditionnelle (le moteur de recherche et les filtres passent en haut, de même que le panier en haut à droite). Vous noterez au passage l’effet de transparence sur les items de navigation en haut de page :

Pour le panier c’est encore plus orignal avec un look « terminal graphique » :

Encore plus déroutant : le site fonctionne sur le principe de page contigües. Ces dernières sont collés les unes aux autres (côtes à côtes) et vous pouvez facilement sauter à la page voisine en approchant votre souris du bord de l’écran. Ce principe de navigation permet de faire de très beau effets de transition.

Au final nous avons donc un site hors du commun, en accord avec le positionnement de la marque, mais néanmoins très réussi (la page produit est ainsi un modèle de lisibilité). Les temps de chargement sont tout à fait acceptables et le cyber-shoppers retrouve rapidement ses marques donc…j’applaudis des deux mains.

(merci à Serge pour le lien)

Connaissiez-vous la marque Madewell ? Moi non plus. En tout cas ils ont un site semi-marchand très intéressant. Semi-marchand ? Oui car il permet de voir la gamme, les produits, les évènements… mais pour acheter il faut passer par le call-center, pas de vente en ligne.

Malgré ce petit handicap, le site propose une page d’accueil sympa avec une petite animation en introduction et un large bandeau déroulant de modèles :

En cliquant sur une silhouette vous avez le détail du produit ainsi qu’une petite animation vidéo :

Il y a également le coin des designers avec une sorte de scrapbook inspirationel :

Il y a enfin un calendrier interactif pour vous rappeler les différentes occasions de s’habiller :

Bref, une « petite » boutique parfaitement inspirée avec une très belle réalisation. (via 37 Signals)

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 !

J’étais donc aujourd’hui à l’évènement OnAir.

En voyant toutes ces démos, Flex, Air, un point m’est apparu particulièrement clair : l’utilisation des animations pour « donner du sens ».

Quand on voit les interfaces proposées par Apple, on n’a pas de doute : les animations dans les interfaces sont là non pour décorer, pour faire joli, mais pour aider l’utilisateur à « sentir » la métaphore, utilisée dans l’interface.

L’exemple le plus marquant sur Mac est probablement TimeMachine avec une interface de « machine à voyager dans le temps ».

Sur iPhone, c’est toute l’interface qui est ainsi animée. C’est logique : on a un écran plus petit, un mode d’interaction simplifié (pas de souris). La qualité de « l’immersion dans la métaphore » est encore plus importante.

Adobe, avec les technologies Flash, Flex, Air, est sur le même paradigme. L’idée que demain les applications seront encore plus animées, avec plus d’effets graphiques.

Ces nouvelles interfaces sont bien là pour donner plus de sens, pour aider l’utilisateur à mieux comprendre l’application.

Celà passe donc par des technologies, mais cela passe surtout par un savoir faire, que doivent avoir les concepteurs des applications.

Et à ce niveau là, on va évidement avoir un « goulot d’étranglement » parce que très peu de monde maîtrise la conception de tels applications.

YouAreTherModel propose une solution innovante pour présenter des produits.

Un premier exemple est proposé sur le site, avec des lunettes.

Quatres étapes donc pour essayer les lunettes.

Première étape, envoyer une photos, et ajuster le modèle de lunette sur le visage :

Sur ma photo, le programme s’en est plutôt bien sorti, et a plutôt bien positionné les lunettes.

On peut ensuite essayer l’ensemble des modèles proposés :

(vous préférez laquelle ? )

Remarquez qu’on a un rendu plutôt bon, avec un modèle « pseudo 3D » (les branches) et une gestion avancée de la transparence (les verres).

L’expérience s’arrête là, cette fonction est en beta, et n’est pas branchée à un site marchand.

(vue sur blogconversion)

La 3D est un sujet qui me passionne en ce moment, d’autant plus que de nombreuses solutions très crédibles commencent à voir le jour, surtout dans le domaine du commerce en ligne. Nous ne parlons pas ici de technologies de représentation 3D qui nécessitent un plug-in spécifique mais plutôt de ce qu’il est possible de faire en utilisant simplement du Flash (qui je vous le rappelle est installé sur plus de 98% du parc informatique).

Rentrons directement dans le vif du sujet avec ce mur de chaussures en 3D chez UnderUnder (merci à pour Thomas pour le lien) :

Une réalisation particulièrement impressionnante du point de vue technique puisque c’est de la 3D en temps réel qui exploite la librairie PaperVision3D. C’est un peu long à charger mais le résultat est très surprenant (un point de vue qui réagit au mouvement de la souris avec une grande fluidité), surtout le mouvement de la caméra lorsque vous cliquez sur un modèle.

Pour plus d’infos sur la 3D dans Flash, je vous recommande ces deux blogs : Shirotokoro et UnitZeroOne.

Nous avons ensuite ces très belle vue immersives sur le site du Toyota Highlander (merci à Hebi pour le lien et la capture d’écran) :

Un mini-site superbe où l’on peut à tout moment changer la couleur ou le niveau de finition de la voiture tout en découvrant ses différentes caractéristiques. Intégrer ce véhicule dans un environnement urbain est une très bonne idée pour créer de la proximité avec les internautes (« cette voiture pourrait être garée en bas de chez moi« ). Bon par contre c’est de la 3D pré-calculée donc il y a un efaible liberté de mouvement.

Nous avons enfin la solution manipulation 3D de VisionWeb3D :

Encore une fois pas de plug-in à installer, cette vue en 3D temps réel est réalisée en Java. C’est un peu longue à charger mais très réaliste.

L’usage de la 3D dans un contexte de commerce en ligne donne beaucoup plus de profondeur à un produit et décuple la côté addictif de la manipulation. Il existe bien évidement des solutions plus sophistiquées mais qui requiert un plug-in spécifique (lire à ce sujet le billet du Capitaine Commerce : De la 3D dans le panier de la ménagère). Je ne suis pas contre le fait d’utiliser un plug-in, mais vous avez toutes les chances de perdre vos visiteurs en leur imposant le fastidieux processus d’installation.

Bref, puisqu’il existe des solutions permettant de faire de la 3D avec Flash ou Java, pourquoi s’en priver ? Bon après ça il reste l’épineux problème de l’acquisition et de la gestion des modèles 3D mais ça c’est une autre histoire. Nous auront en plus l’occasion d’en discuter lors de notre petit-déjeuner du 19 février prochain.