Articles taggés avec ‘zoom’

Nouvelles boutiques pour Zara et Uniqlo

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.

Modules semi-riche pour IWC

L4année dernière j’avais présenté un bel exemple de site à double interface : Avec ou sans Flash ? l’exemple Rolex. Je vous propose de rester dans le monde de l’horlogerie avec le très intéressant site d’IWC. Intéressant pourquoi ? Parce que ce site n’est ni en Flash, ni en HTML. Disons qu’il est entre les deux avec un usage intensif du javascript qui le positionne à mi-chemin entre les interfaces riches et les interfaces traditionnelles. Un compromis hasardeux ? Non pas du tout, plutôt l’avenir du rich commerce.

Tout commence avec une page d’accueil plutôt sobre mais offrant de larges visuels et un carrousel parfaitement intuitif (avec l’indicateur de progression) :

La page d'accueil de IWC

Pas de vidéo ou cinématique, juste de belles photos des produits. Une fois sur la page des collections, vous choisissez une famille dans la gamme et les différents modèles sont présentés dans le menu de navigation. Un survol de la souris affiche les détails essentiels et une photo plus grande :

La page de collection du site IWC

Là encore pas de fioritures, juste ce qu’il faut pour accrocher les internautes et leur délivrer le bon message. Vient ensuite la page produit où l’on retrouve des choses plus ludiques comme le visualisateur de face arrière qui utilise une réglette :

Comparez les faces avant/arrière à l'aide de la réglette

Vous avez également accès à un zoom XXL qui s’ouvre dans une nouvelle fenêtre :

Le zoom XXL sur une montre

Toujours pas de Flash, ni de technologie exotique, simplement la photo en très haute résolution et les fonctions de base.

On retrouve également dans la rubrique « Experiences » des contenus multimédia comme ce diaporama d’ambiance :

Diaporama en N&B sur le site IWC

Au final nous avons donc un site en HTML qui propose néanmoins juste ce qu’il faut d’enrichissement pour améliorer l’expérience des internautes : carrousel, menus dynamiques, info-bulles géantes, zoom XL, diaporama… C’est à mon sens dans cette direction que va le rich commerce : une production maitrisée qui mise tout sur un contenu de qualité. « Maitrisée » car ce site peut entièrement être pris en charge par un outil de gestion de contenu afin d’en faciliter l’évolution et surtout la traduction.

Le fait d’utiliser Flash implique des coûts de production légèrement plus élevés, mais surtout de bien plus grandes difficultés d’évolution et de traduction. Utiliser du javascript peut donc être une solution de repli, mais qui n’est pas parfaite, car ce n’est pas un langage très rigoureux, donc il peut poser des problèmes de compatibilité. Heureusement il existe de nombreux framework javascript (jQuery, Backbase, script.aculo.us…) qui permettent de réaliser toutes sortes de choses très intéressantes (carrousel, glissière, rafraichissements silencieux…). Combiner les possibilités offertes par HTML5 et CSS3 avec du code javascript normalisé semble donc être la combinaison gagnante. Je manque d’exemples pour illustrer mon propos, mais la sortie imminente d’IE9 devrait populariser le recours à des technologies standards pour faire des enrichissements de premier niveau (cf. CSS3 et javascript seront-elles les technologies RIA du future ?).

Mais nous aurons l’occasion d’en reparler…

Porno chic et autres astuces graphiques chez SuitSupply

Vous connaissez SuitSupply ? Il s’agit d’un fabricant de costumes hollandais qui n’a pas froid aux yeux. Ils exploitent ainsi le filon du porno chic dès la page d’accueil de leur boutique avec des visuels en plein écran :

La page d'accueil de SuitSupply

J’apprécie cette touche coquine (et encore je n’ai pas choisi la photo la plus osée), même s’il faut bien remarquer que le menu de navigation situé à gauche de l’écran n’est pas très visible, ni très pratique. En grand professionnel que je suis, j’ai tout de même pris le temps de visiter cette boutique et je suis tombé sur deux ou trois idées tout à fait intéressantes.

Il y a tout d’abord une page de catégorie à défilement horizontal où l’on peut zoomer sur les détails des costumes :

La page de catégorie de SuitSupply

Il y a ensuite une boîte d’ajout au panier (avec la sélection de la taille) où sont incrustés des produits associés (chemise + cravatte) :

La boîte d'ajout au panier avec les produits associés

Il y a enfin un tunnel de commande dans le plus pur style minimaliste avec un panier néanmoins parfaitement lisible :

Le panier de SuitSupply

Au final nous avons donc une boutique qui frappe très fort dès la page d’accueil (quitte à faire fuir des clients qui surfent au bureau) mais qui propose des astuces tout à fait intéressantes et un engagement graphique cohérent. Pour résumer : une boutique qui a de la gueule, ça change !

