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

Voilà, comme convenu, la vidéo de notre matinée RichCommerce, en ligne.

Plan de la présentation :

1. Introduction ;
2. Qu’est-ce qu’une interface riche ;
3. Pourquoi le ecommerce a besoin d’interfaces riches ;
4. Ce que font les autres ;
5. Etude de cas : BPI / Jean Paul Gaultier ;
6. Règles d’or et conclusion.

Première partie

Deuxième partie

Troisième partie

Quatrième partie

Merci à Adobe pour toute l’aide apportée.

Merci à Riklard.com, qui a filmé, monté et mis en forme “web” le film.

MAJ (04/04/2008) : La vidéo n’est plus accessible car vous êtes trop nombreux à vouloir la visionner (et cela menace la stabilité du serveur d’hébergement). Veuillez patienter, nous cherchons une solution de secours…

MAJ (08/04/2008) : La vidéo est remise en ligne, via Dailymotion. Les deux premières parties sont en ligne. La suite probablement demain…

MAJ (09/04/2008) : OK, tout est en ligne. Ouf !

Très rares sont les boutiques en ligne qui osent casser les codes traditionnels du web design et s’aventurer dans des chemins plus expérimentaux (c’est entre autre à Etsy que je fais référence).

Je vous propose donc de découvrir une boutique d’accessoires de table tout à fait surprenante : Teroforma Webshop.

Il y a d’abord une étonnante page d’accueil où les visiteurs sont traités comme des guests qui réservent une table pour une durée limitée. Il y a ensuite cette page intérieure qui sert à la fois pour parcourir la gamme et pour configurer votre composition d’accessoires :

L’immersion est ici poussée au maximum avec un design et une mise en page parfaitement minimaliste. Le côté inspirationnel est également très présent avec une visualisation immédiate des accessoires ainsi que des effets de transition très sobres.

Bref, une boutique hors-normes à découvrir et à apprécier pour son côté expérimental.

(merci à Jérémie pour le lien)

Aviez-vous remarqué qu’il était possible sur le site American Eagle d’avoir accès à l’ensemble des produits d’une catégorie directement depuis la page produit (au survol de la souris sur le bandeau ‘View All‘) :

Au-delà de l’aspect pratique je me demande dans quelle mesure ce raccourcis ne perturbe pas la lecture de la page et surtout n’entre pas en compétition avec les pages de catégorie (qui sont tout de même faites par ça !).

(via Get Elastic)

C’était hier le lancement officiel de la V1 de AIR, la solution d’Adobe pour développer des RDA.

Une bonne occasion pour se poser la question : des RDA, pour faire quoi ?

Application professionnelle

La technologie RDA est évidement parfaitement adaptée à ce genre d’application.

Les grands éditeurs se sont précipités pour développer des clients légers, full web.

Avantages : pas de client à installer sur le poste client, pas de déploiement, pas de problème de mise à jour, …

Mais cela c’est traduit par une régression au niveau de l’ergonomie des applications, qui de plus ne peuvent fonctionner qu’avec une connexion.

Les RDA permettent d’avoir le beurre et l’argent du beurre : facile à déployer, avec un processus de mise à jour automatique, avec des interfaces très travaillées, …

On peut imaginer des applications pour les employés de l’entreprise (usage type intranet) ou pour les clients (usage type extranet).

Autres usages ?

Les RDA sont également utilisées par les entreprises comme solution pour améliorer la relation avec les clients, pour augmenter le “mindshare” de l’entreprise chez le client.

Vue de l’entreprise, on voit bien l’intérêt.

La question est plus nuancée vue du client.

Les clients vont ils installer des dizaines d’applications ?

Ils le feront si la marque inspire vraiment confiance, et si l’application apporte un vrai confort, un vrai service.

Cet usage des RDA sera donc réservé aux grandes marques, si elles font l’effort de se mettre “vraiment” à la place des clients, et de proposer des vrais services, et aux petites entreprises, qui sauront innover, et proposer un service tellement bien fait que les clients l’utiliseront, malgrés la faible notoriété de la marque.

Tous les ans aux États-Unis les vacances du mois de Mars sont pour des millions d’étudiants le signe de ralliement pour des fiestas monstrueuses et des orgies gargantuesques. Le Spring Break est ainsi une véritable institution que les annonceurs ne peuvent pas ignorer.

C’est ainsi que le American Eagle Outfitters propose une web TV entièrement dédié à cet évènement : AE Spring Break 08. Au programme : musiques, vidéos et reportages d’ambiance façon Sundance Festival. Ils proposent ainsi de couvrir trois lieux de rassemblement : Cancun, Squaw Valley et Padre Island :

Là où ça devient intéressant c’est quand ils choisissent iJustine comme ambassadrice de la marque pour couvrir les différentes manifestations mais également pour présenter les produits en contexte :

