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

Si vous suivez ce blog régulièrement, alors vous devez nécessairement vous intéresser à minima aux technologies qui propulsent le rich commerce (oui, c’est bien de Flash dont je parle). Je n’ai volontairement jamais abordé la question du choix des technologies sur ce blog car j’estime qu’elle n’est pas pertinente. D’une part, car je le fais sur un autre blog (Pourquoi HTML5 et Flash ne peuvent être comparés et Flash et HTML5 ne sont pas concurrents) et parce que la technologie importe peu, ce qui compte, c’est l’expérience que vous allez faire vivre à vos clients et prospects. Bref, je sors de mon silence car ces derniers mois nous assistons à une authentique mise à mort médiatique de Flash. Je ne sais pas trop d’où cette tendance (manie ? perversion ?) est partie, toujours est-il qu’elle génère une sacrée polémique dont le point d’orgue est l’annonce récente de la réorientation stratégique d’Adobe vers HTLM5 et AIR plutôt que Flash sur les smartphones (Compte-rendu de la conférence Back From MAX 2011).

Si vous suivez un minimum l’actualité du web, vous avez sûrement du voir passer d’innombrables articles annonçant la mort de Flash et la suprématie de HTML5. Inutile de vous dire que je n’approuve absolument pas ces articles racoleurs qui ne sont que le reflet du manque évident de réalisme des personnes qui les ont rédigés. Dans le souhait de vous épargner une laborieuse explication technique, je me contenterais de répéter ce que j’ai déjà publié ailleurs : personne ne vous oblige à choisir entre Flash et HTML5, et certainement pas les utilisateurs, car ces deux technologies sont complémentaires. Vous pourriez me ressortir le sempiternel argument des terminaux mobiles comme l’iPhone ou l’iPad qui ne lisent pas le Flash et je vous répondrais qu’il faut être très naïf optimiste pour penser que vous arriverez à séduire vos cibles sur différents supports avec un seul site web. En ce sens, je rejoins tout à fait la position du collectif OccupyHTML : « Nous voulons avoir la liberté de choisir la technologie qui apportera la meilleure expérience aux internautes« . Pour illustrer mon propos, je vous propose de découvrir deux exemples récents exploitants Flash et HTML5.

Commençons tout d’abord avec Nissan qui vient de lancer un mini-site pour sa Juke (Nissan Juke 3D) proposant un visualisateur en 3D temps réel tournant sur la dernière version de Flash :

Le visualisateur en 3D de la Nissan Juke

Comme vous pouvez le constater, le rendu 3D est tout simplement stupéfiant (il doit bien y avoir 200.000 polygones à l’écran), incomparable avec ce que l’on avait l’habitude de voir il y a quelques années (cf. Le B-A-BA de la 3D dans Flash). Certes, l’animation est longue à charger, mais le rendu photo-réaliste vaut largement l’attente.

Est-ce qu’il serait possible de réaliser ce genre de chose avec HTLM5 ? Oui, mais en utilisant WebGL, un standard supporté par une minorité de navigateurs (les dernières versions de Chrome et Safari). Est-ce qu’il serait possible de réaliser une application équivalente sur iPad ? Oui en compilant la scène 3D dans une application distribuée via l’App Store comme il en existe déjà (Le rich commerce à l’assaut de l’iPad). Est-ce que le transformation serait plus élevé avec une application HTML5 plutôt que Flash ? Non, bien sûr que non, ça n’a rien à voir.

Deuxième exemple avec Honda qui propose un mini-site très rigolo (The Experiment) mettant en scène différents objets de notre quotidien qu’il est possible de combiner pour provoquer des réactions en chaine :

Expérimenter l'inconnu avec Honda

Est-ce qu’il serait possible de réaliser ce genre de chose avec Flash ? Oui, mais puisque ça fonctionne bien en HTML5, autant le faire comme ça. Est-ce qu’il est possible de réaliser une application équivalente sur iPad ? J’en doute, car ce mini-site se manipule à la souris, il faudrait revoir l’interface pour l’adapter à un écran tactile. Est-ce que le transformation serait plus élevé avec une application Flash plutôt que HTML5 ? Non, bien sûr que non, ça n’a rien à voir.

Au final, comme vous pouvez le constater, Flash et HTML5 sont des technologies offrant des possibilités différentes et induisant des contraintes différentes. Les deux se complètent très bien et ne vous forcent en aucun cas à choisir, car la solution universelle n’existe pas. Ceux qui prétendent le contraire ne se sont pas réellement penchés sur la question. Je referme donc cette parenthèse technique pour me concentrer à nouveau sur les usages et les expériences.

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.

(via FWA)

