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

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)

Les interfaces riches sont formidables car elles nous permettent de repousser toujours plus loin les limites des sites web et du bon vieux HTML. Mais par moment on se demande s’ils ne les repoussent pas trop loin ces limites… Prenez par exemple ces trois sites qui proposent une interface gestuelle :

• Red Issue, un site de styliste où il faut tracer des flèches sur les bords de l’écran pour parcourir les différentes pages du site
  

  La navigation gestuelle de Red Issue

• Toshiba What’s Next, un mini-site “expérientiel” où les éléments du décors réagissent en fonction des symboles que vous tracez à l’écran
  

  Le mini-site What's Next de Toshiba

• Citroën DS Inside avec son configurateur gestuel
  

  Le configurateur gestuel de la Citroën DS

Tout ça c’est très sympa mais est-ce réellement viable ? Si vous êtes un créateur en décalage par rapport au marché et à vos concurrents, admettons que vous ayez besoin de vous démarquer à tout prix. Mais si vous êtes une marque grand public avec des produits grand public et que vous devez séduire le… grand public, alors je m’interroge sur la pertinence d’une telle démarche.

Il est à mon sens essentiel de mettre en valeur les produits (ou l’expérience qu’il proposent) au travers d’une interface novatrice dans la présentation et la mise en scène, mais pas dans le système de navigation / manipulation. Ce dernier est en effet soumis aux mêmes règles d’utilisabilité que les sites en HTML : simplicité, facilité d’apprentissage, guidage, tolérance aux erreurs…

Bref, je reste persuadé qu’il y a un fort décalage entre l’ambition affichée par les deux dernières marques (qui, quoi que le directeur marketing ou l’agence en pensent, restent des marques grand public) et les produits vendus (qui ne sont pas censés révolutionner le marché). Apple n’a pas eu besoin de ce type d’interface pour promouvoir son iPod ou son iPhone, un “simple” site web suffit : simple, utile, informatif. Et puisque l’on parle de l’iPhone et de son interface tactile, je précise que les trois exemples montrés plus haut me font plus penser à l’interface d’un Palm Pilot qu’autre chose.

Ne vous méprenez pas sur ma prise de position, je reste un fervent adepte des interfaces riches appliquées au e-commerce, mais on ne peut pas tout se permettre sous prétexte que les objectifs de vente sont élevés (”il faut frapper un grand coup“). Le but du jeu est de séduire, pas de désorienter, non ?

(via Hebiflux et Interfaces riches)

Jusque là Autodesk était plus connu pour ces outils de conception 3D que pour des applications grand public. Les choses sont visiblement en train de changer puisqu’ils expérimentent depuis quelques temps le modèle SaaS à destination des cuisinistes et fabriquant / distributeurs de meubles avec deux produits : Showroom et DragonFly. L’idée étant pour Autodesk de préparer la révolution de l’industrie du logiciel en commençant à recycler ces outils en services en ligne facturables.

Cette approche se traduit donc pas deux services librement accessibles au grand public. Le premier étant DragonFly un service en ligne qui permet de modéliser des intérieurs et d’en avoir une représentation en 3D isométrique :

Transformez vos plans 2D en représentations 3D

L’interface est assez bien conçue et vous avez la possibilité de partager vos créations sur FlickR, Facebook…

L'interface de DragonFly

Plus intéressant, Showroom est un outil de configuration d’aménagements intérieurs en ligne. C’est en gros la même chose que DragonFly mais avec moins de possibilités (vous choisissez les meubles / équipements disponibles dans la liste) et un rendu photoréaliste : Project Showroom 1.0.16 Now Available.

L'interface de Showroom

Il n’est donc pas possible de configurer votre propre pièce (avec vos dimensions) mais la qualité du rendu est tout simplement saisissante (cf. Life Imitates Art). Ce service est normalement destiné aux professionnels (cuisinistes…) qui souhaitent fournir à leurs clients un outil de visualisation puissant offrant un premier niveau d’interactivité.

Notez qu’il existe également une version iPhone, idéale pour les vendeurs en déplacement :

Pour le moment ce service est destiné aux cuisinistes et autres fabricants de salle de bain mais nous tout à fait imaginer les possibilités pour d’autres secteurs…

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

Les configurateurs automobile sont très certainement les RIAs les plus complexes à réaliser car elles doivent allier séduction, efficacité, incitation, information, tolérance aux erreurs, gestion des conflits… Bref, c’est la Rolls des RIA marchandes (sans mauvais jeu de mot).

Pour avoir travaillé sur plusieurs projets de refonte de configurateur automobile je peux vous assurer que celui-ci vaut le détour : Designa din egen Vovlo C30.

Il s’agit en fait d’un configurateur à écran unique : les options se choisissent à partir de listes verticales à effet fish-eye et la progression se fait de gauche à droite (avec mise à jour du prix).

