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

Vous connaissiez déjà le zoom automatique des fiches produit de GAP, mais connaissiez-vous le zoom automatique de Zazzle ?

Le principe de fonctionnement est le même (le zoom se fait de façon automatique au survol de la souris) mais l’action se déroule ici directement dans la liste des produits. Illustration avec la page d’accueil :

La page d'accueil de Zazzle

Dès que je passe ma souris sur une vignette (comme ici celle de la carte avec le papillon), il y a un zoom automatique qui est en prime repositionable (en bougeant la souris) :

La même page d'accueil avec un survol de la souris sur le papillon

C’est un peu perturbant au début amis terriblement addictif : on se surprend à survoler toutes les vignettes ! Cerise sur le gâteau, ce n’est même pas du Flash (pour les allergiques).

(via Ajaxian)

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 !

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.

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.

Si vous souhaitez mettre en œuvre des interfaces riches au sein de votre boutique en ligne, plusieurs options s’offrent à vous : soit vous sortez l’artillerie lourde et partez pour une refonte complète (un site 100% Flash à l’image de ShopComposition) soit vous optez pour un déploiement plus léger avec de l’Ajax par ci-par là (comme chez GAP).

C’est de ce second cas de figure que je souhaite vous parler avec cette superbe boutique qui pratique l’enrichissement progressif : American Eagle Outfitters. C’est un site à priori en HTML sauf que certaines partie des écrans sont en fait bien plus dynamiques que l’on ne pense.

Première illustration avec les quatre liens ‘Find a Store‘, ‘Trak Order‘, ‘Shopping List‘ et ‘My Bag‘ qui déplient des mini-panneaux au survol de la souris :

Deuxième exemple avec cette page catégorie où un survol sur les étiquettes à gauche de la photo permet de changer la couleur du sweat :

Troisième exemple sur cette page produit où il possible de changer le motif et modifier la vue du produit sans avoir besoin de recharger la page (vous noterez au passage le bouton ‘View Larger‘) :

Dernier exemple sur cette autre page produit où il est possible de faire tourner le mannequin pour voir le produit sous différents angles :

Serais-je tombé amoureux de cette boutique en ligne ? Oui complètement. Je suis ébahi par les trésors d’inventivité déployés par ce site marchand (ils proposent par exemple un check out sans création de compte). Une véritable mine d’or de bonnes pratiques.

En tout cas un très bon exemple de parfait équilibre entre efficacité marchande et sophistication de l’interface.

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…

Aviez-vous remarqué le zoom automatique sur les photos de produits chez GAP ?

Lorsque vous êtes sur une page produit, plutôt que de vous proposer le traditionnels ‘Clic for Zoom‘, un survol de la souris sur la photo affiche automatiquement une loupe sur le côté de l’écran (avec un prime un effêt fondu).

C’est très malin car en règle générale, l’oeil suit le mouvement de la souris (et inversement). Partant du principe que si votre souris traîne sur la photo d’un produit alors il y a de fortes chances que vous soyez en train de détailler cette dernière, donc vous avez besoin d’un zoom pour afficher les détails.

Et hop, un clic de gagner !

Nous pourrions dire la même chose des autres vignettes proposées sous la photo principale : un survol affiche la nouvelle photo sans avoir besoin de cliquer dessus.

Décidément je suis réellement admiratif du travail réalisé par les équipes GAP.

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

Amazon vient juste de lancer une boutique en ligne indépendante de chaussures et de sacs à main : Endless. Cette boutique propose une expérience tout à fait intéressante avec un principe de navigation riche (ou du moins semi-riche).

Une boutique semi-riche dans la mesure où les pages sont en HTML classique mais où le mode d’accès aux produits (navigation et système de filtre sur la gauche de l’écran) sont dynamisés avec de l’AJAX. Un compromis fort intéressant car le site est rapide, réactif et le processus de choix est très intuitif : des filtres successifs (par marque, gamme de prix, couleur…) sont activés et le choix est restreint automatiquement.

Bref, c’est de l’Ajax parfaitement dosé qui me fait penser à la boutique PimperLime ouverte par GAP.

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

J’ai déjà eu l’occasion de vous parler de Riya (un service de reconnaissance faciale) ainsi que de Sparkle Like The Stars (un blog marchand sur les bijoux des people), mais saviez-vous qu’il était possible de mélanger ces deux concepts ? C’est maintenant chose faite avec Like, un moteur de recherche visuelle à vocation marchande.

Ce service exploite le moteur de reconnaissance graphique de Riya pour isoler un objet et trouver des produits équivalents :

Ce qui est remarquable avec ce service c’est qu’il est également possible d’affiner sa recherche en fonction d’une couleur, d’un motif ou d’une forme (par exemple avec ce bracelet croco) :

On peut également limiter la recherche en fonction de critères plus simples comme le prix, la marque…

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

Si comme moi vous avez de petits soucis pour accorder vos fringues (je suis daltonien) alors voilà ce qu’il vous faut : le Smarter Visual Search.

Il s’agit d’un outil qui permet de mieux accorder les combinaisons de couleurs et faire une recherche de vêtements avec les couleurs correspondantes. C’est tout à fait le genre de service en ligne qui permet de se différencier et de gagner la confiance des utilisateurs. Dommage qu’ils ne fassent pas ça pour les cravates également !

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