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.
Le secteur touristique a toujours été très innovant en matière d’interface marchande, que ce soit dans une optique de simplicité d’usage (Hipmunk, la nouvelle référence de la recherche de vol) ou d’inspiration (Une interface de recherche de voyage très sophistiquée pour Wanderfly). Dans ce domaine Kayak s’était illustré il y a quelques années avec un moteur de recherche de billets d’avion en Ajax qui mettait en oeuvre le principe d’auto-complétion et rafraichissements silencieux des résultats (il était dans tous les benchmarks). Plus récemment Kayak c’est également fait remarquer avec une très belle application iPad de recherche et de réservation de vols pour iPad.
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).
Connaissez-vous les imprimantes 3D ? Mais si enfin, ces imprimantes de nouvelle génération qui utilisent différentes techniques (résine à séchage ultra-rapide, impression par couches…) à la place de l’encre. Bref, c’est une révolution, mais ça coûte encore une blinde ! Le marché n’étant pas encore mûre pour équiper chaque foyer de sa petite imprimante 3D (mais ça ne serait tarder), des intermédiaires d’un nouveau type vous propose d’imprimer, donc de matérialiser, vos créations. C’est ainsi le cas de My Robot Nation, un service de conception de robots : Startup launches a robot invasion with 3D printing and WebGL.
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.
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.
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.
Pour le moment le choix d’habits est limité (t-shirt, sweat à capuche, foulard…) mais l’interface de personnalisation est très performante : le rendu visuel est bon, le mannequin se manipule avec fluidité et surtout les motifs épousent parfaitement les formes du corps pour plus de réalisme.
La technologie utilisée pour ce module est Unity3D qui dans sa dernière version exploite le moteur physique PhysX de NVidia. Particulièrement performant dans la gestion des vêtements, le Unity Player hérite des propriétés Interactive Cloth et Skinned Cloth, ce qui explique le réalisme du rendu.
Une fois vos créations achevées, vous pouvez les commander et les partager avec la communauté. De ce point de vue là, rien de très neuf.
Voici donc un très beau module de personnalisation qui laisse présager toujours plus de réalisme des les outils de simulation et les démonstrateurs.
A propos
Les interfaces riches au service de l’efficacité marchande : décryptage et tendances par Frédéric Cavazza et François Ziserman.
En savoir plus >
