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

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)

Aviez-vous remarqué que pour certaines activités, les sites et boutiques en ligne proposent toutes des fonctionnalités “standards”. Dans l’automobile par exemple vous retrouvez presque systématiquement une vue à 360° et un teintier. Dans les boutiques de fringues c’est à peu près la même chose, surtout pour celles qui vendent des jeans : on retrouve toujours un “Fit Guide” pour aider le client à choisir la forme de son jean.

Illustration chez Gap avec le module Fit Spotlight qui aligne une série de modèles (H/F) animés :

L'assistant au choix de jean de Gap

Lorsque vous passez la souris sur un modèle, celui-ci s’avance :

L'assistant au choix de jean de Gap avec un zoom sur un modèle

En cliquant sur ce modèle, vous avez accès à une vidéo explicative du designeur (il explique le pourquoi du comment) ainsi qu’une vue à 360° avec des points d’intérêt :

La vue détaillée d'un modèle de jean chez Gap

Vous avez aussi un moteur d’inspiration avec 3 déclinaisons possibles par modèles et une belle séquence animée :

Le moteur d'inspiration de Gap

Vous pouvez trouver à peut près la même chose chez 77kids (American Eagle) mais en moins sophistiqué :

L'assistant au choix de jean chez 77kids

J’ai une préférence pour l’assistant de Gap car il propose plus de contenus mais les deux fonctionnent bien. Avez-vous d’autres exemples ?

Les chaussures de sport ont toujours été un enjeu de taille pour les jeunes en quête d’appartenance identitaire ou de reconnaissance sociale, mais également pour les marques en quêtes de… de pognon en fait ! Bon bref, tout ça pour dire que les marques rivalisent de créativité pour séduire une clientèle sur-sollicité. Contrairement à l’univers graphique très “destroy” et urbain du skate, les sites web des différentes marques sont plutôt sobres (à l’image d’Airwalk ou de Nike Skateboarding) avec une part très importante accordée aux vidéos (principal médium de la skate / surf  /snow culture).

Mais la palme de la sobriété revient à Converse Skateboarding avec un site à la limite de l’austérité. Sur la page d’accueil on ne trouve qu’une immense photo d’ambiance (toute floue), quelques liens et un logo en bas à gauche :

La page d'accueil de Converse Skateboarding

L’intérieur du site n’est pas en reste avec une structure extrêmement légère et de belles transitions. La boutique est elle aussi très minimaliste :

La page produit sur Converse Skateboarding

Il y a également un peu de contenus multimédia dans la partie Ambassadors (textes, photos et vidéos). Vous noterez au passage l’effort pour épurer au maximum le player vidéo :

Le player vidéo minimaliste de Converse Sketeboarding

Nous avons donc au final un site à la sobriété extrême faisant un usage très subtil des interfaces riches (transitions…) mais qui procure une expérience très relaxante et surtout apaisante (ça fait du bien autant de blanc sur la page).

Sinon il y a des choses plus fournies sur Converse.com avec du contenu un peu plus “destroy” et même un configurateur de chaussure :

La page d'accueil de Converse

Et tant qu’on y est, n’hésitez pas à faire un tour sur Skate Like a Punk, la campagne virale en cours (avec une vidéo très réussie).

Patagonia, vous connaissez ? Mais si enfin, cette marque de vêtements outdoor spécialiste des grands espaces et du développement durable. Comment faire pour bien retranscrire cet univers de marque ? Facile, en lançant un mini-site dédié avec une interface imerssive et du contenu multimédia. Donc dans les faits ça donne The Tin Shed, un mini-site expérientiel où différents aventuriers des temps modernes partagent leur expérience et leur mode de vie (il parait qu’il faut dire “life style“, ça sonne mieux).

Le visiteur est donc accueilli dans une espèce de débarras chilien où chaque accessoire possède sa propre histoire :

La page d'accueil de Tin Shed

Il est possible de passer d’une pièce à l’autre à l’aide des flèches sur les côtés de l’écran (très bel effet de transition). En cliquant sur un accessoire, le visiteur est alors emmené sur un panneau où lui sont proposés différents contenus (texte, photos, vidéos) sous forme de témoignages :

Une histoire associée à un accessoire

Exemple de contenus texte, photo et vidéo

Le tout est très fluide, rapide à charger et parfaitement mis en scène au travers d’une présentation en mosaïques.

Le témoignage de Gerry Lopez, légende du surf

Nous pourrions qualifier ce site d’inspirationnel car il sollicite la fibre aventurière des clients / prospects de la marque, du très bon branding.

Après un mini-site très spectaculaire pour la campagne Lacoste Future, la marque au crocodile vient de lancer un nouveau mini-site très spectaculaire : Lacoste Red. Il y a tout d’abord une vidéo d’introduction en slow motion avec une pointe de bullet time et du morphing pour présenter la nouvelle collection :

Le mini-site Lacoste Red

Vous arrivez ensuite sur la page d’accueil qui garde la vidéo en toile de fond mais présente une frise de mannequins à cliquer. Vous noterez au passage la très originale sonorisation de l’interface avec des bruits tout droit issu des jeux vidéo des années 80.

En cliquant sur l’un des mannequins vous arrivez à la page de détails avec une très belle intégration de vidéo en mode bullet time :

Le détail d'un mannequin