Depuis que j’ai commencé à rédiger ce blog, j’ai concentré ma ligne éditoriale sur les expériences d’achat en ligne enrichies. Un enrichissement avant tout technique, au service de l’expérience utilisateur, mais très technique tout de même. Aussi je souhaiterais vous parler de différents services découverts récemment qui n’innovent pas sur le plan technique, mais sur le modèle d’engagement et la promesse faite aux prospects et clients. Prendre la parole sur ce sujet me tiens à coeur, car j’estime que ces derniers temps on nous parle un peu trop de Groupon ou Vente privée (des authentiques innovations d’usage) et qu’il serait intéressant de se pencher sur d’autres modèles fortement disruptifs.

Commençons tout d’abord avec différents sites de vente sous contrainte. L’idée maitresse est ici de précipiter la prise de décision d’achat en introduisant une forte contrainte de temps (« Si vous n’achetez pas maintenant, cette affaire vous passera sous le nez« ). Le premier site a avoir appliqué cette contrainte à grande échelle est Woot avec sa fameuse devise One Day, One Deal.

Woot, le pionnier des ventes éphémères

Depuis, d’autres se sont engouffrés dans la brèche depuis, notamment Teefury (dont je suis un inconditionnel fan). Plus récemment, nous avons pu voir arriver des modèles dérivés comme celui de WonderPrice qui propose des prix dégressifs (j’imagine qu’ils ne doivent pas avoir trop de problèmes d’invendus) :

Les prix dégressifs de WonderPrice

Mais je pense que nous avons atteint le stade ultime de la vente sous contrainte avec les Suédois de PaperCut qui propose un module de vente rapide : SpeedSale. Le principe est de vous exposer à une série de produits soldés pour lesquels vous n’avez que 4 secondes pour prendre votre décision et les ajouter au panier. Passé ce délai, les offres ne sont plus valables. Ce module est réalisé en Flash et vous impose en prime une musique carrément stressante.

Vous n'avez que 4 secondes pour mettre ce produit dans votre panier

N’est-ce pas un peu suicidaire de proposer cette expérience de vente à une époque où l’on ne jure que par la réassurance ? Je ne sais pas, en tout cas l’expérience est extrême et ne ressemble à rien de ce que vous avez déjà vécu (euphémisme).

Dans un tout autre registre, nous avons vu apparaitre un certain nombre de sites marchands adossés à des portails d’avis client et de recommandations. L’idée est de bénéficier du levier communautaire pour faciliter la prise de décision. Les grands sites comme Amazon intègrent les avis depuis le siècle dernier, mais l’approche de ces sites est de dissocier les avis de la boutique. Mais comme il y a un grand nombre d’avis, ils proposent une gamme de produits restreinte en utilisant les avis comme filtre. Le site Wize se charge ainsi de scruter la toile pour agréger le plus grand nombre d’avis et les résumer avec leur Wize Rank. Ils proposent ensuite un choix restreint à 3 ou 4 produits par catégorie :

Wize se charge de filtrer les meilleurs produits pour vous

Encore plus extrême, le site JustBuyThisOne se limite à l’affichage d’un seul produit par catégorie (avec deux variantes haut et bas de gamme). Idéal pour celles et ceux qui n’ont pas le courage de lire tous les avis.

La boutique qui ne propose à la vente que le meilleur produit de chaque catégorie

Terminons enfin avec une troisième innovation : les sites d’enchères ludiques. Le principe est d’introduire une mécanique de jeu (gambling) dans la vente aux enchères de produits. L’exemple le plus emblématique de cette catégorie est Swoopo, un service canadien qui a fermé ses portes en début d’année (il existe une page Wikipedia).

Placez vos enchères chez Swoopo pour avoir le droit d'acheter un produit soldé

La mécanique est redoutable : les utilisateurs sont incités à enchérir sur les produits mis en vente pendant un créneau d’1 h, mais les enchères ne se font que par unité de 1$. À chaque fois qu’un utilisateur enchérit sur un produit, le prix est incrémenté de 0,15$ et le temps est rallongé de 15 s. L’astuce (ou l’arnaque) est donc la suivante : si un produit à 400$ est mis aux enchères, les utilisateurs enchérissent chacun leur tour pour remporter le droit de l’acheter. Vous êtes donc amené à enchérir des dizaines de fois (donc à payer des dizaines de $) pour avoir le droit d’acheter le produit. Plusieurs personnes se retrouvent donc à enchérir des dizaines de fois pour un produit unique. Au final, celui qui remporte la mise en gagnant, mais ceux qui ont enchéri perdent leur mise. Oui je sais, c’est un attrape-couillon, mais je peux tout à fait concevoir que l’on se prenne au jeu, d’autant plus que les enchères (« bid ») peuvent être achetées par packs avec un tarif dégressif : New Swoopo.Com Auction Site, A Little Ingenious, A Little Evil.

Je ne comprends pas bien comment le site a pu faire faillite avec un modèle aussi redoutable (peut-être un problème juridique), toujours est-il que les successeurs sont déjà là avec notamment BidRodeo (je ne connais pas d’exemple français).

