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

J’ai déjà eu de nombreuses occasions de vous parler du principe de mannequin virtuel, mais ce que propose Fits.me me semble particulièrement novateur car il mélange ce principe avec des photos de produits bien réels.

Le principe du mannequin virtuel chez Fits.me

Plutôt que de mannequin virtuel, ils préfèrent parler de cabine d’essayage virtuelle. Le service a été lancé il y a quelques mois et il existe déjà une première grosse référence avec la boutique anglaise Hawes & Curtis : Fits.me Launches World’s First Virtual Fitting Room.

Vous commencez donc par donner vos mensurations :

Première étape : Vos mensurations

Puis le simulateur vous permet d’essayer différente taille et de voir si vous rentrez dedans (virtuellement) et comment le tissu tombe :

Deuxième étape : Essayez différentes tailles

Le simulateur est très simple à manipuler et il y a tout un tas de chois alternatifs pour vous guider dans votre achat. Je ne sais pas combien de prises de vue cette cabine d’essaye virtuelle a demandé mais le simulateur annonce près de 100.000 combinaisons possibles pour le mannequin. En tout cas le rendu est particulièrement réaliste :

Les différents rendus du simulateur

C’est de très loin la simulation la plus spectaculaire que j’ai testé et je ne peux que reconnaitre la diabolique efficacité de ce dispositif. Essayez-le et vous serez immédiatement convaincu !

Vous pensiez que le social shopping était le levier ultime de la transformation ? Et bien non, en tout cas c’est ce que nous révèle les résultats de l’étude “Expérience des clients pour la nouvelle décennie” menée par Scene7. Cette enquête a été menée auprès de 546 entreprises dans 6 secteurs d’activité. L’étude est dense mais permet de classer les fonctionnalités rich commerce par taux d’efficacité :

1. Visites guidées ou visionneuses multimédia = 36 %
2. Filtrage visuel et recherche avancée sur les caractéristiques des produits (taille, couleur, prix) = 33 %
3. Comparatifs de produits = 28 %
4. Zoom = 28 %
5. Vidéos pour la commercialisation, la publicité et la démonstration = 27 %
6. Catalogues et brochures interactifs = 27 %…

Efficacité des fonctions rich commerce

Des chiffres très intéressants qu’il faut mettre en parallèle des fonctions de social shopping :

1. Commentaires et évaluations d’utilisateurs = 31 %
2. Classements et notes d’utilisateurs = 26 %
3. Chat en direct / messagerie instantanée = 22 %
4. Conception collaborative de produits personnalisés = 21 %
5. Contenu généré par les utilisateurs (images, vidéo, son) = 20 %
6. Flux RSS = 19 %…

Donc selon ces chiffres, une visite guidée ou une recherche visuelle serait plus efficace que les avis des internautes. Voilà des chiffres qui doivent faire chaud au coeur des partisans du rich commerce ! Je vais tout de même émettre trois bémols :

• Ces chiffres proviennent d’une étude commandée par Scene 7 donc ils sont forcément en leur faveur ;
• Il n’a jamais été question de choisir entre visite guidée et avis clients, ce sont deux fonctionnalités complémentaires qui ne répondent pas du tout aux mêmes objectifs ;
• Cette étude ne semble pas avoir pris en compte les Zoom XXL qui font un véritable tabac (cf. +25% de taux de conversion chez Darty grâce aux zooms XXL et From Shoes to Shirts, Bigger is Always Better).

Dans tout les cas de figure je vous recommande vivement de vous inscrire pour télécharger cette étude qui aborde aussi le m-commerce et les spécificités régionales.

(via I Love Web)

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 de nombreuses occasions de vous vanter les mérites des zooms dans un contexte e-commerce. Non seulement la possibilité de voir de plus près le produit est indispensable pour rassurer les clients / prospects mais si le zoom est suffisamment puissant, il donne une sensation quasi-tactile aux internautes. Illustration chez Zoomorama avec cette démonstration sur de la maroquinerie où le grain du cuir est parfaitement mis en valeur par ce gros plan :

La sensation quasi-tactile des zooms XXL

