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

J’ai toujours été fan des menus de navigation surdimensionné et du coup je suis tout à fait en phase avec le dernier article du blog de Get Elastic : Navandising: Merchandising in Navigation. L’idée est d’appliquer des techniques de merchandising (mise en avant de produits) aux menus de navigation. Bon par contre ça ne s’applique qu’aux boutiques proposant des panneaux de navigation suffisamment grands pour pouvoir y insérer des blocs.

L’auteur de l’article cite ainsi American Eagle (que l’on ne présente plus) :

Le merchandising des menus de navigation chez American Eagle

Mais on peut également découvrir le site de Moosejaw :

Les encarts sur la navigation de Moosejaw

À ces deux exemples je rajouterais ceux de Electronic Arts :

Mise en avant de produit chez EA.com

De même que le site de Sony :

Catégorisation avantageuse chez Sony.fr

Et enfin le site de Yves Rocher :

Les panneaux de navigation du site de Yvers Rocher

Une très bonne idée, que se soit pour mieux guider les internautes ou pour mettre en avant des produits. Si vous connaissez d’autres exemples, merci de laisser les URLs en commentaire.

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)

LetsBuyIt.fr vient d’ouvrir ses portes en France (j’en ai parlé dans ce billet).

LetsBuyit est un moteur de shopping, dont l’une des innovation est l’interface.

L’interface est en effet conçue avec trois volets :

• La partie de gauche, qui est plutôt la partie « classique » du moteur de shopping, avec la présentation des produits, des marchands…
• La partie de droite, qui est centré sur l’utilisateur (mon compte, mes produits préférés, …)
• La partie centrale, qui est une zone graphique, et qui présente « différemment » les produits et les marchands.

On peut zoomer une zone, avec un effet de glissement horizontal. Exemple avec l’espace personnel ouvert :

Ce qui est vraiment intéressant avec ce service, c’est l’intégration assez poussé entre de l’Ajax et le Flash.

Bien sûr, l’espace central est en flash :

le système de navigation horizontal est en Ajax (un vrai challenge, bravo Olivier et toute l’équipe !).

L’intégration entre les différentes technologie est vraiment poussée : on peut même faire du drag & drop du flash vers l’ajax !

J’ai déjà eu de nombreuses occasions de vous parler des carrousels, ces éléments d’interface qui permettent de parcourir une liste de façon latérale. Le vidéo-blog Smart Experience nous propose à ce sujet une très bonne vidéo qui résume les avantages de cette technique : Interaction Design Skills: Carousels.

Les points-clés de cette vidéo :

• Les carrousels fonctionnent partout (web, desktop, mobile) car ils reposent sur le principe de la manipulation directe (tactile ?) ;
• Les carrousels sont particulièrement bien adaptés aux images (comme chez Cooliris par exemple) ;
• Les carrousels sont avant tout destinés à du survol rapide plutôt que de la recherche précise (pour cela les moteurs ou arbres sont bien plus efficaces) ;
• Les carrousels permettent d’anticiper la navigation en proposant un aperçu de l’item suivant (comme sur le site d’Apple).

Bref, vous n’avez plus aucune raison de vous laissez tenter par les carrousels. (via Konigi)

Voilà un certain temps que je publie des exemples d’interfaces riches appliquées au e-commerce sur ce blog, mais je me rends compte que je n’ai jamais réellement pris le temps de bien définir les différentes types d’interfaces. Différents types ? Mais oui enfin, car le rich commerce est avant tout une histoire de modules : Il serait suicidaire de concevoir une boutique entièrement en Flash (quoi que certains s’y risquent encore), la tendance est plus à l’enrichissement des interfaces ou plutôt d’éléments d’interfaces.

Mon raisonnement est le suivant : à chacune des étapes du cycle d’achat correspondent des types de modules marchands « riches ». Ceci est synthétisé dans le schéma suivant où les types de modules sont répartis sur les différentes étapes :

Les étapes du cycle d'achat

Chacun de ces modules remplit une fonction bien précise et n’est pertinent qu’à une étape donnée du processus.

Mais il est également possible de regrouper les modules marchands en familles : Accès (pour amener l’internaute jusqu’à la fiche produit), Aide au choix (pour le guider dans sa décision), Mise en scène (des produits / services), manipulation et transaction.

Les familles de modules marchands enrichis

Voilà, nous avons maintenant une classification exhaustive des différents types de modules marchands enrichis. Ceci pourrait nous servir de glossaire car j’ai un peu tendance à jargonner dans ce blog.

Si vous voyez d’autres types de modules ou de familles, n’hésitez pas à vous manifester dans les commentaires.

Vu sur le site de JCPenney :

A voir directement sur le site : tout est animé. Le mannequin central vient vers vous, et les petites imagettes, sur le côté, s’animent régulièrement, pour vous inviter à « venir voir ».

Mis en œuvre avec Scene7.

Incroyable, comment de très grands sites n’arrivent pas à bien maîtriser les interfaces riches.

Je pense à VoyageSncf et ebay (voilà, j’ai balancé ).

Donc, ces deux sites mettent en oeuvre de nouvelles interfaces, utilisant l’ajax, pour accélérer, simplifier, améliorer l’interface.

Bonne idée à priori…

Mais voilà, Ajax, c’est très compliqué à bien mettre en oeuvre.

Sur les exemples cités, on arrive à des résultats vraiment incroyables.

Sur l’un des sites, il y a simplement des options qu’on ne peut plus activer !

Sur l’autre, le formulaire est régulièrement réinitialisé !

Franchement, si je devais conseillé ces entreprises, mon conseil serait très simple : revenez au fondamentaux. Il vaut mieux un site « web 1.0″ qui marche bien qu’un site « 2.0″ inutilisable.

Un tel billet sur Rich commerce ?

Oui, trois fois oui !

Dans rich commerce, il y a commerce. C’est le but. Si une interface n’aide pas à vendre, il ne faut pas l’utiliser !

Maintenant, tout le monde a bien compris que l’avenir de la publicité passait par Internet.

On a donc sur ce média des budgets importants.

Souvent, quand on voit les pubs, on ne cherche qu’une chose : les virer. Mais certaines sont vraiment très réussies.
Exemple : Adidas avec cette pub carrément bluffante :

A essayer absolument : c’est très difficile à raconter mais vraiment à voir.

(merci manu, tobias)

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.