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

Et voilà, les Galeries Lafayette viennent de rejoindre le clan des cyber-marchands avec une boutique en ligne toute fraiches (il y a encore écrit “beta” dessus) : GaleriesLafayette.com. Pour les détails techniques, ça se passe sur le blog de Michael Amar.

La première impression est plutôt bonne avec une cinématique d’accueil tout en dorures et en éclats. Vient ensuite une page d’accueil très sobre qui privilégie les larges visuels avec un carrousel pour n’afficher qu’un seul produit à la fois :

L’accès aux produits se fait par marques (premier item de la liste) et par genres. Ils ont fait le choix (audacieux) de faire défiler les marques dans une frise horizontale :

Idem pour les pages de gamme qui reprennent le principe des menus en fish-eye (un peu comme le dock d’Apple) :

La fiche produit est très sobre et laisse une large place aux visuels (dommage pour cet espace vide à droite) :

Le panier est plutôt réussi avec une très bonne lisibilité :

Conclusion : une première expérience concluante. Alors bien évidemment il y a beaucoup à redire sur cette boutique (la liste du Capitaine Commerce est là : Site du jour : GalerieLafayette.com) mais le commerce en ligne est un secteur très dure où de nombreux paramètres viennent influer (dégrader ?) le résultat final. Certains observateurs sont d’ailleurs très critiques envers cette boutique : Grosse déception face à la nouvelle e-boutique des Galeries Lafayette.

Cette boutique nous prouve une fois de plus que le rich commerce est un domaine complexe avec une courbe d’apprentissage assez longue. Même avec un grand nom et de gros moyens il n’est pas possible de faire mouche du premier coup.

Vous avez sûrement du en entendre parler par le biais de nombreux billets sponsorisés publiés la semaine dernière : la Fnac vient de lancer une nouvelle version de la rubrique informatique de son site avec des composants rich commerce dedans.

Il y a tout d’abord la page d’accueil de la rubrique avec une bannière qui défile et des mini-carrousels pour les gammes de produit :

Intéressant mais la proximité (et la répétition) des flèches fait que l’on ne les distingue pas. Peut-être que des cartouches plus larges (où les produits adjacents seraient coupés en deux) permettraient un meilleure compréhension du fonctionnement…

Il y a ensuite les pages de gamme qui reprennent ce principe de mini-carrousel :

En cliquant sur le bouton vous ouvrez l’aide au choix. Ce panneau permet d’appliquer des filtres et de définir une fourchette de prix à l’aide d’une double-réglette. Des boutons contextuels apparaissent au survol de la souris sur un produit (avec un bel effet de zoom) :

Une interface intéressante mais qui mériterait l’usage de contrastes un peu plus marqués pour accentuer le guidage sur les fonctions-clés.

Il y a enfin la page produit qui permet aussi de faire de la sélection / comparaison :

Encore une fois, les cinématiques de transition sont sympa mais je ne comprends pas bien le double emploi de cette page, mais où est-donc la page produit ?

Au final nous avons une interface qui reste agréable malgré une certaine lenteur à l’affichage (très certainement dû à) l’emploi d’OpenLaszlo qui génère du Flash à la volée). Fonctionnellement tout est correct mais dans la mise en scène le jeu des couleurs ne sert pas réellement l’interface. Traduction : j’aime le vert, mais est-ce qu’il fait vendre ? Non pas réellement. Le recours à d’autres teintes aurait permis de concentrer l’attention et de guider un peu plus l’oeil.

Moralité : un bon début pour ce qui préfigure être le futur nouveau Fnac.com.

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 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 ?

Vu chez le Capitaine Commerce, ce service de recherche visuelle : Pixsta. Le principe est de favoriser la navigation empirique au sein d’un catalogue représenté sous forme de nuage de produits. Chaque clic sur un produit remet à jour le nuage avec des produits complémentaires et assortis :

L’exploration est fluide (sans rechargement de l’écran), c’est propre et intuitif, rien à redire. Ce principe de navigation empirique est redoutable et correspond tout à fait à un mode de recherche semi-passive où l’utilisateur clique sur les images sans trop réfléchir. Vous pouvez voir ce système en action sur des sites comme Elle , Marie-Claire ou Cosmopolitan.

En plus il propose un principe d’intégration en SaaS (Search as a Service) qui ne nécessite que très peu de développement. Assurément la découverte de la semaine.

Dans la lignée du billet précédent, laissez-moi vous parler du nouveau site de VW UK : fortement disruptif mais terriblement efficace. Il faut dire que les équipes de VW sont très fortes pour nous pondre des sites révolutionnaires (et je pèse mes mots) à l’image du site VW US.

Mais reparlons de l’Angleterre avec ce nouveau site qui propose des fonctionnalités riche tout à fait remarquables, à commencer par le sélecteur (new cars) :

Nous avons également la galerie d’image avec ces différents modes d’affichage qui ne sont pas sans rappeler Etsy :

Et nous avons enfin le configurateur et ces options présentées sur des pieds d’estale :

Un site incroyablement rafraichissant tant il est à l’antipode de ce que font les autres constructeurs. Ne trouvez-vous pas que l’on retrouve dans les traitements graphiques et éditoriaux une volonté d’être le Apple de l’automobile, non ?

(via RIApedia)

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)

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.

Mercedes-Benz vient de mettre en ligne sur son site U.S. un très beau showroom virtuel (cliquez sur le lien See All Models) :

Plusieurs points remarquables :

• très impressionnant car il occupe toute la largeur de l’écran ;
• les différents modèles sont présentés en situation dans un environnement qui ressemble à un showroom ;
• l’interface est agrémentée d’un glossaire et d’une aide en ligne (en haut à droite) ;
• l’utilisateur peut appliquer des filtres et trier les différentes configurations ;
• en cliquant sur un modèle, on accède à un module de comparaison ;
• il est possible de sauvegarder des comparaisons…

Bref, c’est spectaculaire et efficace. Un peu long à charger je l’accorde, mais cette fonctionnalité n’en est pas moins une très bonne pratique dans le secteur automobile.

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