Après plusieurs mois d’expérimentation chez Darty, les premiers chiffres “officiels” m’ont enfin été communiqué par Franklin Servan-Schreiber et l’impact est très positif : +25% de taux de conversion sur les 15 familles de produits exploitant Zoomorama (appareils photos, écrans plat, machines expresso, frigidaires, laves vaisselles…) ainsi qu’une satisfaction importante des utilisateurs qui déclarent la fonction de zoom utile à la prise de décision d’achat.

Les zooms XXL chez Darty

Même si je ne suis pas surpris par l’accueil très positif des utilisateurs pour cette fonction de zoom, je suis tout de même épaté par l’impact sur le C.A. : +25% !

Voilà en tout cas des chiffres qui vont apporter de l’eau à mon moulin sur les bienfaits de la mise en scène des produits et sur les fonctionnalités enrichis (zoom, vue 360°, démonstrateur…). Bon OK, si vous lisez ce blog c’est que vous en êtes convaincu, j’espère simplement que ce retour d’expérience va vous décider à sérieusement envisager l’implémentation d’une fonction de zoom XXL (il existe des prestataires très sérieux dans ce domaine) tant le ROI me semble évident. Certes, il y a le problème des photos de produit (qui va financer les clichés en HD ?) mais il est ici question d’améliorer de façon significative l’expérience utilisateur (et les ventes accessoirement !).

Après GAP et 77Kids, c’est au tour de TopMan de proposer un assistant au choix de jean : Top Jeans. L’idée est de mettre en scène les différentes coupes de jean pour vous aider dans votre choix :

L4assistant au choix ce jean chez TopMan

Une fois que vous avez choisi une coupe, vous pouvez demander au modèle de se retourner ou de bouger (en cliquant sur les boutons de 1 à 4) pour voir comment le jean se comporte (aisance, tombé du revert sur la cheville…). Une interface simple avec un bon contraste font de cette fonctionnalité une très bonne pratique.

J’ai toujours été fan des menus de navigation surdimensionné et du coup je suis tout à fait en phase avec le dernier article du blog de Get Elastic : Navandising: Merchandising in Navigation. L’idée est d’appliquer des techniques de merchandising (mise en avant de produits) aux menus de navigation. Bon par contre ça ne s’applique qu’aux boutiques proposant des panneaux de navigation suffisamment grands pour pouvoir y insérer des blocs.

L’auteur de l’article cite ainsi American Eagle (que l’on ne présente plus) :

Le merchandising des menus de navigation chez American Eagle

Mais on peut également découvrir le site de Moosejaw :

Les encarts sur la navigation de Moosejaw

À ces deux exemples je rajouterais ceux de Electronic Arts :

Mise en avant de produit chez EA.com

De même que le site de Sony :

Catégorisation avantageuse chez Sony.fr

Et enfin le site de Yves Rocher :

Les panneaux de navigation du site de Yvers Rocher

Une très bonne idée, que se soit pour mieux guider les internautes ou pour mettre en avant des produits. Si vous connaissez d’autres exemples, merci de laisser les URLs en commentaire.

L’industrie automobile est décidément une source quasi infinie de bonnes pratiques en termes d’interfaces riches dans un contexte marchand. À défaut de “sites marchands”, nous pourrions plutôt parler de “sites participant activement au cycle de vente”, mais le résultat est toujours très agréable à regarder et à manipuler.

Commençons avec Toyota qui débute la commercialisation de la troisième génération de sa Prius avec ce mini-site qui met en scène les différentes qualités du véhicule et notamment sa forme aérodynamique :

La simulation d'aérodynamisme de la Prius

Des “particules” (pétales de fleurs ?) sont ainsi projetées sur l’avant de différentes silhouettes de voiture. Dans la cas de la Prius, ces dernières flottent de façon harmonieuse autour de la carrosserie alors qu’avec les autres silhouettes elles se dispersent de façon disgracieuse. Ce n’est pas une vidéo mais bien une animation en temps réel qui rajoute un effet hypnotique à ce démonstrateur.

Il y a également cette simulation de températures extrêmes pour mettre en valeur le toit solaire qui capte l’énergie et la transforme en air frais :

La simulation de températures extrêmes de la Prius

C’est beau, ludique et informatif.

