Démonstrateur et contenus textuels chez Ferrari

Ce soir je vous propose de (re)découvrir le site de Ferrari. Pourquoi ce site là ? Parce que malgré des produits qui ne demandent qu’à briller, la scuderia fait un usage très discret des interfaces riches. Illustration avec la page d’un modèle (la California) où l’on retrouve sur un même écran une visite guidée, beaucoup de texte et des images 100% statiques :

La page de présentation de la Ferrari California

La page de présentation de la Ferrari California

La visite guidée fonctionne comme une vue à 360° chapitrée avec des zones réactive sur les points d’intérêt du modèle. L’intégration de ces différents éléments dans la page se fait de façon très naturelle et le tout fonctionne à merveille.

Signalons également un configurateur visuel très sobre mais diablement efficace (les différentes options comme les volants sont affichés en second plan) où il est même possible de choisir la couleur de bloc de frein :

Le configurateur sur le site de Ferrari

Le configurateur sur le site de Ferrari

Signalons également un module très rigolo de présentation de l’évolution du design avec un timeline cliquable et un beau travail de morphing :

Evolution du design chez Ferrari

Evolution du design chez Ferrari

Enfin pour celles et ceux qui veulent quelque chose de plus immersif, il y a toujours le jeu Ferrari Virtual Race librement téléchargeable  (uniquement sur PC) :

Le jeu Virtual Race de Ferrari

Le jeu Virtual Race de Ferrari

Au final nous avons donc un site beaucoup moins tape-à-l’oeil que celui d’autres constructeurs comme Cadillac ou Jaguar mais qui propose un très subtil dosage de contenus statiques et riches.

+25% de taux de conversion chez Darty grâce aux zooms XXL

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

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

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 !).

e-commerce et 3D sont-ils compatibles ?

J’ai déjà eu de nombreuses occasions de vous parler de la 3D associée au commerce en ligne. La 3D a de nombreuses qualités (immersion…), certes, mais elle est capricieuse car elle ne tolère pas la médiocrité. Comprenez par là que la 3D ne fonctionne que si elle est parfaitement réaliste. Ce n’est ainsi pas un hasard si le cinéma en 3D n’est réellement devenu crédible qu’avec les récentes avancées technologiques de ces dernières années.

J’ai déjà mentionné quelques expérimentations intéressantes (Et on reparle du shopping 3D, Des galeries marchandes en 3D avec Enjoy3D) mais elles ne tiennent pas réellement la route car elle ne plonge pas l’internaute dans un environnement réellement immersif (dû aux limitations technologiques) mais ne sont que de piètres alternatives aux systèmes de navigation traditionnels (menus, moteurs de recherche).

Dernièrement nous avons assisté au lancement de MaBoutique3D, dont il existe une interview du patron :

Exemple de boutique en 3D

Exemple de boutique en 3D

L’idée est intéressante, mais la réalisation est encore loin de pouvoir susciter l’envie. Idem pour la Breizh Banque avec son hall en forme de soucoupe volante aux couleurs bretonnes :

La page d'accueil de la Breizh Banque

La page d'accueil de la Breizh Banque

Même si l’on peut saluer l’exploit technologique derrière cette réalisation, je ne comprends pas bien le recours à la 3D dans ce cas, surtout en page d’accueil !

Ces deux réalisations reposent sur des technologies propriétaires encore lourdes à manier et qui n’apportent pas grand chose à l’expérience utilisateur car le réalisme n’est pas encore au rendez-vous. Pour le moment le meilleur moyen de valoriser votre marque en 3D est encore de le faire dans un contexte choisi par les utilisateurs, par exemple dans des univers virtuels offrant un niveau de réalisme suffisant (cf. Vers des univers virtuels HD ?). Cette solution est intéressante car elle vous permet de monter en compétences sur une troisième dimension et d’attendre que des technologies comme WebGL soient normalisées (cf. WebGL, le nouveau standard de la 3D sur le web) et que le marché soit également un peu plus mature (De la 3D à toutes les sauces pour 2010 ?).

Entendons-nous bien : Ce discours n’est valable que pour les environnements 3D en temps réel, car il est possible de faire des choses tout à fait immersives avec de la vidéo ou de valoriser vos produits au travers de démonstrateurs ou configurateurs 3D comme par exemple chez NRJ mobile :

Démonstrateur 3D chez NRJ Mobile

