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

Nouvelle campagne et nouveau site de campagne pour la marque de lingerie française : FrenchArtOfLoving.com. Au programme de ce mini-site : Une interface à tiroirs (littéralement !) et de belles transitions. La mise en page du site est très minimaliste avec une navigation tournant autour de la métaphore d’une commode :

La page d'accueil du site FrenchArtOfLoving

En cliquant sur les tiroirs, vous en découvrez le contenu après une belle cinématique de transition. Ici, l’assistant au choix :

L'assistant au choix du site FrenchArtOfLoving

il y a également une rubrique plus expériencielle avec des morceaux musicaux et des ambiance sonores :

Extraits sonores sur le site FrenchArtOfLoving

De même que des vidéos de la campagne de teasing :

Les vidéos sur le site FrenchArtOfLoving

En fait on a vite fait le tour de ce mini-site, et l’on se retrouve bien vite sur la boutique en ligne (nettement moins esthétique) :

La boutique en ligne de Aubade

Même si je ne peux que souligner la pertinence des choix esthétique, ce mini-site deçoit. Dans la même catégorie je préfère largement le très efficace Victoria’s Secret ou les mini-sites psychédéliques de Agent Provocateur.

Vous avez forcément entendu parler de la Panamera, le nouveau modèle 4 places de Porsche. Je vous propose aujourd’hui de découvrir le mini-site qui va avec la voiture. Premières impressions : ce mini-site ne ressemble à aucun autre (un peu comme la voiture d’ailleurs). La page d’accueil propose ainsi un embranchement entre la découverte du modèle ou le magazine dédié :

La page d'accueil du site de la Panamera

En optant pour la découverte du modèle, vous arrivez sur un cube en 3D composés de couches de contenus :

L'accès aux contenus au travers des éditions en cube 3D

Le cube change de perspective selon les déplacements de la souris. Un clic sur une case vous permet d’en dévoiler le contenu (ici la vue à 360°) :

La vue à 360° de la Panamera

Vous avez également la possibilité de naviguer dans les contenus en fonction de leur lieu géographique (je ne vois pas trop l’intérêt) :

La vue géographique des contenus

De même, vous pouvez “vivre l’expérience” de la Panamera selon la chronologie de sa génèse :

La mosaïque chronologique de la Panamera

Il y a finalement la fameuse vue “Magazine” du début qui est assez proche de la mosaïque vu ci-dessus :

Le magazine en ligne de la Panamera

J’imagine qu’ils ont choisi un fond noir parce que ça fiat plus classe (ils manquent de finesse sur ce coup là).

Au final nous avons un site singulier qui favorise une découverte empirique des contenus. Empirique est ici un euphémisme pour décrire un mode de navigation complètement aléatoire où l’on saute d’un contenu à l’autre. Pourquoi pas… si le tout n’était pas si lent à charger.

Oyé oyé braves gens, Uniqlo – la célèbre marque japonaise fashion à petits prix – lance une offensive sur notre hexagone : Uniqlo débarque en France. Non content de finaliser l’ouverture d’un super-store en plein cœur de Paris, ils nous gratifient d’un très beau site web : uniqlo.com/fr.

Le site donne le ton avec une page d’accueil au format mosaïque :

La page d'accueil d'Uniqlo

Ils proposent une page très originale d’introduction à la marque et aux produits sous forme d’une image page déroulante :

La page d'introduction à Uniqlo

Il y a ensuite la page des collections avec sa galerie de modèles :

La page des collections d'Uniqlo

Et même s’il n’y a pas (encore) de fonctionnalités marchandes, j’apprécie particulièrement l’Explorateur :

L'explorateur de produits d'Uniqlo

Mais il y a également une mini-boutique dédiée aux T-shirts (Uniqlo UT) ainsi que son interface exploratrice (UT Zoom) :

La mini-boutique de T-shirts d'Uniqlo

Signalons enfin le très beau calendrier animé avec ses musiques cheap et ses films en tilt-shift :

Le calendrier d'Uniqlo

Non seulement ce calendrier vous renseigne sur le temps (possibilité d’en faire votre économiseur d’écran) mais il vous permet également de découvrir la collection :

La collection au sein du calendrier Uniqlo

Bref, c’est une incroyable immersion dans l’univers coloré et trendy de la marque et un concentré de bonnes pratiques.

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

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…

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.

