RichCommerce.fr Tout savoir sur les interfaces riches appliquées au e-Commerce

Si vous lisez ce blog régulièrement alors vous devez être au courant de mon intérêt pour le minimalisme (bon OK, j’exprime plus cet intérêt sur mon autre blog SimpleWeb.fr). Toujours est-il qu’Apple avait (encore une fois) enchanté la communauté des designeurs avec une astuce visuelle toute simple sur sa page d’accueil : n’afficher que le visuel du produit pendant quelques secondes avant de faire apparaitre le reste des éléments graphiques (menu de navigation, cartouches, liens…).

La page d'accueil d'Apple avant et après

La page d’accueil a été renouvelée depuis, mais l’effet était saisissant. Cette astuce visuelle venait ainsi confirmer le vieil adage : une interface atteint sa perfection non pas quand on ne peut plus rien ajouter, mais quand on ne peut plus rien retirer.

Sur le même principe, la maison Piaget propose le même effet visuel, mais inversé : tous les éléments de la page disparaissent au bout de quelques secondes à l’exemption de la montre :

La fiche produit de Piaget avant et après

Là encore l’effet est de toute beauté et permet de concentrer toute l’attention sur le produit.

Simple et efficace, tout ce que j’adore !

L4année dernière j’avais présenté un bel exemple de site à double interface : Avec ou sans Flash ? l’exemple Rolex. Je vous propose de rester dans le monde de l’horlogerie avec le très intéressant site d’IWC. Intéressant pourquoi ? Parce que ce site n’est ni en Flash, ni en HTML. Disons qu’il est entre les deux avec un usage intensif du javascript qui le positionne à mi-chemin entre les interfaces riches et les interfaces traditionnelles. Un compromis hasardeux ? Non pas du tout, plutôt l’avenir du rich commerce.

Tout commence avec une page d’accueil plutôt sobre mais offrant de larges visuels et un carrousel parfaitement intuitif (avec l’indicateur de progression) :

La page d'accueil de IWC

Pas de vidéo ou cinématique, juste de belles photos des produits. Une fois sur la page des collections, vous choisissez une famille dans la gamme et les différents modèles sont présentés dans le menu de navigation. Un survol de la souris affiche les détails essentiels et une photo plus grande :

La page de collection du site IWC

Là encore pas de fioritures, juste ce qu’il faut pour accrocher les internautes et leur délivrer le bon message. Vient ensuite la page produit où l’on retrouve des choses plus ludiques comme le visualisateur de face arrière qui utilise une réglette :

Comparez les faces avant/arrière à l'aide de la réglette

Vous avez également accès à un zoom XXL qui s’ouvre dans une nouvelle fenêtre :

Le zoom XXL sur une montre

Toujours pas de Flash, ni de technologie exotique, simplement la photo en très haute résolution et les fonctions de base.

On retrouve également dans la rubrique « Experiences » des contenus multimédia comme ce diaporama d’ambiance :

Diaporama en N&B sur le site IWC

Au final nous avons donc un site en HTML qui propose néanmoins juste ce qu’il faut d’enrichissement pour améliorer l’expérience des internautes : carrousel, menus dynamiques, info-bulles géantes, zoom XL, diaporama… C’est à mon sens dans cette direction que va le rich commerce : une production maitrisée qui mise tout sur un contenu de qualité. « Maitrisée » car ce site peut entièrement être pris en charge par un outil de gestion de contenu afin d’en faciliter l’évolution et surtout la traduction.

Le fait d’utiliser Flash implique des coûts de production légèrement plus élevés, mais surtout de bien plus grandes difficultés d’évolution et de traduction. Utiliser du javascript peut donc être une solution de repli, mais qui n’est pas parfaite, car ce n’est pas un langage très rigoureux, donc il peut poser des problèmes de compatibilité. Heureusement il existe de nombreux framework javascript (jQuery, Backbase, script.aculo.us…) qui permettent de réaliser toutes sortes de choses très intéressantes (carrousel, glissière, rafraichissements silencieux…). Combiner les possibilités offertes par HTML5 et CSS3 avec du code javascript normalisé semble donc être la combinaison gagnante. Je manque d’exemples pour illustrer mon propos, mais la sortie imminente d’IE9 devrait populariser le recours à des technologies standards pour faire des enrichissements de premier niveau (cf. CSS3 et javascript seront-elles les technologies RIA du future ?).

Mais nous aurons l’occasion d’en reparler…

