RichCommerce.fr Toute l'actualité du commerce en ligne

Voilà bien longtemps que je n’ai pas parlé de vidéo interactive, pourtant un genre majeur dans la profession. Ces derniers temps, c’est la marque Wrangler qui était la plus novatrice dans ce domaine (cf. leur dernière campagne We Are Animals), mais d’autres s’y essayent avec brio comme Adidas et sa campagne NEO.

La campagne consiste en la mise en ligne d’un mini-site inspirationnel (lookbook en anglais) pour vous faire découvrir la gamme et profiter du partenariat avec Justin B. L’objectif pour eux est donc de vous faire rester un maximum de temps sur le site et de vous exploser à un maximum de produits. Ils ont donc opté pour un mini-site présentant une vingtaine de scènes du quotidien.

La sélection des scènes de Adidas NEO

La scène en elle-même est en fait une vidéo plein écran que vous pouvez mettre en pause en cliquant avec la souris. Les produits portés par les acteurs sont alors affichés en sur-impression, de même qu’un lien vers la boutique en ligne.

Le détail des produits d’une vidéo interactive

Vous pouvez également passer d’une scène à l’autre en bougeant votre souris sur les bords de l’écran ou en utilisant les flèches du clavier.

Le basculement d’une scène à une autre

Ce mini-site a été réalisé en Flash, mais j’imagine tout à fait ce type de dispositif réalisé en HTML5 pour être lu sur une tablette. Hélas… ce n’est pas le cas. Pourtant, la fonction première du mini-site, inspirer au travers de belles vidéos, correspond beaucoup plus au contexte d’usage des tablettes (installé confortablement sur son canapé en fin de journée) plutôt qu’à celui des ordinateurs de bureau (assis à un bureau et submergé des distractions de votre environnement de travail). Le mini-site en lui-même est très bien réalisé, mais il y a clairement un problème de ciblage, car les tablettes sont un médium bien plus approprié pour véhiculer les émotions de cette campagne.

Pourtant il existe des fournisseurs de solution comme Viewbix, Liveclicker ou encore W3Doc, dont vous pouvez voir une démo ici : TreetsShop Look Book. Je comprends que les habitudes sont dures à changer, mais les statistiques devraient faire rapidement évoluer les choses (Bientôt 10 millions de tablettes en France).

Je n’ai jamais été un grand fan des classements et autres podiums. Pourtant, tout comme moi, vous devez être bien content de tomber sur une étude complète et argumentée, surtout en matière de commerce en ligne. Je vous propose donc de découvrir ce matin les conclusions d’une vaste étude menée par iVenture Consulting : eShopper Index. L’ambition de cette étude était de comparer et classer les acteurs leaders de différents secteurs (mode, alimentation, tourisme…) et surtout de mesurer l’expérience d’achat de bout en bout, sans nécessairement se concentrer sur le tunnel de commande. Une étude exhaustive menée sur 12 secteurs d’activité auprès de 113 marques passées au crible selon plus de 200 critères.

Les critères sont répartis en trois grandes étapes : avant l’acte d’achat (référencement, présence sur les médias sociaux, compatibilité avec les terminaux mobiles…), pendant l’acte d’achat (longueur du dialogue de vente, nombre de moyens de paiement et d’options de livraison, temps de réponse aux questions…) et après l’acte d’achat (message de confirmation et suivie de commande, conditions de retour…). Les résultats sont synthétisés dans cette infographie :

Les grands gagnants de cette étude sont Net à Porter, Zalando, Amazon, La Redoute, Clarins ou Yoox. Les grands perdants sont Transavia, Nouvelles Frontières, easyJet, MisterGoodDeal ou Hertz. Je constate que les acteurs de l’habillement s’en sortent beaucoup mieux que les acteurs du tourisme et plus particulièrement de l’aérien.

L’étude nous livre également des tendances :

• Les marques issues du brick & mortar ont rattrapé voire dépassé les pure players du commerce en ligne ;
• Les parcours client restent laborieux et présentent de nombreux points de rupture ;
• Certaines marques se dispersent avec des fonctionnalités annexes (liste de souhaits…) plutôt que d’assurer les fondamentaux (retour gratuit, livraison rapide…).

