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

Vu chez Crate & Barrel ce panier en bas de page pour avoir une vision d’ensemble sur les produits ajoutés :

Le panier de bas de page chez Crate & Barrel

Comme l’emplacement n’est pas évident, une petite cinématique permet de mieux comprendre son fonctionnement : lorsque vous ajoutez un produit, la barre de bas de page flash en bleu et les produits déjà présent se poussent pour laisser de la place au nouveau produit.

Petit détail sympathique, la possibilité de modifier les quantités au survol de la souris :

Le changement de quantité du panier de Crate & Barrel

Un bon exemple de remis en question des “conventions” communément admises pour les boutiques en ligne avec un panier toujours en haut à droite.

(via I Love Web)

Oyé oyé braves gens, Uniqlo – la célèbre marque japonaise fashion à petits prix – lance une offensive sur notre hexagone : Uniqlo débarque en France. Non content de finaliser l’ouverture d’un super-store en plein cœur de Paris, ils nous gratifient d’un très beau site web : uniqlo.com/fr.

Le site donne le ton avec une page d’accueil au format mosaïque :

La page d'accueil d'Uniqlo

Ils proposent une page très originale d’introduction à la marque et aux produits sous forme d’une image page déroulante :

La page d'introduction à Uniqlo

Il y a ensuite la page des collections avec sa galerie de modèles :

La page des collections d'Uniqlo

Et même s’il n’y a pas (encore) de fonctionnalités marchandes, j’apprécie particulièrement l’Explorateur :

L'explorateur de produits d'Uniqlo

Mais il y a également une mini-boutique dédiée aux T-shirts (Uniqlo UT) ainsi que son interface exploratrice (UT Zoom) :

La mini-boutique de T-shirts d'Uniqlo

Signalons enfin le très beau calendrier animé avec ses musiques cheap et ses films en tilt-shift :

Le calendrier d'Uniqlo

Non seulement ce calendrier vous renseigne sur le temps (possibilité d’en faire votre économiseur d’écran) mais il vous permet également de découvrir la collection :

La collection au sein du calendrier Uniqlo

Bref, c’est une incroyable immersion dans l’univers coloré et trendy de la marque et un concentré de bonnes pratiques.

Puma s’apprête à lancer une nouvelle ligne de sous-vêtements et pour faire parler d’elle, la marque au félin a décidé de miser sur le charme pour promouvoir ses produits. Ils lancent donc le Puma Index (pas encore ouvert), un site où les mannequins se déshabillent en fonction des indices boursiers :

Une campagne qui repose avant tout sur des séquences vidéo et de jolies filles :

L'index de Puma en action

Il y a en tout 3 filles pour 3 indices (Dow-Jones, Dax et S&P/ASX 200) :

Les 3 indices du Puma Index

Et ils ont même prévu une version iPhone avec en prime un modèle mâle :

La version iPhone du Puma Index

Cerise sur le gâteau : montrez votre application iPhone à un vendeur et vous bénéficierez d’une réduction de 20%.

Redoutable.

(via Amnesia)

Avoir la possibilité de zoomer sur une photo est à mon sens une fonctionnalité essentielle à toute boutique en ligne, et plus particulièrement pour celles qui vendent des vêtements, sacs ou autres articles qui ont besoin d’être touchés pour être achetés. Avec un zoom performant il est ainsi possible de procurer une sensation proche du touché en permettant aux internautes d’observer le produit dans ses moindres détails et surtout de mieux appréhender la texture des matériaux.

C’est dans cette optique d’étude au microscope que je vous propose de découvrir ces quelques exemples de zooms assistés : Delve Into the Details with Guided Zoom. Le principe est de fournir aux internautes des points de détails à observer comme sur la boutique de Exofficio :

La page produit d'Exofficio

Un clic sur la photo et vous avez la fonction de zoom (propulsée par Scene7) et une série de vignettes sur le côté qui vous amènent directement sur les points d’intérêts avec un beau scrolling :

La fonction de zoom assisté chez Exofficio

Vous remarquerez que les vignettes changent aussi de couleur quand vous cliquez sur les vignettes en bas de page.

Autre exemple avec Telescope.com où les vignettes sont affichées en superposition de la fenêtre de visualisation directement dans la fiche produit :

Le zoom assisté chez Telescope.com

Cette seconde solution est peut-être un peu perturbante pour l’utilisateur car cela surcharge la page. Idéalement il faudrait faire apparaitre les vignettes au survol de la souris et proposer un bouton pour afficher le zoom dans une fenêtre à part.

Mise à jour (17/09/2009) : Laurent Jouanneau me précise que Zoomorama propose une fonctionnalité similaire sur le site de Darty (uniquement sur la gamme appareils photo reflex) :

Le zoom assisté chez Darty

Aviez-vous remarqué que pour certaines activités, les sites et boutiques en ligne proposent toutes des fonctionnalités “standards”. Dans l’automobile par exemple vous retrouvez presque systématiquement une vue à 360° et un teintier. Dans les boutiques de fringues c’est à peu près la même chose, surtout pour celles qui vendent des jeans : on retrouve toujours un “Fit Guide” pour aider le client à choisir la forme de son jean.

Illustration chez Gap avec le module Fit Spotlight qui aligne une série de modèles (H/F) animés :

L'assistant au choix de jean de Gap

Lorsque vous passez la souris sur un modèle, celui-ci s’avance :

L'assistant au choix de jean de Gap avec un zoom sur un modèle

En cliquant sur ce modèle, vous avez accès à une vidéo explicative du designeur (il explique le pourquoi du comment) ainsi qu’une vue à 360° avec des points d’intérêt :

La vue détaillée d'un modèle de jean chez Gap

Vous avez aussi un moteur d’inspiration avec 3 déclinaisons possibles par modèles et une belle séquence animée :

Le moteur d'inspiration de Gap

Vous pouvez trouver à peut près la même chose chez 77kids (American Eagle) mais en moins sophistiqué :

L'assistant au choix de jean chez 77kids

J’ai une préférence pour l’assistant de Gap car il propose plus de contenus mais les deux fonctionnent bien. Avez-vous d’autres exemples ?