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

Le secteur touristique a toujours été très innovant en matière d’interface marchande, que ce soit dans une optique de simplicité d’usage (Hipmunk, la nouvelle référence de la recherche de vol) ou d’inspiration (Une interface de recherche de voyage très sophistiquée pour Wanderfly). Dans ce domaine Kayak s’était illustré il y a quelques années avec un moteur de recherche de billets d’avion en Ajax qui mettait en oeuvre le principe d’auto-complétion et rafraichissements silencieux des résultats (il était dans tous les benchmarks). Plus récemment Kayak c’est également fait remarquer avec une très belle application iPad de recherche et de réservation de vols pour iPad.

Ils continuent d’innover avec une application marchande distribuée sur le Mac App Store qui vient compléter la fonction Kayak Explore disponible sur le site.

L'interface de recherche de Kayak sur Mac

Le but de cette application est donc de vous aider à choisir une destination de vacances. l’interface est sobre et facile à prendre en main : vous choisissez une destination de départ ainsi qu’un thème et les recommandations sont affichées sur une carte en fonction de votre budget (une glissière en bas d’écran).

En choisissant une destination, vous avez alors accès aux détails avec les différentes options de vol et d’hotel :

L'interface de sélection de l'hôtel

Même si cette application est légère (1,9 Mo) et très agréable à utiliser, vous devez très certainement avoir du mal à vous convaincre de sa réelle utilité (après tout, ils ont un site web qui fonctionne plutôt bien). J’étais également sceptique, mais je me dis que cette application fait certainement partie d’un plan d’ensemble visant à améliorer l’expérience d’achat. Je m’explique : le secteur est tellement compétitif que pour espérer prendre ou conserver des parts de marché, il faut se différencier par tous les moyens possibles. Cette différenciation passe par la mise à disposition de différentes interfaces de vente : sur le web, sur smartphone, sur tablette… Leur logique est de proposer une interface rapide et rationnelle sur le web pour séduire ceux qui ont une idée bien précise en tête, et d’expérimenter différentes interfaces pour les flâneurs.

Si je ne dis pas de bêtise, cette application a été réalisée dans le même langage de programmation que les applications mobiles pour iOS (Objective C), donc nous pouvons considérer ça comme un exercice de style, ou plutôt un travail de R&D. Est-ce que les applications Mac sont l’avenir du commerce en ligne ? Non, bien évidemment que non. Par contre, je reste persuadé que la clé d’une expérience de vente réussie est de proposer non pas une interface unique, mais plusieurs interfaces correspondant à des terminaux et des contextes d’usages différents.

À ce sujet, vous noterez que Kayak n’a rien inventé : Amazon ou Ebay ont également mené de nombreuses expérimentations en matière d’interfaces marchandes innovantes. En tout cas ceci me conforte dans l’idée que 2012 va être une année clé pour le renouveau des interfaces (Vers de nouvelles expériences d’achat et de consultation).

(via Mac Appstorm)

Connaissez-vous les imprimantes 3D ? Mais si enfin, ces imprimantes de nouvelle génération qui utilisent différentes techniques (résine à séchage ultra-rapide, impression par couches…) à la place de l’encre. Bref, c’est une révolution, mais ça coûte encore une blinde ! Le marché n’étant pas encore mûre pour équiper chaque foyer de sa petite imprimante 3D (mais ça ne serait tarder), des intermédiaires d’un nouveau type vous propose d’imprimer, donc de matérialiser, vos créations. C’est ainsi le cas de My Robot Nation, un service de conception de robots : Startup launches a robot invasion with 3D printing and WebGL.

Le site n’a visiblement pas investi des montagnes d’argent dans la charte graphique, car la page d’accueil est… perfectible.

La page d'accueil de My Robot Nation

Qu’importe cette page d’accueil vieillote, vous êtes très rapidement orienté vers l’interface de conception des robots qui n’est pas sans rappeler l’atelier de Spore Creatures. Non seulement cette interface est très intuitive et fun, mais en plus elle est réalisée avec WebGL, la technologie standardisée pour faire de la 3D dans le navigateur.

L'interface de création de My Nation Robot

Vous allez ainsi pouvoir créer votre robot en quelques minutes : choix des formes des membres, des proportions, des décorations et ustensiles, des couleurs… Le résultat est immédiatement visible à l’écran et vous pouvez manipuler votre robot dans tous les sens avec un rendu parfait et une fluidité exemplaire. Tout ceci est possible grâce à WebGL qui permet de « confier » le rendu 3D à la puce graphique et non au processeur (d’où des performances bien meilleures).

Pour vous rendre compte du nombre infini de combinaisons, je vous engage à regarder la galerie des créations.

