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

Loin de moi l’idée de vouloir faire des jeux de mots à 30 centimes mais je trouve que le luxe est secteur qui se prête bien aux modules rich commerce. Les précurseurs en la matière sont des ténors comme Louis Vuitton ou Gucci mais nous commençons à voir des acteurs de taille plus modeste faire des choses tout à fait intéressantes.

Premier exemple avec Luigi Bormioli, un vaisselier italien déniché par Maxdig qui propose un très bon système de navigation par bandeau latéral :

Le bandeau de navigation latérale de Luigi Bormioli

Deuxième exemple ave Vimercati, un fabriquant de meubles italien (découvert par le Capitaine Commerce) qui nous plonge dans un carrousel 3D qui donne le tournis :

Le carrousel 3D de Vimercati

Rassurez-vous il y a aussi de très belles photos en pleine largeur qui rattrape cette intro un peu déstabilisante.

Dernier exemple avec Gestaltung, un fabriquant de cuisines anglais qui met en scène ses réalisations dans des environnement en simili 3D (via Hebiflux) :

Les scènes 3D de Gestaltung

Je précise tout de même que le luxe n’est bien évidémenr pas le seul secteur d’activité qui a tout intérêt à mettre en oeuvre les interfaces riches. Je rêve par exemple d’un supermarché en ligne en Flash (ou en Ajax)…

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…

Je rebondis sur un article publié il y a quelques mois chez Maxdig.net au sujet des menus de navigation au format XXL. L’idée est de se servir du menu de navigation comme un gigantesque espace d’accès direct aux produits, ceci à l’aide d’une mise en forme facilitant la lecture au sein même du menu.

Exemple avec le menu de navigation de Sony qui propose même des panneaux :

Le menu de navigation géant de Sony

Principal avantage : un accès plus direct aux produits (ou aux gammes de produit). Ce principe est également mis en oeuvre chez Kelkoo :

Le menu de navigation géant de Kelkoo

Alors bien sûr vous pourriez me dire que ce type de menu pose des problèmes d’intégration, de compatibilité avec les différents navigateurs, que les internautes n’y sont pas habitués… mais je vous signale que le site du tout nouveau président US propose également un menu de ce type :

Même la Maison Blanche a son menu de navigation géant

Bon en tout cas je suis plus que convaincu de l’intérêt de ces menus sur-dimensionnés à conditions de respecter plusieurs règles :

