Les appareils photos numériques sont comme les CD et les livres, des candidats idéals pour le commerce en ligne : faciles à stocker et à expédier, faciles à vendre également car il existe quantité d’avis et de tests et que les caractéristiques techniques sont aguicheuses et faciles à comparer.
Par contre, la mise en scène des produits est plus complexe car il manque souvent des éléments de comparaison. Donner les dimensions des appareils n’apporte en effet pas de réel valeur ajoutée. C’est là où un site comme CameraSize se démarque de la concurrence car il propose une comparaison visuelle des produits. Vous pouvez ainsi comparer deux APN placés côte à côte avec une pile pour vous rendre compte de leur taille relative :
Le comparateur visuel de CameraSize
Cerise sur le gateau : l’interface propose également de superposer une main d’adulte pour voir si ces APN tiennent dans votre paume. Bon OK, la main utilisée est largement surdimensionnée (ça doit être celle d’un basketeur), mais l’idée reste très intéressante.
Idéalement, pour être compétitif sur de la vente d’APN en ligne il faudrait plusieurs choses :
Un choix très vaste, mais une sélection très directive pour ceux qui ne veulent pas s’embêter à trifouiller les avis (comme Wize ou JustBuyThisOne) ;
Des tonnes de photos des produits, mais avec des éléments de comparaison visuel (comme CameraSize) ;
Des caractéristiques techniques complètes, mais avec des outils de filtre et tri simples à utiliser (comme à la FNAC).
Je suis certain que cet exemple est reproductible pour de nombreux autres produits. Si vous avez des exemples, le suis preneur.
La nouvelle est tombée la semaine dernière sans prévenir : Autoreduc, le site d’achat groupé de véhicules, va proposer un showroom virtuel (Une concession automobile multi-marques en 3D interactif, enfin !). Intrigué par cette annonce, je décide faire un tour sur ce site, mais la promesse est loin d’être tenue. À défaut de showroom virtuel, la page d’accueil propose un lien très discret sous certains modèles pour « découvrir la voiture sous tous les angles« .
La page d'accueil d'Autoreduc
Effectivement, le site propose alors une interface de visualisation permettant d’accéder à une vue extérieure à 360°, un teintier et la possibilité de zoomer sur certains détails du véhicule :
La vue extérieure à 360° chez Autoreduc
Vous avez également accès à une vue intérieure, toujours en 360° :
La vue intérieure à 360° d'Autoreduc
Les prises de vue sont de qualité, le temps de chargement est plus qu’acceptable, l’interface réagit bien. Donc de ce côté-là il n’y a pas de problème, car le véhicule est très bien mis en valeur. Par contre, la promesse d’un showroom virtuel en 3D n’est pas du tout tenue, car il est surtout question d’une vue à 360° à l’aide d’une vingtaine de clichés. L’interface est donc tout à fait agréable, mais l’annonce est plus que décevante. D’autant plus que les showrooms virtuels ont déjà été exploités par d’autres marques depuis bien longtemps, avec des univers réellement immersifs comme ceux de Fiat ou Renault (respectivement en 2007 et 2008).
Dans l’absolu, je ne suis pas certain que la métaphore du showroom virtuel soit une bonne idée, d’une part car ce sont des expériences souvent décevantes (comme la fausse boutique 3D de Zegna) et souvent complexes à appréhender (comme le très déroutant site de Citroën). En théorie il n’y a maintenant plus de contraintes techniques pour proposer de la vraie 3D en temps réel dans le navigateur, la DS3 du moteur Minko affiche ainsi près de 300.000 polygones haut la main), de même que la configurateur 3D de la Nissan Juk, mais le coût de production du modèle 3D doit être prohibitif.
Au final Autoreduc aurait plutôt dû jouer la carte du réalisme et annoncer de très belles vues à 360° plutôt que de nous promettre un showroom en 3D (virtuel). Encore une fois, ce n’est pas la 3D que je condamne, mais plutôt la surpromesse. Il est ainsi tout à fait possible de parfaitement valoriser des véhicules avec des belles photos, comme les sites de Chevrolet ou VW, et de proposer en prime une vue à360° et éventuellement une vue 3D. Pourquoi critiquer l’expérience des autres sites ?
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.
Les applications de réalité augmentée ne sont pas neuves, il n’empêche que quand elles sont bien exécutées, c’est toujours très plaisant. Illustration avec l’horloger Suisse Tissot qui propose depuis peu son application Tissot Reality. Le principe est simple : vous imprimez un bracelet en papier que vous ajustez à votre poignet, vous montrez le tout à votre webcam et voilà !
L'application de réalité augmentée de Tissot
Il n’y a rien de très novateur dans cette fonctionnalité, mais elle est particulièrement bien réalisée. Idéalement, il faudrait que les bracelets en papier soient distribués en magasin et dans les magazines.
Comme précisé en début d’article, la réalité augmentée a déjà été utilisée à de nombreuses reprises, particulièrement sur l’iPhone (notamment par d’autres horlogers comme Zenith et Girard-Perregaux). Vous pourriez me dire que tout ceci va finir par lasser les utilisateurs, mais je vous répondrait que nous n’en sommes qu’au tout début d’une vague d’innovations et de créativité. Pour vous en convaincre il vous suffit de regarder les différents exemples suivants :
VW au Canada avec son application Juiced Up pour animer les affiches
Le parti politique allemand Gruene Berlin qui vous propose d’écouter les discours dans la rue
L’agence anglaise VirtualMob et cette incroyable application pour changer la couleur de vos murs
Amazon avec son application Flow qui vous remonte de l’info et des vidéos simplement en filmant un produit
L'application de réalité augmentée d'Amazon
Layar et son tout nouveau navigateur Vision parfaitement exploité par le magazine Linda
Ceci n’est qu’une petite sélection de nombreux exemples récents. Donc si vous pensez avoir tout vu en matière de réalité augmentée, vous n’êtes pas au bout de vos surprises.
Après la semaine réglementaire de teasing, le nouveau site de Dior est enfin en ligne. Que dire, sinon que je suis extrêmement déçu par ce site marchand digne du siècle dernier. Non pas que la réalisation laisse à désirer, bien au contraire, mais les choix de conception me semblent carrément anachroniques.
Mais commençons par le commencement avec en premier lieu la fameuse campagne de teasing :
Avouez qu’avec un teaser comme celui-ci, on est en droit de s’attendre à quelque chose d’exceptionnel, non ? Bref… passons et rentrons dans le vif du sujet avec la page d’accueil.
Première chose surprenante, le site accueille les visiteurs avec une très belle photo d’un magasin. Traduction : « Mais qu’est-ce que vous faites sur internet ? Venez donc nous voir en magasin !« . Je peux comprendre que les sites web d’enseignes de distribution centenaires comme les Galleries Lafayette ou Harrod’s mettent en avant leur magasin, mais là j’ai du mal à comprendre le sens de cet accueil (à moins que je ne le comprenne trop bien…).
La page d'accueil avant la page d'accueil de Dior
Donc comme vous pouvez le constater, il ne se passe rien sur cette page puisqu’il faut cliquer sur « Entrer« . Je me souviens avoir vu ce genre de chose dans les années 2000, à l’époque on appelait ça une jump page, mais c’était au siècle dernier… et nous sommes bientôt en 2012 !
Une fois la porte d’entrée poussée (j’imagine que c’est une façon de décourager les internautes et de leur faire comprendre qu’ils doivent plutôt venir en magasin), nous arrivons enfin à la véritable page d’accueil qui oriente les visiteurs vers les différents univers.
La page d'accueil des univers
Pas grand-chose à redire sur cette page, tentons donc notre chance dans le premier univers : La Maison Dior en vidéo. Après un temps de chargement plutôt court (nous en reparlerons), les différentes vidéos sont représentées sur un grand mur qui défile avec un effet de perspective 3D.
Le mur de vidéos du site de Dior
Cette interface est plutôt réussie, mais n’a rien d’original puisque Cooliris nous propose déjà un équivalent générique depuis 3 ans. Quittons donc cette partie institutionnelle, et tentons donc notre chance dans la boutique « Hommes ».
Comme vous pouvez le constater, les traitements graphiques sont cohérents avec la page précédente, mais le choix d’une vidéo en plein écran est surprenant, d’autant plus qu’il n’y a pas de zones réactives et qu’elle est plutôt longue à charger.
La page d'accueil de la boutique "Hommes" de Dior
En pages intérieures, nous retrouvons des fiches produits plutôt étriquées : petits visuels et descriptions minimalistes.
Une fiche produit de la boutique "Hommes" de Dior
Un peu déçu par la pauvreté du contenu, vous vous dites qu’ils doivent forcément se rattraper sur les mini-sites, donc retour à la page d’accueil et direction « Miss Dior ». Après un chargement extrêmement long, vous avez donc droit à une belle photo en plein écran. OK super. Vous noterez le soin apporté par les concepteurs de cette page pour rendre les liens sous la photo les plus invisibles possible :
Un mini-site de Dior
Après un autre temps de chargement affreusement long, vous avez enfin droit à détailler le produit sous toutes ces coutures. Les visuels sont beaux, mais la visite guidée sous forme de vidéo est un peu trop linéaire, j’aurais bien aimé pouvoir manipuler ce beau sac à main.
La vue du produit du mini-site de Dior
Bien évidemment ce mini-site n’est pas marchand (il vous est poliment demandé de vous rendre à la boutique la plus proche de chez vous). Finissons donc notre visite de ce nouveau site à la boutique « Horlogerie ». Là encore, les codes graphiques sont cohérents, par contre les modules enrichis exploités surprennent : un beau carrousel pour présenter les montres, mais pas de vue 360° ou de zoom XL sur des produits valant pourtant une petite fortune !
Le carrousel de l'horlogerie de Dior
Pas découragé pour autant, je me dirige donc vers la boutique « Beauté », avec comme toujours un large visuel en page d’accueil, mais un temps de chargement plus raisonnable.
La page d'accueil de Dior Beauté
Visiblement cette boutique a fait l’objet d’une refonte en début d’année, cela s’en ressent notamment dans le menu de navigation qui facilite grandement le repérage et l’orientation :
Les menus de la boutique "Beauté"
En pages intérieures, vous noterez le soin particulier apporté aux pages de collections, qui font office de page de catégorie. La page est tout à fait en accord avec le reste du site, mais reste encore largement contre-intuitive, puisqu’il faut arriver à attraper la minuscule barre de défilement horizontale en bas de page pour avoir accès à l’ensemble des produits de la collection :
La page de catégorie de la catégorie "Parfums"
Au niveau des fiches produit, la mise en page a été remaniée (on se demande pourquoi), mais le contenu reste toujours aussi pauvre : petit visuel et texte minimaliste.
La fiche produit de la boutique "Parfums"
Au final, nous avons donc un « portail » avec des boutiques très sophistiquées graphiquement, mais plutôt décevantes en terme de contenus et manquent cruellement d’intuitivité et de chaleur. Certes, il y a les codes du luxe à respecter, mais l’expérience n’est au final pas très plaisante, pourtant je me suis donné du mal pour essayer de trouver des points positifs à raconter. Ce nouveau site de Dior souffre, selon moi, d’un anachronisme manifeste : il est conforme à ce que l’on pouvait faire avec le rich media au siècle dernier, mais n’est plus en phase avec les pratiques plus « agiles » du moment que l’on retrouve avec d’autres boutiques (cf. Nouvelles boutiques pour Zara et Uniqlo).
Le fait que Dior soit une marque de luxe justifie-t-il le mauvais traitement infligé aux internautes ? Je ne pense pas, car il existe d’autres exemples de marques de luxe qui font un usage plus raisonnable du rich commerce (Gucci, Burberry, IWC, Rolex…). Je suis intimement convaincu que l’avenir du commerce en ligne ne se passera pas par un enrichissement à l’extrême des éléments multimédia (photos toujours plus grandes, films à la résolution toujours plus élevés…), mais par le choix du meilleur compromis entre valorisation des produits, simplicité d’usage et optimisation du temps de chargement. Deux leviers sont à mon sens essentiels : la richesse du contenu (textuel mais également photos, vidéos, témoignages…) et la prise en compte des terminaux alternatifs (tablettes, tv connectées…). Donc comme vous l’aurez compris, même si la réalisation du nouveau site de Dior est de qualité, l’expérience n’est clairement pas à la hauteur. Ceci nous prouve donc que l’expérience utilisateur n’est pas directement liée à la quantité de bande passante utilisée, mais plutôt à la qualité de l’accueil et du contenu.
Depuis quelques années la marque Puma a entrepris de renouveler entièrement son image de marque sous l’impulsion du célébrissime Yves Béhar (dont le premier fait d’arme est le lancement du Clever Little Bag). Bref, tout ça pour dire qu’il y a un tout nouveau Puma.com. Ce qui surprend avec ce nouveau site, c’est sa construction atypique : une page d’accueil assez haute avec un fond de page, des visuels en pleine largeur sur le cadre et différents niveaux de profondeur qui créés une illusion d’optique (la tête du footballeur passe par dessus le bandeau de navigation).
La nouvelle page d'accueil de Puma
Malgré un contenu assez riche, cette page est plutôt rapide à s’afficher. La page offre également dans sa partie basse une mosaïque des derniers contenus avec une mise en page déstructurée du plus bel effet.
Le bas de la page d'accueil de Puma
Il y a également une rubrique média assez bien fournie. Vous remarquerez les astucieux menus en bas de page qui mènent vers le plan du site, l’identification et la boutique :
La rubrique médias du site de Puma
Et puisque l’on parle de la boutique, cette dernière intègre également la nouvelle structure, mais conserve son coeur de page :
La boutique en ligne de Puma
Pour le moment cette nouvelle version est encore en cours de déploiement sur les différentes langues ainsi que les différentes rubriques. Si à priori cette réalisation n’a rein de très spectaculaire (contrairement à ce que l’on pouvait voir il y a quelques années), elle illustre bien à mon avis la maturation du design web : moins de trucs qui bougent dans tous les sens, une très bonne utilisation de l’espace et de la hiérarchisation des éléments, une très bonne lisibilité, une grosse couche sociale et une boutique qui se concentre sur l’efficacité et la transformation. Ce n’est pas la première fois que je constate cette approche plus raisonnée, et c’est une très bonne chose, surtout avec la montée en puissance des terminaux alternatifs.
Cette semaine, deux marques grand public d’envergure ont lancé leur boutique en ligne outre-Atlantique : Zara et Uniqlo. Les plus observateurs noteront que ces distributeurs sont déjà présents en France (Nouvelle boutique très sobre pour Zara et Uniqlo mise sur la France), mais ces nouvelles versions US introduisent des petites améliorations et une grande richesse de contenu.
Je vous propose donc de commencer avec Zara qui capitalise sur une page d’accueil minimaliste qui privilégie le côté spectaculaire de visuels plein écran. Les visuels sont supposés fonctionner comme des panneaux coulissants… mais là ça ne fonctionne pas vraiment. Du coup on ne sait pas trop où cliquer, heureusement le menu est bien mis en évidence.
La page d'accueil de Zara US
La mise en page minimaliste est conservée sur les pages de catégorie qui s’affichent sans rechargement de la zone périphérique de la page. De même, les différentes options de filtre et tri permettent d’affiner la liste des produits en souplesse.
La page de catégorie de Zara US
La fiche produit est également un modèle de sobriété avec beaucoup d’espace blanc, peut être un peu trop, car il faut passer la souris sur Composition and Care pour avoir plus de détails. Vous noterez au passage la possibilité d’activer un Super Zoom qui n’en a que le nom (rien à voir avec ce que propose Darty).
La fiche produit de Zara US
Il y a pour finir le Look Book qui propose encore une fois de superbes photos en plein écran :
Le cahier de tendances de Zara US
Au final, nous avons donc un site d’une sobriété parfaitement assumée. Rien de très spectaculaire, mais une utilisation optimisée de très larges photos en fond de page (elles s’adaptent parfaitement quelle que soit la taille du navigateur).
Autre ambiance chez Uniqlo qui attaque très fort avec une page d’accueil particulièrement chargée. Cette page au contenu très dense regorge d’invitations visuelles qui incitent le visiteur à survoler les différents blocs, déclenchant des animations et même des transitions (notamment le carrousel qui révèle un mini-index). Cette page ne souffre pas de problèmes ergonomiques majeurs, mais elle est tout de même assez déroutante dans sa découverte « à tâtons » malgré une grille de lecture très bien marquée.
La page d'accueil de Uniqlo US
Au niveau de la page catégorie, nous avons droit à la même mise en page cubique, ainsi qu’une utilisation particulièrement astucieuse du carrousel qui propose des ensembles et du contenu… mais qui du coup repousse la première rangée de produits tout en bas de l’écran (pourtant j’utilise un moniteur Full HD !). Bizarrement ils ne proposent pas les options de filtrage et tris comme dans la version française.
La page catégorie chez Uniqlo US
La page produit est également très sobre. La capture d’écran ne le retranscrit pas, mais le menu de navigation déroulant est plutôt compliqué à manipuler, car il force l’utilisateur à déplacer latéralement sa souris pour dérouler la bonne sous-rubrique (très frustrant).
La page produit chez Uniqlo US
Le site est plutôt bien fourni en contenus de toute sorte. La palme revient tout de même au catalogue consultable en ligne qui est d’une densité littéraire rarement vue chez la concurrence.
Le catalogue électronique chez Uniqlo US
Finalement c’est ça qui surprend chez Uniqlo : Le contraste entre des écrans très dépouillés et des rubriques avec des tonnes de textes à lire. Pourtant l’ensemble fonctionne très bien.
Ces deux exemples confirment donc la tendance que j’avais déjà noté, à savoir une maturité de l’utilisation des modules enrichis, aussi bien pour la navigation et la sélection, la valorisation ou les différents contenus inspirationnels.
Déjà équipé d’une boutique en ligne, Ermenegildo Zegna a profité de l’ouverture d’une boutique à Paris pour annoncer le lancement de Zegna in Store, un magasin en ligne en 3D. Présenté comme « le premier site de luxe en trois dimensions« , ce magasin permet aux internautes de « faire leurs courses comme s’il marchait dans un magasin« . Le site se présente effectivement comme un environnement 3D avec un étonnant concept de boutique flottant au-dessus de Central Park. La boutique en elle même n’est pas très grande, mais offre différents espaces faciles à repérer :
La boutique en 3D de Zegna
La boutique est répartie sur deux étages et utilise Flash pour faire de la simili 3D, en fait un assemblage de séquences vidéo comme en faisait Novacom à l’époque (on me signale dans mon oreillette qu’ils en font encore plein). Pour vous aider dans la découverte de cette boutique, vous pouvez « invoquer » l’aide en ligne assurer par Milla Jovovich.
Vous pouvez accéder au détail des produits en cliquant sur les mannequins qui trainent dans la boutique, une fenêtre vous propose alors des infos complémentaires et une vue à 360° :
Le détail des produits dans la boutique 3D de Zegna
Pour celles et ceux qui trouvent la navigation au clavier trop laborieuse, vous avez également la possibilité d’utiliser les raccourcis en bas de page :
Les raccourcis pour accéder directement aux zones de la boutique
Au final nous avons donc une boutique en fausse 3D qui propose une expérience très limitée. En fait le problème ne vient pas trop de la boutique, mais plutôt de la promesse. Il aurait été à mon sens bien plus intéressant de proposer :
Une boutique en ligne traditionnelle, mais optimisée (l’actuelle souffre de grosses lacunes ergonomiques) ;
Des vues à 360° des produits ou des mannequins (comme peuvent le proposer Fits.me ou Styku) accessibles depuis les pages produit ;
Des modules riches pour présenter les nouvelles collections (comme le fait Wrangler) ;
Des vidéos ou animations inspirationnelles pour mieux restituer les valeurs de la marque (comme le fait Lipton).
Ou alors, proposer une boutique avec de la vraie 3D (rendue possible grâce aux derniers progrès de la 3D dans Flash). Mais dans tous les cas de figure, ce site laisse un sentiment de déception, car la réalisation n’est pas à la hauteur de l’ambition annoncée.
Généralement des fonctionnalités comme les simulateurs ou les vues à 360° sont réservées à des secteurs comme l’habillement ou l’automobile. Je vous propose de (re)découvrir ces fonctionnalités, mais en prenant l’air chez Truffaut qui propose un outil de composition de plantes et pots.
Le principe est de laisser les internautes choisir une combinaison de pot et plante et de l’afficher à l’échelle :
L'écran de configuration de votre plante
L’important dans cette fonctionnalité n’est pas de représenter visuellement les plantes et pots, mais surtout de le faire à l’échelle. Une règle sur le côté gauche de l’écran permet ainsi d’évaluer la taille totale de l’ensemble.
Certaines combinaisons sont même bloquées pour vous éviter de commander une plante trop petite par rapport à son pot :
Le même écran avec une autre plante
Le site offre également une vue à 360° pour les plantes et pour les pots :
La vue à 360° d'une plante
Cette solution (proposée par Kujjuk) permettrait d’améliorer le taux de transformation (entre +50% et +80%) et de diminuer le taux de retour (-12%). Une promesse particulièrement alléchante, d’autant que le prestataire se charge des prises de vue (une opération visiblement compliquée, sauf si vous avez un Packshot Creator ou équivalent).
Cette fonctionnalité vient juste d’être lancée, mais j’adorerais avoir un retour d’expérience sur l’impact (temps de visite, taux de transformation…), et je suis sûr que vous aussi bande de curieux !
J’ai déjà eu l’occasion de vous parler des mannequins interactifs et autres avatars (cf. les articles sur les mannequins virtuels), ce sujet est toujours à la mode avec notamment la nouvelle fonctionnalité Je créé mon look proposé par La Redoute. Ces mannequins virtuels sont propulsés par la technologie de E-Fijy dont j’ai également déjà parlé sur ce blog.
Le module se présente donc sous la forme d’une silhouette à personnaliser et à équiper (4 visages sont disponibles) :
Habillez votre mannequin virtuel à La Redoute
Il est également possible de suivre les conseils d’un styliste qui propose des ensembles adaptés à votre morphologie :
Les conseils du styliste en fonction de votre morphologie
Il y a enfin une galerie avec les différentes créations des internautes :
Votez pour les ensembles proposés par la communauté
Un module de mannequin virtuel sans fioriture qui délivre exactement ce qu’il a promis. Cette réalisation confirme ma théorie du « rich commerce raisonné » sur les modules d’assistance à la vente qui proposent une expérience plus riche pour un budget de réalisation très raisonnable (comparativement au développement d’une solution propriétaire).
