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

Saviez-vous que Lipton était une marque plus que centenaire ? Fondée dans les années 1870 par Sir Thomas Johnstone Lipton, cette marque a toujours su mettre en valeur ses valeurs au travers d’interfaces innovantes. Je me souviens ainsi de la page d’accueil de Lipton.com qui proposait de déambuler dans un champ de théiers grâce à une vue subjective qui utilisait de la 3D en temps réel.

Bref, tout ça pour vous dire qu’ils remettent ça avec une série d’animations fractales de toute beauté : Lipton Infinite Trip. Six variétés de thés sont ainsi mises en scène au travers de scènes que l’on découvre en zoomant ou en dézoomant.

Le point de départ de chaque animation est un cercle formé de six triangles (les sachets de thé de la marque sont de forme triangulaire) qui diminue progressivement pour laisser place à une série d’illustrations représentatives de l’origine des feuilles de thé (Sri Lanka, Bombay, Ceylan…). Des animations psychédéliques visuellement très impresionanntes que l’on découvre petit à petit à l’aide de la molette de la souris ou du clavier.

L'univers Sri Lanka de Lipton

Chaque univers reprend donc les codes graphiques de sa destination d’origine ainsi qu’un thème musical. L’impression d’immersion est très forte, mais est surtout très compliquée à expliquer par écrit, je vous engage donc à visiter le site pour vous rendre mieux compte.

L'univers Earl Grey de Lipton

Au final, nous avons une très belle réalisation qui permet d’illustrer les valeurs et l’héritage culturel de la marque sans avoir à montrer un produit très banal (des sachets de thé). Je trouve ces univers particulièrement inspirés et surtout idéals pour perdre 3 minutes au bureau. Vous avez bien 3 minutes à perdre ?

J’imagine qu’il serait possible de faire quelque chose d’équivalent avec une marque de café…

Dans la série mini-site immersif avec de jeunes filles chichement vêtues, vous connaissiez déjà les réalisations d’Aubade et Agent Provocateur, mais auriez-vous imaginé un jour que ces deux marques auraient à subir la concurrence de Perrier ? Et pourtant, la célèbre marque d’eau gazeuse vous propose une superbe réalisation mettant en scène Dita von Teese : Perrier Mansion. À mi-chemin entre brand content, univers immersif et maturialism, ce mini-site expérientiel vous propose de partir à l’exploration du Perrier Mansion (une référence au Playboy Mansion) :

Entrez dans le Perrier Mansion (NSFW !)

Ce mini-site se présente sous la forme d’une vidéo chapitrée (il y a différents embranchements) :

Choisissez la bonne porte !

Chaque branche mène à un mini-jeu où la sublime Dita vous dévoile ses charmes dans une ambiance ultra-sensuelle :

Ici il faut regarder mais pas cliquer

Ce mini-site est donc exclusivement destiné à un public averti (adulte) et sert de prétexte pour scotcher les internautes devant leur écran. Et ça fonctionne plutôt bien ! Vous noterez au passage cette ridicule tentative de placement de produit :

Visiblement il fait très chaud dans le Perrier Mansion

Au final nous avons donc un superbe site parfaitement réalisé, c’est indéniable. Je suis par contre légèrement plus perplexe quant à l’adéquation entre le sujet de cette campagne (Dita Von Teese) et la marque (la finalité du produit, les valeurs véhiculées…).

Visiblement l’opération lancée en milieu d’année dernière a été un succès puisqu’un second chapitre est sorti tout récemment : Perrier by Dita Episode 2. Même recette que le premier opus, mais avec une touche de Facebook Connect en plus (plus vous invitez d’amis et plus vous pourrez matter la miss). Encore une fois la réalisation est de très bonne facture, mais le procédé est douteux… Dans le même genre, je préfère encore le Project X de Red Bull.

Précisons au passage que ce mini-site est également disponible sur iPhone (grâce au programme iAd) et propose une expérience très fidèle (merci à JB et Tamara pour l’info) :

(via FWA)

Voilà près de 3 ans que je parle de rich commerce sur ce blog. Trois années où j’ai pu aborder un certain nombre de sujets : les démonstrateurs, la 3D, les vues à 360°, la vidéo, l’immersion… Et bien figurez vous que je crois avoir trouvé le site marchand qui combine quasiment toutes les pratiques : Le guide d’achat TV de Philips.

Ce site propose donc de vous assister dans le choix de votre téléviseur avec un assistant à étapes qui débute par une vue immersive par dessus votre épaule pour vous aider à choisir la bonne taille d’écran en fonction de la distance de visionnage (deux réglettes permettent d’ajuster la simulation) :

Choisissez la bonne taille d'écran en fonction de la distance

Puis vous choisissez le type de design qui vous plait à l’aide de vidéos chapitrées :

Gros plan sur le design des modèles

Ensuite l’assistant vous propose une première sélection de TV dont vous pouvez voir les caractéristiques en vous rapprochant (belle transition en 3D). Cette vue rapprochée permet notamment de regarder la TV selon différents angles de vue alors qu’une vidéo est en train de tourner à l’écran :

Vue à 360° d'un modèle de TV

Vous pouvez enfin affiner votre choix en précisant votre budget, l’assistant vous propose alors deux alternatives en fonction de la taille de l’écran ou de la pertinence selon vos choix précédents :

Précisez votre budget à l'aide de la réglette

Et vous êtes alors de retour dans votre salon en train de regarder la TV qui vous correspond le mieux à vos attentes et votre budget (vous pouvez changer de chaîne, allumer ou éteindre l’éclairage arrière, déplier le panneau avec la comparaison des modèles…) :

Jouez avec votre future TV dans ce salon virtuel

Au final nous avons donc un site très complet… mais surtout très long à charger et trop gourmand en ressources. Il en résulte des saccades dans les animations et une piètre réactivité de l’interface. Même sil a démonstration technique est impressionnante, la fluidité et l’expérience utilisateur doivent-elles être sacrifiées pour autant ? Peut-être qu’une version haut et bas débit permettrait de pallier ce problème en apportant d’un côté une information riche et de l’autre une ambiance immersive.

(via Hebiflux)

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 ?