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

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 ?

Decathlon vient de lancer un mini-site Rich Media à destination des femmes (plus ou moins) sportives. L’idée étant de présenter une série de portrait de femmes pratiquant différentes activités sportives : Toutes en forme. La page d’accueil permet de choisir une femme en fonction de l’activité qu’elle pratique (petites vignettes animées au survol de la souris) :

La page d'accueil de Toutes en forme

Puis vous avez le droit à une courte présentation vidéo de la femme sélectionnée (prétexte pour mettre en scène les produits) avec un effet de zoom au survol de la souris sur les vignettes des produits :

Présentation vidéo et mise en scène des produits

Vous pouvez aussi avoir des explications sur une activité sportive (avc une intégration élégante des produits qui lui sont associée) :

Explications sur l'activité sportive

Et vous avez enfin la fiche détaillée du produit avec une vue à 360° :

La fiche produit

Au final nous avons donc un mini-site très bien réalisé avec une mise en page déstructurée mais lisible (bonne immersion dans cette ambiance « femme active »), des contenus riches mais pas trop longs à charger (beaucoup de vidéos courtes et bien intégrées). C’est bien dosé et subtil, du rich commerce comme je l’apprécie, surtout quand c’est une marque française, Cocorico !

Ce coup-ci c’est la guerre… il y avait bien trop longtemps qu’ils se regardaient de travers sans oser passer à l’attaque mais depuis le début de l’année les armés sont en marche et cette guerre ne fera pas de cadeaux. Bien évidement je veux parler de la guerre que se livrent Lego et Magebrand pour imposer sur le marché leurs marques de robots de combat (respectivement les Bionicles et les NeoShifters). Ces deux franchises sont assez similaires et les stratégies déployés par ces deux groupes pour séduire un public jeune sont également très similaires : des sites web dédiés avec des tonnes d’interfaces riches dedans.

D’un côté nous avons les NeoShifters de l’américian Megabrand :

La page d'accueil des Neoshifters

De l’autre nous avons les Bionicles du danois Lego :

La page d'accueil des Bionicles

Premier round : présentation des produits en Flash

Il y a tout d’abord tout à background à ces franchises : une trame centrale, des histoires parallèles, des personnages et plein de robots avec moultes caractéristiques. Au niveau des sites web, ça donne des pages produits avec des robots animés et des tonnes de contenu. Ici le Magna Rex :

La page produit des Neoshifters

Là, le Gresh :

La page produit des Bionicles

Lego propose en prime un module d’explications animées des combats avec ces figurines :

Les explications des Bionicles

Round 2 : la synergie online / offline

Autre champ de bataille des deux géants du web : la possibilité de trouver un code au dos de la boîte pour pouvoir jouer avec le double virtuel du robot. Chez Lego ça s’appelle les B.I.O. codes mais ils ne sont mis en avant qu’au travers du club.

Pour les NeoShifters, il s’agit d’une ligne de produits spécifique (les Web Battlers) et la page de présentation est nettement plus incitative :

Les WebBattlers de Neoshifter

Round 3 : Les jeux en ligne

Passons la vitesse supérieure avec les jeux en ligne mettant en scène les produits. Oui, c’est bien d’un démonstrateur dont nous parlons. Chez MegaBrand ils’agit de NeoShifters Resistance, un simili univers virtuel :

Le jeu en ligne des NeoShifters

Notons qu’il existe également un autre mini univers virtuel pour les Magnetix (une autre franchise de la marque) :

Le jeu en ligne des Magnetix

Pour Lego, nous avons quelque chose de plus classique avec une série de jeu multi-joueurs mais un univers peut-être moins immersif : Glatorian Arena.

Le jeu en ligne des Bionicles

Conclusion

Au final nous avons donc deux univers de marque très dense, des sites dédiés à la réalisation exemplaire. Petit bémol pour les NeoShifters qui sont dans un module encapsulé donc sans historique de navigation ou possibilité de référencement (pas d’URLs lisibles). Un exemple pour qui veut développer un univers de marque cohérent et gagner la fidélité de ses clients.

Vous connaissez Zappos ? Mais si enfin, le supermarché de la chaussure en ligne. Zappos c’est déjà illustré par con approche résolument innovante du web (avec un incroyable service satisfait ou remboursé valable 1 an) ainsi que des médias sociaux avec notamment le Twitter des employés qui encontre un franc succès.

Zappos innove encore mais ce coup-ci du côté des interfaces avec une recherche entièrement visuelle :

La recherche visuelle de Zappos

À chaque fois que vous cliquez sur une chaussure, la mosaïque est réorganisée pour afficher des modèles proches (forme, matière, couleur…). La navigation ne se fait donc pas selon une arborescence classique (homme / femme > baskets, boots…) mais par une série de clics successifs qui sont autant de rebond facilitant la découverte empirique de la gamme

Aussi surprenant que cela puisse paraître, les recherches sont généralement plus rapides (vous trouvez le bon modèle en 2 ou 3 clics). Vous avez également la possibilité d’affiner la recherche à l’aide de filtres (avec une mise à jour silencieuse du nombre de résultats) :

Le moteur de filtres de Zappos

Bon… tout ça c’est bien mais c’est quand même très proche de Browse Goods (cf. De l’innovation dans les catalogues en ligne). Ok mais qui s’en plaindra ? Dans la mesure où Amazon n’a pas du tout exploité le potentiel de cette interface (lui préférant Window Shop), je ne voit pas pourquoi quelqu’un d’autre ne tenterait pas l’aventure.

(via Get Elastic)