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

Je fais suite à un précédent billet sur les boutiques en ligne japonaises les plus folles pour vous présenter deux concept stores en ligne qui valent le détour.

Il y a tout d’abord Tutuanna, une boutique ne ligne très kawaï qui vend des t-shirts et sous-vêtements. L’interface se présente sous la forme d’une large mosaïque de produits avec des options de recherche visuelle réparties sur deux bandes latérales. Sur l’exemple ci-dessous, la recherche se fait sur des chaussettes et t-shirts bleus (les pictos sont “allumés”) :

La recherche visuelle chez Tutuanna

Il y a également la possibilité de filtrer les produits en fonction de motifs sur la bande latérale droite (ici uniquement les produits avec des rayures) :

Une autre recherche sur Tatuanna

Autant dire que l’ambiance japonisante de cette boutique (avec des coeurs partout et une musique façon manga) ne doit plaire qu’aux japonais, mais tout de même, il doit bien y avoir quelques idées à prendre.

Deuxième exemple beaucoup plus radical avec Qbic, une boutique d’objets d’art qui propose une interface de recherche visuelle sous forme de diagramme (une sorte de Yahoo! Pipes du e-commerce). Le principe est de raccorder des pictos (qui sont autant de filtres : par prix, artistes…) entre-eux afin de former une équation de recherche :

L'incroyable interface de recherche de Qbic

Chaque flux de recherche se termine par un mini-browser où l’on peut voir les résultats, les produits peuvent ensuite être ajoutés au panier (sur le bas de la page). S’il existe des contenus additionnels (ici l’interview de deux créateurs), une boîte supplémentaire est affichée et reliée au produit correspondant.

Bon OK c’est très certainement le moteur de recherche le plus complexe qu’il m’est été donné de voir ces 10 dernières années, mais l’expérience est saisissante. Bref, une très bonne façon pour se démarquer dans un marché visiblement ultra-compétitif.

(via Hebi flux)

Les advergames sont des supports très puissants pour attirer et concentrer l’attention d’un internaute. Il existe quantité d’exemples que vous pouvez trouver sur le blog Advergame.fr, mais deux campagnes récentes ont retenues mon attention.

Il y a tout d’abord le site de promotion du dernier album d’Eminem : The Relapse. Le principe de ce mini-site est de vous faire participer à une sorte de jeu d’aventure en parcourant différentes pièces :

La pièce d'entrée de The Relapse

Le site propose une interface très imerssive en 3D temps réel (la caméra bouge en fonction des mouvements de la souris). Il n’y a pas grand chose à faire dans cette aventure si ce n’est toucher à tout et parcourir les différentes pièces où l’on peut même croiser des PNJ (ici je pense que c’est censé être Slim Shady en plein délire) :

Mais qui est ce type sur le lit ?

Vous apprécierez l’ambiance très glauque (façon Silent Hill) qui colle bien avec les paroles de la chanson (qui tourne en boucle) :

C'est quoi ces traces de sang au sol ?

Outre la 3D, nous sommes bien en présence d’un jeu de style Point & Click, qui ont eu leur heure de gloire dans les années 80. Un dispositif très intéressant pour bien capter l’attention des internautes / joueurs. Plus d’exemples ici : Interactions, jeux, vidéo et 3D chez Coraline.

Et puisque l’on parle des Point & Clicks des années 80, comment ne pas évoquer la série Monkey Island qui a marqué nombre de joueurs… joueurs qui ont maintenant grandi, occupent des postes à responsabilité, pour certain dans l’informatique (en bon fans des jeux vidéo), et sont donc la cible idéale pour la campagne ServerQuest Games de Microsoft et sa dernière réalisation : ServerQuest II.

La page d'accueil de ServerQuest II

Tout est fait pour faire vibrer la corde de la nostalgie dans cette réalisation : les graphismes pixélisés, la musique, le gameplay… Au début de l’aventure, vous choisissez votre personnage (Matt ou Alicia), sa spécialité (hardware, base de données…) et vous débute votre journée :

Le premier chapitre du jeu

L’aventure est divisée en chapitres du quotidien où votre personnage doit accomplir différentes tâches en rapport ave sa spécialité (ici il faut récupérer des paquets de  données éparpillés) :

Exemple de mini-jeu dans ServerQuest II

Les jeux sont prétextes à mettre en valeur les produits de Microsoft, de même que les séquences entre les chapitres où les fonctionnalités des derniers produits de la marque sont présentées de façon ludique.

Bref, c’est subtil, très bien réalisé et surtout extrêmement bien ciblé. Un carton ! Vivement le troisième épisode…

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.

Patagonia, vous connaissez ? Mais si enfin, cette marque de vêtements outdoor spécialiste des grands espaces et du développement durable. Comment faire pour bien retranscrire cet univers de marque ? Facile, en lançant un mini-site dédié avec une interface imerssive et du contenu multimédia. Donc dans les faits ça donne The Tin Shed, un mini-site expérientiel où différents aventuriers des temps modernes partagent leur expérience et leur mode de vie (il parait qu’il faut dire “life style“, ça sonne mieux).

Le visiteur est donc accueilli dans une espèce de débarras chilien où chaque accessoire possède sa propre histoire :

La page d'accueil de Tin Shed

Il est possible de passer d’une pièce à l’autre à l’aide des flèches sur les côtés de l’écran (très bel effet de transition). En cliquant sur un accessoire, le visiteur est alors emmené sur un panneau où lui sont proposés différents contenus (texte, photos, vidéos) sous forme de témoignages :

Une histoire associée à un accessoire

Exemple de contenus texte, photo et vidéo

Le tout est très fluide, rapide à charger et parfaitement mis en scène au travers d’une présentation en mosaïques.

Le témoignage de Gerry Lopez, légende du surf

Nous pourrions qualifier ce site d’inspirationnel car il sollicite la fibre aventurière des clients / prospects de la marque, du très bon branding.