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

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.

Il y a peu de temps, YouTube fêtait ses 6 ans d’existence. En 6 ans, ce service racheté par Google à prix d’or est devenu la référence incontournable en matière de partage de vidéos, et même de vidéos interactives. L’idée est de proposer à l’utilisateur de manipuler ou au moins d’avoir un premier niveau d’interactivité avec la vidéo (façon Choose Your Own Adventure).

Plusieurs marques se sont déjà lancées avec des réalisations intéressantes :

• Samsung pour le lancement de son Galaxy Player 50 avec une histoire de braquage (Breaking News) ;
  
• Range Rover avec une histoire abracadabrante de ravisseurs et mafieux (Being Henry) ;
  
• De même que Peugeot pour la 107 avec un côté plus fun (107 Experience).
  

Plus récemment, nous avons également vu Intel nous sortir le grand jeu avec une campane très ambitieuse : The Escape (la suite de The Chase) qui met en scène une femme poursuivit par deux brutes et met à contribution votre profil Facebook.

Il y a enfin Hugo Boss qui propose une expérience très intéressante avec un film que vous pouvez contrôlé à l’aide de votre tête via votre webcam : Hugo Boss Interactive YouTube Campaign Lets You Control The Story…With Your Head.

Visiblement ce créneau est donc en plein boom et l’on commence déjà à voir apparaitre des prestataires spécialisés comme Interlude : Interlude Makes Videos Truly Interactive.

Les vidéos interactives sont donc un support très intéressant de valorisation des marques en plongeant l’utilisateur dans un environnement interactif et immersif. Sur ce créneau, la plateforme de référence pour la diffusion est YouTube, mais les équipes de Google en commencé une série d’expérimentations tout à fait intéressantes en exploitant des technologies comme HTML5 et WebGL, notamment avec The Wilderness Downtown, Rome ou le récent All is not Lost (cf. La mode des clips vidéo en HTML5).

Au final : oui les vidéos interactives sont un support très intéressant à travailler, par contre, maintenant que plusieurs campagnes d’envergure ont été lancées, il va falloir relever le niveau pour attirer l’attention des internautes et aller voir du côté de ces expérimentations pour proposer une expérience toujours plus riche.

J’ai déjà eu de nombreuses occasion de vous parler des différentes réalisations de Decathlon et des marques qui gravitent autour (ici, là, une autre ici, et une là, et puis là, et même là et enfin là). Je vais continuer cette série avec les dernières réalisations de Oxelo, la marque de sports de glisse du groupe.

Ils avaient l’année dernière mis en ligne un mini-site intéressant pour le Diabolo (un modèle de roller-blade) car il exploitait à la fois la réalité augmentée ainsi qu’une vue à 360° avec des animations interactives pour expliquer le mécanisme de freinage (principal critère de différenciation du produit) :

Les animations interactives du mini-site Oxelo

Un mini-jeu façon Frogger était également proposé pour mettre en scène les rollers dans une situation qui exploite bien l’USP du produit (le système de freinage) :

Le mini-jeu du mini-site d'Oxelo

Ils ont récemment décidé de s’appuyer sur les médias sociaux pour promouvoir et commercialiser leurs produits avec notamment un showroom sur Facebook proposant des vues à 360° des produits :

La vue à 360° des produits sur Facebook

Le social commerce est un vaste sujet qui a déjà été débattu sur mon autre blog (Les pratiques de commerce en ligne sur Facebook gagnent en maturité, Les pratiques de commerce en ligne sur Facebook ou F-commerce gagnent-elles vraiment en maturité ? et Social shopping : Il faut arrêter de se focaliser sur les boutiques Facebook). Cette boutique sur Facebook présente-t-elle un intérêt ? Non et oui. Non, car Facebook est une plateforme encore très restrictive pour y faire du commerce en ligne dans de bonnes conditions. Oui, car ce dont nous parlons n’est pas réellement une boutique en ligne, mais plutôt un showroom où l’on peut découvrir les produits en détail (un module en Flash abusivement placé dans un onglet « Shop« ).

Dans cette configuration, nous pouvons tout à fait envisager une page ciblant une communauté en particulier (ici les pratiquants de glisse urbaine) avec du contenu, des discussions… et un peu de promotion pour les produits. Il y a bien évidemment les photos pour cela, mais si vous avez la possibilité de montrer plus, alors pourquoi s’en priver ? D’autres le font très bien (cf. Des vidéos interactives sur Facebook pour Burberry). D’autant plus si la vente peut se faire dans une « vraie » boutique en ligne avec tous les éléments et techniques d’incitation, réassurance…