(via Rhooo)

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

J’ai déjà eu de nombreuses occasions de vous vanter les mérites des zooms dans un contexte e-commerce. Non seulement la possibilité de voir de plus près le produit est indispensable pour rassurer les clients / prospects mais si le zoom est suffisamment puissant, il donne une sensation quasi-tactile aux internautes. Illustration chez Zoomorama avec cette démonstration sur de la maroquinerie où le grain du cuir est parfaitement mis en valeur par ce gros plan :

La sensation quasi-tactile des zooms XXL

La sensation quasi-tactile des zooms XXL

Après plusieurs mois d’expérimentation chez Darty, les premiers chiffres « officiels » m’ont enfin été communiqué par Franklin Servan-Schreiber et l’impact est très positif : +25% de taux de conversion sur les 15 familles de produits exploitant Zoomorama (appareils photos, écrans plat, machines expresso, frigidaires, laves vaisselles…) ainsi qu’une satisfaction importante des utilisateurs qui déclarent la fonction de zoom utile à la prise de décision d’achat.

Les zooms XXL chez Darty

Les zooms XXL chez Darty

Même si je ne suis pas surpris par l’accueil très positif des utilisateurs pour cette fonction de zoom, je suis tout de même épaté par l’impact sur le C.A. : +25% !

Voilà en tout cas des chiffres qui vont apporter de l’eau à mon moulin sur les bienfaits de la mise en scène des produits et sur les fonctionnalités enrichis (zoom, vue 360°, démonstrateur…). Bon OK, si vous lisez ce blog c’est que vous en êtes convaincu, j’espère simplement que ce retour d’expérience va vous décider à sérieusement envisager l’implémentation d’une fonction de zoom XXL (il existe des prestataires très sérieux dans ce domaine) tant le ROI me semble évident. Certes, il y a le problème des photos de produit (qui va financer les clichés en HD ?) mais il est ici question d’améliorer de façon significative l’expérience utilisateur (et les ventes accessoirement !).

Après les zooms automatiques, voici les zooms assistés

Avoir la possibilité de zoomer sur une photo est à mon sens une fonctionnalité essentielle à toute boutique en ligne, et plus particulièrement pour celles qui vendent des vêtements, sacs ou autres articles qui ont besoin d’être touchés pour être achetés. Avec un zoom performant il est ainsi possible de procurer une sensation proche du touché en permettant aux internautes d’observer le produit dans ses moindres détails et surtout de mieux appréhender la texture des matériaux.

C’est dans cette optique d’étude au microscope que je vous propose de découvrir ces quelques exemples de zooms assistés : Delve Into the Details with Guided Zoom. Le principe est de fournir aux internautes des points de détails à observer comme sur la boutique de Exofficio :

La page produit d'Exofficio

La page produit d'Exofficio

Un clic sur la photo et vous avez la fonction de zoom (propulsée par Scene7) et une série de vignettes sur le côté qui vous amènent directement sur les points d’intérêts avec un beau scrolling :

La fonction de zoom assisté chez Exofficio

La fonction de zoom assisté chez Exofficio

Vous remarquerez que les vignettes changent aussi de couleur quand vous cliquez sur les vignettes en bas de page.

Autre exemple avec Telescope.com où les vignettes sont affichées en superposition de la fenêtre de visualisation directement dans la fiche produit :

Le zoom assisté chez Telescope.com

Le zoom assisté chez Telescope.com

Cette seconde solution est peut-être un peu perturbante pour l’utilisateur car cela surcharge la page. Idéalement il faudrait faire apparaitre les vignettes au survol de la souris et proposer un bouton pour afficher le zoom dans une fenêtre à part.

Mise à jour (17/09/2009) : Laurent Jouanneau me précise que Zoomorama propose une fonctionnalité similaire sur le site de Darty (uniquement sur la gamme appareils photo reflex) :

Le zoom assisté chez Darty

Le zoom assisté chez Darty

Zoom XXL + e-catalogue = Zoomorama

J’ai déjà eu l’occasion de vous parler de différents moteurs pour faire des zooms ultra-puissants, mais il s’agit avant tout de fonctions de zooms sur des photos, pas sur des documents. C’est donc sur ce créneau que se positionne Zoomorama. Cet acteur français propose ainsi une solution de publication et de partage mais surtout une solution orientée e-commerce : Zoomorama Pro.

L’idée est donc de proposer un moteur de zoom ultra-puissant mélangée à une fonction de catalogue électronique. Illustration avec ce test sur un catalogue Louis Vuitton :