J’espère que ce classement récompensera les efforts des meilleurs et fera prendre conscience aux autres de leurs lacunes. En tout cas, je ne peux qu’approuver cette démarche qui prend en compte l’expérience totale et valorise avant tout les fondamentaux du commerce (en ligne ou non). Plus d’infos ici : eShopper Index 2013, le 1er indicateur eCommerce.

Connaissez-vous Pandora ? C’est une marque danoise de bijoux personnalisables. Leur concept repose sur une série de bracelets que l’on compose avec des petites perles ou accessoires (ils appellent ça des charms). Il y en a pour tous les goûts avec une sélection d’une quinzaine de bracelets pour près de 300 charms. Vous vous doutez bien qu’avec une sélection aussi large, ils ne pouvaient pas se permettre de faire l’impasse sur un configurateur.

Ils proposent donc pour notre plus grand plaisir un très beau configurateur : Bracelet Designer. Non seulement ce module est simple à utiliser, mais il est en plus très réaliste. Le coup de génie est de proposer une interface où les petits charms tournent autour du bracelet de façon réaliste et se poussent les uns les autres. Le rendu est à la fois photo-réaliste et très ludique :

L’interface de personnalisation des bracelets

Une fois que vous avez choisi un type de bracelet, vous pouvez commencer à parcourir la liste des charms en applicant des filtres en fonction du matériau et de la présence ou non de perles. La liste occupe les 3/4 de la page et le bracelet vient de se ranger gentiment sous le prix. Le détail du charm est affiché au survol de la souris :

Ajoutez des bidules à l’infinie

Il est également possible de cliquer sur un charm et d’avoir le détail et ses variantes :

Les variantes de charms

Ce module de configuration n’a l’air de rien, mais je peux vous assurer que c’est un authentique tueur de productivité, tant il est ludique et plaisant de rajouter des charms et de jouer à les faire tourner sur le bracelet.

Sinon ils proposent également un Ring Designer qui fonctionne un peu sur le même principe avec la possibilité de composer des superpositions d’anneaux :

Le module de personnalisation des bagues

Là encore, on ne se lasse pas de changer l’ordre et de rajouter toujours plus d’anneaux. Au final, nous avons donc un configurateur très ludique, mais dans le même temps tout à fait rigoureux en termes de rendu ou de prix. Assurément une réussite !

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…

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.

Les applications de commerce en ligne sur l’iPad ne sont pas neuves (Votre showroom au bout des doigts avec les touchbooks), mais je commence à voir des choses tout à fait intéressantes sur le touchbook d’Apple. Jusqu’à présent, la plateforme de référence est iAd, qui permet de faire de très belles publicités interactives, notamment sur des magazines en linge comme Wired ou Project, mais le ticket d’entrée est très élevé (il me semble que c’est aux alentours de 50.000$, à confirmer).

Pour contourner ce problème de prix et proposer des fonctionnalités plus avancées, le mieux est encore de proposer votre propre application. C’est le cas par exemple de Subaru qui propose des applications pour iPad : Subaru taps iPad interface to promote 2011 vehicles. La marque japonaise propose ainsi des applications pour trois de ses modèles (Outback, Forester et WRX/STI) qui reprennent les contenus de son site web.

On retrouve ainsi dans ces applications des visites guidées avec vidéos :

Visite guidée interactive de votre Subaru sur iPad

De même qu’un démonstrateur intérieur pour les différents niveaux de finition :

Choix du niveau de finition intérieur de votre Subaru sur iPad

Ainsi qu’un teintier extérieur avec vue à 360° :

Choisissez la couleur de votre Subaru sur votre iPad

Rien de très révolutionnaire, car nous sommes dans les “standards” de ce que proposent les constructeurs habituellement. Par contre, la possibilité de visionner les vidéos et manipuler le véhicule sur un écran tactile semble bien plaire aux utilisateurs : Rich media ads on iPad outperforming iOS, Android devices. Une étude de Medialets annonce ainsi un taux d’engagement de 12,5% pour les bannières enrichies (avec un pic à 26% pour le secteur automobile).

C’est donc une très bonne nouvelle pour les annonceurs qui peuvent trouver dans l’iPad (et les touchbooks en général) des supports très efficaces pour valoriser leurs produits. L’absence de Flash sur l’iPad complique par contre la portabilité des contenus car il faut tout recréer avec l’éditeur iAd Producer ou avec le langage natif d’iOS (Objective C).