Pour accompagner son actualité commerciale l’enseigne Leroy Merlin a prit l’habitude de sortir des mini-sites hauts en couleurs. Dernier en date : CommentReleverSaCuisine.com où l’accent est mit sur le spectacle, à l’image de cette page d’accueil avec une navigation minimaliste afin de laisser un maximum de place au visuel principal :

La page d'accueil de CommentReleverSaCuisine.com

Les internautes sont donc accueillis dans cet univers “cuisine” miniaturisé avec une belle cinématique d’ouverture et une sonorisation très légèrement décalée (une musique un peu kitsch et un bruit de salière sur kes items de navigation). La courbure de ce tableau renforce l’impression de miniaturisation (effet fish-eye) et les différents éléments présents à l’écran s’animent au survol de la souris.

Au niveau des pages intérieures, les différentes cuisines sont détaillées au travers de vues à 360° avec plusieurs positions de caméra (cf. le plan sur la partie gauche) et des infos-bulles géantes sur les points d’intérêt :

La vue à 360° des cuisines

Le site propose également des fiches pratiques animées avec une version imprimable :

Les fiches pratiques animées

L’interactivité dans ce mini-site est assez limitée mais pour les bricolos en herbe il existe un logiciel de configuration 3D à télécharger sur le site principal (pourquoi ne pas proposer un outils en ligne ?).

Au final nous avons donc un site très spectaculaire visuellement avec un temps de chargement optimisé. Que demandez de plus : des bricogirls ?

Avez-vous vu le nouveau site de Dockers ? L’ambiance et l’immersion dans un univers à mi-chemin entre suranné et vintage y est très bien réussie. Mais ce qui séduit avant tout sur ce site se sont les visuels plein écran et la sonorisation. Vous pourrez apprécier la très bonne gestion du redimensionnement de l’écran (pas évident avec de telles photos).

Au niveau de la page d’accueil nous avons donc une structure peu commune qui met l’accent sur la dernière collection (série de 3 vignettes) et propose un menu de navigation sous forme de bandeau dépliant (original mais pas des plus intuitif) :

La page d'accueil de Dockers

Vous trouverez également en bas de l’écran sur la gauche la télécommande permettant de choisir la musique (le choix des morceaux est plutôt réussi) et d’apporter une dimension sonore participant à l’ambiance générale.

La page de collection propose une série de modèles que l’on peu fait tourner dans une vue à 360° avec des points d’intérêt à cliquer :

Présentation des ensembles chez Dockers

Il y a aussi un module de recherche avec des boîtes de filtres et un bel effet de floutage des produits :

L'interface de recherche chez Dockers

Vous trouverez également sur ce site une belle mosaïque de portraits dans la rubrique “Your Style” ainsi que des vidéos de défilés.

Au final nous avons donc un site qui n’apporte aucune innovation mais qui réussi tout de même à recréer une ambiance très agréable. La critique peut paraître dure mais je reconnais volontiers l’efficacité du résultat final (malgré un contenu très pauvre). Nous sommes bien loin des prouesses techniques / visuels d’un Uniqlo mais cette boutique parvient tout de même à procurer une expérience agréable.

Je vous propose de faire un petit voyage dans le temps avec le dernier mini-site de Dior : Miss Dior Chérie. Plus qu’un simple site-produit, cette nouvelle réalisation vous transporte dans un Paris atemporel et légèrement suranné avec deux ambassadrices de charme : Brigitte Bardot et Sofia Coppola.

L'accueil du site Miss Dior Chérie

Sur ce site il n’est point question de vendre du parfum mais plutôt de vous immerger dans une ambiance, de vous faire vivre une expérience au travers de différents tableaux qui sont autant de compositions jouant sur les couleurs, les animations et la musique. Quelques éléments réagissent au survol de la souris mais avec un degré d’interaction très faible.

Rien de méchant dans ma critique, juste une analyse de ce mini-site d’ambiance cautionné par Sofia Coppola : on s’y promène, on tourne les pages (très belles transitions) et on explore cet univers :

L'univers de Sofia Coppola sur le site Miss Dior Chérie

Rien de très révolutionnaire pour ce mini-site mais une réalisation soignée et un chargement rapide. Que demander de plus à une marque de luxe qui n’a pas des caractéristiques techniques / configurateurs / simulateurs à proposer comme les constructeurs automobile ? En tout cas une bonne source d’inspiration.

(via BadBadBlog)

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.