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

Depuis quelques années la marque Puma a entrepris de renouveler entièrement son image de marque sous l’impulsion du célébrissime Yves Béhar (dont le premier fait d’arme est le lancement du Clever Little Bag). Bref, tout ça pour dire qu’il y a un tout nouveau Puma.com. Ce qui surprend avec ce nouveau site, c’est sa construction atypique : une page d’accueil assez haute avec un fond de page, des visuels en pleine largeur sur le cadre et différents niveaux de profondeur qui créés une illusion d’optique (la tête du footballeur passe par dessus le bandeau de navigation).

La nouvelle page d'accueil de Puma

Malgré un contenu assez riche, cette page est plutôt rapide à s’afficher. La page offre également dans sa partie basse une mosaïque des derniers contenus avec une mise en page déstructurée du plus bel effet.

Le bas de la page d'accueil de Puma

Il y a également une rubrique média assez bien fournie. Vous remarquerez les astucieux menus en bas de page qui mènent vers le plan du site, l’identification et la boutique :

La rubrique médias du site de Puma

Et puisque l’on parle de la boutique, cette dernière intègre également la nouvelle structure, mais conserve son coeur de page :

La boutique en ligne de Puma

Pour le moment cette nouvelle version est encore en cours de déploiement sur les différentes langues ainsi que les différentes rubriques. Si à priori cette réalisation n’a rein de très spectaculaire (contrairement à ce que l’on pouvait voir il y a quelques années), elle illustre bien à mon avis la maturation du design web : moins de trucs qui bougent dans tous les sens, une très bonne utilisation de l’espace et de la hiérarchisation des éléments, une très bonne lisibilité, une grosse couche sociale et une boutique qui se concentre sur l’efficacité et la transformation. Ce n’est pas la première fois que je constate cette approche plus raisonnée, et c’est une très bonne chose, surtout avec la montée en puissance des terminaux alternatifs.

(via FWA)

Vous connaissez SuitSupply ? Il s’agit d’un fabricant de costumes hollandais qui n’a pas froid aux yeux. Ils exploitent ainsi le filon du porno chic dès la page d’accueil de leur boutique avec des visuels en plein écran :

La page d'accueil de SuitSupply

J’apprécie cette touche coquine (et encore je n’ai pas choisi la photo la plus osée), même s’il faut bien remarquer que le menu de navigation situé à gauche de l’écran n’est pas très visible, ni très pratique. En grand professionnel que je suis, j’ai tout de même pris le temps de visiter cette boutique et je suis tombé sur deux ou trois idées tout à fait intéressantes.

Il y a tout d’abord une page de catégorie à défilement horizontal où l’on peut zoomer sur les détails des costumes :

La page de catégorie de SuitSupply

Il y a ensuite une boîte d’ajout au panier (avec la sélection de la taille) où sont incrustés des produits associés (chemise + cravatte) :

La boîte d'ajout au panier avec les produits associés

Il y a enfin un tunnel de commande dans le plus pur style minimaliste avec un panier néanmoins parfaitement lisible :

Le panier de SuitSupply

Au final nous avons donc une boutique qui frappe très fort dès la page d’accueil (quitte à faire fuir des clients qui surfent au bureau) mais qui propose des astuces tout à fait intéressantes et un engagement graphique cohérent. Pour résumer : une boutique qui a de la gueule, ça change !

(via Rhooo)

Aux États-Unis, Nordstrom est une institution : marque centenaire, cette chaîne de grands magasins fait partie du quotidien des américains et exploite par la même un site de commerce en ligne qui figure parmi mes favoris. Récemment ils ont… tout changé (à l’américaine) pour proposer une expérience radicalement différente.

Ça commence dès la page d’accueil avec un carrousel façon Polaroïd et un bandeau de navigation minimaliste (seulement trois items) :

La page d'accueil de Nordstrom

Au niveau des pages intérieures, nous gardons ce même esprit minimaliste avec beaucoup d’espaces blancs et une attention concentrée sur les visuels. Ici, le Style Guide se manipule très facilement à la souris en cliquant sur les silhouettes et les views :

Guide de styles chez Nordstrom

Vous noterez l’étonnant bandeau de navigation où le fil d’Ariane est directement intégré dans l’onglet. Inédit, mais plutôt efficace pour bien cloisonner les univers (produits, marques, communauté).

La page de catégorie est également un très bel exemple de minimalisme avec un moteur de filtre très simple d’utilisation en haut de page et des variantes de produit facilement accessibles (bouton « See colors » sous la photo) :

Une page de catégorie chez Nordstrom

Il y a également une fonctionnalité d’assistance au choix très originale qui mélange formulaire narratif et inspiration visuelle (glissez les vignettes dans les espaces blancs) :

Un formulaire narratif pour vous aider dans votre sélection de produits

Il y a également un univers éditorial et communautaire un peu plus « touffu » avec des articles, de la vidéo et des fonctionnalités sociales dans tous les sens. Rien de très révolutionnaire, mais une belle mise en scène des titres et liens :

Les contenus éditoriaux à la sauce sociale

J’ai été au début très déstabilisé par cette nouvelle version qui tranche par rapport à la précédente (beaucoup moins funky mais diablement efficace). L’ensemble est parfaitement cohérent (assez proche du site des 3 Suisses) et procure une très expérience d’usage très agréable. Mission accomplie !

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.

J’ai déjà eu de nombreuses occasions de vous parler des carrousels, ces éléments d’interface qui permettent de parcourir une liste de façon latérale. Le vidéo-blog Smart Experience nous propose à ce sujet une très bonne vidéo qui résume les avantages de cette technique : Interaction Design Skills: Carousels.

Les points-clés de cette vidéo :

• Les carrousels fonctionnent partout (web, desktop, mobile) car ils reposent sur le principe de la manipulation directe (tactile ?) ;
• Les carrousels sont particulièrement bien adaptés aux images (comme chez Cooliris par exemple) ;
• Les carrousels sont avant tout destinés à du survol rapide plutôt que de la recherche précise (pour cela les moteurs ou arbres sont bien plus efficaces) ;
• Les carrousels permettent d’anticiper la navigation en proposant un aperçu de l’item suivant (comme sur le site d’Apple).

Bref, vous n’avez plus aucune raison de vous laissez tenter par les carrousels. (via Konigi)

Loin de moi l’idée de vouloir faire des jeux de mots à 30 centimes mais je trouve que le luxe est secteur qui se prête bien aux modules rich commerce. Les précurseurs en la matière sont des ténors comme Louis Vuitton ou Gucci mais nous commençons à voir des acteurs de taille plus modeste faire des choses tout à fait intéressantes.

Premier exemple avec Luigi Bormioli, un vaisselier italien déniché par Maxdig qui propose un très bon système de navigation par bandeau latéral :

Le bandeau de navigation latérale de Luigi Bormioli

Deuxième exemple ave Vimercati, un fabriquant de meubles italien (découvert par le Capitaine Commerce) qui nous plonge dans un carrousel 3D qui donne le tournis :

Le carrousel 3D de Vimercati

Rassurez-vous il y a aussi de très belles photos en pleine largeur qui rattrape cette intro un peu déstabilisante.

Dernier exemple avec Gestaltung, un fabriquant de cuisines anglais qui met en scène ses réalisations dans des environnement en simili 3D (via Hebiflux) :

Les scènes 3D de Gestaltung

Je précise tout de même que le luxe n’est bien évidémenr pas le seul secteur d’activité qui a tout intérêt à mettre en oeuvre les interfaces riches. Je rêve par exemple d’un supermarché en ligne en Flash (ou en Ajax)…