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

Les visites virtuelles sont décidément LE marronnier du commerce en ligne : Le sujet revient tous les ans depuis le siècle dernier et les webcamers (qui peut me dire s’ils sont encore en activité ?). Nous pensions que le sujet de la visite virtuelle était clôt avec le lancement de Visite virtuelle pour les Pros pour Google Maps, mais les Japonais de Panoplaza reviennent à la charge avec une offre de visite virtuelle enrichie : Two New Virtual Shops Open in Japan Using Panoplaza.

L’idée est donc de proposer la visite en ligne d’un magasin à l’aide de photos prises dans le point de vente physique. Ces photos sont assemblées dans une interface en Flash et sont agrémentées de points d’intérêt cliquables (montrant le détail d’un habit) ainsi que de raccourcis pour naviguer d’un coin à l’autre de la boutique (ici le grand magasin ShinQs).

Visite virtuelle du magasin de ShinQs

Rien de très original dans tout ça, si ce n’est la possibilité de visiter TOUTES les toilettes du magasin. Oui je sais, ça peut vous paraître étrange, mais les Japonais ont un rapport très particulier avec l’hygiène et les toilettes (qui peut parasiter une vente), d’où l’intérêt pour un acheteur potentiel de vérifier s’il peut aller magasiner en toute tranquillité.

Les toilettes sont-elles propres chez ShinQs ?

Mais rassurez-vous l’intérêt de cette offre ne réside pas que dans la démonstration de l’hygiène irréprochable des toilettes, elle sert aussi à mettre en valeur le magasin et ses différents rayons. Je vous propose ainsi de tester l’interface avec le Nissen Smileland :

Visite virtuelle du Smileland de Nissen

Je pense que nous arrivons au bout de ce qu’il est possible de faire en terme de visite virtuelle, le tout est maintenant de proposer des offres à un tarif très compétitif. Par contre, il reste encore des places à prendre pour les visites virtuelles ou assistant shopping sur mobile. Google est ainsi très présent avec notamment l’offre Floor Plans pour vous aider à vous orienter dans une grande surface : Google Maps partners with Home Depot, Macy’s and Ikea to help you navigate stores.

Un concept intéressant, d’autant plus qu’il s’applique aussi aux magasins et aux aéroports. Reste à rendre ça compatible avec tous les smartphones…

Lancée en fin d’année dernière, l’initiative Rich Media Designs for Mobile de Google se présente sous la forme d’une série de gabarits standardisés de formats publicitaires enrichis pour les smartphones et tablettes. Une démarche qui a visiblement reçu le soutien de la profession avec cette distinction récemment acquise : IAB names Google winner of their Mobile Rising Stars contest.

Concrètement il s’agit donc de gabarits de bannières enrichies pour terminaux mobiles. L’idée étant de présenter une bannière classique aux mobinautes qui s’agrandir pour occuper tout l’écran si l’on tape dessus.

Au départ ils ne proposaient que des choses simples, mais de nombreux modèles sont maintenant disponibles : carrousel, galerie, diaporama, coverflow, vue 360°…

Une initiative particulièrement intéressante pour structurer le marché et proposer une offre compétitive face à la très onéreuse iAd de Apple. Pourtant d’autres formats existent comme le Adjitsu proposé Cooliris (Du renouveau des bannières interactives sur les supports tactiles), mais ils sont visiblement plus complexes à produire, notamment à cause des éléments en 3D temps réel.

Après des débuts plus que timides, le marché de la publicité sur mobile est donc en train de se structurer et de monter en puissance (3,3 milliards d’impressions pour le dernier trimestre : Panorama du marché publicitaire mobile Français). Un marché très convoité notamment par Google qui s’est positionné dessus il y a bien longtemps (Google en passe de s’approprier l’internet mobile ?). Ce n’est ainsi pas un hasard si les smartphones tournant sous Android sont les plus grands du marché : sur un écran avec une large surface d’affichage, les bannières paraissent moins intrusives (pratique pour un système d’exploitation dont le modèle économique repose sur le partage des revenus publicitaires). Ne vous étonnez pas non plus des rumeurs d’un iPhone 5 de plus grande taille, la raison doit être la même…

Bref, puisque nous sommes condamnés à devoir supporter les bannières sur nos smartphones, autant qu’elles soient riches et simples à manipuler, d’où l’intérêt des gabarits standardisés. Cela ne règle par contre pas le problème de la bande passante en situation de mobilité. De là à imaginer que les forfaits comptabiliseront à part le trafic en provenance des ad serveurs… il n’y a qu’un pas…

Les marques de sport ont toujours été très inventives dans leurs sites et réalisations en ligne, et Reebok ne fait pas exception à la règle avec un nouveau site très original à mi-chemin entre Google et Pinterest :

La page d'accueil du nouveau site de Reebok

Comme vous pouvez le constater, il n’y a pas de menu de navigation sur ce nouveau site, uniquement un gros moteur de recherche (comme Google). Les nouveautés et contenus ne sont accessibles que dans le coeur de page où des blocs de différentes largeurs s’empilent les uns sur les autres (comme Pinterest). Une mise en page très visuelle qui laisse une grande place aux produits et qui incite les visiteurs à faire défiler la page jusqu’en bas (une petite mosaïque sur la droite de l’écran aide les internautes à se repérer sur la hauteur de page).

