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

Connaissez-vous les imprimantes 3D ? Mais si enfin, ces imprimantes de nouvelle génération qui utilisent différentes techniques (résine à séchage ultra-rapide, impression par couches…) à la place de l’encre. Bref, c’est une révolution, mais ça coûte encore une blinde ! Le marché n’étant pas encore mûre pour équiper chaque foyer de sa petite imprimante 3D (mais ça ne serait tarder), des intermédiaires d’un nouveau type vous propose d’imprimer, donc de matérialiser, vos créations. C’est ainsi le cas de My Robot Nation, un service de conception de robots : Startup launches a robot invasion with 3D printing and WebGL.

Le site n’a visiblement pas investi des montagnes d’argent dans la charte graphique, car la page d’accueil est… perfectible.

La page d'accueil de My Robot Nation

Qu’importe cette page d’accueil vieillote, vous êtes très rapidement orienté vers l’interface de conception des robots qui n’est pas sans rappeler l’atelier de Spore Creatures. Non seulement cette interface est très intuitive et fun, mais en plus elle est réalisée avec WebGL, la technologie standardisée pour faire de la 3D dans le navigateur.

L'interface de création de My Nation Robot

Vous allez ainsi pouvoir créer votre robot en quelques minutes : choix des formes des membres, des proportions, des décorations et ustensiles, des couleurs… Le résultat est immédiatement visible à l’écran et vous pouvez manipuler votre robot dans tous les sens avec un rendu parfait et une fluidité exemplaire. Tout ceci est possible grâce à WebGL qui permet de « confier » le rendu 3D à la puce graphique et non au processeur (d’où des performances bien meilleures).

Pour vous rendre compte du nombre infini de combinaisons, je vous engage à regarder la galerie des créations.

Les différentes créations des utilisateurs

Les configurateurs 3D ne sont pas neufs, mais celui-ci est particulièrement bien réalisé et surtout très intuitif et performant. Et pour cause : l’éditeur du service reconnait que ce Robot Nation n’est qu’un galop d’essai vers une plateforme de conception beaucoup plus ambitieuse. Les robots étaient, selon eux, une thématique intéressante pour faire comprendre au grand public l’intérêt des imprimantes 3D : My Robot Nation aims for personal 3D printing for all.

Vivement la suite !

Après le très impressionnant Styku, ce sont les espagnols de Crearmoda qui nous proposent un module de personnalisation des habits en 3D : In Spain, design your own clothing via 3D simulator.

L'interface de personnalisation de Crearmoda

Pour le moment le choix d’habits est limité (t-shirt, sweat à capuche, foulard…) mais l’interface de personnalisation est très performante : le rendu visuel est bon, le mannequin se manipule avec fluidité et surtout les motifs épousent parfaitement les formes du corps pour plus de réalisme.

La technologie utilisée pour ce module est Unity3D qui dans sa dernière version exploite le moteur physique PhysX de NVidia. Particulièrement performant dans la gestion des vêtements, le Unity Player hérite des propriétés Interactive Cloth et Skinned Cloth, ce qui explique le réalisme du rendu.

Une fois vos créations achevées, vous pouvez les commander et les partager avec la communauté. De ce point de vue là, rien de très neuf.

Voici donc un très beau module de personnalisation qui laisse présager toujours plus de réalisme des les outils de simulation et les démonstrateurs.

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)