Autre exemple dans un style complètement différent avec le mini-site de la Toyota iQ : Virtual Test Drive. Les internautes sont ainsi invités à tester la petite dernière de la gamme sur différents circuits qui mettent en valeur les qualités du véhicule (ici le circuit “sécurité”) :

La piste sécurité de la Toyota iQ

Vous apprécierez le style graphique très particulier (qui me fait penser au film Tron) de ce démonstrateur 3D où la voiture évolue dans un décor fixe (écran par écran). Le rendu est excellent et l’on passe beaucoup de temps à optimiser ses trajectoires et éviter les obstacles.

Bref, encore une fois c’est propre, beau, ludique et ça permet de capter l’attention des internautes. À rajouter à ma longue liste de bonnes pratiques.

(via Away 3D blog)

LetsBuyIt.fr vient d’ouvrir ses portes en France (j’en ai parlé dans ce billet).

LetsBuyit est un moteur de shopping, dont l’une des innovation est l’interface.

L’interface est en effet conçue avec trois volets :

• La partie de gauche, qui est plutôt la partie “classique” du moteur de shopping, avec la présentation des produits, des marchands…
• La partie de droite, qui est centré sur l’utilisateur (mon compte, mes produits préférés, …)
• La partie centrale, qui est une zone graphique, et qui présente “différemment” les produits et les marchands.

On peut zoomer une zone, avec un effet de glissement horizontal. Exemple avec l’espace personnel ouvert :

Ce qui est vraiment intéressant avec ce service, c’est l’intégration assez poussé entre de l’Ajax et le Flash.

Bien sûr, l’espace central est en flash :

le système de navigation horizontal est en Ajax (un vrai challenge, bravo Olivier et toute l’équipe !).

L’intégration entre les différentes technologie est vraiment poussée : on peut même faire du drag & drop du flash vers l’ajax !

J’ai déjà eu de nombreuses occasions de vous parler des carrousels, ces éléments d’interface qui permettent de parcourir une liste de façon latérale. Le vidéo-blog Smart Experience nous propose à ce sujet une très bonne vidéo qui résume les avantages de cette technique : Interaction Design Skills: Carousels.

Les points-clés de cette vidéo :

• Les carrousels fonctionnent partout (web, desktop, mobile) car ils reposent sur le principe de la manipulation directe (tactile ?) ;
• Les carrousels sont particulièrement bien adaptés aux images (comme chez Cooliris par exemple) ;
• Les carrousels sont avant tout destinés à du survol rapide plutôt que de la recherche précise (pour cela les moteurs ou arbres sont bien plus efficaces) ;
• Les carrousels permettent d’anticiper la navigation en proposant un aperçu de l’item suivant (comme sur le site d’Apple).

Bref, vous n’avez plus aucune raison de vous laissez tenter par les carrousels. (via Konigi)

Voilà un certain temps que je publie des exemples d’interfaces riches appliquées au e-commerce sur ce blog, mais je me rends compte que je n’ai jamais réellement pris le temps de bien définir les différentes types d’interfaces. Différents types ? Mais oui enfin, car le rich commerce est avant tout une histoire de modules : Il serait suicidaire de concevoir une boutique entièrement en Flash (quoi que certains s’y risquent encore), la tendance est plus à l’enrichissement des interfaces ou plutôt d’éléments d’interfaces.

Mon raisonnement est le suivant : à chacune des étapes du cycle d’achat correspondent des types de modules marchands “riches”. Ceci est synthétisé dans le schéma suivant où les types de modules sont répartis sur les différentes étapes :

Les étapes du cycle d'achat

Chacun de ces modules remplit une fonction bien précise et n’est pertinent qu’à une étape donnée du processus.

Mais il est également possible de regrouper les modules marchands en familles : Accès (pour amener l’internaute jusqu’à la fiche produit), Aide au choix (pour le guider dans sa décision), Mise en scène (des produits / services), manipulation et transaction.

Les familles de modules marchands enrichis

Voilà, nous avons maintenant une classification exhaustive des différents types de modules marchands enrichis. Ceci pourrait nous servir de glossaire car j’ai un peu tendance à jargonner dans ce blog.

Si vous voyez d’autres types de modules ou de familles, n’hésitez pas à vous manifester dans les commentaires.