Les différentes créations des utilisateurs

Les configurateurs 3D ne sont pas neufs, mais celui-ci est particulièrement bien réalisé et surtout très intuitif et performant. Et pour cause : l’éditeur du service reconnait que ce Robot Nation n’est qu’un galop d’essai vers une plateforme de conception beaucoup plus ambitieuse. Les robots étaient, selon eux, une thématique intéressante pour faire comprendre au grand public l’intérêt des imprimantes 3D : My Robot Nation aims for personal 3D printing for all.

Vivement la suite !

Après le très impressionnant Styku, ce sont les espagnols de Crearmoda qui nous proposent un module de personnalisation des habits en 3D : In Spain, design your own clothing via 3D simulator.

L'interface de personnalisation de Crearmoda

Pour le moment le choix d’habits est limité (t-shirt, sweat à capuche, foulard…) mais l’interface de personnalisation est très performante : le rendu visuel est bon, le mannequin se manipule avec fluidité et surtout les motifs épousent parfaitement les formes du corps pour plus de réalisme.

La technologie utilisée pour ce module est Unity3D qui dans sa dernière version exploite le moteur physique PhysX de NVidia. Particulièrement performant dans la gestion des vêtements, le Unity Player hérite des propriétés Interactive Cloth et Skinned Cloth, ce qui explique le réalisme du rendu.

Une fois vos créations achevées, vous pouvez les commander et les partager avec la communauté. De ce point de vue là, rien de très neuf.

Voici donc un très beau module de personnalisation qui laisse présager toujours plus de réalisme des les outils de simulation et les démonstrateurs.

La marque de jeans Wrangler s’était déjà illustrée l’année dernière avec une vidéo interactive de qualité (Manipulations rigolotes chez Wrangler). Ils récidivent cette année avec la nouvelle campagne Blue Bell et un dispositif très original toujours basé sur la vidéo. Cette histoire courte met en scène un personnage ténébreux hanté par les fantômes de son passé. L’écran est divisé en deux parties où l’histoire est racontée à l’endroit et à l’envers (façon Memento). Les internautes peuvent faire glisser la séparation pour explorer un pan de l’histoire plutôt que l’autre. Je ne vous cache pas que la narration est du coup un peu chaotique, mais qu’importe, les images sont belles.

La double narration vidéo de Wrangler

Ils proposent également un autre dispositif vidéo pour la collection 2011 où les produits sont mis en scène dans différentes vidéos que l’on peut érafler avec la souris (une métaphore pour mettre en valeur leurs jeans qui sont « usés » en usine) :

Une vidéo à user, comme leurs jeans

Il y a aussi pour finir la vidéo interactive de la campagne We Are Animals qui permet de vivre le making-off de l’affiche (un jeune homme se jette à travers une vitre) sous deux points de vue : What you see et What you feel.

J'adore faire des cascades en jean !

Au final, nous avons donc trois vidéos interactives pas forcément faciles à utiliser, avec des histoires un peu tordues et des produits que l’on aperçoit à peine. Ce dispositif est-il efficace ? D’un point de vue marchand, j’en doute. Par contre, je pense ne pas me tromper en disant que ce n’était sûrement pas l’objectif (vendre en ligne). L’idée derrière ces vidéos est plus de travailler l’image de marque au travers d’histoires plus ou moins lisibles. Et de ce point de vue-là, ça fonctionne. Après tout Diesel et Levi’s en font de même (avec du trash pour l’un et du viral pour l’autre), pourquoi s’en priver ?

(via Adrants)

Saviez-vous que Lipton était une marque plus que centenaire ? Fondée dans les années 1870 par Sir Thomas Johnstone Lipton, cette marque a toujours su mettre en valeur ses valeurs au travers d’interfaces innovantes. Je me souviens ainsi de la page d’accueil de Lipton.com qui proposait de déambuler dans un champ de théiers grâce à une vue subjective qui utilisait de la 3D en temps réel.

Bref, tout ça pour vous dire qu’ils remettent ça avec une série d’animations fractales de toute beauté : Lipton Infinite Trip. Six variétés de thés sont ainsi mises en scène au travers de scènes que l’on découvre en zoomant ou en dézoomant.

Le point de départ de chaque animation est un cercle formé de six triangles (les sachets de thé de la marque sont de forme triangulaire) qui diminue progressivement pour laisser place à une série d’illustrations représentatives de l’origine des feuilles de thé (Sri Lanka, Bombay, Ceylan…). Des animations psychédéliques visuellement très impresionanntes que l’on découvre petit à petit à l’aide de la molette de la souris ou du clavier.

L'univers Sri Lanka de Lipton

