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

La sonorisation dans une boutique est un élément essentiel de l’expérience d’achat. Il suffit de rentrer dans une boutique de fringues (Zara, H&M…) pour s’en rendre compte. Sans aller dans les extrêmes d’enseignes comme Abercrombie où la musique est ridiculement forte (et les vendeuses ridiculement grandes, et la lumière ridiculement faible, et les prix ridiculement élevés…), le choix d’une bande-son agréable et cohérente est indéniablement un plus. Si je ne dis pas de bêtises, certaines enseignes proposent même des compilations à la vente (Urban Outfitters il me semble…).

Bref, tout ça pour dire que s’il y a de la musique dans les boutiques, pourquoi n’y en aurait-il pas dans les boutiques en ligne ? Tout simplement parce que ça peut perturber les internautes. Nombre d’entrevous ont certainement en tête les intros Flash du siècle dernier qui vous hurlaient une musique ou un jingle dans les enceintes. Il faut donc faire preuve de subtilité pour ne pas provoquer de la gène (soit parce que le son des enceintes est réglé trop fort, soit parce qu’il y a déjà du son sur les autres onglets).

Petite précision : je parle bien d’une sonorisation avec une playlist complète et non juste une boucle qui tourne sur la page d’accueil. Je vous propose ainsi un petit tour d’horizon de ce qui se fait sur les sites français.

Colette réserve ainsi une place de choix à son player qui vient se nicher juste sous la barre de navigation :

Page d'accueil de Colette

Même si le choix des titres est parfaitement en accord avec le côté avant-gardiste de l’enseigne, je regrette d’imposer par défaut la musique aux visiteurs.

Un choix par défaut qui n’est pas adopté The Kooples avec un lecteur représenté sous forme de vumètre dans le footer :

Page d'accueil de The Kooples

Ce vumètre est le seul élément animé de la page (en dehors du carrousel) donc on finit par le repérer au bout de quelques secondes, mais il est tout de même trop discret à mon goût.

Même principe chez Agnès b. avec un player très discret dans le coin supérieur droit :

Page d'accueil du site d'Agnès b.

Un clic sur le coin corné de la page ouvre par contre une pop-up avec le player en lui-même :

La radio du site d'Agnès b.

Non seulement l’emplacement du player rentre en concurrence potentielle avec le panier (sacrilège !) mais l’ouverture en pop-up peut poser des problèmes avec les navigateurs modernes qui les bloquent.

Le bon compromis à mon sens serait de proposer un petit bouton dans le header pour déplier le lecteur dans la page et accéder ainsi à la liste des titres. La musique serait désactivée par défaut sauf sur les sections inspirationnelles du site (catalogue saisonnier). De plus, il ne me semble pas très compliqué de monter un partenariat avec un site musical (exemple : MonShowroom avec Virgin Radio) afin d’avoir de la musique de qualité et de proposer l’achat des titres.

Et vous : vous êtes pour activer la musique par défaut ou non ?

Vu récemment sur le site d’AM PM, un module inspirationnel au travers de quatre ambiances : Collection Automne-Hiver 2010. Ce module, accessible depuis la page d’accueil, vous fais découvrir quatre séries de meubles mis en scène dans quatre maisons. L’interface proposée est en fait un carrousel à 4 niveaux, étrange au premier abord, mais efficace pour aller directement à la pièce qui vous intéresse :

Choix des ambiances par maison

Une fois la pièce sélectionnée, vous accédez à un visuel plein écran avec des zones réactives sur les meubles commercialisés :

Le détail d'une pièce

Rien de révolutionnaire, mais les hot-spots sont bien visibles et le détail des produits s’affiche rapidement. En promenant votre souris sur le haut de l’image, vous pouvez basculer sur une autre pièce ou accéder à la liste des meubles de l’image :

Liste des meubles présents dans une pièce

Au final, nous avons donc un module de découverte particulièrement bien intégré au site faisant la transition entre la page d’accueil et les listes de produits. Cette approche par ambiance / pièce permet ainsi d’inspirer les acheteurs potentiels et surtout de donner une cohérence aux collections. Simple, pas trop chère à réaliser et efficace.

Aux États-Unis, Nordstrom est une institution : marque centenaire, cette chaîne de grands magasins fait partie du quotidien des américains et exploite par la même un site de commerce en ligne qui figure parmi mes favoris. Récemment ils ont… tout changé (à l’américaine) pour proposer une expérience radicalement différente.