Démonstrateur 3D chez NRJ Mobile

Donc oui, 3D et e-commerce sont compatibles mais sous réserve de bien faire les choses (intégration élégante, temps de chargement courts, pas de technologie propriétaire, prise en main intuitive…). Quand on y pense, la 3D se retrouve dans la position de la vidéo il y a quelques années : Laborieuse et maladroite. Inutile donc de s’y plonger aveuglement, ma recommandation serait de n’utiliser que ce qui présente le plus de valeur aux yeux des prospects / clients en fonction du contexte et non de cherche l’exploit technologique.

Bon OK ça fiat un peu enfonçage de porte ouverte, mais le but de cet article est avant tout de bien faire la part des choses et de na pas jeter le bébé avec l’eau du bain.

Manipulations rigolotes chez Wrangler

Vous connaissez Wrangler ? Mais si enfin, la marque de jeans coincés entre le mammouth (Levi’s) et la diva (Diesel). Pour résumer une longue histoire disons que Wrangler est dans un créneau très concurrentiel où les acteurs en présence se battent avant tout sur la créativité plutôt que sur les prix.

Bref, le seul moyen pour eux de se démarquer est de raconter de belles histoires et de surprendre les clients. C’est exactement ce qu’ils font avec leur site web qui est un très bon mélange d’interactivité et d’immersion. Il y a tout d’abord la présentation des collections sous forme de tableaux mettant en scène un homme et une femme dont vous choisissez la panoplie :

Choisissez vos tenus sur ce module de présentation des collections

Choisissez vos tenus sur ce module de présentation des collections

Tout est parfait dans ce module : Les couleurs surannées, la musique roots, le traitement graphique low-fi… l’ensemble est parfaitement immersif et permet de concentrer l’attention sur les deux personnages (qui sont les seuls éléments mobiles de cette page).

Une fois que vous avez choisi un personnage, vous le voyez évoluer dans une vidéo où il est possible de choisir le point de vue (pour apprécier les fringues) :

Détails de la collection sur le site de Wrangler

Détails de la collection sur le site de Wrangler

Sinon il y a aussi le très belle campagne Blue Bell qui propose une modalité d’interaction très particulière :

Votre souris commande le zip

Votre souris commande le zip

Ce mini-site propose ainsi différentes scènes où l’on peut bousculer les mannequins à l’aide de la souris :

Baladez les manequins de droite à gauche avec votre souris

Baladez les mannequins de droite à gauche avec votre souris

Ces scènes ne sont pas idéales pour mettre en avant les produits (pas de page de détails) mais elles remplissent parfaitement leur rôle : Surprendre et distraire. Il est ainsi très ludique de maltraiter les mannequins au fil des 6 scènes (et autant de produits manipulés) :

Et vlan !

Et vlan !

Mission accomplie !

(via BlogoErgoSum)

Des meubles en réalité augmentée chez AchatDesign

Même si les usages de réalité augmentée sont encore embryonnaires, j’ai comme l’impression que cette tendances va prendre de plus en plus d’importance cette année : Réalité augmentée, la revanche de l’Europe sur le Mobile 2.0. Particulièrement impressionante sur mobile, elle trouve néanmoins sa place dans nos ordinateurs avec des applications marchandes tout à fait crédibles : E-commerce + réalité augmentée = Webcam Social Shopping.

S’il y a bien un secteur pour lequel il y a beaucoup de choses à faire, c’est bien l’ameublement, et tout particulièrement les boutiques en ligne de meubles. Difficile en effêt de se décider à commander un meuble en ligne sans pouvoir le toucher et en apprécier les proportions. Bon OK vous pourriez me dire qu’en boutique ça n’est pas forcément mieux puisque l’on ne sais pas comment il va réellement rendre une fois chez vous (il faut faire un gros effort d’imagination).

C’est là où rentre en scène la réalité augmentée avec la possibilité d’incruster des meubles dans une photo de votre intérieur. IKEA le propose déjà en Allemagne avec une application pour mobile (IKEA Uses Mobile Augmented Reality To Engage Shoppers’ Imagination), mais les français d’AchatDesign semblent avoir une longueur d’avance avec une application pour ordinateur : Visualisez nos meubles chez vous.

Le principe est très simple :

  1. Vous posez un magazine sur le sol de votre pièce
  2. Vous prenez votre pièce en photo
  3. Vous envoyez cette photo sur le site en précisant où se situent les limites du magazine
  4. Vous visualisez les meubles dans votre pièce avec la bonne proportion