Normalement vous avez dû passer par une page de transition très pimpante avec des couleurs qui flashent et une musique électrique signée Yuksek.

Vous pouvez également essayé le jeu qui est à mi-chemin entre Dance-Dance Revolution et Guitar Hero (il faut appuyer sur la bonne touche au bon moment pour faire danser le mannequin) :

Le jeu de Lacoste Red

Voici donc une très belle réalisation de l’agence Megalo(s) : Cocorico !

(via Fubiz)

Vous connaissez tous le principe de la visite virtuelle. Très largement adoptée par les professionnels du tourisme, la visite virtuelle 3D ou vidéo a largement fait ses preuves (incitation…). Le problème n’est pas tant de savoir s’il faut faire une visite virtuelle mais plutôt à quel coût. Embaucher un professionnel de la vidéo est la solution la plus sage mais ce n’est pas la plus rentable. Heureusement Brainsonic vient de lancer un service tout à fait intéressant : une visite virtuelle vidéo à partir de photos (grâce à leur Magic Studio).

Le principe est simple : l’hôtel (ou le restaurant…) fournit des photos de bonnes qualité et le studio se charge de les animer et d’y incruster une présentatrice. Dans l’exemple qui suit, la jolie dame est intégrée à la bonne échelle mais le ciel est animé (les nuages défilent) :

Dans cet exemple le ciel est animé

L’animation de certaines parties de l’écran (ciel, eau…) de même que les effets de caméra (traveling, zoom…) donne du relief à ces photos et transforme un “simple” diaporama en une véritable visite guidée.

Il est également possible de donner de la profondeur aux scènes en faisant circuler la présentatrice entre des objets qui passent au premier plan :

Notez la plante verte au premier plan devant la présentatrice

Pour une démonstration, ça se passe ici : Hotel Francés.

Bien évidement le rendu n’a pas le même niveau de qualité qu’une véritable vidéo mais j’imagine que le coût est bien inférieur. Nous avons donc au final un ratio qualité / prix tout à fiat intéressant (enfin j’espère). Tout ceci me fait penser au service Animoto qui propose également l’animation de diaporamas photo.

Decathlon vient de lancer un mini-site Rich Media à destination des femmes (plus ou moins) sportives. L’idée étant de présenter une série de portrait de femmes pratiquant différentes activités sportives : Toutes en forme. La page d’accueil permet de choisir une femme en fonction de l’activité qu’elle pratique (petites vignettes animées au survol de la souris) :

La page d'accueil de Toutes en forme

Puis vous avez le droit à une courte présentation vidéo de la femme sélectionnée (prétexte pour mettre en scène les produits) avec un effet de zoom au survol de la souris sur les vignettes des produits :

Présentation vidéo et mise en scène des produits

Vous pouvez aussi avoir des explications sur une activité sportive (avc une intégration élégante des produits qui lui sont associée) :

Explications sur l'activité sportive

Et vous avez enfin la fiche détaillée du produit avec une vue à 360° :

La fiche produit

Au final nous avons donc un mini-site très bien réalisé avec une mise en page déstructurée mais lisible (bonne immersion dans cette ambiance “femme active”), des contenus riches mais pas trop longs à charger (beaucoup de vidéos courtes et bien intégrées). C’est bien dosé et subtil, du rich commerce comme je l’apprécie, surtout quand c’est une marque française, Cocorico !

La vidéo est un support clé dans la valorisation des produits et dans l’enrichissement de l’expérience, là je ne vous apprend rien. OK mais pourquoi ne pas mettre la vidéo au coeur du dispositif marchand ? J’ai récemment croisé plusieurs exemples d’usages enrichis de la vidéo qui me font penser que ce support peut aller au-delà que de la simple illustration.

Premier exemple repéré chez Distilled qui met en scène dès sa page d’accueil une large vidéo (la navigation est relayée au bas de l’écran) où un mannequin enchaîne les tenues dans un astucieux montage :

Le montage vidéo de Distilled

Il est possible de passer d’une tenue à l’autre en utilisant les vignettes sous la fenêtre principale, l’accès au produit se fait à l’aide des liens sur la gauche. Une expérience hypnotisante et surtout très immersive qui vient remplacer des pages catégories / sous-catégories. Plus d’infos ici : Distilled Clothing Has Innovative Use of Video.

Autre exemple avec Video Infusion qui permet d’insérer des zones réactives dans une vidéo et de gérer les interactions sans recharger la page. Vous pouvez tester cette technologie sur leur page de démo :

La vidéo interactive de Video Infusion

Dernier exemple avec Innovid qui propose un incroyable système de superposition d’éléments réactifs dans une vidéo. Sur la capture d’écran suivante, le chat se promène entre les lettres du logo pendant que vous jouer à Pong sur le papier peint avec votre souris :

La démo d'Innovid

Bon OK, dit comme ça c’est pas très vendeur mais je vous engage fortement à tester ce système sur leur galerie d’exemples pour bien appréhender le potentiel de cette technologie (via Get Elastic).

Tout ça me fait dire que nous n’avons pas finit d’entendre parler de la vidéo et de ses déclinaisons en rich commerce : Imaginez de tels systèmes appliqués à l’offre de catch’up TV (M6 Replay) ou aux séries web (comme Dorm Life, Prom Queen ou Clark & Michael).