Ça commence dès la page d’accueil avec un carrousel façon Polaroïd et un bandeau de navigation minimaliste (seulement trois items) :

La page d'accueil de Nordstrom

Au niveau des pages intérieures, nous gardons ce même esprit minimaliste avec beaucoup d’espaces blancs et une attention concentrée sur les visuels. Ici, le Style Guide se manipule très facilement à la souris en cliquant sur les silhouettes et les views :

Guide de styles chez Nordstrom

Vous noterez l’étonnant bandeau de navigation où le fil d’Ariane est directement intégré dans l’onglet. Inédit, mais plutôt efficace pour bien cloisonner les univers (produits, marques, communauté).

La page de catégorie est également un très bel exemple de minimalisme avec un moteur de filtre très simple d’utilisation en haut de page et des variantes de produit facilement accessibles (bouton « See colors » sous la photo) :

Une page de catégorie chez Nordstrom

Il y a également une fonctionnalité d’assistance au choix très originale qui mélange formulaire narratif et inspiration visuelle (glissez les vignettes dans les espaces blancs) :

Un formulaire narratif pour vous aider dans votre sélection de produits

Il y a également un univers éditorial et communautaire un peu plus « touffu » avec des articles, de la vidéo et des fonctionnalités sociales dans tous les sens. Rien de très révolutionnaire, mais une belle mise en scène des titres et liens :

Les contenus éditoriaux à la sauce sociale

J’ai été au début très déstabilisé par cette nouvelle version qui tranche par rapport à la précédente (beaucoup moins funky mais diablement efficace). L’ensemble est parfaitement cohérent (assez proche du site des 3 Suisses) et procure une très expérience d’usage très agréable. Mission accomplie !

2010 devait être l’année de l’explosion de la 3D (pas en 3D temps réel mais en relief). Pour le moment la « révolution » ne se fait sentir qu’au cinéma où les super-productions sont maintenant systématiquement proposées en 2D (lunettes en sus). Tout ceci est très sympathique, surtout pour les nostalgiques de l’Étrange Créature du lac noir, mais les applications concrètes sur les autres supports sont encore très rares. Concernant les sites web, c’est encore pire !

Heureusement les choses sont en train de changer avec Timberland qui a décidé d’agrémenter sa dernière campagne Earthkeepers d’une touche de 3D relief : Timberland Goes 3-D and All-Out For Latest Earthkeepers Campaign. Ce mini-site vous propose de prolonger les deux séquences mis en scène dans les pub TV avec une page d’accueil façon bullet time (vous tournez autour du personnage en déplaçant la glissière) :

Le mini-site de Timberland

Tourner autour du personnage permet de mettre en avant les différents produits qu’il porte sur son dos. Un clic de la souris ouvre la fiche produit qui propose zoom, vue à 360° et détails :

Détails d'un produit sur le mini-site de Timberland

Jusqu’ici rien de très innovant, juste une belle réalisation avec une manipulation intuitive. Mais les choses intéressantes commencent lorsque vous activez l’option 3D en haut à droite de l’écran (facilement repérable grâce aux lunettes). Les visuels du produit sont alors affichés en relief, il ne vous reste plus qu’à enfiler vos lunettes 3D :

Vue à 360° et en relief du produit (nécessite les lunettes 3D)

Bon autant être parfaitement honnête avec vous : L’effet 3D est plus que limité, mais c’est tout de même une expérimentation très intéressante qui ouvre (potentiellement) la voie à une nouvelle génération de sites web immersifs. Le marché des TV 3D est pour le moment très limité, et c’est encore pire pour les TV 3D sans lunettes. Qu’importe, les industriels investissent massivement dans la 3D : Films mais aussi jeux vidéos. Il ne serait pas étonnant de voir dans les prochains mois une audience « 3D ready«  grossir rapidement avec la sortie sur la marché de nombreux produits innovants pour Noël (nouvelle Nintendo DS, nouvelle PSP…). En théorie, les ordinateurs devraient suivre dans peu de temps avec des écrans 3D-ready, et des internautes en quêtes de contenus 3D.

Bientôt de l'infotainment en 3D ?

Bref, il est largement temps pour vous de sérieusement penser à introduire une troisième dimension dans votre communication de marque : Soit au travers de la modélisation de vos produits, soit au travers de contenus en relief (avec ou sans lunettes 3D).

Depuis le début de l’année Shisheido est en train d’expérimenter à Tokyo un dispositif de réalité augmentée pour tester du maquillage en quelques secondes. Ce dispositif utilise un miroir digital qui superpose une couche de maquillage virtuelle sur votre visage :

