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

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.

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.

Incroyable, comment de très grands sites n’arrivent pas à bien maîtriser les interfaces riches.

Je pense à VoyageSncf et ebay (voilà, j’ai balancé ).

Donc, ces deux sites mettent en oeuvre de nouvelles interfaces, utilisant l’ajax, pour accélérer, simplifier, améliorer l’interface.

Bonne idée à priori…

Mais voilà, Ajax, c’est très compliqué à bien mettre en oeuvre.

Sur les exemples cités, on arrive à des résultats vraiment incroyables.

Sur l’un des sites, il y a simplement des options qu’on ne peut plus activer !

Sur l’autre, le formulaire est régulièrement réinitialisé !

Franchement, si je devais conseillé ces entreprises, mon conseil serait très simple : revenez au fondamentaux. Il vaut mieux un site “web 1.0″ qui marche bien qu’un site “2.0″ inutilisable.

Un tel billet sur Rich commerce ?

Oui, trois fois oui !

Dans rich commerce, il y a commerce. C’est le but. Si une interface n’aide pas à vendre, il ne faut pas l’utiliser !

Maintenant, tout le monde a bien compris que l’avenir de la publicité passait par Internet.

On a donc sur ce média des budgets importants.

Souvent, quand on voit les pubs, on ne cherche qu’une chose : les virer. Mais certaines sont vraiment très réussies.
Exemple : Adidas avec cette pub carrément bluffante :

A essayer absolument : c’est très difficile à raconter mais vraiment à voir.

(merci manu, tobias)