RichCommerce.fr Tout savoir sur les interfaces riches appliquées au e-Commerce

Les appareils photos numériques sont comme les CD et les livres, des candidats idéals pour le commerce en ligne : faciles à stocker et à expédier, faciles à vendre également car il existe quantité d’avis et de tests et que les caractéristiques techniques sont aguicheuses et faciles à comparer.

Par contre, la mise en scène des produits est plus complexe car il manque souvent des éléments de comparaison. Donner les dimensions des appareils n’apporte en effet pas de réel valeur ajoutée. C’est là où un site comme CameraSize se démarque de la concurrence car il propose une comparaison visuelle des produits. Vous pouvez ainsi comparer deux APN placés côte à côte avec une pile pour vous rendre compte de leur taille relative :

Le comparateur visuel de CameraSize

Cerise sur le gateau : l’interface propose également de superposer une main d’adulte pour voir si ces APN tiennent dans votre paume. Bon OK, la main utilisée est largement surdimensionnée (ça doit être celle d’un basketeur), mais l’idée reste très intéressante.

Idéalement, pour être compétitif sur de la vente d’APN en ligne il faudrait plusieurs choses :

• Un choix très vaste, mais une sélection très directive pour ceux qui ne veulent pas s’embêter à trifouiller les avis (comme Wize ou JustBuyThisOne) ;
• Des tonnes de photos des produits, mais avec des éléments de comparaison visuel (comme CameraSize) ;
• Des caractéristiques techniques complètes, mais avec des outils de filtre et tri simples à utiliser (comme à la FNAC).

Je suis certain que cet exemple est reproductible pour de nombreux autres produits. Si vous avez des exemples, le suis preneur.

Généralement des fonctionnalités comme les simulateurs ou les vues à 360° sont réservées à des secteurs comme l’habillement ou l’automobile. Je vous propose de (re)découvrir ces fonctionnalités, mais en prenant l’air chez Truffaut qui propose un outil de composition de plantes et pots.

Le principe est de laisser les internautes choisir une combinaison de pot et plante et de l’afficher à l’échelle :

L'écran de configuration de votre plante

L’important dans cette fonctionnalité n’est pas de représenter visuellement les plantes et pots, mais surtout de le faire à l’échelle. Une règle sur le côté gauche de l’écran permet ainsi d’évaluer la taille totale de l’ensemble.

Certaines combinaisons sont même bloquées pour vous éviter de commander une plante trop petite par rapport à son pot :

Le même écran avec une autre plante

Le site offre également une vue à 360° pour les plantes et pour les pots :

La vue à 360° d'une plante

Cette solution (proposée par Kujjuk) permettrait d’améliorer le taux de transformation (entre +50% et +80%) et de diminuer le taux de retour (-12%). Une promesse particulièrement alléchante, d’autant que le prestataire se charge des prises de vue (une opération visiblement compliquée, sauf si vous avez un Packshot Creator ou équivalent).

Cette fonctionnalité vient juste d’être lancée, mais j’adorerais avoir un retour d’expérience sur l’impact (temps de visite, taux de transformation…), et je suis sûr que vous aussi bande de curieux !

Voilà près de 3 ans que je parle de rich commerce sur ce blog. Trois années où j’ai pu aborder un certain nombre de sujets : les démonstrateurs, la 3D, les vues à 360°, la vidéo, l’immersion… Et bien figurez vous que je crois avoir trouvé le site marchand qui combine quasiment toutes les pratiques : Le guide d’achat TV de Philips.

Ce site propose donc de vous assister dans le choix de votre téléviseur avec un assistant à étapes qui débute par une vue immersive par dessus votre épaule pour vous aider à choisir la bonne taille d’écran en fonction de la distance de visionnage (deux réglettes permettent d’ajuster la simulation) :

Choisissez la bonne taille d'écran en fonction de la distance

Puis vous choisissez le type de design qui vous plait à l’aide de vidéos chapitrées :

Gros plan sur le design des modèles

Ensuite l’assistant vous propose une première sélection de TV dont vous pouvez voir les caractéristiques en vous rapprochant (belle transition en 3D). Cette vue rapprochée permet notamment de regarder la TV selon différents angles de vue alors qu’une vidéo est en train de tourner à l’écran :

Vue à 360° d'un modèle de TV

Vous pouvez enfin affiner votre choix en précisant votre budget, l’assistant vous propose alors deux alternatives en fonction de la taille de l’écran ou de la pertinence selon vos choix précédents :

Précisez votre budget à l'aide de la réglette

Et vous êtes alors de retour dans votre salon en train de regarder la TV qui vous correspond le mieux à vos attentes et votre budget (vous pouvez changer de chaîne, allumer ou éteindre l’éclairage arrière, déplier le panneau avec la comparaison des modèles…) :

Jouez avec votre future TV dans ce salon virtuel