BidRodeo, l'autre site d'enchères ludiques

Donc au final est-ce ça l’avenir : des astuces pour stresser les utilisateurs et « forcer » les ventes en jouant sur les névroses des prospects ? Je ne sais pas. Par contre l’alternative  »historique » pour doper les ventes n’est pas non plus très reluisante : enchérir sur des mots-clés dont nous savons pertinemment qu’il n’y a qu’un seul gagnant (Google).

Ces trois approches ne sont qu’un exemple d’innovations d’usage, il en existe de nombreuses autres, notamment en jouant sur le levier social. Bien évidemment ces innovations ne s’opposent pas à un enrichissement de l’interface et de l’expérience d’achat, mais elles nous ouvrent les yeux sur d’autres façons d’approcher le commerce en ligne, pour les plus téméraires ou ceux qui n’ont rien à perdre !

En ce moment j’ai comme l’impression que le secteur du voyage est entré dans un nouveau cycle d’innovations. Il y a ainsi une tonne de réseaux sociaux et applications mobiles disponibles pour les voyageurs, et les interfaces de recherche ne sont pas en reste avec l’exemple récent de Hipmunk (cf. Hipmunk, la nouvelle référence de la recherche de vol).

Aujourd’hui je voudrais vous faire découvrir Wanderfly qui pousse la recherche de confort visuel encore plus loin. Ça commence dès la page d’accueil avec un formulaire de recherche exploitant parfaitement la métaphore visuelle (glissières, boutons à presser…). La photo en fond de page est également une très bonne trouvaille pour les internautes en panne d’inspiration (le lien en bas à droite permet d’aller sur la fiche de la destination) :

La page d'accueil de Wanderfly

La liste des résultats est dans le même esprit avec une série de destinations présentées en vignettes que l’on sélectionne pour affiner votre choix :

La liste des destinations dans Wanderfly

Chaque destination est ensuite présentée sous forme de fiche synthétique. La partie haute de la fiche est composée d’un carrousel de photos, d’une description , d’infos locales, d’une sélection d’hôtels et vols ainsi que d’un prix estimatif. La densité d’information sur cette zone de la page est très dense, mais la lisibilité est parfaite :

La fiche d'une destination dans Wanderfly

Le bas de la page est composé d’une liste d’attractions à faire dans les environs de la destination, ces attractions sont agrégées depuis différents services (Foursquare, Lonely Planet, Yelp…).Les autres destinations présentées dans l’écran précédent sont accessibles depuis la barre en haut de page (ainsi que les critères de recherche).

Il est possible de choisir un autre vol ou hôtel au travers d’une interface toujours aussi facile à prendre en main (les filtres sont à gauche et les critères de tri en haut à droite) :

L'interface de recherche d'un hôtel

Les sites de voyage sont parmi les plus anciens et les plus compétitifs du web marchand, mais j’avoue avoir été bluffé par l’expérience que propose Wanderfly : lisibilité, simplicité, réactivité… Cette interface est une authentique réussite. Assurément un nouveau standard dans la profession, à ranger avec TravelMuse et TripSay.

(via I Love Web)

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.

Après de nombreuses années d’hésitation, Zara – la célèbre marque espagnole, se décide enfin à lancer sa boutique en ligne. Bon OK, à défaut de boutique marchande il s’agit plus d’un showroom un peu plus complet que dans la précédente version du site.

Nous avons donc  une page d’accueil avec une navigation à vignette verticale et une vidéo de fond de page (déjà vu ailleurs) :

La page d'accueil de Zara

Il y a ensuite le catalogue sous forme d’une frise horizontale (aucun intérêt) :

La page catalogue de Zara

De même que la collection, une sorte de défilé de vêtements sur portants (redites par rapport à la précédente section) :

La collection Zara

Puis nous avons le Look Book pour découvrir des ensembles (très bien mais où sont les accès aux produits ?) :

Le look book de Zara

Il y a aussi les pages « inspiration » avec des croquis à l’apparition scénarisée façon showreel (et alors ?) :

La page inspiration de Zara

Et c’est tout.

Un catalogue très pauvre avec une profondeur de gamme ridicule, très peu d’interactivité et des pages produit dramatiquement vides (ils auraient au moins pu repasser ce t-shirt) :

Une page produit de Zara

Avouez que c’est tout de même extrêmement décevant, non ? Dire que je suis déçu de cette boutique est un euphémisme. Nous avons ici le parfait exemple de ce qu’il ne faut pas faire : utiliser des technologies « riches » pour palier à un manque de contenu. Au vue du degré d’interaction du site, l’expérience utilisateur serait rigoureusement la même avec des pages HTML.

Pourtant ils ont l’exemple de Zara Home, une véritable boutique en ligne qui propose une très agréable expérience d’achat avec le bon niveau d’information et des pages HTML qui fonctionnent bien mieux.

La page produit de Zara Home