Pour accéder aux produits, il faut donc activer les filtres et/ou saisir des mots-clés dans le moteur en haut de page. Il est  possible de trier les résultats à l’aide de différents critères (ici la note), les résultats sont alors affichés et rafraichis de façon silencieuse. En cliquant sur un modèle, vous avez accès à différentes vues ainsi qu’un zoom :

La page de résultats de Reebok

Force est de constater que les équipes de Reebok ont pris un gros risque avec ce nouveau site qui n’est composé que d’une page unique. Certes, il y a un accès à la boutique en haut à droite, mais sinon tout se passe sur cette interface de recherche. J’imagine qu’ils comptent sur les médias sociaux pour relayer leur actualité commerciale et viraliser leurs contenus.

Malgré la très bonne réalisation, je reste tout de même sceptique vis-à-vis de ce dispositif qui se repose en grande partie sur les médias sociaux pour assurer la visibilité de la marque et des produits, c’est porter à mon sens trop de responsabilités sur des supports qui ne lui appartiennent pas.

Sinon dans un autre style, vous avez aussi le mini-site des Air Jordan 2012 qui utilisent la technique du scrolling parallaxe en diagonale.

Le nouveau site de la Air Jordan

Là encore, outre le challenge technique, je ne trouve aucun intérêt à ce site. Ça doit être parce que je ne suis pas dans la cible…

J’ai déjà eu de nombreuses occasions de vous parler de configurateurs en ligne (pour des voitures, des plantes et même des robots). Je poursuis donc sur cette lancée avec Getwear, une nouvelle boutique en ligne de jeans qui propose des options de configuration avancées. Ils insistent sur le fait que c’est bien de la configuration et non de la « simple » personnalisation où vous vous contentez de rajouter un patch.

L’interface de configuration est très visuelle et plus simple à prendre en main. Vous commencez ainsi par choisir un style :

L'interface de configuration de jean de Getwear

Ensuite vous choisissez les coutures, poches et passants de ceinture (avec une loupe pour bien observer les détails) :

Choisissez les poches et coutures en zoomant dessus

Puis la partie la plus intéressante commence avec l’apposition de motifs (à choisir dans une liste d’une centaine de pièces) :

Choisissez les motifs à coudre sur votre jean

Et vous terminez par les effets d’usure, qui ne sont pas réellement des effets puisque l’on vous offre la possibilité de râper certaines parties du jean à la pierre ponce, de faire des trous de crochet ou de balle et même de faire gicler de la peinture dessus (ça doit être un truc de djeunz) :

Travaillez les finitions de votre jean

Visiblement ils garantissent un rendu final très proche de ce que vous aurez fait en ligne. Vos créations sont ensuite disponibles à la commande et vous pouvez même les proposer aux autres. Consécration suprême, les plus belles réalisations de la communauté sont même affichées avec les produits génériques dans la boutique :

Les créations de la communauté affichées avec les jeans génériques

Même si vous trouvez que cette fonction de configuration est un gros gadget, je vous engage tout de même à faire un petit tour dans la boutique, car elle fort bien réalisée, surtout les pages de catégorie et les pages produit.

(via Mass Customization Blog)

Celles et ceux qui lisent ce blog régulièrement savent qu’Ikea est un annonceur régulièrement cité (notamment ici, là et là). Certes, c’est une marque innovante avec un registre de communication décalé, mais c’est toujours un plaisir de découvrir les minisites qui sortent régulièrement. Dernier en date, Kitchen View en Russie. L’idée de ce minisite est de mettre en situation cinq cuisines dans des vidéos interactives que l’on apprécie au travers des yeux des personnages qui composent les scènes. Chaque scène commence ainsi par une vue générale :

La vue générique du modèle familiale

Des bulles permettent d’en savoir plus sur les produits présentés dans cette vidéo, mais le plus drôle est de basculer sur la vue d’un des personnages, comme ici le père :

La même scène vue au travers des yeux du père

Les autres scènes vous font découvrir d’autres configurations de cuisine comme ici la version « copains » :

Une autre scène animée pour mettre en valeur les cuisines de la marque

Là encore, des bulles mettent en avant les bénéfices des produits proposés, et on peut même observer cette scène au travers des yeux du poisson :

La même scène vu au travers des yeux du poisson

Faut-il mettre en ligne des vidéos suggestives du monde vu par des poissons pour vendre des cuisines ? À priori non, il existe des moyens plus simples. Il n’empêche que quand vous avez un site principal bien conçu, vous pouvez vous permettre d’utiliser des minisites comme celui-ci pour présenter de façon décalée une ligne de produits ou une nouvelle collection. Certes, les différentes scènes sont longues à charger, mais ça doit être un problème d’hébergement (le site est prévu à la base pour le marché russe) ou de mauvaise configuration du downsizing (baisser la qualité de la vidéo pour accélérer le temps de chargement).