Au final nous avons donc un site très complet… mais surtout très long à charger et trop gourmand en ressources. Il en résulte des saccades dans les animations et une piètre réactivité de l’interface. Même sil a démonstration technique est impressionnante, la fluidité et l’expérience utilisateur doivent-elles être sacrifiées pour autant ? Peut-être qu’une version haut et bas débit permettrait de pallier ce problème en apportant d’un côté une information riche et de l’autre une ambiance immersive.

(via Hebiflux)

Depuis le début de l’année Shisheido est en train d’expérimenter à Tokyo un dispositif de réalité augmentée pour tester du maquillage en quelques secondes. Ce dispositif utilise un miroir digital qui superpose une couche de maquillage virtuelle sur votre visage :

Les premiers retours sont visiblement positifs et les autres acteurs du marché ne veulent pas se laisser distancer. L’Oréal a donc décidé de se lancer à son tours (de même que Boots and Walmart) avec un kiosk proposé dès cet été en Angleterre : L’Oréal weighs up digital mirror kiosks.

La technologie utilisée est celle de EZface qui propose aussi une version web appelée Virtual Miror. Cette application vous permet d’uploader votre photo et d’appliquer dessus du maquillage de différentes marques :

Le maquillage virtuel d'EZface

Même si je n’apprécie pas du tout les choix graphiques de l’interface, cette application fonctionne plutôt bien et on s’amuse vite à expérimenter plusieurs sortes de poudres, blush, mascara, rouges à lèvres, eye-liner… Je retiens deux fonctionnalités particulièrement intéressantes : La réglette avant/après (sous la photo) et les Hot Looks qui permettent d’appliquer en 1 clic un maquillage complet en choisissant dans une liste de mannequins. Vous avez également la possibilité de sauvegarder, imprimer, envoyer et partager vos photos retouchées.

Cette application est disponible chez L’Oréal (en page d’accueil) avec une interface aux couleurs plus harmonieuses : Mon Maquillage Virtuel.

Maquillage virtuel chez L'Oréal

J’apprécie particulièrement la possibilité de voir le résultat sur une moitié de visage à l’aide de la réglette. (merci à Puche pour le lien).

(via Springwise)

Ce mois-ci Olympus nous sort le grand jeu pour faire la promotion de son tout nouvel appareil photo numérique (le E-PL1) avec une très belle application de réalité augmentée. L’idée est d’utiliser la webcam des internautes pour tester et manipuler l’appareil. Ici une vidéo de démonstration :

Le principe consiste donc à imprimer une petite carte avec un marqueur qui sera repérer par la webcam :

Une simple carte permet de simuler un appareil photo

Un plug-in se charge ensuite d’incruster l’appareil mais également de gérer les animations comme la sortie du flash, le changement de l’objectif (en cliquant sur les pastilles jaunes) :

La réalité augmentée en action chez Olympus

Encore plus fort : Il est également possible de prendre des photos (virtuelles) avec cet appareil (virtuel) et de les partager sur Facebook. De même, si vous retourner l’appareil, vous pouvez tester l’interface et ses menus.

Bref, une très belle réalisation propulsée par la technologie française de Total Immersion, Cocorico !

(via Virtual Worlds News)

En farfouillant dernièrement sur le site d’Ikea je suis tombé sur une fonctionnalité tout à fait intéressante des pages catégorie : Une tête de gondole-démonstrateur qui permet de mettre en valeur le produit-star de la catégorie mais également de laisser les internautes le manipuler. Illustration avec la sous-catégorie lavabos pour la salle de bain :

La page des lavabos chez Ikea

En cliquant sur les icônes à droite et à gauche il est possible de changer le modèle du lavabo ainsi que le robinet :

Le démonstrateur de lavabos chez Ikea

Vous noterez au passage qu’ils ne se contentent pas de trafiquer l’image car les reflets des robinets changent avec eux.

Il existe un principe équivalent dans le rayon cuisine où l’on peut tester les façades :

Le démonstrateur de façade dans le rayon cuisine d'Ikea

La manipulation est très intuitive, l’intégration des modules est très propre, pas de doute, c’est du Ikea !

Ce soir je vous propose de (re)découvrir le site de Ferrari. Pourquoi ce site là ? Parce que malgré des produits qui ne demandent qu’à briller, la scuderia fait un usage très discret des interfaces riches. Illustration avec la page d’un modèle (la California) où l’on retrouve sur un même écran une visite guidée, beaucoup de texte et des images 100% statiques :

La page de présentation de la Ferrari California

La visite guidée fonctionne comme une vue à 360° chapitrée avec des zones réactive sur les points d’intérêt du modèle. L’intégration de ces différents éléments dans la page se fait de façon très naturelle et le tout fonctionne à merveille.

Signalons également un configurateur visuel très sobre mais diablement efficace (les différentes options comme les volants sont affichés en second plan) où il est même possible de choisir la couleur de bloc de frein :