Mais ce n’est pas non plus une fatalité, car certains plugins sont autorisés sur la tablette d’Apple dont les très intéressant Cooliris qui permet d’améliorer le rendu des murs d’images et de la 3D. Cet éditeur propose ainsi son programme Immersive Ads en partenariat avec la régie InMobi qui permet de faire des bannières 3D très impressionnantes :

De même, ils proposent également la solution Decks pour repackager un catalogue dans une version adaptée aux spécificités de l’iPad (déjà utilisé par Groupon et Zappos) :

Une nouvelle expérience de commerce électronique tactile avec Decks sur iPad

Certes, le marché est encore très réduit (un peu plus de 500.000 iPads vendus en France), mais il concerne des clients à fort pouvoir d’achat (tout comme l’iPhone à ses débuts). De plus, l’important n’est pas forcément d’être présent sur l’iPad, mais plutôt d’acquérir de l’expérience sur la meilleure façon de valoriser vos produits au travers d’une interface tactile. Une fois cette expérience acquise, vous pourrez partir à la conquête des autres touchbooks et notamment des tablets low-cost propulsées par Android qui arriveront d’ici la fin de l’année (et qui permettront d’afficher des contenus Flash).

Les mannequins virtuels ne sont pas nouveaux, on en parle depuis de nombreuses années. Par contre, ce qui est en train de changer, c’est le niveau de précision. Nous avons ainsi découvert récemment le très impressionnant Fits.me ou les modules de La Redoute ou My Virtual Model. Il semblerait que nous soyons passés au stade supérieur avec Styku, une solution apportant un niveau de réalisme jamais atteint :

Des mannequins virtuels photoréalistes avec Styku

Issu du monde des logiciels de CAO dédié à l’habillement, cette société possède ainsi un savoir-faire incomparable en matière de modélisation des formes et de rendu des tissus. La particularité de cette solution est de proposer un rendu 3D photoréaliste en images, mais également en animation grâce à un moteur physique très performant (sautez directement à 1’27” pour l’animation) :

Tout ceci est très impressionnant, mais repose sur une captation précise des mensurations à l’aide d’un scanner corporel. C’est ce qui fait la force, mais également la faiblesse de cette solution : les commerçants (ou galeries marchandes) doivent s’équiper en scanners corporels pour pouvoir exploiter pleinement cette fonctionnalité. Correction : les commerçants doivent s’équiper en scanner corporel ET modéliser leurs produits avec l’outil proposé par l’éditeur.

Le fonctionnement de la solution Styku

Implanter des scanners corporels dans des zones commerçantes à forte activité ne devrait pas poser de problème, cela devrait même permettre de créer de l’animation, mais risque de limiter l’adoption de la solution. Aussi impressionnantes que soit les démos, il y a donc un revers à la médaille…

Ils sont visiblement en train de finaliser une solution alternative baptisée UFoto qui permettrait aux utilisateurs de se créer un avatar à partir d’une série de photos (l’application en extrapolerait vos dimensions). Pour le moment cette application n’est pas disponible, donc impossible d’en tester la précision.

(via Fast Company)

Comment faire quand vous êtes une très grande marque internationale pour exister dans un secteur où personne ne vous attend ? C’est tout le défi que devait relever Nike avec sa ligne Skateboarding. Ils ont donc opté pour la sobriété (tout comme les autres grandes marques : Minimalisme de rigueur pour Converse Skateboarding) avec un site qui laisse la part belle aux produits et contenus.

Ça commence donc dès la page d’accueil avec un visuel en pleine page et un bandeau de navigation minimaliste :

La page d'accueil de Nike Skateboarding

Cette page propose un défilement vertical assez classique avec une structuration en grille qui permet de faire défiler les contenus de façon horizontale. Toute l’ingéniosité de cette page est de gérer de façon efficace la surface d’affichage et surtout le positionnement dans la hauteur de page pour ne pas couper les blocs.

Au niveau des pages produit, le minimalisme est poussé à son paroxysme puisque les fiches produit ne sont composées que d’une seule photo :