Les premiers retours sont visiblement positifs et les autres acteurs du marché ne veulent pas se laisser distancer. L’Oréal a donc décidé de se lancer à son tours (de même que Boots and Walmart) avec un kiosk proposé dès cet été en Angleterre : L’Oréal weighs up digital mirror kiosks.

La technologie utilisée est celle de EZface qui propose aussi une version web appelée Virtual Miror. Cette application vous permet d’uploader votre photo et d’appliquer dessus du maquillage de différentes marques :

Le maquillage virtuel d'EZface

Même si je n’apprécie pas du tout les choix graphiques de l’interface, cette application fonctionne plutôt bien et on s’amuse vite à expérimenter plusieurs sortes de poudres, blush, mascara, rouges à lèvres, eye-liner… Je retiens deux fonctionnalités particulièrement intéressantes : La réglette avant/après (sous la photo) et les Hot Looks qui permettent d’appliquer en 1 clic un maquillage complet en choisissant dans une liste de mannequins. Vous avez également la possibilité de sauvegarder, imprimer, envoyer et partager vos photos retouchées.

Cette application est disponible chez L’Oréal (en page d’accueil) avec une interface aux couleurs plus harmonieuses : Mon Maquillage Virtuel.

Maquillage virtuel chez L'Oréal

J’apprécie particulièrement la possibilité de voir le résultat sur une moitié de visage à l’aide de la réglette. (merci à Puche pour le lien).

(via Springwise)

Ce mois-ci Olympus nous sort le grand jeu pour faire la promotion de son tout nouvel appareil photo numérique (le E-PL1) avec une très belle application de réalité augmentée. L’idée est d’utiliser la webcam des internautes pour tester et manipuler l’appareil. Ici une vidéo de démonstration :

Le principe consiste donc à imprimer une petite carte avec un marqueur qui sera repérer par la webcam :

Une simple carte permet de simuler un appareil photo

Un plug-in se charge ensuite d’incruster l’appareil mais également de gérer les animations comme la sortie du flash, le changement de l’objectif (en cliquant sur les pastilles jaunes) :

La réalité augmentée en action chez Olympus

Encore plus fort : Il est également possible de prendre des photos (virtuelles) avec cet appareil (virtuel) et de les partager sur Facebook. De même, si vous retourner l’appareil, vous pouvez tester l’interface et ses menus.

Bref, une très belle réalisation propulsée par la technologie française de Total Immersion, Cocorico !

(via Virtual Worlds News)

Inutile de vous présenter l’iPad et de vous venter les vertus de la toute dernière machine d’Apple. Par contre je vous propose de vous intéresser à deux applications qui vous concernent directement puisqu’il s’agit des showrooms de deux marques bien connues.

Commençons par Gap qui a été la première marque à lancer une application marchande sur l’iPad : Gap makes shopping more social with iPad app. Dès la page d’accueil l’utilisateur est plongé dans une mosaïque de contenus dans laquelle il navigue avec le doigt :

La mosaïque de l'application iPad de GAP

Les contenus s’ouvrent dans une fenêtre qui se superpose à la mosaïque (ici une vidéo) :

Une vidéo sur l'application iPad de GAP

Il y a également une partie « boutique » avec des catégories (onglets en haut de page) et une mise en page minimaliste :

La galerie de produits de l'application iPad de GAP

En cliquant sur « Buy » vous pouvez choisir la taille et ajouter au panier :

L'ajout au panier de l'application iPad de GAP

L’application est très intuitive et surtout très réactive comme en témoigne cette vidéo trouvée sur ClickZ :

Dans le même esprit mais en mode portrait (vertical), il y a également l’application de La Redoute découverte chez Laurent : La Redoute lance son appli iPad. La page d’accueil de l’application est tout à fait surprenante car elle reprend les codes graphiques des magazines mais utilise une vidéo pour le mannequin :

La page d'accueil de l'application iPad de La Redoute

Nous retrouvons dans cette application un certain nombre de contenus comme la rubrique « Relooking » :

La rubrique Relooking de l'application iPad de La Redoute

La navigation au sein des contenus se fait avec une mosaïque (comme chez GAP) :

La mosaïque des contenus de l'application iPad de La Redoute

L’ensemble est tout à fait plaisant mais ne permet pas de commander directement dans l’application (il faut passer par le site) :

