Rich Commerce Tout savoir sur les interfaces riches appliquées au e-Commerce

Vu chez Crate & Barrel ce panier en bas de page pour avoir une vision d’ensemble sur les produits ajoutés :

Le panier de bas de page chez Crate & Barrel

Comme l’emplacement n’est pas évident, une petite cinématique permet de mieux comprendre son fonctionnement : lorsque vous ajoutez un produit, la barre de bas de page flash en bleu et les produits déjà présent se poussent pour laisser de la place au nouveau produit.

Petit détail sympathique, la possibilité de modifier les quantités au survol de la souris :

Le changement de quantité du panier de Crate & Barrel

Un bon exemple de remis en question des “conventions” communément admises pour les boutiques en ligne avec un panier toujours en haut à droite.

(via I Love Web)

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

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

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

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

Aviez-vous remarqué que pour certaines activités, les sites et boutiques en ligne proposent toutes des fonctionnalités “standards”. Dans l’automobile par exemple vous retrouvez presque systématiquement une vue à 360° et un teintier. Dans les boutiques de fringues c’est à peu près la même chose, surtout pour celles qui vendent des jeans : on retrouve toujours un “Fit Guide” pour aider le client à choisir la forme de son jean.

Illustration chez Gap avec le module Fit Spotlight qui aligne une série de modèles (H/F) animés :

L'assistant au choix de jean de Gap

Lorsque vous passez la souris sur un modèle, celui-ci s’avance :

L'assistant au choix de jean de Gap avec un zoom sur un modèle

En cliquant sur ce modèle, vous avez accès à une vidéo explicative du designeur (il explique le pourquoi du comment) ainsi qu’une vue à 360° avec des points d’intérêt :

La vue détaillée d'un modèle de jean chez Gap

Vous avez aussi un moteur d’inspiration avec 3 déclinaisons possibles par modèles et une belle séquence animée :

Le moteur d'inspiration de Gap

Vous pouvez trouver à peut près la même chose chez 77kids (American Eagle) mais en moins sophistiqué :

L'assistant au choix de jean chez 77kids

J’ai une préférence pour l’assistant de Gap car il propose plus de contenus mais les deux fonctionnent bien. Avez-vous d’autres exemples ?

Les chaussures de sport ont toujours été un enjeu de taille pour les jeunes en quête d’appartenance identitaire ou de reconnaissance sociale, mais également pour les marques en quêtes de… de pognon en fait ! Bon bref, tout ça pour dire que les marques rivalisent de créativité pour séduire une clientèle sur-sollicité. Contrairement à l’univers graphique très “destroy” et urbain du skate, les sites web des différentes marques sont plutôt sobres (à l’image d’Airwalk ou de Nike Skateboarding) avec une part très importante accordée aux vidéos (principal médium de la skate / surf  /snow culture).

Mais la palme de la sobriété revient à Converse Skateboarding avec un site à la limite de l’austérité. Sur la page d’accueil on ne trouve qu’une immense photo d’ambiance (toute floue), quelques liens et un logo en bas à gauche :

La page d'accueil de Converse Skateboarding

L’intérieur du site n’est pas en reste avec une structure extrêmement légère et de belles transitions. La boutique est elle aussi très minimaliste :

La page produit sur Converse Skateboarding

Il y a également un peu de contenus multimédia dans la partie Ambassadors (textes, photos et vidéos). Vous noterez au passage l’effort pour épurer au maximum le player vidéo :

Le player vidéo minimaliste de Converse Sketeboarding

Nous avons donc au final un site à la sobriété extrême faisant un usage très subtil des interfaces riches (transitions…) mais qui procure une expérience très relaxante et surtout apaisante (ça fait du bien autant de blanc sur la page).

Sinon il y a des choses plus fournies sur Converse.com avec du contenu un peu plus “destroy” et même un configurateur de chaussure :

La page d'accueil de Converse

Et tant qu’on y est, n’hésitez pas à faire un tour sur Skate Like a Punk, la campagne virale en cours (avec une vidéo très réussie).

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

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.

Jusque là Autodesk était plus connu pour ces outils de conception 3D que pour des applications grand public. Les choses sont visiblement en train de changer puisqu’ils expérimentent depuis quelques temps le modèle SaaS à destination des cuisinistes et fabriquant / distributeurs de meubles avec deux produits : Showroom et DragonFly. L’idée étant pour Autodesk de préparer la révolution de l’industrie du logiciel en commençant à recycler ces outils en services en ligne facturables.

Cette approche se traduit donc pas deux services librement accessibles au grand public. Le premier étant DragonFly un service en ligne qui permet de modéliser des intérieurs et d’en avoir une représentation en 3D isométrique :

Transformez vos plans 2D en représentations 3D

L’interface est assez bien conçue et vous avez la possibilité de partager vos créations sur FlickR, Facebook…

L'interface de DragonFly

Plus intéressant, Showroom est un outil de configuration d’aménagements intérieurs en ligne. C’est en gros la même chose que DragonFly mais avec moins de possibilités (vous choisissez les meubles / équipements disponibles dans la liste) et un rendu photoréaliste : Project Showroom 1.0.16 Now Available.

L'interface de Showroom

Il n’est donc pas possible de configurer votre propre pièce (avec vos dimensions) mais la qualité du rendu est tout simplement saisissante (cf. Life Imitates Art). Ce service est normalement destiné aux professionnels (cuisinistes…) qui souhaitent fournir à leurs clients un outil de visualisation puissant offrant un premier niveau d’interactivité.

