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 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 ?

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.

Ils continuent d’innover avec une application marchande distribuée sur le Mac App Store qui vient compléter la fonction Kayak Explore disponible sur le site.

L'interface de recherche de Kayak sur Mac

Le but de cette application est donc de vous aider à choisir une destination de vacances. l’interface est sobre et facile à prendre en main : vous choisissez une destination de départ ainsi qu’un thème et les recommandations sont affichées sur une carte en fonction de votre budget (une glissière en bas d’écran).

En choisissant une destination, vous avez alors accès aux détails avec les différentes options de vol et d’hotel :

L'interface de sélection de l'hôtel

Même si cette application est légère (1,9 Mo) et très agréable à utiliser, vous devez très certainement avoir du mal à vous convaincre de sa réelle utilité (après tout, ils ont un site web qui fonctionne plutôt bien). J’étais également sceptique, mais je me dis que cette application fait certainement partie d’un plan d’ensemble visant à améliorer l’expérience d’achat. Je m’explique : le secteur est tellement compétitif que pour espérer prendre ou conserver des parts de marché, il faut se différencier par tous les moyens possibles. Cette différenciation passe par la mise à disposition de différentes interfaces de vente : sur le web, sur smartphone, sur tablette… Leur logique est de proposer une interface rapide et rationnelle sur le web pour séduire ceux qui ont une idée bien précise en tête, et d’expérimenter différentes interfaces pour les flâneurs.

Si je ne dis pas de bêtise, cette application a été réalisée dans le même langage de programmation que les applications mobiles pour iOS (Objective C), donc nous pouvons considérer ça comme un exercice de style, ou plutôt un travail de R&D. Est-ce que les applications Mac sont l’avenir du commerce en ligne ? Non, bien évidemment que non. Par contre, je reste persuadé que la clé d’une expérience de vente réussie est de proposer non pas une interface unique, mais plusieurs interfaces correspondant à des terminaux et des contextes d’usages différents.

À ce sujet, vous noterez que Kayak n’a rien inventé : Amazon ou Ebay ont également mené de nombreuses expérimentations en matière d’interfaces marchandes innovantes. En tout cas ceci me conforte dans l’idée que 2012 va être une année clé pour le renouveau des interfaces (Vers de nouvelles expériences d’achat et de consultation).

(via Mac Appstorm)

Le site n’a visiblement pas investi des montagnes d’argent dans la charte graphique, car la page d’accueil est… perfectible.

La page d'accueil de My Robot Nation

Qu’importe cette page d’accueil vieillote, vous êtes très rapidement orienté vers l’interface de conception des robots qui n’est pas sans rappeler l’atelier de Spore Creatures. Non seulement cette interface est très intuitive et fun, mais en plus elle est réalisée avec WebGL, la technologie standardisée pour faire de la 3D dans le navigateur.

L'interface de création de My Nation Robot

Vous allez ainsi pouvoir créer votre robot en quelques minutes : choix des formes des membres, des proportions, des décorations et ustensiles, des couleurs… Le résultat est immédiatement visible à l’écran et vous pouvez manipuler votre robot dans tous les sens avec un rendu parfait et une fluidité exemplaire. Tout ceci est possible grâce à WebGL qui permet de « confier » le rendu 3D à la puce graphique et non au processeur (d’où des performances bien meilleures).

Pour vous rendre compte du nombre infini de combinaisons, je vous engage à regarder la galerie des créations.

Les différentes créations des utilisateurs

Les configurateurs 3D ne sont pas neufs, mais celui-ci est particulièrement bien réalisé et surtout très intuitif et performant. Et pour cause : l’éditeur du service reconnait que ce Robot Nation n’est qu’un galop d’essai vers une plateforme de conception beaucoup plus ambitieuse. Les robots étaient, selon eux, une thématique intéressante pour faire comprendre au grand public l’intérêt des imprimantes 3D : My Robot Nation aims for personal 3D printing for all.

Vivement la suite !

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.

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.

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.

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)

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.