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

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.

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

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)

Connaissez-vous Gocycle ? Pour faire simple disons que c’est le Apple du vélo pliable : performant, technique, très élégant et surement très cher ! Au niveau de leur site web il y a comme un clin d’oeil à la marque à la pomme avec une mise en page parfaitement épurée et un très beau visuel détouré :

La page d'accueil de Gocycle

Ce qui frappe dans cette page d’accueil c’est l’absence totale de texte. Un simple visuel avec des points d’attention sous forme de (+). Une fois cliqués, ces derniers ouvrent de petites séquences vidéo sur les caractéristiques du produit :

Le (+) produit de Gocycle

Les textes y sont minimaliste, le traitement graphique aussi, par contre les cinématiques de même que les transitions sont plutôt agréables. Un petit clic sur (x) permet de revenir au visuel général.

Rassurez-vous il est tout de même possible d’accéder à d’autres pages à l’aide d’un menu de navigation qui se déplie sur la bas de la page au survol de la souris:

Le menu de navigation de Gocycle

Au final nous avons une réalisation remarquable par son côté ultra-minimaliste mais avec un temps de chargement un peu long. Mais bon… c’est pour un vélo électrique donc nous ne leur en tiendrons pas rigueur.

(via Springwise)

Ce coup-ci c’est la guerre… il y avait bien trop longtemps qu’ils se regardaient de travers sans oser passer à l’attaque mais depuis le début de l’année les armés sont en marche et cette guerre ne fera pas de cadeaux. Bien évidement je veux parler de la guerre que se livrent Lego et Magebrand pour imposer sur le marché leurs marques de robots de combat (respectivement les Bionicles et les NeoShifters). Ces deux franchises sont assez similaires et les stratégies déployés par ces deux groupes pour séduire un public jeune sont également très similaires : des sites web dédiés avec des tonnes d’interfaces riches dedans.

D’un côté nous avons les NeoShifters de l’américian Megabrand :

La page d'accueil des Neoshifters

De l’autre nous avons les Bionicles du danois Lego :

La page d'accueil des Bionicles

Premier round : présentation des produits en Flash

Il y a tout d’abord tout à background à ces franchises : une trame centrale, des histoires parallèles, des personnages et plein de robots avec moultes caractéristiques. Au niveau des sites web, ça donne des pages produits avec des robots animés et des tonnes de contenu. Ici le Magna Rex :

La page produit des Neoshifters

Là, le Gresh :

La page produit des Bionicles

Lego propose en prime un module d’explications animées des combats avec ces figurines :

Les explications des Bionicles

Round 2 : la synergie online / offline

Autre champ de bataille des deux géants du web : la possibilité de trouver un code au dos de la boîte pour pouvoir jouer avec le double virtuel du robot. Chez Lego ça s’appelle les B.I.O. codes mais ils ne sont mis en avant qu’au travers du club.

Pour les NeoShifters, il s’agit d’une ligne de produits spécifique (les Web Battlers) et la page de présentation est nettement plus incitative :

Les WebBattlers de Neoshifter

Round 3 : Les jeux en ligne

Passons la vitesse supérieure avec les jeux en ligne mettant en scène les produits. Oui, c’est bien d’un démonstrateur dont nous parlons. Chez MegaBrand ils’agit de NeoShifters Resistance, un simili univers virtuel :

Le jeu en ligne des NeoShifters

Notons qu’il existe également un autre mini univers virtuel pour les Magnetix (une autre franchise de la marque) :

Le jeu en ligne des Magnetix

Pour Lego, nous avons quelque chose de plus classique avec une série de jeu multi-joueurs mais un univers peut-être moins immersif : Glatorian Arena.

Le jeu en ligne des Bionicles

Conclusion

Au final nous avons donc deux univers de marque très dense, des sites dédiés à la réalisation exemplaire. Petit bémol pour les NeoShifters qui sont dans un module encapsulé donc sans historique de navigation ou possibilité de référencement (pas d’URLs lisibles). Un exemple pour qui veut développer un univers de marque cohérent et gagner la fidélité de ses clients.

Tiens ça fait bien une semaine que je n’ai pas parlé d’American Eagle Outfitters (de très loin le marchand en ligne le plus performant que je connaisse). Je vous propose donc de découvrir le site de Martin+Osa, une marque dédié au “business casualwear” (ou un truc dans le genre).

Page d'accueil de Martin+Osa

À priori rien de très nouveau dans ce site, toujours de très belles pages d’orientation et une page produit très bien hiérarchisée :

Page produit de Martin+Osa

Ce qui va vous intéresser par contre c’est ce mannequin virtuel (”Layer Your Look“) :

Le mannequin virtuel de Martin+Osa

Ce qu’il y a de particulièrement intéressant, c’est qu’il est possible de superposer un certain nombre de couches (avec une gestion parfaite des exclusions) :

Les différentes étapes du mannequin virtuel

Voilà encore un module très bien conçu, très bien réalisé et dans l’ère du temps (les superpositions sont à la mode cet hiver).

Rien à redire.