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

Mais si, vous savez bien, on rajoute a côté de son site marchand classique un site plus fun.

Christian Lacroix l’a fait il y a quelques temps, avec La Redoute.

Ici, c’est un site américain de vente d’accéssoires pour la jardinage.

Voici le site marchand d’origine :

Et voici le site flash, qui met en scène les produits :

Le site à bien plut à notre Capitaine.

Pour ma part, je trouve qu’effectivement, c’est très bien réalisé.

Mais que c’est lourd !

Chaque clic demande un chargement, qui rend la navigation pratiquement impossible (en tout cas avec mon abonnement ADSL actuel).

Autre axe d’amélioration : le lien entre le site flash et le site web n’est pas optimum. On doit cliquer sur « acheter » sur le site flash, puis de nouveau « acheter » sur le site web. Un clic de trop !

La consécration pour Sébastien avec son passage au JT de PPDA himself .

Allez, je ne résiste pas à vous montrer la tête de Sébastien :

Très bon reportage, qui explique à la manière « jt » (tout est simple et illustré…) que ça booste les ventes, parce qu’on peut essayer avant d’acheter, et puis parce qu’on a envie d’acheter l’ensemble qu’on a pris soin de coordonner.

Potoroze propose des fonctions pour aménager virtuellement votre intérieur :

Observez en particulier la facilité pour placer un meuble (2/3 de la vidéo environ) ou la façon dont on déplace une horloge murale, qui « sait » rester « aimanté » contre le mur !

Bravo Sébastien pour cette nouvelle démonstration !

L’approche « beurre et argent du beurre », vous connaissez ?

L’idée, c’est de garder son site marchand « classique » : catalogue, fiche produit et processus achat, et d’ajouter d’autres sites, périphériques, plus fun, plus expérimentaux, qui renvoie sur le site marchand au moment de choisir un produit.

C’est ce qu’on fait Christian Lacroix et La Redoute, avec ce site :

Il s’agit d’un univers, bâti autours d’une gamme de produits.

Pour l’internaute, c’est une balade « immersive », initiatique.

C’est également construit comme un jeux.

Maintenant, il s’agit de mettre en scène des produits, qu’on peut voir :

Vous l’avez compris, un clic sur « Je craque » et hop, on atterrit sur le site marchand, le vrai  :

Le site a été réalisé avec Flex.

(merci Michael)

Avimust est un moteur de shopping, qui met la vidéo au cœur de son offre. Et comme les vidéos sur les produits sont souvent inexistantes, avimust propose à ces utilisateurs de réaliser eux même ces vidéos, avec, pour motiver les foules, un système « incitatif » (« vous pouvez gagner un beau cadeau : un ordinateur portable, … »).

Un petit exemple de vidéo, trouvé sur ce site :

Le service est « jeune », mais l’idée est intéressante. A suivre donc.

(merci Manu)

Un des aspects tout à fait fondamental, quand on développe un site « riche », c’est la technologie : Flash ou Ajax ?

Les avantages d’Ajax sont nombreux, mais il y a quelques « points durs » :

• C’est compliqué et difficile d’écrire une application Ajax, le code est réparti entre le serveur et les clients ;
• Le code doit s’adapter aux différent navigateurs.

Le dernier point est vraiment un aspect très délicat. Le Javascript (langage de programmation côté client donc) est différent, suivant le navigateur, avec de grosses différences, même entre plusieurs version d’un même navigateur (je pense bien évidement à Internet Explorer 6).

Google propose une alternative : GWT.

GWT permet de développer son application 100% en Java.

Le développeur est donc dans un environnement unique (un seul langage) et peut mettre au point son application plus simplement.

Ensuite, GWT génère le code qui va bien. Le programmeur n’a donc pas à écrire du JavaScript, c’est le générateur de Google qui s’en charge.

Sur le principe, je trouve cette approche très intéressante et je sais qu’il y a une communauté de « fan » (hello Didier).

Maintenant, la question est : existe-t-il des services grand public basés sur cette technologie ?

La mise en ligne de la vidéo a été un peu longue. Juste un petit billet pour vous dire que tout est en ligne :

Les slides sont ici.

Les vidéos sont là.

Merci pour votre patience !

J’étais donc aujourd’hui à l’évènement OnAir.

En voyant toutes ces démos, Flex, Air, un point m’est apparu particulièrement clair : l’utilisation des animations pour « donner du sens ».

Quand on voit les interfaces proposées par Apple, on n’a pas de doute : les animations dans les interfaces sont là non pour décorer, pour faire joli, mais pour aider l’utilisateur à « sentir » la métaphore, utilisée dans l’interface.

L’exemple le plus marquant sur Mac est probablement TimeMachine avec une interface de « machine à voyager dans le temps ».

Sur iPhone, c’est toute l’interface qui est ainsi animée. C’est logique : on a un écran plus petit, un mode d’interaction simplifié (pas de souris). La qualité de « l’immersion dans la métaphore » est encore plus importante.

Adobe, avec les technologies Flash, Flex, Air, est sur le même paradigme. L’idée que demain les applications seront encore plus animées, avec plus d’effets graphiques.

Ces nouvelles interfaces sont bien là pour donner plus de sens, pour aider l’utilisateur à mieux comprendre l’application.

Celà passe donc par des technologies, mais cela passe surtout par un savoir faire, que doivent avoir les concepteurs des applications.

Et à ce niveau là, on va évidement avoir un « goulot d’étranglement » parce que très peu de monde maîtrise la conception de tels applications.

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 !

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.