La page produit de Nike Skateboarding

La navigation dans le catalogue n’est pas très simple (aucune option de tri) car le site privilégie l’approche du style guide mensuel. La logique de grille est respectée sur l’ensemble du site et tout particulièrement dans la section News :

La section News de Nike Skateboarding

Petit détail qui peut vous intéresser : ce site est réalisé en HTML5 à partir du template Boilerplate. Pour faire simple, l’intérêt d’utiliser un framework de développement comme Boilerplate est d’optimiser la compatibilité du site avec les vieux navigateurs, mais également de faciliter la maintenance avec une organisation très rigoureuse du code source et des fichiers (plus d’explications ici : HTML5 Boilerplate, A Default HTML/CSS/JS Template For Any Project). Mais ce n’est pas pour autant que le site n’exploite pas Flash, car on en retrouve pour les vidéos ou pour les zooms XL sur les produits.

Au final nous avons donc un site graphiquement très abouti avec une manipulation agréable et de beaux effets de transition.

C’était la grosse nouvelle de la semaine dernière : Après des années de tergiversations, Zara vient d’ouvrir sa boutique en ligne. Rien de révolutionnaire, mais une réalisation très sobre qui préfigure un nouveau standard de qualité pour les boutiques en ligne.

Je ne m’attarderais pas sur la page d’accueil car on n’y trouve rien de très folichon. Par contre, les pages de liste sont plus intéressantes avec un rafraîchissement silencieux de la partie centrale de la page quand vous activez les filtres :

Les listes de produits sur Zara.com

Détail je j’apprécie : Lorsque vous cliquez sur “Affichez tout” en bas de page, le reste de la sélection est affichée en dessous sans vous remettre en début de liste, pratique.

Pour la page produit c’est du très sobre également, avec un affichage extrêmement rapide des produits associés (sans rechargement du cadre de la page) :

La fiche produit sur Zara.com

La rubrique Lookbook vous présente des ensembles en pleine largeur (et hauteur) de page :

La rubrique Lookbook de Zara

Il y a également une rubrique vidéo avec des vidéos plein écran et un menu masqué (qui réapparait au survol du logo) :

Les vidéos sur le site de Zara

Il y a enfin le catalogue qui propose également un affichage en plein écran et des détails produit au survol de la souris :

Le catalogue en ligne de Zara

Au final, et au risque de me répéter, il n’y a rien de nouveau dans cette boutique en ligne, juste une réalisation très soignée et des comportements de pages équivalents à ce que l’on peut trouver ailleurs (chez Tati par exemple). Ce qui m’amène donc à penser que cette boutique illustre une forme de “standard” de qualité qu’une boutique en ligne est censée offrir à ses visiteurs. Pas de quoi se démarquer de la concurrence (la boutique d’Uniqlo est sur ce point-là beaucoup plus innovante) mais de quoi proposer une expérience agréable.

J’ai déjà eu de nombreuses occasions de vous parler du principe de mannequin virtuel, mais ce que propose Fits.me me semble particulièrement novateur car il mélange ce principe avec des photos de produits bien réels.

Le principe du mannequin virtuel chez Fits.me

Plutôt que de mannequin virtuel, ils préfèrent parler de cabine d’essayage virtuelle. Le service a été lancé il y a quelques mois et il existe déjà une première grosse référence avec la boutique anglaise Hawes & Curtis : Fits.me Launches World’s First Virtual Fitting Room.

Vous commencez donc par donner vos mensurations :

Première étape : Vos mensurations

Puis le simulateur vous permet d’essayer différente taille et de voir si vous rentrez dedans (virtuellement) et comment le tissu tombe :

Deuxième étape : Essayez différentes tailles

Le simulateur est très simple à manipuler et il y a tout un tas de chois alternatifs pour vous guider dans votre achat. Je ne sais pas combien de prises de vue cette cabine d’essaye virtuelle a demandé mais le simulateur annonce près de 100.000 combinaisons possibles pour le mannequin. En tout cas le rendu est particulièrement réaliste :

Les différents rendus du simulateur

C’est de très loin la simulation la plus spectaculaire que j’ai testé et je ne peux que reconnaitre la diabolique efficacité de ce dispositif. Essayez-le et vous serez immédiatement convaincu !