Zoomorama_LouisVuitton.jpg

Zoomorama en action sur ce produit Louis Vuitton

Le rendu est très propre, le fonctionnement intuitif et c’est plutôt rapide à charger. Autre exemple avec e-Tiquities, la référence des boutiques en ligne d’objets d’antiquité : World’s Leading Antiquities e-Commerce Store Launches with Zoomorama.

eTiquities_Zoomorama.jpg

Zoomorama en action chez e-Tiquities

Voici donc un concurrent pour Microsoft et sa technologie Seadragon que l’on retrouve dans le module Deep Zoom de Silverlight. Pour ceux qui souhaitent avoir des infos techniques plus détaillées, Zoomorama fonctionne avec Flash mais avec des spécificités qui m’échappent : La technologie Zoomorama.

Des zooms automatiques directement dans une liste de produits

Vous connaissiez déjà le zoom automatique des fiches produit de GAP, mais connaissiez-vous le zoom automatique de Zazzle ?

Le principe de fonctionnement est le même (le zoom se fait de façon automatique au survol de la souris) mais l’action se déroule ici directement dans la liste des produits. Illustration avec la page d’accueil :

La page d'accueil de Zazzle

Dès que je passe ma souris sur une vignette (comme ici celle de la carte avec le papillon), il y a un zoom automatique qui est en prime repositionable (en bougeant la souris) :

La même page d'accueil avec un survol de la souris sur le papillon

C’est un peu perturbant au début amis terriblement addictif : on se surprend à survoler toutes les vignettes ! Cerise sur le gâteau, ce n’est même pas du Flash (pour les allergiques).

(via Ajaxian)

Zoomii met en scène les rayonnages riches

Vous souvenez-vous de Borders, ce marchand de livres qui utilisait une interface de visualisation des livres qui reprenait la métaphore des rayons ? Et bien figurez-vous que j’ai encore plus fort à vous proposer avec Zoomii, une boutique en ligne qui présente les produits dans un rayon gigantesque :

Zoomii.jpg

La navigation au sein des rayons se fait soit en glissant les rayons (comme dans Google Maps), soit en utilisant les flèches (comme dans Google Maps). Il est possible de zoomer sur un rayon (comme dans Google Maps) ou au contraire de prendre du recul pour avoir une vue d’ensemble (comme dans Google Maps).

Ce principe n’est pas nouveau (puisque déjà exploité par Browse Goods) maisil est ici superbement implémenté. Le plus drôle dans tout ça, c’est que Zoomii n’est qu’une interface, c’est bien le catalogue Amzon qu’il y a derrière.

Voici donc un bel exemple de mashup marchand : l’interface de Google Maps et le catalogue d’Amazon. Plus d’infos ici : Zoomii, A Virtual Book Browsing Service et Visual book browsing with Zoomii.

Des zooms automatiques pout tous

Souvenez-vous il y a quelques temps je vous parlais des zooms automatiques de GAP, et bien figurez-vous que vous pouvez vous aussi implémenter cette fonctionnalité pour la modique somme de 31,6 € (25 £). C’est en tout cas ce que propose Magic Toolbox :

MagicToolbox.jpg

Pas grand chose à redire sur le comportement de cette interface : c’est rapide à charger et fluide. Reste encore à voir comment ça tient la charge… (via Ajaxian)

Sunglass Hut, la Rolls de la boutique en ligne de lunettes

Souvenez-vous, il y a quelques semaines j’avais fais une interview Sheila Dahlgren (la directrice marketing de Scene7), elle nous avait fait une petite visite guidée de Sunglass Hut, une très belle boutique en ligne de lunettes.

A mon tour de vous en faire une visite guidée plus détaillée avec tout d’abord la page catégorie qui est bordée par les options de filtre et de tri, les modes de visualisation et les outils de comparaison / panier :

SunglassHut1_Home.jpg

Vous remarquerez sur le bas de l’écran les zones où il est possible de mettre des articles en glissé-déposé et de lancer une comparaison :

SunglassHut_Compare.jpg

Il y a également une page produit très sobre avec une bonne répartition de l’espace d’affichage :

SunglassHut_Product.jpg

J’adore cette fonction de zoom en pleine largeur de page :

SunglassHut_Zoom.jpg

Il existe également dans le site des rubriques inspirationnelles comme cet assistant de recherche par style de vie :

SunglassHut_Lifestyle.jpg

Pour finir, ces séquences vidéo mettant en scène les articles :

SunglassHut_Expression.jpg

Inutile de chipoter, c’est du très bon bouleau. Pour être plus précis, il est très rare de voir des boutiques en ligne de cette qualité : mise en page, intuitivité, sophistication de l’interface, variété des contenus…