Et tant qu’on y est, je ne résiste pas à partager avec vous la dernière vidéo que la marque publie sur YouTube :

Vous pourriez me dire qu’il n’y a rien de très « riche » ou interactif dans cette vidéo. Et je vous répondrais que de belles images sont la base de toute activité commerciale. Et s’il y a une touche d’exotisme en plus… Il ne manque plus qu’une pincée de nudité et c’est le Nirvana !

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)

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)

En début d’année la marque Burberry avait lancé sur la page d’accueil de son site une fonctionnalité intéressante permettant de manipuler une vidéo à l’aide d’un curseur (changement d’angle de la caméra) :

La vidéo interactive sur le site de Burberry

Ils ont eu la bonne idée de prolonger cette expérience en proposant un module similaire sur leur page Facebook :

Les vidéos interactives de Burberry sur Facebook

Le fonctionnement est similaire (un curseur permet de changer l’angle de vue et de zoomer sur la montre) et la prise en main est immédiate. Les modules interactifs sont en plus annoncés sur le wall à l’aide de la mention « Interact« , ce qui donne forcément envie de cliquer !

Rien de révolutionnaire, si ce n’est le support utilisé (Facebook). Maintenant que cette première étape vient d’être franchie, j’imagine qu’il ne doit pas être beaucoup plus compliqué d’encapsuler une vue 360° ou de la 3D en temps réel (du moment que ces modules sont réalisés en Flash). Je ne sais pas trop quelle est la position de Facebook vis-à-vis de ce type de contenus rich media (en l’occurrence rich commerce), mais il me semble que s’ils ne sont pas encadrés il pourrait y avoir de grosses dérives. Peut-être que la solution la plus simple serait d’encadrer ça avec des formats prédéfinis. Affaire à suivre…

(via Mashable)

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)

Hasard du calendrier, deux grandes marques sortent quasiment en même temps une campagne « transmedia » (je crois que c’est comme ça que disent les pubards) avec un concept commun pour le spot TV, l’affichage et le site web.

Commençons par Diesel qui propose un spot TV qui sent bon le charleston à la sauce 2010 pour sa nouvelle collection :

Ce spot est ensuite reprit sur le site web sous forme de vidéo interactive (A Hundred Lovers) qui se met en pause au survol de la souris et permet de repérer les zones actives (généralement des liens vers la fiche produit des vêtements) :

Vidéo interactive chez Diesel

Même principe chez BMW avec ce film diffusé pour le lancement de la nouvelle série 5 :

Le mini-site BMW-cinétique propose une expérience similaire mais plus immersive puisqu’il est possible de manipuler les billes (représentation en 3D temps réel) et même de créer / partager vos créations :

Représentation en 3D temps réel chez BMW

Dans les deux cas nous avons un concept créatif fort qui est décliné da façon originale et accrocheuse sur le web.

(merci à Albin pour le lien)

Vu dans la section « Femmes » du site JCPenney, un défilé vidéo avec les tendances de la rentrée (Runaway show) :

Le défilé vidéo de JCPenney

L’interface propose en haut de l’écran une frise avec les différents modèles répartis par catégorie. Le modèle défile devant vous et vous pouvez passez au suivant ou lui demander de tourner sur elle-même (toujours en vidéo). Il y a bien évidement sur le côté de l’écran les détails et liens pour acheter l’ensemble.

Vous avez aussi une vue d’ensemble avec des vignettes animées et un zoom au survol de la souris :

La vue d'ensemble des modèles

Et vous avez également la traditionnelle interview des stylistes sous forme de vidéo :

L'interview vidéo des stylistes

Rien de très spectaculaire dans ces fonctionnalités mais une très bonne réalisation, une bonne intégration dans le catalogue et les fonctions marchandes ainsi que des temps de chargement raisonnables. Que demander de plus ?

Puma s’apprête à lancer une nouvelle ligne de sous-vêtements et pour faire parler d’elle, la marque au félin a décidé de miser sur le charme pour promouvoir ses produits. Ils lancent donc le Puma Index (pas encore ouvert), un site où les mannequins se déshabillent en fonction des indices boursiers :

Une campagne qui repose avant tout sur des séquences vidéo et de jolies filles :

L'index de Puma en action

Il y a en tout 3 filles pour 3 indices (Dow-Jones, Dax et S&P/ASX 200) :

Les 3 indices du Puma Index

Et ils ont même prévu une version iPhone avec en prime un modèle mâle :

La version iPhone du Puma Index

Cerise sur le gâteau : montrez votre application iPhone à un vendeur et vous bénéficierez d’une réduction de 20%.

Redoutable.

(via Amnesia)