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

Vous connaissez déjà la boutique de GAP avec ces panneaux flottants qui permettent d’avoir un aperçu de la fiche produit (bouton « Quick Look » qui apparait au survol de la souris) également disponible sur les autres sites la marque (Old Navy, Banana Republic, Piperlime) :

Mais saviez-vous que cette technique à fait des émules : Timberland propose ainsi un système équivalent mais qui introduit des petites nouveautés intéressantes comme les petites flèches « < Previous item | Next item > » qui permettent de passer au produit suivant de la liste :

Vous remarquerez que cette navigation latérale est parfaitement cohérente avec ce qui est proposé dans la page produit (en haut à gauche) :

Vous apprécierez au passage la remarquable exploitation de l’espace dans cette page produit, c’est d’une très grand clarté (en tout cas moi j’adore).

Et tant que j’y suis, êtes-vous aller faire un tour du côté de leur configurateur :

Là encore une très belle réalisation : mise en page impeccables, sonorisation discrète mais percutante…

Laissez-moi vous parler de Koodza, il s’agit d’une boutique en ligne qui appartient à Decathlon et qui cumule des caractéristiques tout à fait intéressante : mise en page soignée, très bonne ergonomie et surtout utilisation intensive d’interfaces riches, ce qui est plutôt rare pour une réalisation française.

Nous avons ainsi dans cette boutique :

• un maxi-menu déroulant (« Choisissez votre sport« ) ;
• une frise horizontale des sous-catégories (en fluo dans la capture) ;
• un rafraichissement automatique de la page lorsque l’on actionne les filtres (en fluo dans la capture) ;
• des infos-bulles géantes au survol des liens « +d’infos« 
• un panier qui déroule au clic de la souris
• …

Bref, c’est du très bon boulot et en plus c’est une réalisation française ! Un bel exemple à suivre.

Cerise sur le gâteau : un des responsable du site (Jérôme) rédige également un blog dédié au e-commerce : Ikom.

(via Imazine)

Je vous propose de découvrir un système de navigation 3 en 1 chez Burton : navigation principale + navigation locale + chemin de navigation avec possibilité de passez d’une branche à une autre (Men, Women, Youth). Et en prime ça ne prend pas trop de place sur le haut de la page :

Vous remarquerez au passage que les planches peuvent être comparées à l’aide de différents critères (5 en tout) mais qu’ils proposent une lecture simplifiée à l’aide d’un critère unique (baptisé ‘feel‘).

Au niveau de la fiche produit, on retrouve ce même système de navigation mais avec l’affichage de l’intégralité de la gamme au survol de la souris sur le picto avec les silhouettes des planches :

Ce système est très intéressant car intuitif et surtout très économe en place. De plus, les URL sont lisibles. Un bon exemple à mettre dans vos benchmarks.

/!\ Billet initialement publié sur FredCavazza.net.

J’étais ce matin chez Adobe pour assister à une démonstration de la gamme Scene7 (une plateforme de services pour l’e-commerce). Parmi les nombreuses démonstrations, j’ai particulièrement apprécié celle de David’s Bridal, un site de vente en ligne de robes de mariée (entre autre).Ils proposent ainsi de jouer des courtes séquences vidéo dès la page de catégorie (db Online Collection) :

Ces courtes séquences vidéo sont très appréciables, notamment pour évaluer la texture de la robe et voir comment elle tombe. Ce que je trouve particulièrement intéressant, c’est d’avoir fait cela dans un contexte de comparaison.

C’est à la fois ludique et parfaitement immersif. D’autant plus que ces séquences vidéo sont disponibles en plus grand format une fois sur la page produit. Bon par contre cela réclame un investissement conséquent pour tourner les séquences vidéo.

/!\ Billet initialement publié sur FredCavazza.net.

Philips vient de lancer une nouvelle version de son showroom en ligne avec un très beau product selector :

Cette interface riche a été réalisée avec Flex et je ne lui trouve pas beaucoup de défauts :

• une structure légère et fluide (surtout dans les effets de transition) ;
• des bandeaux d’ambiance qui “réchauffent” les pages de catégories et sous-catégories ;
• des URL lisibles à chaque action de l’utilisateur (pour les favoris et les moteurs de recherche) ;
• un moteur de comparaison et de filtre (sur la partie gauche de l’écran).

Rien à redire, c’est du très bon boulot. Cette interface de recherche apporte à la fois plus de confort, de souplesse et d’efficacité.

/!\ Billet initialement publié sur FredCavazza.net.

Je viens de découvrir le nouveau site de Fiat en Angleterre (Fiat.co.uk) qui fait un usage intensif de la 3D :

Un site tout en Flash avec de la vidéo grand format et des commentaires audio. L’accessibilité n’a pas été totalement oubliée puisqu’il existe une alternative dans le code source, puisque les commentaires sont sous-titrés (c’est déjà ça) et puisque les URL sont lisibles.

Sinon ce site est un modèle de richesse :

• Présentation de la gamme au sein d’un showroom 3D très réussi ;
• Présentation de chacun des modèles avec une cinématique très impressionnante ;
• Assistant au choix (Help me choose) à partir des critères suivants : prix, performances, consommation et capacité ;
• Configurateur entièrement visuel ;
• Comparateur de modèles, Dealer locator avec images satellite…

La navigation est très simple et efficace (copie quasi conforme du site de Cadillac avec le logo au centre, mais avec un effet de transparence en plus). Le site est remarquablement clair et intuitif, les fonctions clefs sont facilement identifiables et surtout présentées en contexte.

Cerise sur le gâteau, une petite touche d’humour très british dans le commentaire du Doblo.

