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

Aviez-vous remarqué le carrousel du site Princess tam tam ? Il propose un défilement horizontal en simili 3D plutôt sympa car original sans trop perturber la lecture :

Le carrousel du site de Princesse tam tam

L’astuce est de courber le bas des visuels mais d’aligner le haut. La manipulation se fait de plus en douceur par ce qu’il est possible de faire défiler les visuels de trois façon différentes : avec les flèches sur les côtés de l’écran, avec les touches du clavier ou avec le minuscule curseur en bas de l’écran.

Notez qu’avec une grande sélection ce n’est pas très évident mais heureusement il y a une fonction de prévisualisation au survol de la souris :

La fonction de prévisualisation sur le carrousel du site de Princesse tam tam

Même si je pense que la mise en page n’aurait pas été bouleversée avec une barre de défilement plus haute, cet aperçu de la gamme fonctionne plutôt bien et s’intègre parfaitement à la mise en page épurée du site.

Après la grande vague des années 2000 (Boo.com, Celio…), j’ai comme l’impression que les boutiques en ligne 100% Flash font leur grand retour. Récemment se sont Converse et H&M qui s’y sont mit.

Commençons par le nouveau site de Converse (découvert chez le Capitaine Commerce) qui propose une expérience plus riche que son site satellite Converse Skateboarding. Il y a tout d’abord une page d’accueil avec un large carrousel (sobre sur le cœur de page mais chargée sur le fond et le header) :

La page d'accueil du site de Converse

Le plus intéressant est du côté des pages de liste avec un moteur de filtres très graphique :

La page de liste du site de Converse

Il y a ensuite des pages produit plutôt épurées mais avec un bon zoom :

Le zoom de la page produit du site de Converse

N’hésitez pas à faire un tour sur le configurateur (un grand classique) :

Le configurateur de Converse

Et pour finir il y a également une rubrique éditoriale avec du contenu audio (playlists) et vidéo :

Les contenus vidéo du site de Converse

Au final ils nous proposent une expérience très agréable avec une navigation intuitive, des produits bien mis en scène et surtout des URL lisibles à chaque écran (une bonne pratique).

Autre ambiance pour le nouveau site de H&M avec une mise en page flottante dès la page d’accueil :

La page d'accueil du site de H&M

Si vous cliquez sur l’image et que vous passer l’intro vous tombez alors sur une fonction étonnante, une sorte de navigateur 3D dans la nouvelle collection :

Le navigateur 3D de H&M

La navigation se fait à la souris et les produits défilent d’avant en arrière (de même que sur le côté) de façon anarchique. La manipulation de cette interface est compliquée car la souris réagit très mal (pas de support de la molette ou du clavier). Il y a également un moteur de filtre mais qui s’affiche de façon aléatoire.

Signalons également d’autres fonctionnalités comme le Style Guide qui fonctionne comme un magazine en ligne :

Le Style Guide de H&M

Dans la même série il y a aussi le Fashion Studio qui vous permet de composer votre look :

Composez votre look dans le Fashion Studio

Il y a enfin une rubrique éditoriale avec des interviews de stylistes et des reportages d’ambiance :

Les Fashion Video de H&M

Force est de constater que la forme l’emporte trop sur le fond. Comprenez par là que même si le contenu est intéressant, la mise en page flottante (menu, cœur de page…) et les fonds de page ne facilite pas le repérage et nuisent fortement à la lisibilité. J’aurais beaucoup de mal à défendre ce site car il semble sorti d’une autre époque, celle où l’on cherchait l’exploit technologique avant l’efficacité marchande ou la valorisation des produits. Bref, un contre-exemple.

Si vous n’êtes pas allez voir le nouveau site de la Camif alors je vous engage à le faire, ne serait-ce que pour le module d’essayage virtuel de matelas. Vous avez ainsi le choix entre 3 mannequins et 5 matelas :

Test du matelas en position assise

De petites séquences vidéo vous permette de tester ou de faire tester le matelas dans diverses positions et angles de vue :

Seconde vue pour la position assise

Vous pouvez aussi avoir des vues plus techniques comme le dessin de la colonne vertébrale dans la position allongée ou une animation 3D pour montrer l’intérieur du matelas :

La position allongée

Il y a enfin une vue en gros plan pour tâter l’épaisseur du matelas et apprécier le grain de la matière :

La vue rapprochée

Une réalisation sobre mais efficace au service du produit, rien à redire. Dommage qu’il n’y ai pas plus de produit en démonstration…

(merci à Julien pour le lien)

Vous connaissez Dunlop ? Mais si enfin, la marque fétiche du suédois Björn Borg (ha non mince c’est Donnay). Bon bref, ils ont besoin de se refaire un image et pour cela, rien de tel que le buzz. OK, mais pour cela il faut de la matière première… et ils ont visiblement choisi de miser sur la Volley, une chaussure mythique des années 40. Il y a donc une campagne décalée savamment orchestrée (cf. Les Dunlop Volley sont-elles les chaussures les plus hype du monde ?) et surtout un site un peu loufoque pour assurer la promotion de cette chaussure de sport.

Nous avons donc un site expérimental où se mélangent pixel design et mise en page irrationnelle avec un prime un démonstrateur de chaussure :

Le démonstrateur de la Volley

L’idée étant de pouvoir choisir son fond d’écran, son pantalon, le modèle mais également la saleté de ce dernier (j’espère que c’est de la terre battue) :

Choisissez le niveau de saleté de votre chaussure

Et comme ils sont joueurs ils proposent également des choix décalés comme cette patte de squelette sur fond d’usine à déchets :

La classe !

Il y a en prime un autre démonstrateur mais pour le laçage :

Le démonstrateur de laçage de la Volley

Voilà, précisons qu’il s’agit du site australien de la marque. Un site sans trop de prétentions mais un bon moment à passer pour interagir avec cette chaussure mythique (je me demande si je ne vais pas me laisser tenter…).