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

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.

Je crois bien avoir déjà rédigé plusieurs billets sur Nike et d’autres fabricants / distributeurs de chaussures de sport mais jamais sur Adidas. C’est donc dans un souci d’équité que je vais vous parler de la dernière campagne Adidas Originals.

Cette campagne s’appuie sur un mini-site où il est question de jeunes, de fêtes et de jeunes qui font la fête. Le site s’ouvre sur une série de scènes et de portraits :

La campagne Adidas Origins

Il y a aussi des looks avec des vidéos en stop-motion :

Les looks chez Adidas Origins

Et il y a également des vues produits avec un zoom sur-puissant :

Les produits chez Adidas Origins

Le tout est fluide, bien arrangé, harmonieux… Bref, c’est du bon boulot et ça me fait plaisir de parler d’une marque européenne (parfois j’ai l’impressin de ne parler que de Nike, Ford et American Eagle…). (via Kotsego)

En visitant le site vous pouvez églaement tomber sur d’autres campagnes comme cette mosaïque de manequins pour Y-3 :

La campagne Adidas Y-3

Bref, il y a de l’idée et de l’ambition chez Adidas, même jusque sur la page d’accueil composée de blocs qui se redimensionnent au passage de la souris :

La page d'accueil d'Adidas France

Cocorico !

Connaissez-vous TheWatchAvenue ? Il s’agit d’une boutique de luxe dédiée aux montres. L’idée derrière ce site st de proposer une nouvelle expérience d’achat en ligne. Cette fameuse expérience démarre avec une intro dans un endroit imaginaire qui ressemble à la place Vendôme (en référence aux grandes marques de luxe qui y ont élu domicile) où une hôtesse vous accueille en incrustation vidéo :

La page d'accueil de WatchAvenue

Vous accédez ensuite à l’avenue des montres où se succèdent les boutiques des grands horlogers, idem que précédemment avec une vue en simili 3D pour un environnement particulièrement immersif :

La fameuse avenue des montres avec les boutiques des grandes marques

En cliquant sur l’une des devantures de l’avenue, vous rentrez dans les boutiques où une nouvelle hôtesse vous accueille et où il est possible de jouer avec différents éléments interactifs :

L'intérieur d'une boutique

Un concept ludique et intéressant (une version enrichie de Eluxury) mais qui pêche pour le moment par con manque de contenu : seuls quelques boutiques sont ouvertes et on ne peut pas manipuler beaucoup de montres. Où sont les vues 3D ? Où sont les zooms ? Où sont les animations pédagogiques sur le fonctionnement des mécanismes ? Où sont les configurateurs ?

Bref, il y a un gros potentiel derrière cette boutique en ligne, encore faut-il qu’elle s’étoffe et investisse dans des modules marchands plus convaincants.

Mais j’aime bien l’idée quand même…

Vous devez très certainement vous souvenir de la mode du porno chic, mais connaissez-vous le porno gothique ? Il semble visiblement que la marque de ingerie Agent Provocateur se soit lancée à fond dans cette tendance avec un nouveau site à l’ambiance immersive très particulière : Agent Provocateur Experience.

Ça commence avec une intro mystérieuse où l’on invite l’internaute à plonger dans une boule de crystal :

L'intro du mini-site

Vous rentrez ensuite dans le mini-site en lui-même qui est composée d’une vidéo plein écran à la narration complètement déstructurée avec une succession de plans un peu glauques :

La vidéo en plein écran

Il y a ensuite l’accès au catalogue avec une belle collection de sorcières :

La page catalogue

Un retour visuel au survol de la souris permet de comprendre qu’il est possible de cliquer sur les sillouhettes. Le tout nous même aux ensembles :

La page des ensembles

Il est ensuite possible d’accéder à la page produit qui est un  peu plus “classique” :

La fiche produit

Vous noterez également que le dispositif est relayé en page d’accueil avec un autre tableau porno gothique :

La page d'accueil

Au final nous avons donc une boutique en ligne hors normes au design extrêmement sophistiqué mais qui respecte les minima quand il s’agit de présenter les produits. Bon, entre nous je doute qu’une autre marque qu’Agent Provocateur puisse se permettre ce genre de disgression (peut-être Diesel) mais cet excercice de style reste tout de même très… inspirationnel.