Chaque univers reprend donc les codes graphiques de sa destination d’origine ainsi qu’un thème musical. L’impression d’immersion est très forte, mais est surtout très compliquée à expliquer par écrit, je vous engage donc à visiter le site pour vous rendre mieux compte.

L'univers Earl Grey de Lipton

Au final, nous avons une très belle réalisation qui permet d’illustrer les valeurs et l’héritage culturel de la marque sans avoir à montrer un produit très banal (des sachets de thé). Je trouve ces univers particulièrement inspirés et surtout idéals pour perdre 3 minutes au bureau. Vous avez bien 3 minutes à perdre ?

J’imagine qu’il serait possible de faire quelque chose d’équivalent avec une marque de café…

Comment faire pour promouvoir un appareil photo numérique dans une offre déjà pléthorique ? En racontant une belle histoire s’appuyant sur les bénéfices du produit. C’est ce qu’à fait Sony avec le minisite Panoramic Story. L’idée de ce site est de raconter le voyage de deux photographes : Lucie qui vit à Paris et Simon qui vit en Turquie. Ils vont partir dans un long périple à traves l’Europe pour se rejoindre et partager leurs expériences. Leurs expériences de quoi ? Leurs expériences de prises de photos panoramiques avec le tout dernier compact de chez Sony qui prend de belles photos panoramiques pardi !

L’interface du site présente donc une timeline du périple des deux photographes avec à chaque étape de leur périple une double photo panoramique :

L'interface du site Panoramic Story

Vous naviguez dans le sens de la profondeur avec la souris ou les flèches du clavier et vous pouvez à tout moment zoomer sur un panorama :

Détails d'un panorama sur le minisite Panoramic Story

Ce minisite épuré est très simple à prendre en main, les photos sont belles et la musique participe à l’atmosphère planante du voyage. Les temps de chargement sont parfaitement gérés et les incitations à découvrir le produit ou les opérations commerciales liées au lancement sont très discrètes. Bref, une très belle réalisation tout en subtilité comme je les aime.

(via FWA)

En ce moment j’ai comme l’impression que le secteur du voyage est entré dans un nouveau cycle d’innovations. Il y a ainsi une tonne de réseaux sociaux et applications mobiles disponibles pour les voyageurs, et les interfaces de recherche ne sont pas en reste avec l’exemple récent de Hipmunk (cf. Hipmunk, la nouvelle référence de la recherche de vol).

Aujourd’hui je voudrais vous faire découvrir Wanderfly qui pousse la recherche de confort visuel encore plus loin. Ça commence dès la page d’accueil avec un formulaire de recherche exploitant parfaitement la métaphore visuelle (glissières, boutons à presser…). La photo en fond de page est également une très bonne trouvaille pour les internautes en panne d’inspiration (le lien en bas à droite permet d’aller sur la fiche de la destination) :

La page d'accueil de Wanderfly

La liste des résultats est dans le même esprit avec une série de destinations présentées en vignettes que l’on sélectionne pour affiner votre choix :

La liste des destinations dans Wanderfly

Chaque destination est ensuite présentée sous forme de fiche synthétique. La partie haute de la fiche est composée d’un carrousel de photos, d’une description , d’infos locales, d’une sélection d’hôtels et vols ainsi que d’un prix estimatif. La densité d’information sur cette zone de la page est très dense, mais la lisibilité est parfaite :

La fiche d'une destination dans Wanderfly

Le bas de la page est composé d’une liste d’attractions à faire dans les environs de la destination, ces attractions sont agrégées depuis différents services (Foursquare, Lonely Planet, Yelp…).Les autres destinations présentées dans l’écran précédent sont accessibles depuis la barre en haut de page (ainsi que les critères de recherche).

Il est possible de choisir un autre vol ou hôtel au travers d’une interface toujours aussi facile à prendre en main (les filtres sont à gauche et les critères de tri en haut à droite) :

L'interface de recherche d'un hôtel

Les sites de voyage sont parmi les plus anciens et les plus compétitifs du web marchand, mais j’avoue avoir été bluffé par l’expérience que propose Wanderfly : lisibilité, simplicité, réactivité… Cette interface est une authentique réussite. Assurément un nouveau standard dans la profession, à ranger avec TravelMuse et TripSay.

(via I Love Web)

Dans la série mini-site immersif avec de jeunes filles chichement vêtues, vous connaissiez déjà les réalisations d’Aubade et Agent Provocateur, mais auriez-vous imaginé un jour que ces deux marques auraient à subir la concurrence de Perrier ? Et pourtant, la célèbre marque d’eau gazeuse vous propose une superbe réalisation mettant en scène Dita von Teese : Perrier Mansion. À mi-chemin entre brand content, univers immersif et maturialism, ce mini-site expérientiel vous propose de partir à l’exploration du Perrier Mansion (une référence au Playboy Mansion) :

