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

Ce coup-ci c’est la guerre… il y avait bien trop longtemps qu’ils se regardaient de travers sans oser passer à l’attaque mais depuis le début de l’année les armés sont en marche et cette guerre ne fera pas de cadeaux. Bien évidement je veux parler de la guerre que se livrent Lego et Magebrand pour imposer sur le marché leurs marques de robots de combat (respectivement les Bionicles et les NeoShifters). Ces deux franchises sont assez similaires et les stratégies déployés par ces deux groupes pour séduire un public jeune sont également très similaires : des sites web dédiés avec des tonnes d’interfaces riches dedans.

D’un côté nous avons les NeoShifters de l’américian Megabrand :

La page d'accueil des Neoshifters

De l’autre nous avons les Bionicles du danois Lego :

La page d'accueil des Bionicles

Premier round : présentation des produits en Flash

Il y a tout d’abord tout à background à ces franchises : une trame centrale, des histoires parallèles, des personnages et plein de robots avec moultes caractéristiques. Au niveau des sites web, ça donne des pages produits avec des robots animés et des tonnes de contenu. Ici le Magna Rex :

La page produit des Neoshifters

Là, le Gresh :

La page produit des Bionicles

Lego propose en prime un module d’explications animées des combats avec ces figurines :

Les explications des Bionicles

Round 2 : la synergie online / offline

Autre champ de bataille des deux géants du web : la possibilité de trouver un code au dos de la boîte pour pouvoir jouer avec le double virtuel du robot. Chez Lego ça s’appelle les B.I.O. codes mais ils ne sont mis en avant qu’au travers du club.

Pour les NeoShifters, il s’agit d’une ligne de produits spécifique (les Web Battlers) et la page de présentation est nettement plus incitative :

Les WebBattlers de Neoshifter

Round 3 : Les jeux en ligne

Passons la vitesse supérieure avec les jeux en ligne mettant en scène les produits. Oui, c’est bien d’un démonstrateur dont nous parlons. Chez MegaBrand ils’agit de NeoShifters Resistance, un simili univers virtuel :

Le jeu en ligne des NeoShifters

Notons qu’il existe également un autre mini univers virtuel pour les Magnetix (une autre franchise de la marque) :

Le jeu en ligne des Magnetix

Pour Lego, nous avons quelque chose de plus classique avec une série de jeu multi-joueurs mais un univers peut-être moins immersif : Glatorian Arena.

Le jeu en ligne des Bionicles

Conclusion

Au final nous avons donc deux univers de marque très dense, des sites dédiés à la réalisation exemplaire. Petit bémol pour les NeoShifters qui sont dans un module encapsulé donc sans historique de navigation ou possibilité de référencement (pas d’URLs lisibles). Un exemple pour qui veut développer un univers de marque cohérent et gagner la fidélité de ses clients.

Décidément les menus de navigation sont un sujet intarissable. Et pour cause : chaque site en à (au moins) un et ils se ressemblent tous. Voilà pourquoi certain essayent d’innover en apportant de l’innovation et de la sophistication aux menus de navigation.

Premier exemple avec Reebok qui propose un menu en cascade avec un effet “fisheye“ pour gagner de la place :

Le menu en fisheye de Reebok

Simple à utiliser et surtout très “souple” dans la manipulation (il y a un léger temps de latence pour ne pas perturber l’utilisateur) ce menu permet de concentrer l’attention sur les items de second niveau en attirant le regard. Ce n’est pas la première fois que la technique du fisheye est utilisée pour un menu (cf. Un Fisheye dans mon menu rédigé il y a 3 ans) mais peut-être est-ce là l’exemple le plus grand public.

Deuxième exemple avec Uniqlo qui propose une navigation latéralle en plein écran avec une barre de défilement en bas de page :

Le menu latéral d'Uniqlo

Une réalisationt très impressionnante avec une parfaite gestion du redimensionnement de la fenêtre, rien à redire. (via Hebiflux)

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)

La vidéo est un support clé dans la valorisation des produits et dans l’enrichissement de l’expérience, là je ne vous apprend rien. OK mais pourquoi ne pas mettre la vidéo au coeur du dispositif marchand ? J’ai récemment croisé plusieurs exemples d’usages enrichis de la vidéo qui me font penser que ce support peut aller au-delà que de la simple illustration.