En fait l’utilisation du magazine est cruciale pour avoir une représentation 3D fiable des meubles, elle permet de donner des indications sur l’angle de la prise de vue et surtout les proportions. Voilà ce que ça donne dans mon salon :

Un fauteuil virtuel devant ma bibliothèque

Un fauteuil virtuel devant ma bibliothèque

Une fois le meuble généré en 3D, vous pouvez le déplacer et le faire pivoter, ça fonctionne bien et l’application est rapide à mettre en oeuvre (moins d’une minute pour envoyer la photo, désigner les coins du magazine et commencer à jouer avec les meubles).

Idéalement il faudrait pouvoir directement uploader vos photos depuis votre téléphone portable (si vous n’avez pas d’appareil photo numérique avec une carte mémoire) de même qu’une couche sociale (partage de vos photos sur Facebook & cie) mais la fonctionnalité est tout de même très efficace en l’état.

Pour le moment la catalogue de meubles du marchand est encore restreint mais j’imagine le potentiel d’une telle application avec une enseigne multi-marques d’envergure (BHV ?) ou un portail regroupant les catalogues de différents marchands. Et pourquoi pas un opérateur en marque blanche qui apporterait la technologie et le service de modélisation 3D des meubles…

Raffinement graphique et showroom 3D pour Citroën

Avez-vous le nouveau site de Citroën ? Le moins que l’on puisse dire est qu’il y a eu comme une montée en gamme avec cette page d’accueil très sophistiquée :

La page d'accueil du nouveau site Citroën

La page d'accueil du nouveau site Citroën

L’univers graphique est étrangement proche de celui du site d’Axa et l’expérience est aussi déstabilisante que sur le site de la SNCF. Comprenez par là que dans une recherche d’image haut de gamme, ils confrontent les internautes à une parodie d’interfaces Apple (avec reflets et cover flow). Je ne suis pas contre le fait d’apporter de la sophistication aux interfaces web (sinon je ne rédigerais pas ce blog depuis plus de deux ans) mais cela doit se faire avec une certaine retenue pour ne pas trop alourdir la navigation et le parcours client. Le site de Ford Vehicles est ainsi un exemple car les pages sont très rapides à chargées et n’imposent pas aux internautes un temps de chargement trop long (ceci est réservé aux mini-sites).

Au niveau des pages intérieures, le raffinement est toujours de rigueur avec un showroom en 3D pour les véhicules (ici la C1) :

Le showroom 3D sur le nouveau site Citroën

Le showroom 3D sur le nouveau site Citroën

Encore une fois même si la réalisation est exemplaire, il y a comme une impression de déjà vu : Fiat UK et Renault propose des showrooms 3D depuis plusieurs années.

Au final nous avons un très beau site qui aurait plus sa place sur des bornes interactives en concession que dans les navigateurs de Mr et Mme tout-le-monde. Loin de moi l’idée de vouloir comparer, mais le site de Peugeot est tout aussi qualitatif mais moins laborieux à parcourir, vous ne trouvez pas ?

Un autre assistant au choix de jean chez Topman

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

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.

Immersion et volupté pour Aubade

Nouvelle campagne et nouveau site de campagne pour la marque de lingerie française : FrenchArtOfLoving.com. Au programme de ce mini-site : Une interface à tiroirs (littéralement !) et de belles transitions. La mise en page du site est très minimaliste avec une navigation tournant autour de la métaphore d’une commode :

La page d'accueil du site FrenchArtOfLoving

La page d'accueil du site FrenchArtOfLoving

En cliquant sur les tiroirs, vous en découvrez le contenu après une belle cinématique de transition. Ici, l’assistant au choix :

L'assistant au choix

L'assistant au choix du site FrenchArtOfLoving

il y a également une rubrique plus expériencielle avec des morceaux musicaux et des ambiance sonores :

Extraits sonores sur

Extraits sonores sur le site FrenchArtOfLoving

De même que des vidéos de la campagne de teasing :

Les vidéos sur le

Les vidéos sur le site FrenchArtOfLoving

En fait on a vite fait le tour de ce mini-site, et l’on se retrouve bien vite sur la boutique en ligne (nettement moins esthétique) :

La boutique en ligne de Aubade

La boutique en ligne de Aubade