• Prévenir l’utilisateur qu’un menu va se déployer (avec une petite flèche du type “Menu (v)” ;
• Ne déployer le menu qu’au clic de la souris (surtout pour les menus de très grande taille) ;
• Bien aérer le contenu (tant qu’à afficher un gros menu, autant utiliser tout l’espace pour maximiser la lisibilité et le repérage) ;
• Inclure une option pour pouvoir fermer le menu (car il cache ce qui se trouve derrière).

Voilà, vous voyez d’autres conseils ?

Connaissez-vous Colette ? Il s’agit d’un magasin ultra-branché de la rue la plus branchée du quartier le plus branché de la capitale. Le genre de magasin où non seulement les articles ne ressemblent à rien mais sont en plus vendus à des prix indécents par des punks rachitiques (véridique !).

Et bien figurez-vous qu’ils ont lancé leur boutique en ligne très récemment, et elle ressemble à Delicious :

La page d'accueil de Delicious

Vous noterez la ressemblance avec ce même dépouillement graphique, la mise en page plutôt aérée avec une dominante bleu / gris :

Laboutique en ligne de Colette

Bon d’un autre côté, l’enseigne ne pouvait pas se permettre autre chose qu’une boutique en ligne en rupture avec les codes graphiques (liens non soulignés, item de navigation multicolores, textes minimalistes…). Accordons tout de même à l’agence qui a réalisé ce site (Spill) le mérite de propose une expérience unique en son genre :

• Un parcours client complètement déstructuré (on se perd dans ce site où se côtoient produits, news et blogs) ;
• Une grille de lecture atypique (les photos de produits sont détourées donc les limites de la grille disparaissent) ;
• Un poil d’immersion avec le player audio en haut de page ;
• Un logo à droite de l’écran.

Voici donc une boutique peu banale mais dont j’aimerais bien connaître le taux de transformation…

PS : Je précise tout de même que je n’ai rien contre les punks.

Voilà un certain temps que je publie des exemples d’interfaces riches appliquées au e-commerce sur ce blog, mais je me rends compte que je n’ai jamais réellement pris le temps de bien définir les différentes types d’interfaces. Différents types ? Mais oui enfin, car le rich commerce est avant tout une histoire de modules : Il serait suicidaire de concevoir une boutique entièrement en Flash (quoi que certains s’y risquent encore), la tendance est plus à l’enrichissement des interfaces ou plutôt d’éléments d’interfaces.

Mon raisonnement est le suivant : à chacune des étapes du cycle d’achat correspondent des types de modules marchands “riches”. Ceci est synthétisé dans le schéma suivant où les types de modules sont répartis sur les différentes étapes :

Les étapes du cycle d'achat

Chacun de ces modules remplit une fonction bien précise et n’est pertinent qu’à une étape donnée du processus.

Mais il est également possible de regrouper les modules marchands en familles : Accès (pour amener l’internaute jusqu’à la fiche produit), Aide au choix (pour le guider dans sa décision), Mise en scène (des produits / services), manipulation et transaction.

Les familles de modules marchands enrichis

Voilà, nous avons maintenant une classification exhaustive des différents types de modules marchands enrichis. Ceci pourrait nous servir de glossaire car j’ai un peu tendance à jargonner dans ce blog.

Si vous voyez d’autres types de modules ou de familles, n’hésitez pas à vous manifester dans les commentaires.

Vous avez qui pour faire la promotion de votre service ?

Youjob, et l’officiel du handicap a modestement misé sur… Nicolas Sarkozy !

Le rich media au service d’une noble cause, mis en scène par des champions de la communication !

La plupart des exemples présentés dans ce blog sont de grosses réalisations US, de ce fait je suis toujours content de pouvoir présenter des exemples français de qualité. Et c’est le cas aujourd’hui avec La Case du cousin Paul, une boutique en ligne de guirlande lumineuse qui propose une fonction de configuration en ligne très sympa : Votre guirlande.

Vous commencez par choisir la couleur du fil électrique ainsi que des boules lumineuses :

Choisissez la couleur des boules de votre guirlande

Si vous trouver trop laborieux de choisir la couleur de chaque boule (d’autant plus pour les guirlandes de grande taille), vous pouvez aussi utiliser le panier aléatoire :

Le panier aléatoire permet de gagner du temps

Et une fois que tout est prêt, vous pouvez enfin admirer le résultat en allumant la guirlande :

Le résultat final

Voici donc une réalisation très propre avec une interface très bien proportionnée. Cocorico !

(merci à Sébastien pour le lien).

J’avais déjà rédigé un billet l’année dernière sur le site de Dodge qui faisait un effort particulier pour soigner la mise en scène des véhicules et plus précisément des vues à 360° : Des voitures avec des gens dedans chez Dodge.

Ils poursuivent visiblement dans cette voie avec de nouvelles vues à 360° de toute beauté, à commencer par la superbe Challenger lancée à pleine vitesse sur l’autoroute (il est possible de faire pivoter la vue avec de magnifiques effet de halos lumineux) :

Il y a également la Ram dans un environnement plus “backcountry” et un magnifique franchissement de rivière (ils ont même mis des rondins sur la plateforme arrière) :

Voilà donc un très bon cas d’école d’intégration élégante d’un modèle 360° dans un environnement réel. Toyota avait commencé à systématiquement insérer ses modèles dans des scènes en simili-3D mais l’intégration n’est pas aussi soignée que chez Dodge.