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

Normalement si vous lisez ce blog c’est que vous pensez que les interfaces riches ont leur intérêt sur un site marchand. OK, mais que se passe-t-il quand Flash n’est pas disponible ? Je ne suis pas en train de vous parler des puristes qui refusent tout plug-in ou des pauvres employés obligés de surfer sur le web avec une vieille d’IE sans Flash imposée par leur DSI, mais plutôt d’une mise à jour qui se passe mal ou d’un test de détection qui ne fonctionne pas comme prévu. Bref, que se passe-t-il quand vous ne pouvez plus utiliser Flash alors que cela fait des années que l’image du marque et la valorisation des produits reposent sur des animations, de la vidéo ou du son ? C’est la catastrophe !

Heureusement certains éditeurs zélés pensent à tout et prévoient une version HTML. C’est le cas de Rolex qui nous propose un site double (HTML et Flash) au contenu et à l’expérience quasi-identique. Illustration avec la page d’accueil :

La page d'accueil de Rolex en Flash

De larges visuels et un défilement horizontal pour les têtes de rubrique, exactement comme la version HTML :

La page d'accueil de Rolex en HTML

Idem pour les pages de contenu comme ici une rubrique sur l’expédition du sous-marin Trieste à plus de 10.000 mètres en 1960 :

Une page de contenu en Flash sur le site de Rolex

Une vidéo en plein écran et du son pour poser l’ambiance, forcément absents de la version HTML mais qui propose toute de même des visuels et contenus identiques :

Une page de contenu en HTML sur le site de Rolex

Pour finir je vous propose cette page produit :

Une page produit en Flash sur le site de Rolex

Toujours un large visuel et une navigation locale sous forme de frise en bas de page avec un effet loupe, que l’on ne retrouve pas sur la version HTML mais dont la mise en page est encore une fois la même :

Une page produit en HTML sur le site de Rolex

Que faut-il retenir de ce site ? Que les Suisses ont bien fait les choses, certes, Mais que Flash n’est pas nécessaire pour raconter une belle histoire ou pour valoriser un produit. Cette technologie (ou une autre) apporte un avantage indéniable (comme sur le page de contenu) pour un sentiment d’immersion plus prononcé mais qu’il ne faut pas faire reposer un site uniquement dessus.

Plus je navigue sur ce site et plus je me dis qu’il a été conçu en HTML et enrichi par la suite avec du Flash, juste ce qu’il faut pour ajouter une pointe d’interactivité et d’ambiance tout en maintenant une expérience cohérente entre les eux versions. C’est assurément une bonne pratique que je recommande à tous.

Voici l’enseignement que je pourrais en retirer : Si vous n’êtes pas capable de raconter une belle histoire ou de valoriser un produit avec du texte et des images alors il faut revoir votre copie. Vous aurez tout le loisir après coup de proposer une expérience plus riche et immersive mais cette étape préalable me semble indispensable pour ne pas confondre outils et moyens.

J’ai déjà eu l’occasion de vous parler de différents moteurs pour faire des zooms ultra-puissants, mais il s’agit avant tout de fonctions de zooms sur des photos, pas sur des documents. C’est donc sur ce créneau que se positionne Zoomorama. Cet acteur français propose ainsi une solution de publication et de partage mais surtout une solution orientée e-commerce : Zoomorama Pro.

L’idée est donc de proposer un moteur de zoom ultra-puissant mélangée à une fonction de catalogue électronique. Illustration avec ce test sur un catalogue Louis Vuitton :

Zoomorama en action sur ce produit Louis Vuitton

Le rendu est très propre, le fonctionnement intuitif et c’est plutôt rapide à charger. Autre exemple avec e-Tiquities, la référence des boutiques en ligne d’objets d’antiquité : World’s Leading Antiquities e-Commerce Store Launches with Zoomorama.

Zoomorama en action chez e-Tiquities

Voici donc un concurrent pour Microsoft et sa technologie Seadragon que l’on retrouve dans le module Deep Zoom de Silverlight. Pour ceux qui souhaitent avoir des infos techniques plus détaillées, Zoomorama fonctionne avec Flash mais avec des spécificités qui m’échappent : La technologie Zoomorama.

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)…

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).

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 !

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)