Au final il n’y a rien de très neuf dans ce minisite, puisqu’il repose encore sur les vidéos interactives, mais ce type de dispositif se révèle toujours aussi efficace quand il est rigolo et bien exécuté (ce qui est le cas). Par contre, un minisite comme celui-ci n’est viable que si le site principal est complet et simple d’utilisation. L’austérité du site principal est ainsi compensée par le côté décalé de ces vidéos.

(via FWA)

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.

La nouvelle est tombée la semaine dernière sans prévenir : Autoreduc, le site d’achat groupé de véhicules, va proposer un showroom virtuel  (Une concession automobile multi-marques en 3D interactif, enfin !). Intrigué par cette annonce, je décide faire un tour sur ce site, mais la promesse est loin d’être tenue. À défaut de showroom virtuel, la page d’accueil propose un lien très discret sous certains modèles pour « découvrir la voiture sous tous les angles« .

La page d'accueil d'Autoreduc

Effectivement, le site propose alors une interface de visualisation permettant d’accéder à une vue extérieure à 360°, un teintier et la possibilité de zoomer sur certains détails du véhicule :

La vue extérieure à 360° chez Autoreduc

Vous avez également accès à une vue intérieure, toujours en 360° :

La vue intérieure à 360° d'Autoreduc

Les prises de vue sont de qualité, le temps de chargement est plus qu’acceptable, l’interface réagit bien. Donc de ce côté-là il n’y a pas de problème, car le véhicule est très bien mis en valeur. Par contre, la promesse d’un showroom virtuel en 3D n’est pas du tout tenue, car il est surtout question d’une vue à 360° à l’aide d’une vingtaine de clichés. L’interface est donc tout à fait agréable, mais l’annonce est plus que décevante. D’autant plus que les showrooms virtuels ont déjà été exploités par d’autres marques depuis bien longtemps, avec des univers réellement immersifs comme ceux de Fiat ou Renault (respectivement en 2007 et 2008).

Dans l’absolu, je ne suis pas certain que la métaphore du showroom virtuel soit une bonne idée, d’une part car ce sont des expériences souvent décevantes (comme la fausse boutique 3D de Zegna) et souvent complexes à appréhender (comme le très déroutant site de Citroën). En théorie il n’y a maintenant plus de contraintes techniques pour proposer de la vraie 3D en temps réel dans le navigateur, la DS3 du moteur Minko affiche ainsi près de 300.000 polygones haut la main), de même que la configurateur 3D de la Nissan Juk, mais le coût de production du modèle 3D doit être prohibitif.

Au final Autoreduc aurait plutôt dû jouer la carte du réalisme et annoncer de très belles vues à 360° plutôt que de nous promettre un showroom en 3D (virtuel). Encore une fois, ce n’est pas la 3D que je condamne, mais plutôt la surpromesse. Il est ainsi tout à fait possible de parfaitement valoriser des véhicules avec des belles photos, comme les sites de Chevrolet ou VW, et de proposer en prime une vue  à360° et éventuellement une vue 3D. Pourquoi critiquer l’expérience des autres sites ?

La vidéo est un support très intéressant pour valoriser les produits, surtout quand elle est exploitée de façon maline (La vidéo au service de la comparaison de produits). Jusqu’à présent cantonnées aux fiches produits ou à la présentation des collections (comme le célèbre Knicker Picker), les vidéos mériteraient néanmoins une présence plus large, d’autant plus que les éléments vidéo peuvent maintenant être exploités avec beaucoup plus de facilité (avec Flash ou HTML5).

Pour illustrer cette utilisation plus intensive de la vidéo, je vous propose de découvrir la boutique en ligne de Patrik Ervell qui propose dès la page d’accueil une série de mannequins animés en vidéo :

La page d'accueil de Patrik Ervell avec les mannequins en vidéo

Le style de la page est très minimaliste et contraste bien avec les mannequins qui s’agitent et tournent sur place pour attirer votre attention et vous faire choisir une catégorie. Le procédé est utilisé dans les pages de catégorie avec une série de mannequins animés :

La page de catégorie de Patrik Ervell avec les mannequins en vidéo

Les pages sont certes un peu longues à charger, mais le fait de présenter la gamme avec le même mannequin permet de se rendre compte de la façon dont tombent les vêtements et de leur ajustement (plus ou moins près du corp).

De façon surprenante, les pages produit ne présente que des photos (un comble !) :

La page produit du site Patrik Ervell

L’ambiance graphique est toujours extrêmement sobre, tellement sobre que l’on ne remarque même pas le bouton d’ajout au panier (pourtant il est bien là).

Au final, la vidéo utilisée sur la page d’accueil et les pages de catégorie est un bon moyen pour attirer l’attention et inciter l’internaute à cliquer. Ce procédé est par contre réservé aux commerçants les plus fortunés, ou à ceux qui ont une gamme réduite, car le coût de production de vidéos à fond blanc doit être assez couteux. Dans tous les cas de figure, ce site est un bel exemple d’utilisation intensive, mais toute fois raisonnée de la vidéo.

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)