Encore une fois je suis stupéfait par la qualité de la réalisation et par l’efficacité du dispositif, c’est tout simplement remarquable. Plus d’infos ici : Video Valets: An Ecommerce Trend?.

Vu sur le site de Converse.de, une vue panoramique de leur gamme qui me fait penser à ce que propose Browse Goods (cliquez sur le lien ‘Katalog‘) :

Vu également cet assistant au choix qui me fait beaucoup penser à ce que propose Camper.es :

Vous noterez enfin le vendeur virtuel qui est omniprésent sur les différentes pages du site (une incrustation vidéo avec des séquences pré-enregistrées). C’est d’ailleurs le seul élément réellement différenciant par rapport aux deux boutiques précédemment citées, mais pas encore du niveau de ce que peut proposer l’agence Novacom.

Il faut croire que la filiale allemande de Converse maitrise plus l’art du benchmarking que celui du brainstorming (et toc !).

(via Cedric Deniaud)

Aviez-vous déjà remarqué à quel point les paniers dynamiques peuvent être incitatifs ? Mais commençons d’abord par une courte explication : j’appelle panier dynamique ces paniers qui se déplient lorsque vous ajoutez un article dedans (métaphore “Ajaxisée” du produit que l’on place dans le caddie).

Bon bref, amusez vous à remplir votre panier chez GAP et dès le deuxième article, un petit panneau supplémentaire se déploie pour vous signaler l’existence d’une promotion sur le troisième article :

Redoutable, surtout qu’avec un troisième article, on vous propose une promotion encore plus forte sur le quatrième !

Idem chez American Eagle où c’est un produit offert qui est signalé à partir du 3ème article :

Une incitation extrêmement forte pour “forcer” la vente, vous ne trouvez pas ? Tant qu’on y est, ils pourraient même inclure un petit compte à rebours pour retirer le cadeau gratuit.

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)

Mon coup de cœur de ce début de semaine, le fantastique site Shave Everywhere de Philips. Il y est question de la gamme de rasoirs pour homme, ceux qui subissent leur seconde puberté (vous comprendrez).

Le site repose sur un certain nombre de vidéos interactives (on peut cliquer dessus) qui dédramatisent le contexte d’usage du produit en misant sur l’autodérision.

Nous avons ainsi droit à une très belle parodie des films publicitaires pour tampons (”ton corp change mais ce n’est pas sale“) :

Il y a ensuite une série de dessins animés aussi hilarants qu’absurdes (vous comprendrez) :

Et vous avez enfin la description des bénéfices du produit où le speaker use et abuse de métaphores pour ne pas citer les parties intimes de l’anatomie masculine (vous comprendrez) :

Je ne peux que saluer l’excellent travail réalisé sur ce mini-site : il y a de l’ambition, des moyens et une très belle réalisation. Rien à redire, j’achète ! (via Daniel Lafrenière)

Aviez-vous remarqué que le site Rue du Commerce proposait un système de glisser-déposer pour les options et accessoires d’une produit :

A l’ouverture de la page le cadre est vide, vous pouvez alors choisir de déplacer des accessoires et services depuis deux menus déroulants. Même si l’interface fonctionne parfaitement (il est également possible d’ajouter des accessoires simplement en cliquant dessus) je doute fortement de l’efficacité de ce dispositif.

Pour être plus précis : je déconseille vivement la mise en œuvre de cet élément d’interface. Même si ce type de manipulation (le glisser-déposer) est courante au sein d’applications, il en va tout autrement pour un site web, de surcroit pour une boutique en ligne qui semble statique au premier coup d’œil.

C’est un dispositif à faible affordance. Traduction : il y a très peu de chance pour que les internautes comprennent qu’ils peuvent faire un glisser-déposer avec les options et accessoires. C’est prendre un très gros risque que de proposer ce mode d’interaction sur les accessoires car c’est là où le distributeur réalise ses plus grosses marges.

Après ça, je me dis qu’un peu d’innovation ne fait pas de mal et qu’il serait dommage de sanctionner cette initiative. Voici donc mes recommandations :

1. Le glisser-déposer n’est pas un mauvais système, par contre les internautes ne s’entendent pas à la trouver dans une page web, mieux vaut alors leur signifier de façon plus explicite comment ça marche (une petite cinématique ou une info-bulle à l’ouverture de la page)
2. Le glisser-déposer fonctionne généralement dans les deux sens, idéalement les internautes devraient également pouvoir retirer une option en glisser-déposer (ex. sur le site Panic Goods)
3. Le glisser-déposer ne doit en aucun cas être le seul mode d’interaction, il faut proposer une alternative de préférence explicite (ex. un petit bouton [+])

Voilà, connaissez-vous d’autres exemples d’implémentation du glisser-déposer ?