Voilà en tout cas un très bel exemple de ce qu’il est possible de faire avec de la 3D. Pour l’instant tout est pré-calculé, mais on peut rêver à un avenir proche où les showroom seront entièrement dématérialisés et où l’on pourra circuler dans un environnement 3D et même se téléporter sur un circuit ou en ville pour faire un petit essai virtuel. (Merci à Cédric pour le lien et l’analyse rapide)

/!\ Billet initialement publié sur FredCavazza.net.

Suite à un précédent billet sur un moteur de recherche marchand (BrowserGood, à mi-chemin entre Google Maps et Amazon), je vous propose de découvrir un autre concept d’interface marchande : Shopping Path.

Le principe de cette interface marchande comparative est de reproduire le mode de visualisation et le comportement du Dock de Mac OS avec un principe de grossissement au survol de la souris dont vous pouvez voir un exemple sur le site CrispyShop qui exploite le catalogue de Yahoo! Shopping.

Concrètement, vous choisissez une catégorie et les différents produits sont alors tous affichés à l’horizontale :

L’interface est composée de différents éléments :

• à gauche de l’écran les filtres qui permettent d’affiner la recherche ;
• sur le haut de l’écran, les clés de tri (en fonction du prix, du poids…) ;
• juste en dessous l’échelle où sont alignés les produits ;
• puis les vignettes des produits qui grossissent au survol de la souris ;
• une info-bulle avec les détails du produit en cours de visualisation ;
• des boîtes correspondant aux produits sélectionnés avec les prix sur les sites de différents distributeurs ainsi que les avis des clients ;
• il est possible de sélectionner différents produits, cela rajoute des onglets et insère des étoiles de couleur sur la courbe en haut de l’écran.

En termes de réalisation je n’ai pas grand chose à dire : c’est propre, rapide, intuitif et terriblement efficace. Inutile de dire que cette interface n’est pas du tout accessible, mais là n’est pas la question. Ce mode de recherche représente en effet une rupture tellement importante par rapport à ce que nous connaissons qu’il ne peut être proposé qu’en second choix (le premier choix étant plus classique et pouvant être accessible).

Bref, du beau boulot et encore de très bonnes idées. Et vous, ça vous semble intuitif ? Réaliste ?

/!\ Billet initialement publié sur FredCavazza.net.

Après Like, voici venir une nouvelle interface riche dédiée au shopping : Browse Goods.

L’interface est à mi-chemin entre celles de Smart Money et de Google Maps : un gigantesque catalogue où les produits sont regroupés en catégories, familles, sous-familles… à l’intérieure desquelles il est possible de zoomer. Des infos-bulles permettent d’avoir le détail du produit (voir la capture d’écran ci-dessus) , et il est également possible de faire des recherche :

Chose très intéressante, cette interface a été développée par une société nommée Dotted Pair qui serait financée par Amazon. Si cette rumeur était confirmée, cela prouverais la volonté d’Amazon de se diversifier (en plus d’autres initiatives comme Endless ou Amapedia).

Inutile de préciser que cette interface n’est pas accessible et que les produits qui y sont présentés ne sont pas référencables par les moteurs de recherche. Qu’importe, Browse Goods n’est qu’une manière supplémentaire de parcourir et d’accéder aux fiches produits du très vaste catalogue d’Amazon, c’est comme une entrée secondaire.

/!\ Billet initialement publié sur FredCavazza.net.

Je viens de tomber sur une interface riche qui va directement rentrer dans la liste de mes meilleurs exemples : Sqoops. Il s’agit d’un site de vente en ligne de jeux vidéo qui fait une utilisation intensive mais judicieuse de Flash pour son interface de recherche :

Voici pourquoi l’utilisation de Flash est judicieuse dans ce cas précis :

• la nature du produit (les jeux vidéos) et le public visé (les jeunes et jusqu’à 35 ans) justifie l’utilisation d’une interface qui sorte de l’ordinaire (par rapport à un banal formulaire) ;
• le secteur de la vente de jeux vidéos est ultra-concurrentiel, il faut donc se démarquer ;
• la représentation flottante des boîtes des jeux ainsi que les curseurs en bas de l’écran n’est pas sans rappeler les interfaces des jeux vidéos eux-mêmes ;
• l’activation du filtre par genre entraîne une modification du fond (qui devient contextuel) ;
• le comportement des info-bulles géantes au survol de la souris est agréable et intuitif ;
• la fiche des jeux reprend le même principe avec des copies d’écran qui flottent.

Oui je sais cette interface n’est pas du tout accessible, mais il suffit juste de prévoir une version HTML. En attendant, l’expérience est tout à fait saisissante et l’on se surprend à explorer un catalogue de jeux que l’on connaît par coeur mais dont la manipulation est hypnotisante.

Cet exemple n’est pas forcément à reproduire dans un autre contexte mais il donne de bonnes idées…

/!\ Billet initialement publié sur FredCavazza.net.

La marque américaine Saturn vient de lancer une campagne de publicité en ligne tout simplement renversante : à partir d’un système de géo-localisation des utilisateurs (via l’adresse IP et une technologie propre à Google Local), la bannière affiche une vue plongeante depuis l’espace (via Google Earth) qui grossit jusqu’à afficher la vue aérienne du concessionnaire de votre région et enchaîne sur une vidéo du patron (via Google Vidéo) qui vous fait l’article de la dernière Saturn.

L’effet visuel est tout simplement ahurissant, et vous pouvez en avoir un aperçu ici : Saturn Detour.

On commence par une vue depuis l’espace :

… puis une vue de la région :

… puis une vue de la concession :

… et enfin la vidéo du patron :

Voilà de quoi vous faire apprécier les bannières à nouveau ! (via Three Minds)

/!\ Billet initialement publié sur FredCavazza.net.