Je me réjouissais récemment de la mode des sites web à page unique, il semblerait que cette mode soit en train de gagner le monde du commerce en ligne avec des exemples très intéressants. Il y a tout d’abord Makr, un site de maroquinerie dont le Capitaine parlait la semaine dernière. La page d’accueil intègre des visuels de nouveautés et du contenu sur la marque, mais propose surtout une longue liste de produits avec des filtres en haut de liste :

La boutique à page unique de Makr

Un clic sur un produit remonte le détail ainsi que le options d’achat :

Le détail d'un produit sur Makr

Une approche minimaliste, mais qui fonctionne plutôt bien. Dans le même esprit, nous avons également Dàma qui propose également une boutique monopage faisant un usage intensif des panneaux :

La boutique monopage de Dàma

Certes, le site est monopage, mais ils trichent avec les différents onglets et accordéons pour faire rentrer tout le contenu.

Blixt & Dunder propose par contre un site monoproduit et monopage ultra-minimaliste :

La boutique monoproduit et monopage de Blixt & Dunder

Un choix de conception extrême qui me laisse tout de même un peu perplexe…

Finalement le meilleur exemple que j’ai trouvé est celui de Broadway Bride Leather Belt qui ne propose qu’un seul produit à la vente, mais intègre toutes les informations nécessaires pour rassurer les prospects (téléphone, livraison, contact…) :

La boutique monoproduit de Broadway Bride Leather Belt

À défaut de boutique monoproduit et monopage, peut-être pourrions-nous plutôt parler de landing page marchande ? Une solution qui peut s’avérer pertinente dans le cadre d’une sélection très restreinte de produits avec un fort levier concurrentiel sur l’URL. En tout cas une solution à creuser pour qui recherche de l’originalité.

(via One Page Love)

En début d’année la marque Burberry avait lancé sur la page d’accueil de son site une fonctionnalité intéressante permettant de manipuler une vidéo à l’aide d’un curseur (changement d’angle de la caméra) :

La vidéo interactive sur le site de Burberry

Ils ont eu la bonne idée de prolonger cette expérience en proposant un module similaire sur leur page Facebook :

Les vidéos interactives de Burberry sur Facebook

Le fonctionnement est similaire (un curseur permet de changer l’angle de vue et de zoomer sur la montre) et la prise en main est immédiate. Les modules interactifs sont en plus annoncés sur le wall à l’aide de la mention « Interact« , ce qui donne forcément envie de cliquer !

Rien de révolutionnaire, si ce n’est le support utilisé (Facebook). Maintenant que cette première étape vient d’être franchie, j’imagine qu’il ne doit pas être beaucoup plus compliqué d’encapsuler une vue 360° ou de la 3D en temps réel (du moment que ces modules sont réalisés en Flash). Je ne sais pas trop quelle est la position de Facebook vis-à-vis de ce type de contenus rich media (en l’occurrence rich commerce), mais il me semble que s’ils ne sont pas encadrés il pourrait y avoir de grosses dérives. Peut-être que la solution la plus simple serait d’encadrer ça avec des formats prédéfinis. Affaire à suivre…

(via Mashable)

Voilà près de 3 ans que je parle de rich commerce sur ce blog. Trois années où j’ai pu aborder un certain nombre de sujets : les démonstrateurs, la 3D, les vues à 360°, la vidéo, l’immersion… Et bien figurez vous que je crois avoir trouvé le site marchand qui combine quasiment toutes les pratiques : Le guide d’achat TV de Philips.

Ce site propose donc de vous assister dans le choix de votre téléviseur avec un assistant à étapes qui débute par une vue immersive par dessus votre épaule pour vous aider à choisir la bonne taille d’écran en fonction de la distance de visionnage (deux réglettes permettent d’ajuster la simulation) :

Choisissez la bonne taille d'écran en fonction de la distance

Puis vous choisissez le type de design qui vous plait à l’aide de vidéos chapitrées :

Gros plan sur le design des modèles

Ensuite l’assistant vous propose une première sélection de TV dont vous pouvez voir les caractéristiques en vous rapprochant (belle transition en 3D). Cette vue rapprochée permet notamment de regarder la TV selon différents angles de vue alors qu’une vidéo est en train de tourner à l’écran :

Vue à 360° d'un modèle de TV

Vous pouvez enfin affiner votre choix en précisant votre budget, l’assistant vous propose alors deux alternatives en fonction de la taille de l’écran ou de la pertinence selon vos choix précédents :