(via Emakina Blog)

Connaissez-vous Anthropologie ? Il s’agit d’une marque US particulièrement créative qui soigne toujours la mise en scène de ses produits. Et puisque l’on parle de mise en scène, je vous propose de découvrir le module “Walktrhough” :

Le Walkthrough d'Anthropologie

Il s’agit d’une visite guidée des nouveautés au travers d’une succession de tableaux où les produits sont mit en scène de façon valorisante (par le choix des couleurs, de la lumière ou de l’aménagement intérieur).

Les tableaux ne se suivent pas réellement mais sont superposés façon collage (qui n’est pas sans rappeler le mini-site de Canon). Il est possible de basculer d’un tableau à un autre en cliquant sur les numéros en haut de page.

Des invites visuelles (petite croix) indiquent à l’utilisateur que le détail des produits est disponible au clic (ouverture d’un panneau flottant) :

La fiche produit d'Anthropologie

Il y a aussi les Wonderlands, des frises verticales où les produits sont associés par couleurs :

La frise verticale d'Anthropologie

Vous avez ensuite le module Look Closer avec d’autres groupes de produits où il est possible de zoomer pour avoir une vue rapprochée :

La vue d'ensemble

La vue rapprochée

J’hésite à vous parler du module Spectra car il est assez déroutant : un clic sur un produit provoque un phénomène de répulsion des autres produits qui flottent dans une sorte de bulle (c’est très étrange et je doute de l’efficacité de ce truc) :

Le très étrange module Spectra

Au final nous avons donc un dispositif immersif tout à fait convainquant et valorisant pour les produits. J’adore, même si la prise en main de site est quand même globalement déroutante : l’usage de typos spécifiques et de couleurs décrépies ne facilite pas le repérage et nuit à la lisibilité (mais ça doit faire partie du “brand building“).

(via Signal vs Noise)

Vous connaissez les tentes Decathlon qui s’installent en 2 secondes ? Non ? Et bien je vous propose de découvrir le site dédié à cette ligne de produit : Quechua 2s.

Un très beau site orienté “nature” avec un superbe visuel qui met bien en évidence les produits, mais surtout avec un fond animé (les oiseaux) et une bande sonore (encore des oiseaux) pour plonger l’internaute dans une expérience immersive :

Page d'accueil du site Quechua 2s

Tout le contenu du site est affiché en surimpression de ce fond avec de très belles transitions. Il y a également une recherche graphique pour présenter les caractéristiques et autres détails dans un format textuel sympa (le page griffonnée). Vous noterez au passage la possibilité d’avoir une vue 360° ainsi qu’une démonstration vidéo :

Page produit du site Quechua 2s

Il y a également une grosse section “En pratique” avec tout un tas de vidéos explicatives que l’on choisit sur un petit calepin :

Page des vidéos du site Quechua 2s

Les temps de chargement sont courts, les vidéos parfaitement intégrées, les traitements graphiques innovants… bref, rien à redire, c’est un beau site qui fait envie. Peut-être manque-t-il un configurateur de tentes (puisqu’elles peuvent être combinées) avec un indicateur de la surface occupée au sol…

Très rares sont les boutiques en ligne qui osent casser les codes traditionnels du web design et s’aventurer dans des chemins plus expérimentaux (c’est entre autre à Etsy que je fais référence).

Je vous propose donc de découvrir une boutique d’accessoires de table tout à fait surprenante : Teroforma Webshop.

Il y a d’abord une étonnante page d’accueil où les visiteurs sont traités comme des guests qui réservent une table pour une durée limitée. Il y a ensuite cette page intérieure qui sert à la fois pour parcourir la gamme et pour configurer votre composition d’accessoires :

L’immersion est ici poussée au maximum avec un design et une mise en page parfaitement minimaliste. Le côté inspirationnel est également très présent avec une visualisation immédiate des accessoires ainsi que des effets de transition très sobres.

Bref, une boutique hors-normes à découvrir et à apprécier pour son côté expérimental.

(merci à Jérémie pour le lien)