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

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 !

Vous pensiez que le social shopping était le levier ultime de la transformation ? Et bien non, en tout cas c’est ce que nous révèle les résultats de l’étude « Expérience des clients pour la nouvelle décennie » menée par Scene7. Cette enquête a été menée auprès de 546 entreprises dans 6 secteurs d’activité. L’étude est dense mais permet de classer les fonctionnalités rich commerce par taux d’efficacité :

1. Visites guidées ou visionneuses multimédia = 36 %
2. Filtrage visuel et recherche avancée sur les caractéristiques des produits (taille, couleur, prix) = 33 %
3. Comparatifs de produits = 28 %
4. Zoom = 28 %
5. Vidéos pour la commercialisation, la publicité et la démonstration = 27 %
6. Catalogues et brochures interactifs = 27 %…

Efficacité des fonctions rich commerce

Des chiffres très intéressants qu’il faut mettre en parallèle des fonctions de social shopping :

1. Commentaires et évaluations d’utilisateurs = 31 %
2. Classements et notes d’utilisateurs = 26 %
3. Chat en direct / messagerie instantanée = 22 %
4. Conception collaborative de produits personnalisés = 21 %
5. Contenu généré par les utilisateurs (images, vidéo, son) = 20 %
6. Flux RSS = 19 %…

Donc selon ces chiffres, une visite guidée ou une recherche visuelle serait plus efficace que les avis des internautes. Voilà des chiffres qui doivent faire chaud au coeur des partisans du rich commerce ! Je vais tout de même émettre trois bémols :

• Ces chiffres proviennent d’une étude commandée par Scene 7 donc ils sont forcément en leur faveur ;
• Il n’a jamais été question de choisir entre visite guidée et avis clients, ce sont deux fonctionnalités complémentaires qui ne répondent pas du tout aux mêmes objectifs ;
• Cette étude ne semble pas avoir pris en compte les Zoom XXL qui font un véritable tabac (cf. +25% de taux de conversion chez Darty grâce aux zooms XXL et From Shoes to Shirts, Bigger is Always Better).

Dans tout les cas de figure je vous recommande vivement de vous inscrire pour télécharger cette étude qui aborde aussi le m-commerce et les spécificités régionales.

(via I Love Web)

Normalement si vous lisez ce blog c’est que vous pensez que les interfaces riches ont leur intérêt sur un site marchand. OK, mais que se passe-t-il quand Flash n’est pas disponible ? Je ne suis pas en train de vous parler des puristes qui refusent tout plug-in ou des pauvres employés obligés de surfer sur le web avec une vieille d’IE sans Flash imposée par leur DSI, mais plutôt d’une mise à jour qui se passe mal ou d’un test de détection qui ne fonctionne pas comme prévu. Bref, que se passe-t-il quand vous ne pouvez plus utiliser Flash alors que cela fait des années que l’image du marque et la valorisation des produits reposent sur des animations, de la vidéo ou du son ? C’est la catastrophe !

Heureusement certains éditeurs zélés pensent à tout et prévoient une version HTML. C’est le cas de Rolex qui nous propose un site double (HTML et Flash) au contenu et à l’expérience quasi-identique. Illustration avec la page d’accueil :

La page d'accueil de Rolex en Flash

De larges visuels et un défilement horizontal pour les têtes de rubrique, exactement comme la version HTML :

La page d'accueil de Rolex en HTML

Idem pour les pages de contenu comme ici une rubrique sur l’expédition du sous-marin Trieste à plus de 10.000 mètres en 1960 :

Une page de contenu en Flash sur le site de Rolex

Une vidéo en plein écran et du son pour poser l’ambiance, forcément absents de la version HTML mais qui propose toute de même des visuels et contenus identiques :

Une page de contenu en HTML sur le site de Rolex

Pour finir je vous propose cette page produit :

Une page produit en Flash sur le site de Rolex

Toujours un large visuel et une navigation locale sous forme de frise en bas de page avec un effet loupe, que l’on ne retrouve pas sur la version HTML mais dont la mise en page est encore une fois la même :

Une page produit en HTML sur le site de Rolex

Que faut-il retenir de ce site ? Que les Suisses ont bien fait les choses, certes, Mais que Flash n’est pas nécessaire pour raconter une belle histoire ou pour valoriser un produit. Cette technologie (ou une autre) apporte un avantage indéniable (comme sur le page de contenu) pour un sentiment d’immersion plus prononcé mais qu’il ne faut pas faire reposer un site uniquement dessus.

Plus je navigue sur ce site et plus je me dis qu’il a été conçu en HTML et enrichi par la suite avec du Flash, juste ce qu’il faut pour ajouter une pointe d’interactivité et d’ambiance tout en maintenant une expérience cohérente entre les eux versions. C’est assurément une bonne pratique que je recommande à tous.

Voici l’enseignement que je pourrais en retirer : Si vous n’êtes pas capable de raconter une belle histoire ou de valoriser un produit avec du texte et des images alors il faut revoir votre copie. Vous aurez tout le loisir après coup de proposer une expérience plus riche et immersive mais cette étape préalable me semble indispensable pour ne pas confondre outils et moyens.

J’ai déjà eu de nombreuses occasions de vous vanter les mérites des zooms dans un contexte e-commerce. Non seulement la possibilité de voir de plus près le produit est indispensable pour rassurer les clients / prospects mais si le zoom est suffisamment puissant, il donne une sensation quasi-tactile aux internautes. Illustration chez Zoomorama avec cette démonstration sur de la maroquinerie où le grain du cuir est parfaitement mis en valeur par ce gros plan :

La sensation quasi-tactile des zooms XXL

Après plusieurs mois d’expérimentation chez Darty, les premiers chiffres « officiels » m’ont enfin été communiqué par Franklin Servan-Schreiber et l’impact est très positif : +25% de taux de conversion sur les 15 familles de produits exploitant Zoomorama (appareils photos, écrans plat, machines expresso, frigidaires, laves vaisselles…) ainsi qu’une satisfaction importante des utilisateurs qui déclarent la fonction de zoom utile à la prise de décision d’achat.

Les zooms XXL chez Darty

Même si je ne suis pas surpris par l’accueil très positif des utilisateurs pour cette fonction de zoom, je suis tout de même épaté par l’impact sur le C.A. : +25% !

Voilà en tout cas des chiffres qui vont apporter de l’eau à mon moulin sur les bienfaits de la mise en scène des produits et sur les fonctionnalités enrichis (zoom, vue 360°, démonstrateur…). Bon OK, si vous lisez ce blog c’est que vous en êtes convaincu, j’espère simplement que ce retour d’expérience va vous décider à sérieusement envisager l’implémentation d’une fonction de zoom XXL (il existe des prestataires très sérieux dans ce domaine) tant le ROI me semble évident. Certes, il y a le problème des photos de produit (qui va financer les clichés en HD ?) mais il est ici question d’améliorer de façon significative l’expérience utilisateur (et les ventes accessoirement !).

Après GAP et 77Kids, c’est au tour de TopMan de proposer un assistant au choix de jean : Top Jeans. L’idée est de mettre en scène les différentes coupes de jean pour vous aider dans votre choix :

L4assistant au choix ce jean chez TopMan

Une fois que vous avez choisi une coupe, vous pouvez demander au modèle de se retourner ou de bouger (en cliquant sur les boutons de 1 à 4) pour voir comment le jean se comporte (aisance, tombé du revert sur la cheville…). Une interface simple avec un bon contraste font de cette fonctionnalité une très bonne pratique.