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

La grande messe annuelle de la FEVAD s’est déroulée hier soir au prestigieux Studio Gabriel et réunissait les plus grands noms du e-commerce : Favor’i 2008.

Les Favor'i 2008 de la FEVAD

De nombreux prix ont été décernés par le jury dont celui du meilleur blog e-commerce pour RichCommerce.fr :

Le trophée du meilleur blog e-commerce

C’est donc avec une grande joie que nous avons accepté cette récompense. Nous nous sommes déjà arrangés avec François pour faire une garde alternée du trophée

Outre la fierté de recevoir ce prix, je suis très content que la profession récompense ce blog car cela signifie que les marchands se soucient de la présentation, de la valorisation et de la mise en scène de leur offre. Ce n’est d’ailleurs pas un hasard si la plupart des sites récompensés par les internautes proposent des interfaces riches (Fnac, La Redoute, Voyages-SNCF, Yves Rocher…). Le rich commerce est une réalité du paysage de l’internet français. Et pourquoi pas une catégorie “interface riche marchande” aux favor’i 2009 ?

Bref, c’était donc une très bonne soirée pour François et moi, ce trophée récompense nos efforts et nous stimule à produire toujours plus de billets et vous dénicher toujours plus de belles réalisations.

Décidément l’industrie automobile est une source intarissable d’interfaces riches. Aussi bien pour les mini-sites expérientiels (qui véhiculent de l’émotion et du subjectif) que pour les fonctionnalités marchandes (assistant au choix, comparateur, configurateur) que pour les fonctionnalités para-marchande (recherche d’un véhicule d’occasion, recherche d’un concessionnaire et prise de RDV…).

Bref, tout ça pour dire qu’encore une fois je vais vous parler de bagnole avec le très bel assistant au choix présent sur le site institutionnel de Ford : Ford Vehicle Showroom.

Avant de me lancer dans la description de cette interface j’attire juste votre attention sur la gestion très efficace des URLs : l’écran est vide au chargement de la page mais en fonction du choix initial (marque ou type), l’URL est automatiquement complétée. Une belle prouesse !

Ce module offre donc une vue panoramique de la gamme avec des petites silhouettes et des options de filtrage en bas  :

L'écran d'accueil du showroom

Lorsque vous passez votre souris sur un filtre (nombre de siège, consommation, prix), les indications sur chacun des modèles est affichée (ici le nombre de sièges) :

Le fonctionnement des filtres

Une fois le filtre activé les véhicules correspondant viennent sur le devant de la scène (alors que les autres se mettent tout au fond) :

La liste une fois filtrée

En cliquant sur un véhicule vous avez accès à sa fiche avec des photos en vignette (sur le bas de l’écran) et des choix alternatifs :

La fiche d'un véhicule

Le design est épuré, le chargement rapide, la manipulation intuitive, les informations parfaitement positionnées… rien à redire, c’est du grand art. En plus ce module ne pend pas beaucoup de place en hauteur, ce qui laisse de l’espace pour le bandeau de navigation institutionnel du site.

En début d’année je vous ai présenté les conclusions d’une étude publiée par Scene7 sur les usages du rich commerce : Une étude sur la montée en puissance du Rich Commerce en 2008.

Cette année ils renouvellent l’expérience en lançant un appel à témoignages : Online Customer Experience, The Next Generation. Je vous invite donc à participer à cette enquête pour que les marchands en ligne français soient eux aussi représentés.

Vous noterez au passage des questions sur les aspects sociaux et mobiles, comme quoi les temps changent…

Bien évidement je vous présenterais les résultats dès qu’ils seront disponibles.

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

Vous connaissiez déjà le zoom automatique des fiches produit de GAP, mais connaissiez-vous le zoom automatique de Zazzle ?

Le principe de fonctionnement est le même (le zoom se fait de façon automatique au survol de la souris) mais l’action se déroule ici directement dans la liste des produits. Illustration avec la page d’accueil :

La page d'accueil de Zazzle

Dès que je passe ma souris sur une vignette (comme ici celle de la carte avec le papillon), il y a un zoom automatique qui est en prime repositionable (en bougeant la souris) :

La même page d'accueil avec un survol de la souris sur le papillon

C’est un peu perturbant au début amis terriblement addictif : on se surprend à survoler toutes les vignettes ! Cerise sur le gâteau, ce n’est même pas du Flash (pour les allergiques).

(via Ajaxian)

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 !

Solebox est une boutique de fringues branchée allemande (ils ont même un blog et une web TV). Jusqu’ici rien de très spectaculaire si ce n’est leur boutique en ligne : Ambiance fond blanc et navigation minimaliste pour laisser un maximum de place aux produits.

La page d'accueil de Solebox

Vous noterez qu’ils ne reculent devant rien : non seulement ils ne soulignent aucuns liens (qui sont en plus en noir) mais en plus ils inversent le logo et le moteur de recherche !

Il y a également la possibilité d’afficher les produits en mode coverflow :

Le mode coverflow de Solebox

On retrouve également le coverflow dans la fiche produit pour pouvoir passer d’une vue à l’autre :

La fiche produit de Solebox

Impossible de ne pas saluer la prise de risque et surtout la recherche de sophistication dans cette interface pour le moins déroutante.

(via Daily Papervision3D)