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

Avoir la possibilité de zoomer sur une photo est à mon sens une fonctionnalité essentielle à toute boutique en ligne, et plus particulièrement pour celles qui vendent des vêtements, sacs ou autres articles qui ont besoin d’être touchés pour être achetés. Avec un zoom performant il est ainsi possible de procurer une sensation proche du touché en permettant aux internautes d’observer le produit dans ses moindres détails et surtout de mieux appréhender la texture des matériaux.

C’est dans cette optique d’étude au microscope que je vous propose de découvrir ces quelques exemples de zooms assistés : Delve Into the Details with Guided Zoom. Le principe est de fournir aux internautes des points de détails à observer comme sur la boutique de Exofficio :

La page produit d'Exofficio

Un clic sur la photo et vous avez la fonction de zoom (propulsée par Scene7) et une série de vignettes sur le côté qui vous amènent directement sur les points d’intérêts avec un beau scrolling :

La fonction de zoom assisté chez Exofficio

Vous remarquerez que les vignettes changent aussi de couleur quand vous cliquez sur les vignettes en bas de page.

Autre exemple avec Telescope.com où les vignettes sont affichées en superposition de la fenêtre de visualisation directement dans la fiche produit :

Le zoom assisté chez Telescope.com

Cette seconde solution est peut-être un peu perturbante pour l’utilisateur car cela surcharge la page. Idéalement il faudrait faire apparaitre les vignettes au survol de la souris et proposer un bouton pour afficher le zoom dans une fenêtre à part.

Mise à jour (17/09/2009) : Laurent Jouanneau me précise que Zoomorama propose une fonctionnalité similaire sur le site de Darty (uniquement sur la gamme appareils photo reflex) :

Le zoom assisté chez Darty

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.

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)

Vous souvenez-vous de Borders, ce marchand de livres qui utilisait une interface de visualisation des livres qui reprenait la métaphore des rayons ? Et bien figurez-vous que j’ai encore plus fort à vous proposer avec Zoomii, une boutique en ligne qui présente les produits dans un rayon gigantesque :

La navigation au sein des rayons se fait soit en glissant les rayons (comme dans Google Maps), soit en utilisant les flèches (comme dans Google Maps). Il est possible de zoomer sur un rayon (comme dans Google Maps) ou au contraire de prendre du recul pour avoir une vue d’ensemble (comme dans Google Maps).

Ce principe n’est pas nouveau (puisque déjà exploité par Browse Goods) maisil est ici superbement implémenté. Le plus drôle dans tout ça, c’est que Zoomii n’est qu’une interface, c’est bien le catalogue Amzon qu’il y a derrière.

Voici donc un bel exemple de mashup marchand : l’interface de Google Maps et le catalogue d’Amazon. Plus d’infos ici : Zoomii, A Virtual Book Browsing Service et Visual book browsing with Zoomii.

Souvenez-vous il y a quelques temps je vous parlais des zooms automatiques de GAP, et bien figurez-vous que vous pouvez vous aussi implémenter cette fonctionnalité pour la modique somme de 31,6 € (25 £). C’est en tout cas ce que propose Magic Toolbox :

Pas grand chose à redire sur le comportement de cette interface : c’est rapide à charger et fluide. Reste encore à voir comment ça tient la charge… (via Ajaxian)

Souvenez-vous, il y a quelques semaines j’avais fais une interview Sheila Dahlgren (la directrice marketing de Scene7), elle nous avait fait une petite visite guidée de Sunglass Hut, une très belle boutique en ligne de lunettes.

A mon tour de vous en faire une visite guidée plus détaillée avec tout d’abord la page catégorie qui est bordée par les options de filtre et de tri, les modes de visualisation et les outils de comparaison / panier :

Vous remarquerez sur le bas de l’écran les zones où il est possible de mettre des articles en glissé-déposé et de lancer une comparaison :

Il y a également une page produit très sobre avec une bonne répartition de l’espace d’affichage :

J’adore cette fonction de zoom en pleine largeur de page :

Il existe également dans le site des rubriques inspirationnelles comme cet assistant de recherche par style de vie :

Pour finir, ces séquences vidéo mettant en scène les articles :

Inutile de chipoter, c’est du très bon bouleau. Pour être plus précis, il est très rare de voir des boutiques en ligne de cette qualité : mise en page, intuitivité, sophistication de l’interface, variété des contenus…

J’ai eu la chance aujourd’hui de pouvoir faire une interview de Sheila Dahlgren (avec la complicité de Cédric) qui est la directrice marketing de Scene7 chez Adobe. L’occasion de parler des dernières références et des évolutions prochaines de Scene7.

Concernant l’offre, la grosse nouveauté à venir est la prise en charge de vidéos au sein de leur plateforme SaaS. Dans un premier temps cette solution servira à faire du progressive streaming dans de bonnes conditions. Dans un second temps ils n’ont pas pu trop me dire sur quoi ils travaillaient mais il va y avoir des annonces de faites en juin prochain. Je ne suis pas devin mais je me doute bien que cela va avoir un rapport avec de la personnalisation de vidéos à la volée.

Autre grande nouvelle, le lancement prochain d’un système unifié de gestion des contenus numériques (photos, vidéos…), le tout au sein d’une interface en Flex pour plus de modularité et de… flexibilité (sans mauvais jeu de mot). Un premier pas vers une plateforme proposée en self-service.

Voici la première partie de l’interview où Sheila nous présente l’offre ainsi que les nouveautés à venir concernant la vidéo :

Cette rencontre a été également l’occasion de faire le point sur les dernières réalisations :

• House Of Fraser (avec des zooms sur-puissants) ;
• Under Armour (zoom, vue 360°…) ;
• Smith & Nobles (avec un configurateur de rideaux).

Le meilleur pour la fin avec cette très belle boutique (Sunglass Hut) qui propose une interface très impressionnante qui laisse un maximum de place aux visuels. Petite visite guidée avec Sheila :

Voilà, vivement les explications sur cette prochaine offre de services autour de la vidéo.

Si vous souhaitez mettre en œuvre des interfaces riches au sein de votre boutique en ligne, plusieurs options s’offrent à vous : soit vous sortez l’artillerie lourde et partez pour une refonte complète (un site 100% Flash à l’image de ShopComposition) soit vous optez pour un déploiement plus léger avec de l’Ajax par ci-par là (comme chez GAP).

C’est de ce second cas de figure que je souhaite vous parler avec cette superbe boutique qui pratique l’enrichissement progressif : American Eagle Outfitters. C’est un site à priori en HTML sauf que certaines partie des écrans sont en fait bien plus dynamiques que l’on ne pense.

Première illustration avec les quatre liens ‘Find a Store‘, ‘Trak Order‘, ‘Shopping List‘ et ‘My Bag‘ qui déplient des mini-panneaux au survol de la souris :

Deuxième exemple avec cette page catégorie où un survol sur les étiquettes à gauche de la photo permet de changer la couleur du sweat :

Troisième exemple sur cette page produit où il possible de changer le motif et modifier la vue du produit sans avoir besoin de recharger la page (vous noterez au passage le bouton ‘View Larger‘) :

Dernier exemple sur cette autre page produit où il est possible de faire tourner le mannequin pour voir le produit sous différents angles :

Serais-je tombé amoureux de cette boutique en ligne ? Oui complètement. Je suis ébahi par les trésors d’inventivité déployés par ce site marchand (ils proposent par exemple un check out sans création de compte). Une véritable mine d’or de bonnes pratiques.

En tout cas un très bon exemple de parfait équilibre entre efficacité marchande et sophistication de l’interface.