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

Souvenez-vous, à l’ouverture de ce blog en début d’année dernière je vous avait parlé de Koodza, une boutique de la galaxie Decathlon qui expérimentait un certain nombre de fonctionnalités “riches” : Koodza, une boutique riche pour Decathlon. Et bien figurez-vous que l’exercice à dû être concluant car c’est maintenant le site principal Decathlon qui intègre toutes ces fonctionnalités, à commencer par un menu sur-dimensionné (”Choisissez votre sport”), un panier dépliant ainsi qu’une frise à catégories :

La page catégorie de Decathlon.fr

Mais il y a aussi de très belles pages liste avec des filtres à rafraichissements silencieux, des infos bulles géants (au survol de “+ d’infos”) et le choix de la vue :

La page liste de Decathlon.fr

Un site d’une sobriété exemplaire qui prouve que l’on peut tout à fait proposer des raffinements au niveau de l’interface quand on s’adresse à un large public. Oubliez donc vos histoire de “Est-ce que ma grand-mère saurait l’utiliser ?” et réfléchissez plutôt à ce que cela peut apporter en terme de confort d’usage.

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 ?

Ne me demandez pas la définition exacte de “inspirationnel” (il me semble que ce mot n’existe pas réellement d’ailleurs) mais je pourrais vous traduire ça par “qui donne de l’inspiration“. Decathlon nous vient ainsi de mettre en ligne un site inspirationnel pour Noël (OffrezDuSport.fr) présentant une interface tout à fait originale :

Le site d'inspiration de Decathlon

L’écran est ainsi composé d’une multitude de sillouhettes animées (représentant autant d’idées de cadeau), d’une navigation “classique” sur le droite et d’un moteur de filtre à gauche. En déplaçant les réglettes de ce moteur de filtre, vous gommez des silhouettes :

Le moteur de filtre en action

L’idée n’est pas neuve mais la réalisation est soignée. Un bel exemple… que j’ai mis dans la catégorie “Inspiration”

Décidément l’industrie automobile est une source intarissable d’interfaces riches. Aussi bien pour les mini-sites expérientiels (qui véhiculent de l’émotion et du subjectif) que pour les fonctionnalités marchandes (assistant au choix, comparateur, configurateur) que pour les fonctionnalités para-marchande (recherche d’un véhicule d’occasion, recherche d’un concessionnaire et prise de RDV…).

Bref, tout ça pour dire qu’encore une fois je vais vous parler de bagnole avec le très bel assistant au choix présent sur le site institutionnel de Ford : Ford Vehicle Showroom.

Avant de me lancer dans la description de cette interface j’attire juste votre attention sur la gestion très efficace des URLs : l’écran est vide au chargement de la page mais en fonction du choix initial (marque ou type), l’URL est automatiquement complétée. Une belle prouesse !

Ce module offre donc une vue panoramique de la gamme avec des petites silhouettes et des options de filtrage en bas  :

L'écran d'accueil du showroom

Lorsque vous passez votre souris sur un filtre (nombre de siège, consommation, prix), les indications sur chacun des modèles est affichée (ici le nombre de sièges) :

Le fonctionnement des filtres

Une fois le filtre activé les véhicules correspondant viennent sur le devant de la scène (alors que les autres se mettent tout au fond) :

La liste une fois filtrée

En cliquant sur un véhicule vous avez accès à sa fiche avec des photos en vignette (sur le bas de l’écran) et des choix alternatifs :

La fiche d'un véhicule

Le design est épuré, le chargement rapide, la manipulation intuitive, les informations parfaitement positionnées… rien à redire, c’est du grand art. En plus ce module ne pend pas beaucoup de place en hauteur, ce qui laisse de l’espace pour le bandeau de navigation institutionnel du site.

Souvenez-vous, il y a quelques semaines j’avais fais une interview Sheila Dahlgren (la directrice marketing de Scene7), elle nous avait fait une petite visite guidée de Sunglass Hut, une très belle boutique en ligne de lunettes.

A mon tour de vous en faire une visite guidée plus détaillée avec tout d’abord la page catégorie qui est bordée par les options de filtre et de tri, les modes de visualisation et les outils de comparaison / panier :

Vous remarquerez sur le bas de l’écran les zones où il est possible de mettre des articles en glissé-déposé et de lancer une comparaison :

Il y a également une page produit très sobre avec une bonne répartition de l’espace d’affichage :

J’adore cette fonction de zoom en pleine largeur de page :

Il existe également dans le site des rubriques inspirationnelles comme cet assistant de recherche par style de vie :

Pour finir, ces séquences vidéo mettant en scène les articles :

Inutile de chipoter, c’est du très bon bouleau. Pour être plus précis, il est très rare de voir des boutiques en ligne de cette qualité : mise en page, intuitivité, sophistication de l’interface, variété des contenus…