Le configurateur sur le site de Ferrari

Signalons également un module très rigolo de présentation de l’évolution du design avec un timeline cliquable et un beau travail de morphing :

Evolution du design chez Ferrari

Enfin pour celles et ceux qui veulent quelque chose de plus immersif, il y a toujours le jeu Ferrari Virtual Race librement téléchargeable  (uniquement sur PC) :

Le jeu Virtual Race de Ferrari

Au final nous avons donc un site beaucoup moins tape-à-l’oeil que celui d’autres constructeurs comme Cadillac ou Jaguar mais qui propose un très subtil dosage de contenus statiques et riches.

Vous connaissez Wrangler ? Mais si enfin, la marque de jeans coincés entre le mammouth (Levi’s) et la diva (Diesel). Pour résumer une longue histoire disons que Wrangler est dans un créneau très concurrentiel où les acteurs en présence se battent avant tout sur la créativité plutôt que sur les prix.

Bref, le seul moyen pour eux de se démarquer est de raconter de belles histoires et de surprendre les clients. C’est exactement ce qu’ils font avec leur site web qui est un très bon mélange d’interactivité et d’immersion. Il y a tout d’abord la présentation des collections sous forme de tableaux mettant en scène un homme et une femme dont vous choisissez la panoplie :

Choisissez vos tenus sur ce module de présentation des collections

Tout est parfait dans ce module : Les couleurs surannées, la musique roots, le traitement graphique low-fi… l’ensemble est parfaitement immersif et permet de concentrer l’attention sur les deux personnages (qui sont les seuls éléments mobiles de cette page).

Une fois que vous avez choisi un personnage, vous le voyez évoluer dans une vidéo où il est possible de choisir le point de vue (pour apprécier les fringues) :

Détails de la collection sur le site de Wrangler

Sinon il y a aussi le très belle campagne Blue Bell qui propose une modalité d’interaction très particulière :

Votre souris commande le zip

Ce mini-site propose ainsi différentes scènes où l’on peut bousculer les mannequins à l’aide de la souris :

Baladez les mannequins de droite à gauche avec votre souris

Ces scènes ne sont pas idéales pour mettre en avant les produits (pas de page de détails) mais elles remplissent parfaitement leur rôle : Surprendre et distraire. Il est ainsi très ludique de maltraiter les mannequins au fil des 6 scènes (et autant de produits manipulés) :

Et vlan !

Mission accomplie !

(via BlogoErgoSum)

Si vous n’êtes pas allez voir le nouveau site de la Camif alors je vous engage à le faire, ne serait-ce que pour le module d’essayage virtuel de matelas. Vous avez ainsi le choix entre 3 mannequins et 5 matelas :

Test du matelas en position assise

De petites séquences vidéo vous permette de tester ou de faire tester le matelas dans diverses positions et angles de vue :

Seconde vue pour la position assise

Vous pouvez aussi avoir des vues plus techniques comme le dessin de la colonne vertébrale dans la position allongée ou une animation 3D pour montrer l’intérieur du matelas :

La position allongée

Il y a enfin une vue en gros plan pour tâter l’épaisseur du matelas et apprécier le grain de la matière :

La vue rapprochée

Une réalisation sobre mais efficace au service du produit, rien à redire. Dommage qu’il n’y ai pas plus de produit en démonstration…

(merci à Julien pour le lien)

Vous connaissez Dunlop ? Mais si enfin, la marque fétiche du suédois Björn Borg (ha non mince c’est Donnay). Bon bref, ils ont besoin de se refaire un image et pour cela, rien de tel que le buzz. OK, mais pour cela il faut de la matière première… et ils ont visiblement choisi de miser sur la Volley, une chaussure mythique des années 40. Il y a donc une campagne décalée savamment orchestrée (cf. Les Dunlop Volley sont-elles les chaussures les plus hype du monde ?) et surtout un site un peu loufoque pour assurer la promotion de cette chaussure de sport.

Nous avons donc un site expérimental où se mélangent pixel design et mise en page irrationnelle avec un prime un démonstrateur de chaussure :

Le démonstrateur de la Volley

L’idée étant de pouvoir choisir son fond d’écran, son pantalon, le modèle mais également la saleté de ce dernier (j’espère que c’est de la terre battue) :

Choisissez le niveau de saleté de votre chaussure

Et comme ils sont joueurs ils proposent également des choix décalés comme cette patte de squelette sur fond d’usine à déchets :

La classe !

Il y a en prime un autre démonstrateur mais pour le laçage :

Le démonstrateur de laçage de la Volley

Voilà, précisons qu’il s’agit du site australien de la marque. Un site sans trop de prétentions mais un bon moment à passer pour interagir avec cette chaussure mythique (je me demande si je ne vais pas me laisser tenter…).