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

Aviez-vous remarqué que pour certaines activités, les sites et boutiques en ligne proposent toutes des fonctionnalités « standards ». Dans l’automobile par exemple vous retrouvez presque systématiquement une vue à 360° et un teintier. Dans les boutiques de fringues c’est à peu près la même chose, surtout pour celles qui vendent des jeans : on retrouve toujours un « Fit Guide » pour aider le client à choisir la forme de son jean.

Illustration chez Gap avec le module Fit Spotlight qui aligne une série de modèles (H/F) animés :

L'assistant au choix de jean de Gap

Lorsque vous passez la souris sur un modèle, celui-ci s’avance :

L'assistant au choix de jean de Gap avec un zoom sur un modèle

En cliquant sur ce modèle, vous avez accès à une vidéo explicative du designeur (il explique le pourquoi du comment) ainsi qu’une vue à 360° avec des points d’intérêt :

La vue détaillée d'un modèle de jean chez Gap

Vous avez aussi un moteur d’inspiration avec 3 déclinaisons possibles par modèles et une belle séquence animée :

Le moteur d'inspiration de Gap

Vous pouvez trouver à peut près la même chose chez 77kids (American Eagle) mais en moins sophistiqué :

L'assistant au choix de jean chez 77kids

J’ai une préférence pour l’assistant de Gap car il propose plus de contenus mais les deux fonctionnent bien. Avez-vous d’autres exemples ?

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

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.

Après un mini-site très spectaculaire pour la campagne Lacoste Future, la marque au crocodile vient de lancer un nouveau mini-site très spectaculaire : Lacoste Red. Il y a tout d’abord une vidéo d’introduction en slow motion avec une pointe de bullet time et du morphing pour présenter la nouvelle collection :

Le mini-site Lacoste Red

Vous arrivez ensuite sur la page d’accueil qui garde la vidéo en toile de fond mais présente une frise de mannequins à cliquer. Vous noterez au passage la très originale sonorisation de l’interface avec des bruits tout droit issu des jeux vidéo des années 80.

En cliquant sur l’un des mannequins vous arrivez à la page de détails avec une très belle intégration de vidéo en mode bullet time :

Le détail d'un mannequin

Normalement vous avez dû passer par une page de transition très pimpante avec des couleurs qui flashent et une musique électrique signée Yuksek.

Vous pouvez également essayé le jeu qui est à mi-chemin entre Dance-Dance Revolution et Guitar Hero (il faut appuyer sur la bonne touche au bon moment pour faire danser le mannequin) :

Le jeu de Lacoste Red

Voici donc une très belle réalisation de l’agence Megalo(s) : Cocorico !

(via Fubiz)

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.

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 !

La vidéo est un support clé dans la valorisation des produits et dans l’enrichissement de l’expérience, là je ne vous apprend rien. OK mais pourquoi ne pas mettre la vidéo au coeur du dispositif marchand ? J’ai récemment croisé plusieurs exemples d’usages enrichis de la vidéo qui me font penser que ce support peut aller au-delà que de la simple illustration.

Premier exemple repéré chez Distilled qui met en scène dès sa page d’accueil une large vidéo (la navigation est relayée au bas de l’écran) où un mannequin enchaîne les tenues dans un astucieux montage :

Le montage vidéo de Distilled

Il est possible de passer d’une tenue à l’autre en utilisant les vignettes sous la fenêtre principale, l’accès au produit se fait à l’aide des liens sur la gauche. Une expérience hypnotisante et surtout très immersive qui vient remplacer des pages catégories / sous-catégories. Plus d’infos ici : Distilled Clothing Has Innovative Use of Video.

Autre exemple avec Video Infusion qui permet d’insérer des zones réactives dans une vidéo et de gérer les interactions sans recharger la page. Vous pouvez tester cette technologie sur leur page de démo :

La vidéo interactive de Video Infusion

Dernier exemple avec Innovid qui propose un incroyable système de superposition d’éléments réactifs dans une vidéo. Sur la capture d’écran suivante, le chat se promène entre les lettres du logo pendant que vous jouer à Pong sur le papier peint avec votre souris :

La démo d'Innovid

Bon OK, dit comme ça c’est pas très vendeur mais je vous engage fortement à tester ce système sur leur galerie d’exemples pour bien appréhender le potentiel de cette technologie (via Get Elastic).

Tout ça me fait dire que nous n’avons pas finit d’entendre parler de la vidéo et de ses déclinaisons en rich commerce : Imaginez de tels systèmes appliqués à l’offre de catch’up TV (M6 Replay) ou aux séries web (comme Dorm Life, Prom Queen ou Clark & Michael).

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…

Voilà bien longtemps que je n’ai pas parlé d’American Eagle (ma boutique en ligne préférée). Le lancement de trois nouveaux modules marchands me permet d’y remédier.

Commençons avec cette séquence vidéo interactive où les produits mit en scène sont accessibles en 1 clic sur les info-bulles qui jalonnent la timeline :

La vidéo interactive d'Ameriacn Eagle

Il y a ensuite une toute nouvelle boutique 77 Kids avec une sélection d’ensembles présentés en vidéo (7 gotta-have outfits) :

La page de présentation de la gamme

Une fois que vous avez choisi un ensemble, une autre vidéo se lance avec le détail des produits :

La page de présentation d'un ensemble

C’est encore une soif très simple d’utilisation, efficace mais avec juste ce qu’il faut de raffinement graphique pour en faire une expérience d’achat agréable.

Vous noterez au passage la remarquable mise en page des fiches produit en « Quick Look » :

La page produit

Pour finir nous avons l’animation autour des Jonas Brother (un concert exclusif) :

L'animation avec les Jonas Brothers

Et la possibilité de se créer des petits avatars qui seront affichés sur un mur géant lors du concert et donc certains seront dédicacés par les Jonas Brothers :

Les pseudo-avatars

Je suis toujours en admiration devant l’efficacité des modules marchands implémentés par cette boutique : à la fois sophistiqués mais toujours simples à manipuler.