Entrez dans le Perrier Mansion (NSFW !)

Ce mini-site se présente sous la forme d’une vidéo chapitrée (il y a différents embranchements) :

Choisissez la bonne porte !

Chaque branche mène à un mini-jeu où la sublime Dita vous dévoile ses charmes dans une ambiance ultra-sensuelle :

Ici il faut regarder mais pas cliquer

Ce mini-site est donc exclusivement destiné à un public averti (adulte) et sert de prétexte pour scotcher les internautes devant leur écran. Et ça fonctionne plutôt bien ! Vous noterez au passage cette ridicule tentative de placement de produit :

Visiblement il fait très chaud dans le Perrier Mansion

Au final nous avons donc un superbe site parfaitement réalisé, c’est indéniable. Je suis par contre légèrement plus perplexe quant à l’adéquation entre le sujet de cette campagne (Dita Von Teese) et la marque (la finalité du produit, les valeurs véhiculées…).

Visiblement l’opération lancée en milieu d’année dernière a été un succès puisqu’un second chapitre est sorti tout récemment : Perrier by Dita Episode 2. Même recette que le premier opus, mais avec une touche de Facebook Connect en plus (plus vous invitez d’amis et plus vous pourrez matter la miss). Encore une fois la réalisation est de très bonne facture, mais le procédé est douteux… Dans le même genre, je préfère encore le Project X de Red Bull.

Précisons au passage que ce mini-site est également disponible sur iPhone (grâce au programme iAd) et propose une expérience très fidèle (merci à JB et Tamara pour l’info) :

(via FWA)

Il y a quelque temps Google avait fait sensation avec un prototype de voiture à pilotage automatique (Test Driving Google’s Driverless Car). Visiblement cette idée a fait des émules, car Mitsubishi a lancé le mois dernier une campagne tout à fait remarquable pour son nouveau modèle d’Outlander Sport : un dispositif qui permet aux internautes de conduire la voiture (Mitsubishi Live Drive Offers Online Test Drive).

Bien évidemment sur ce site il y a les grands classiques de l’industrie automobile : une galerie d’images XL, un teintier, un configurateur et même une très belle vue à 360° avec les nuages qui défilent en arrière-plan.

La vue à 360° de la Mitsubishi Outlander

Rien de très révolutionnaire si ce n’est ce petit lien étrange en bas de page : « Live Drive« . Indisponible en dehors des USA, cette fonctionnalité permet ainsi de prendre le volant de cette voiture et de la voir évoluer dans un espace clos :

Conduite en ligne en temps réel

Une campagne de recrutement a ainsi été organisée le mois dernier et près de 5.000 conducteurs virtuels ont pu « conduire » le véhicule grâce à la rediffusion en direct des nombreuses webcams embarquées à bord. Un franc succès pour cette campagne qui a permis de battre le record du monde de distance parcourue par un véhicule contrôlé à distance : Mitsubishi Live Drive campaign nabs new world record.

C’est donc une très belle prouesse technique réalisée par les équipes de Mitsubishi et une belle campagne de recrutement :

(via FWA)

Vous connaissez SuitSupply ? Il s’agit d’un fabricant de costumes hollandais qui n’a pas froid aux yeux. Ils exploitent ainsi le filon du porno chic dès la page d’accueil de leur boutique avec des visuels en plein écran :

La page d'accueil de SuitSupply

J’apprécie cette touche coquine (et encore je n’ai pas choisi la photo la plus osée), même s’il faut bien remarquer que le menu de navigation situé à gauche de l’écran n’est pas très visible, ni très pratique. En grand professionnel que je suis, j’ai tout de même pris le temps de visiter cette boutique et je suis tombé sur deux ou trois idées tout à fait intéressantes.

Il y a tout d’abord une page de catégorie à défilement horizontal où l’on peut zoomer sur les détails des costumes :

La page de catégorie de SuitSupply

Il y a ensuite une boîte d’ajout au panier (avec la sélection de la taille) où sont incrustés des produits associés (chemise + cravatte) :

La boîte d'ajout au panier avec les produits associés

Il y a enfin un tunnel de commande dans le plus pur style minimaliste avec un panier néanmoins parfaitement lisible :

Le panier de SuitSupply

Au final nous avons donc une boutique qui frappe très fort dès la page d’accueil (quitte à faire fuir des clients qui surfent au bureau) mais qui propose des astuces tout à fait intéressantes et un engagement graphique cohérent. Pour résumer : une boutique qui a de la gueule, ça change !

(via Rhooo)