Notez qu’il existe également une version iPhone, idéale pour les vendeurs en déplacement :

Pour le moment ce service est destiné aux cuisinistes et autres fabricants de salle de bain mais nous tout à fait imaginer les possibilités pour d’autres secteurs…

Vous connaissez tous le principe de la visite virtuelle. Très largement adoptée par les professionnels du tourisme, la visite virtuelle 3D ou vidéo a largement fait ses preuves (incitation…). Le problème n’est pas tant de savoir s’il faut faire une visite virtuelle mais plutôt à quel coût. Embaucher un professionnel de la vidéo est la solution la plus sage mais ce n’est pas la plus rentable. Heureusement Brainsonic vient de lancer un service tout à fait intéressant : une visite virtuelle vidéo à partir de photos (grâce à leur Magic Studio).

Le principe est simple : l’hôtel (ou le restaurant…) fournit des photos de bonnes qualité et le studio se charge de les animer et d’y incruster une présentatrice. Dans l’exemple qui suit, la jolie dame est intégrée à la bonne échelle mais le ciel est animé (les nuages défilent) :

Dans cet exemple le ciel est animé

L’animation de certaines parties de l’écran (ciel, eau…) de même que les effets de caméra (traveling, zoom…) donne du relief à ces photos et transforme un “simple” diaporama en une véritable visite guidée.

Il est également possible de donner de la profondeur aux scènes en faisant circuler la présentatrice entre des objets qui passent au premier plan :

Notez la plante verte au premier plan devant la présentatrice

Pour une démonstration, ça se passe ici : Hotel Francés.

Bien évidement le rendu n’a pas le même niveau de qualité qu’une véritable vidéo mais j’imagine que le coût est bien inférieur. Nous avons donc au final un ratio qualité / prix tout à fiat intéressant (enfin j’espère). Tout ceci me fait penser au service Animoto qui propose également l’animation de diaporamas photo.

LetsBuyIt.fr vient d’ouvrir ses portes en France (j’en ai parlé dans ce billet).

LetsBuyit est un moteur de shopping, dont l’une des innovation est l’interface.

L’interface est en effet conçue avec trois volets :

• La partie de gauche, qui est plutôt la partie “classique” du moteur de shopping, avec la présentation des produits, des marchands…
• La partie de droite, qui est centré sur l’utilisateur (mon compte, mes produits préférés, …)
• La partie centrale, qui est une zone graphique, et qui présente “différemment” les produits et les marchands.

On peut zoomer une zone, avec un effet de glissement horizontal. Exemple avec l’espace personnel ouvert :

Ce qui est vraiment intéressant avec ce service, c’est l’intégration assez poussé entre de l’Ajax et le Flash.

Bien sûr, l’espace central est en flash :

le système de navigation horizontal est en Ajax (un vrai challenge, bravo Olivier et toute l’équipe !).

L’intégration entre les différentes technologie est vraiment poussée : on peut même faire du drag & drop du flash vers l’ajax !

Lacoste nous avait bluffé l’année dernière avec une superbe réalisation futuriste (Lacoste Future) et semble vouloir capitaliser sur le rich media pour mettre en avant ses produits. Je vous propose donc de nous intéresser au site principal avec une mise en page très sobre et une utilisation astucieuse des animations.

La page d’accueil met ainsi en scène des mannequins en pleine largeur d’écran avec des blocs actus sur la droite et une navigation en bas de page :

La page d'accueil de Lacoste

La sobriété est de rigueur pour cette page mais le dégagement autour des mannequins de même que l’animation permet de bien focaliser l’attention sur les sujets.

Nous retrouvons le même principe au niveau des pages produit avec un astucieux chemin de navigation qui “remonte” sur la partie droite de l’écran :

La page produit de Lacoste

Le détail des produits apparait au survol de la souris et il y a même un bloc “Accessoires” sur certain mannequin.

Pas grand chose à redire sur ce site, la réalisation est soignée, les effets visuels sobres (animations, transitions…) et la singature de la marque omniprésente (choix des couleurs, édito minimaliste…). La preuve qu’il n’est pas besoin de trop en faire pour recréer un univers avec une bonne immersion.

Ça devait forcément arriver un jour, Google est en train d’expérimenter aux États-Unis une version Rich Media de ses publicités Adsense : Introducing expandable ads on AdSense sites. Il est ainsi question d’une zone extensible au survol de la souris pour diffuser de la vidéo ou un élément interactif (sous-entendu : animation Flash).

Le format expandable ads de Googla Adsense

Vous noterez qu’ils utilisent le terme “expandable ad” plutôt que “rich media ad“, certainement pour se différentier de l’IAB et de ses Rich Media Creative Guidelines.

Deux modèles de pricing seront proposés CPM et CPC. Ils précisent pour les éditeurs de sites que dans le cadre d’un modèle Cost-per-Click vous ne toucherez une commission que si l’internet visite le site de l’annonceur (pas s’il active la bannière). Par contre ils ne précisent pas les modalités pour le Cost-per-Impression (uniquement si la bannière est activée ?).

Cela mérite réflexion car comme le fait très justement remarquer Vincent Abri : “la pub va gêner la navigation et en plus vous ne toucherez pas un rond dans certains cas“. J’abonde dans son sens et je dirais même plus : Est-ce que ce nouveau format ne va pas dénaturer les liens publicitaires qui ont fait le succès du programme Adsense ?