Tout ceci est très encourageant car nous commençons à voir fleurir un certain nombre d’applications oscillant entre commerce et showroom (comme par exemple celle de Cadillac). Au vue des premières expérimentations il est clair que le potentiel de ces applications est énorme (immersion, récurrence des visites…) mais qu’il va falloir être très prudent quand à l’ergonomie et la prise en main. D’ailleurs ce n’est pas un hasard si l’IAB a déjà commencé à se pencher sur la question avec sa dernière étude (Tabvertising: iPad and other tablets).

Comme dit le proverbe : « Tout vient à point à qui sait attendre« . Je ne sais pas si beaucoup d’internautes l’attendaient, mais Tati vient d’ouvrir sa boutique en ligne. Au programme : Une mise en page d’une grande sobriété et quelques raffinements d’interface qui viennent améliorer l’expérience sans toutefois faire dans le spectaculaire.

Nous avons ainsi une page d’accueil tout en sobriété qui a fait le choix de ne pas utiliser un carrousel comme éléments principal mais un visuel statique (ce sont les vignettes de la deuxième rangée qui sont mise à jour toutes les 3 secondes) :

La page d'accueil du site de Tati

En passant votre souris sur les intitulés de navigation vous avez accès à un menu XL comme on peut en voir ailleurs (cf. Navandising, le merchandising appliqué à la navigation) :

Le menu de navigation XL du site de Tati

Sur les pages de catégorie vous trouverez également un système de filtres avec rafraîchissements silencieux :

Le moteur de recherche par filtres du site de Tati

D’autres fonctionnalités vues ailleurs sont également proposées : Zoom automatiques, catalogues interactifs… Rien de très neuf, mais une implémentation parfaitement propre et sobre.

Donc comme vous l’aurez compris, nous sommes bien loin des fonctionnalités avancées comme les configurateurs 3D, les univers immersifs, les vidéos narratives… mais cette boutique n’en reste pas moins terriblement efficace (notamment grâce à des photos de très bonnes qualité). Finalement est-ce que ce n’est pas ça l’avenir du rich commerce : Des enrichissements sobres utilisés avec parcimonie, pas nécessairement pour rehausser l’expérience mais plutôt pour faciliter la navigation et la prise de décision. Un rich commerce raisonné en quelque sorte…

Comme démontré récemment dans une étude, les outils visuels (visite guidée, démonstrateurs, configurateurs…) sont fortement appréciés par les internautes et sont surtout synonymes de performance commerciale. C’est dans cette optique que JCPenney propose à ces clientes une fonctionnalités intéressante sur sa collection de maillots de bain : Mix & Match.

L’objectif est d’inspirer les internautes avec à la fois une présentation de la nouvelle collection (avec le Look Book) et la possibilité de visualiser différentes combinaisons de haut et bas :

Le configurateur visuel de maillots de bain chez JCPenney

Différentes combinaisons sont affichées (avec une emphase au centre) et les flèches servent à faire défiler les ensembles. Rien de très révolutionnaire mais une implémentation efficace et surtout bien intégrée avec les autres fonctionnalités du module et du catalogue. L’espace est très bien exploiter et les appels à l’action sont bien hiérarchisés (« View fit guide« , « Details & Buy« …). Je n’aurais pas forcément mis d’autres flèches sur le bord du module pour passer d’un style à un autre (car ça fait beaucoup de flèches sur les cotés) mais l’ensemble est sobre et parfaitement efficace.

C’est tout à fait le type de modules rich commerce qui peuvent booster votre taux de transformation sans toutefois nécessité trop de ressources.

(via Adobe Scene 7 Blog)

Ce n’est pas la première fois que je vous parle de Décathlon car c’est un site que j’aime beaucoup. Je vous propose ce soir de découvrir le nouvel espace Running qui bénéficie d’un traitement particulier notamment au niveau de la sonorisation de l’interface :

La page d'accueil de la section Running de Décathlon

Tous les éléments de l’interface sont associés à des retours sonores (blip, bloup, tic…) qui donnent du relief à cette page et permettent de rythmer la découverte de la page « à tâtons » (en baladant la souris sur l’écran). Il y a un côté très ludique dans cet écran qui me fait penser aux interfaces des jeux vidéo (qui font un usage systématique des retours sonores).

Cette section propose également un assistant au choix très sympa :

L'assistant au choix de Décathlon Running

Des réglettes permettent d’activer des filtres et de réduire la liste de résultats de produits. Simple mais bien réalisé car les boutons et tirettes ont un volume suffisant pour donner envie de les tripoter.

Notez que l’on retrouve le même interface dans l’espace Carpe (ou plutôt « pêche », non ?).