Précisez votre budget à l'aide de la réglette

Et vous êtes alors de retour dans votre salon en train de regarder la TV qui vous correspond le mieux à vos attentes et votre budget (vous pouvez changer de chaîne, allumer ou éteindre l’éclairage arrière, déplier le panneau avec la comparaison des modèles…) :

Jouez avec votre future TV dans ce salon virtuel

Au final nous avons donc un site très complet… mais surtout très long à charger et trop gourmand en ressources. Il en résulte des saccades dans les animations et une piètre réactivité de l’interface. Même sil a démonstration technique est impressionnante, la fluidité et l’expérience utilisateur doivent-elles être sacrifiées pour autant ? Peut-être qu’une version haut et bas débit permettrait de pallier ce problème en apportant d’un côté une information riche et de l’autre une ambiance immersive.

(via Hebiflux)

En farfouillant dernièrement sur le site d’Ikea je suis tombé sur une fonctionnalité tout à fait intéressante des pages catégorie : Une tête de gondole-démonstrateur qui permet de mettre en valeur le produit-star de la catégorie mais également de laisser les internautes le manipuler. Illustration avec la sous-catégorie lavabos pour la salle de bain :

La page des lavabos chez Ikea

En cliquant sur les icônes à droite et à gauche il est possible de changer le modèle du lavabo ainsi que le robinet :

Le démonstrateur de lavabos chez Ikea

Vous noterez au passage qu’ils ne se contentent pas de trafiquer l’image car les reflets des robinets changent avec eux.

Il existe un principe équivalent dans le rayon cuisine où l’on peut tester les façades :

Le démonstrateur de façade dans le rayon cuisine d'Ikea

La manipulation est très intuitive, l’intégration des modules est très propre, pas de doute, c’est du Ikea !

Hasard du calendrier, deux grandes marques sortent quasiment en même temps une campagne « transmedia » (je crois que c’est comme ça que disent les pubards) avec un concept commun pour le spot TV, l’affichage et le site web.

Commençons par Diesel qui propose un spot TV qui sent bon le charleston à la sauce 2010 pour sa nouvelle collection :

Ce spot est ensuite reprit sur le site web sous forme de vidéo interactive (A Hundred Lovers) qui se met en pause au survol de la souris et permet de repérer les zones actives (généralement des liens vers la fiche produit des vêtements) :

Vidéo interactive chez Diesel

Même principe chez BMW avec ce film diffusé pour le lancement de la nouvelle série 5 :

Le mini-site BMW-cinétique propose une expérience similaire mais plus immersive puisqu’il est possible de manipuler les billes (représentation en 3D temps réel) et même de créer / partager vos créations :

Représentation en 3D temps réel chez BMW

Dans les deux cas nous avons un concept créatif fort qui est décliné da façon originale et accrocheuse sur le web.

(merci à Albin pour le lien)

Avez-vous le nouveau site de Citroën ? Le moins que l’on puisse dire est qu’il y a eu comme une montée en gamme avec cette page d’accueil très sophistiquée :

La page d'accueil du nouveau site Citroën

L’univers graphique est étrangement proche de celui du site d’Axa et l’expérience est aussi déstabilisante que sur le site de la SNCF. Comprenez par là que dans une recherche d’image haut de gamme, ils confrontent les internautes à une parodie d’interfaces Apple (avec reflets et cover flow). Je ne suis pas contre le fait d’apporter de la sophistication aux interfaces web (sinon je ne rédigerais pas ce blog depuis plus de deux ans) mais cela doit se faire avec une certaine retenue pour ne pas trop alourdir la navigation et le parcours client. Le site de Ford Vehicles est ainsi un exemple car les pages sont très rapides à chargées et n’imposent pas aux internautes un temps de chargement trop long (ceci est réservé aux mini-sites).

Au niveau des pages intérieures, le raffinement est toujours de rigueur avec un showroom en 3D pour les véhicules (ici la C1) :

Le showroom 3D sur le nouveau site Citroën

Encore une fois même si la réalisation est exemplaire, il y a comme une impression de déjà vu : Fiat UK et Renault propose des showrooms 3D depuis plusieurs années.

Au final nous avons un très beau site qui aurait plus sa place sur des bornes interactives en concession que dans les navigateurs de Mr et Mme tout-le-monde. Loin de moi l’idée de vouloir comparer, mais le site de Peugeot est tout aussi qualitatif mais moins laborieux à parcourir, vous ne trouvez pas ?

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.