C’est un peu déroutant mais terriblement disruptif. J’adore ! (via Maxdig)

J’ai eu la chance aujourd’hui de pouvoir faire une interview de Sheila Dahlgren (avec la complicité de Cédric) qui est la directrice marketing de Scene7 chez Adobe. L’occasion de parler des dernières références et des évolutions prochaines de Scene7.

Concernant l’offre, la grosse nouveauté à venir est la prise en charge de vidéos au sein de leur plateforme SaaS. Dans un premier temps cette solution servira à faire du progressive streaming dans de bonnes conditions. Dans un second temps ils n’ont pas pu trop me dire sur quoi ils travaillaient mais il va y avoir des annonces de faites en juin prochain. Je ne suis pas devin mais je me doute bien que cela va avoir un rapport avec de la personnalisation de vidéos à la volée.

Autre grande nouvelle, le lancement prochain d’un système unifié de gestion des contenus numériques (photos, vidéos…), le tout au sein d’une interface en Flex pour plus de modularité et de… flexibilité (sans mauvais jeu de mot). Un premier pas vers une plateforme proposée en self-service.

Voici la première partie de l’interview où Sheila nous présente l’offre ainsi que les nouveautés à venir concernant la vidéo :

Cette rencontre a été également l’occasion de faire le point sur les dernières réalisations :

• House Of Fraser (avec des zooms sur-puissants) ;
• Under Armour (zoom, vue 360°…) ;
• Smith & Nobles (avec un configurateur de rideaux).

Le meilleur pour la fin avec cette très belle boutique (Sunglass Hut) qui propose une interface très impressionnante qui laisse un maximum de place aux visuels. Petite visite guidée avec Sheila :

Voilà, vivement les explications sur cette prochaine offre de services autour de la vidéo.

J’étais justement en train de me dire que ça faisait bien longtemps que je n’avais pas parlé d’un site de constructeur automobile (au moins une semaine). Cette semaine c’est au tour d’Audi avec ce superbe site : Truth in Engineering.

Au programme, une page d’accueil très immersive avec tout un tas de panneaux flottants servant à lancer des vidéos :

Nous avons ensuite un configurateur visuel au format XXL :

Et puis il y a ces cinématiques de transition toujours aussi impressionnantes :

Au final encore un très beau site, rien de révolutionnaire que d’émerveillement pour les yeux !

(via Hebi Flash Blog)

Vous en avez assez des configurateurs des constructeurs automobile ou de marchands de peinture ? Alors j’ai ce qu’il vous faut !

Nous avons tout d’abord ce configurateur de parfum chez Jean-Paul Gaultier :

A quand la possibilité de composer soi-même son parfum à partir d’un échantillon de senteurs ?

Nous avons ensuite  ce configurateur de collier chez Pearlfection :

Et oui, avant vous pouviez dire “tout se vend sur internet“, vous pourrez bientôt dire “tout se configure sur internet“.

(via le Capitaine Commerce)

Dans la lignée du billet précédent, laissez-moi vous parler du nouveau site de VW UK : fortement disruptif mais terriblement efficace. Il faut dire que les équipes de VW sont très fortes pour nous pondre des sites révolutionnaires (et je pèse mes mots) à l’image du site VW US.

Mais reparlons de l’Angleterre avec ce nouveau site qui propose des fonctionnalités riche tout à fait remarquables, à commencer par le sélecteur (new cars) :

Nous avons également la galerie d’image avec ces différents modes d’affichage qui ne sont pas sans rappeler Etsy :

Et nous avons enfin le configurateur et ces options présentées sur des pieds d’estale :

Un site incroyablement rafraichissant tant il est à l’antipode de ce que font les autres constructeurs. Ne trouvez-vous pas que l’on retrouve dans les traitements graphiques et éditoriaux une volonté d’être le Apple de l’automobile, non ?

(via RIApedia)

Vous connaissez déjà la boutique de GAP avec ces panneaux flottants qui permettent d’avoir un aperçu de la fiche produit (bouton “Quick Look” qui apparait au survol de la souris) également disponible sur les autres sites la marque (Old Navy, Banana Republic, Piperlime) :

Mais saviez-vous que cette technique à fait des émules : Timberland propose ainsi un système équivalent mais qui introduit des petites nouveautés intéressantes comme les petites flèches “< Previous item | Next item >” qui permettent de passer au produit suivant de la liste :

Vous remarquerez que cette navigation latérale est parfaitement cohérente avec ce qui est proposé dans la page produit (en haut à gauche) :

Vous apprécierez au passage la remarquable exploitation de l’espace dans cette page produit, c’est d’une très grand clarté (en tout cas moi j’adore).

Et tant que j’y suis, êtes-vous aller faire un tour du côté de leur configurateur :

Là encore une très belle réalisation : mise en page impeccables, sonorisation discrète mais percutante…