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

L’industrie automobile est décidément une source quasi infinie de bonnes pratiques en termes d’interfaces riches dans un contexte marchand. À défaut de “sites marchands”, nous pourrions plutôt parler de “sites participant activement au cycle de vente”, mais le résultat est toujours très agréable à regarder et à manipuler.

Commençons avec Toyota qui débute la commercialisation de la troisième génération de sa Prius avec ce mini-site qui met en scène les différentes qualités du véhicule et notamment sa forme aérodynamique :

La simulation d'aérodynamisme de la Prius

Des “particules” (pétales de fleurs ?) sont ainsi projetées sur l’avant de différentes silhouettes de voiture. Dans la cas de la Prius, ces dernières flottent de façon harmonieuse autour de la carrosserie alors qu’avec les autres silhouettes elles se dispersent de façon disgracieuse. Ce n’est pas une vidéo mais bien une animation en temps réel qui rajoute un effet hypnotique à ce démonstrateur.

Il y a également cette simulation de températures extrêmes pour mettre en valeur le toit solaire qui capte l’énergie et la transforme en air frais :

La simulation de températures extrêmes de la Prius

C’est beau, ludique et informatif.

Autre exemple dans un style complètement différent avec le mini-site de la Toyota iQ : Virtual Test Drive. Les internautes sont ainsi invités à tester la petite dernière de la gamme sur différents circuits qui mettent en valeur les qualités du véhicule (ici le circuit “sécurité”) :

La piste sécurité de la Toyota iQ

Vous apprécierez le style graphique très particulier (qui me fait penser au film Tron) de ce démonstrateur 3D où la voiture évolue dans un décor fixe (écran par écran). Le rendu est excellent et l’on passe beaucoup de temps à optimiser ses trajectoires et éviter les obstacles.

Bref, encore une fois c’est propre, beau, ludique et ça permet de capter l’attention des internautes. À rajouter à ma longue liste de bonnes pratiques.

(via Away 3D 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)

Pour accompagner son actualité commerciale l’enseigne Leroy Merlin a prit l’habitude de sortir des mini-sites hauts en couleurs. Dernier en date : CommentReleverSaCuisine.com où l’accent est mit sur le spectacle, à l’image de cette page d’accueil avec une navigation minimaliste afin de laisser un maximum de place au visuel principal :

La page d'accueil de CommentReleverSaCuisine.com

Les internautes sont donc accueillis dans cet univers “cuisine” miniaturisé avec une belle cinématique d’ouverture et une sonorisation très légèrement décalée (une musique un peu kitsch et un bruit de salière sur kes items de navigation). La courbure de ce tableau renforce l’impression de miniaturisation (effet fish-eye) et les différents éléments présents à l’écran s’animent au survol de la souris.

Au niveau des pages intérieures, les différentes cuisines sont détaillées au travers de vues à 360° avec plusieurs positions de caméra (cf. le plan sur la partie gauche) et des infos-bulles géantes sur les points d’intérêt :

La vue à 360° des cuisines

Le site propose également des fiches pratiques animées avec une version imprimable :

Les fiches pratiques animées

L’interactivité dans ce mini-site est assez limitée mais pour les bricolos en herbe il existe un logiciel de configuration 3D à télécharger sur le site principal (pourquoi ne pas proposer un outils en ligne ?).

Au final nous avons donc un site très spectaculaire visuellement avec un temps de chargement optimisé. Que demandez de plus : des bricogirls ?

Lançée en grande pompe il y a à peine 1 an, la seconde version de l’iPhone a révolutionné l’industrie du jeu vidéo avec un terminal offrant une expérience unique basée sur l’écran tactile. Un certain nombre de très bons jeux sont ainsi disponibles sur l’iPhone (lire à ce sujet : Ngmoco, le meilleur éditeur de jeux sur iPhone ?). Le problème pour les éditeurs de ces jeux est de valoriser l’expérience de jeu (le gameplay) au travers d’une interface “plate” (votre écran d’ordinateur). La plupart se “contentent” de fournir des vidéos in-game pour illustrer leur propos (”regardez comme mon jeu est bien“), d’autres vont plus loin comme Konami avec son Metal Gear Solid Touch.

Comme le jeu se manipule entièrement au doigt, le mini-site propose une expérience équivalente avec une sorte d’émulateur d’écran tactile qui met en scène une main qui vient remplacer la souris :

La page d'accueil de Metal Gear Solid Touch

La navigation dans le site se fait donc avec cette main : Il faut cliquer sur les boutons avec le doigt ou faire glisser les pages de droite à gauche comme sur l’iPhone. Un procédé original et efficace pour bien faire comprendre la mécanique du jeu.

Ce principe est appliqué à toutes les pages où il est également possible de manipuler du contenu :

La manipulation du contenu dans Metal Gear Solid Touch

Le site est un peu long à charger mais l’expérience est intéressante et retranscrit fidèlement le gameplay du jeu. Une bonne idée mais qui mériterait d’être poussée encore plus loin avec un émulateur plus complet permettant de tester le jeu (rappelons que ce jeu est vendu 5,99 E, un prix largement supérieur à la moyenne).

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…