Même si je ne peux que souligner la pertinence des choix esthétique, ce mini-site deçoit. Dans la même catégorie je préfère largement le très efficace Victoria’s Secret ou les mini-sites psychédéliques de Agent Provocateur.

Optimisation du référencement pour les contenus Flash et Ajax, à quoi bon ?

Voilà un petit moment que traine dans mon calepin un projet d’article parlant de l’optimisation du référencement de contenus Flash et Ajax. Il faut dire que le sujet n’est pas tout neuf (on en parle depuis des années) et que les grands de ce monde s’en sont déjà préoccupés (Adobe collabore avec Google et Yahoo! pour améliorer l’indexation de Flash).

Dernièrement il y a eu des propositions et des améliorations techniques pour mieux indexer ces fameux contenus RIA : A proposal for making AJAX crawlable (traduction et interprétation en français : Google propose une méthode pour le référencement des sites AJAX) et Adobe Flash vs. Search Engine Optimization. En synthèse : Google est capable de référencer une partie des contenus textuels en Flash ou Ajax.

OK, on est content pour eux.

Pourquoi s’en soucier ? Après tout on ne fait pas un site en Flash ou en Ajax. Ce débat est à mon sens complètement superflu dans la mesure où la seule technologie viable pour faire un site est le HTML, l’astuce est de l’enrichir avec des contenus Flash / Ajax / Silverlight / 3D…

Dans un contexte de commerce en ligne, le référencement (naturel, optimisé ou payant) est un impératif. Améliorer la mise en scène des produits, fluidifier le parcours-client et favoriser l’immersion des internautes dans l’univers de marque sont aussi des objectifs primordiaux. Et ils ne devraient pas rentrer en conflit. Voilà pourquoi la seule technologie à envisager pour créer votre boutique en ligne est et restera le HTML. Ou du moins, c’est la technologie à adopter pour les pages que vous souhaitez réellement référencer : pages produit et pages de catégorie. Le reste des pages de votre site (accueil, recherche…) ne sont pas réellement intéressantes, c’est à dire critique pour votre activité.

Bien évidement rien ne vous empêche de créer des bannières ou des mini-sites évènementiels tout en Flash, mais l’effort de référencement ne doit pas être porté sur ces contenus périphériques.

La bonne pratique consiste donc à insérer des modules riches dans des pages HTML :

  • Carrousel, sélecteur, cinématique… pour la page d’accueil ;
  • Assistant, comparateur… pour les pages de catégorie ;
  • Filtres et tris dynamiques avec rafraichissements silencieux pour les pages de recherche ;
  • Démonstrateur, émulateur, configurateur, zoom et vues 360° / 3D pour les fiches produit.

Tous ces modules sont des blocs opaques aux “yeux” des robots chargés de parcourir les pages, mais le contenu est lui parfaitement visible et accessible selon un parcours client “pauvre” (sans avoir recours à ces modules).

Donc en résumer : À quoi bon référencer un configurateur ? (d’où le titre du billet)

Navandising, le merchandising appliqué à la navigation

J’ai toujours été fan des menus de navigation surdimensionné et du coup je suis tout à fait en phase avec le dernier article du blog de Get Elastic : Navandising: Merchandising in Navigation. L’idée est d’appliquer des techniques de merchandising (mise en avant de produits) aux menus de navigation. Bon par contre ça ne s’applique qu’aux boutiques proposant des panneaux de navigation suffisamment grands pour pouvoir y insérer des blocs.

L’auteur de l’article cite ainsi American Eagle (que l’on ne présente plus) :

Le merchandising des menus de navigation chez American Eagle

Le merchandising des menus de navigation chez American Eagle

Mais on peut également découvrir le site de Moosejaw :

Les encarts sur la navigation de Moosejaw

Les encarts sur la navigation de Moosejaw

À ces deux exemples je rajouterais ceux de Electronic Arts :

Mise en avant de produit chez EA.com

Mise en avant de produit chez EA.com

De même que le site de Sony :

Catégorisation avantageuse chez Sony.fr

Catégorisation avantageuse chez Sony.fr

Et enfin le site de Yves Rocher :

Les panneaux de navigation du site de Yvers Rocher

Les panneaux de navigation du site de Yvers Rocher

Une très bonne idée, que se soit pour mieux guider les internautes ou pour mettre en avant des produits. Si vous connaissez d’autres exemples, merci de laisser les URLs en commentaire.