Premier exemple repéré chez Distilled qui met en scène dès sa page d’accueil une large vidéo (la navigation est relayée au bas de l’écran) où un mannequin enchaîne les tenues dans un astucieux montage :

Le montage vidéo de Distilled

Il est possible de passer d’une tenue à l’autre en utilisant les vignettes sous la fenêtre principale, l’accès au produit se fait à l’aide des liens sur la gauche. Une expérience hypnotisante et surtout très immersive qui vient remplacer des pages catégories / sous-catégories. Plus d’infos ici : Distilled Clothing Has Innovative Use of Video.

Autre exemple avec Video Infusion qui permet d’insérer des zones réactives dans une vidéo et de gérer les interactions sans recharger la page. Vous pouvez tester cette technologie sur leur page de démo :

La vidéo interactive de Video Infusion

Dernier exemple avec Innovid qui propose un incroyable système de superposition d’éléments réactifs dans une vidéo. Sur la capture d’écran suivante, le chat se promène entre les lettres du logo pendant que vous jouer à Pong sur le papier peint avec votre souris :

La démo d'Innovid

Bon OK, dit comme ça c’est pas très vendeur mais je vous engage fortement à tester ce système sur leur galerie d’exemples pour bien appréhender le potentiel de cette technologie (via Get Elastic).

Tout ça me fait dire que nous n’avons pas finit d’entendre parler de la vidéo et de ses déclinaisons en rich commerce : Imaginez de tels systèmes appliqués à l’offre de catch’up TV (M6 Replay) ou aux séries web (comme Dorm Life, Prom Queen ou Clark & Michael).

Vous connaissez Zappos ? Mais si enfin, le supermarché de la chaussure en ligne. Zappos c’est déjà illustré par con approche résolument innovante du web (avec un incroyable service satisfait ou remboursé valable 1 an) ainsi que des médias sociaux avec notamment le Twitter des employés qui encontre un franc succès.

Zappos innove encore mais ce coup-ci du côté des interfaces avec une recherche entièrement visuelle :

La recherche visuelle de Zappos

À chaque fois que vous cliquez sur une chaussure, la mosaïque est réorganisée pour afficher des modèles proches (forme, matière, couleur…). La navigation ne se fait donc pas selon une arborescence classique (homme / femme > baskets, boots…) mais par une série de clics successifs qui sont autant de rebond facilitant la découverte empirique de la gamme

Aussi surprenant que cela puisse paraître, les recherches sont généralement plus rapides (vous trouvez le bon modèle en 2 ou 3 clics). Vous avez également la possibilité d’affiner la recherche à l’aide de filtres (avec une mise à jour silencieuse du nombre de résultats) :

Le moteur de filtres de Zappos

Bon… tout ça c’est bien mais c’est quand même très proche de Browse Goods (cf. De l’innovation dans les catalogues en ligne). Ok mais qui s’en plaindra ? Dans la mesure où Amazon n’a pas du tout exploité le potentiel de cette interface (lui préférant Window Shop), je ne voit pas pourquoi quelqu’un d’autre ne tenterait pas l’aventure.

(via Get Elastic)

Je crois bien avoir déjà rédigé plusieurs billets sur Nike et d’autres fabricants / distributeurs de chaussures de sport mais jamais sur Adidas. C’est donc dans un souci d’équité que je vais vous parler de la dernière campagne Adidas Originals.

Cette campagne s’appuie sur un mini-site où il est question de jeunes, de fêtes et de jeunes qui font la fête. Le site s’ouvre sur une série de scènes et de portraits :

La campagne Adidas Origins

Il y a aussi des looks avec des vidéos en stop-motion :

Les looks chez Adidas Origins

Et il y a également des vues produits avec un zoom sur-puissant :

Les produits chez Adidas Origins

Le tout est fluide, bien arrangé, harmonieux… Bref, c’est du bon boulot et ça me fait plaisir de parler d’une marque européenne (parfois j’ai l’impressin de ne parler que de Nike, Ford et American Eagle…). (via Kotsego)

En visitant le site vous pouvez églaement tomber sur d’autres campagnes comme cette mosaïque de manequins pour Y-3 :

La campagne Adidas Y-3

Bref, il y a de l’idée et de l’ambition chez Adidas, même jusque sur la page d’accueil composée de blocs qui se redimensionnent au passage de la souris :

La page d'accueil d'Adidas France

Cocorico !