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

Vous connaissez Wrangler ? Mais si enfin, la marque de jeans coincés entre le mammouth (Levi’s) et la diva (Diesel). Pour résumer une longue histoire disons que Wrangler est dans un créneau très concurrentiel où les acteurs en présence se battent avant tout sur la créativité plutôt que sur les prix.

Bref, le seul moyen pour eux de se démarquer est de raconter de belles histoires et de surprendre les clients. C’est exactement ce qu’ils font avec leur site web qui est un très bon mélange d’interactivité et d’immersion. Il y a tout d’abord la présentation des collections sous forme de tableaux mettant en scène un homme et une femme dont vous choisissez la panoplie :

Choisissez vos tenus sur ce module de présentation des collections

Tout est parfait dans ce module : Les couleurs surannées, la musique roots, le traitement graphique low-fi… l’ensemble est parfaitement immersif et permet de concentrer l’attention sur les deux personnages (qui sont les seuls éléments mobiles de cette page).

Une fois que vous avez choisi un personnage, vous le voyez évoluer dans une vidéo où il est possible de choisir le point de vue (pour apprécier les fringues) :

Détails de la collection sur le site de Wrangler

Sinon il y a aussi le très belle campagne Blue Bell qui propose une modalité d’interaction très particulière :

Votre souris commande le zip

Ce mini-site propose ainsi différentes scènes où l’on peut bousculer les mannequins à l’aide de la souris :

Baladez les mannequins de droite à gauche avec votre souris

Ces scènes ne sont pas idéales pour mettre en avant les produits (pas de page de détails) mais elles remplissent parfaitement leur rôle : Surprendre et distraire. Il est ainsi très ludique de maltraiter les mannequins au fil des 6 scènes (et autant de produits manipulés) :

Et vlan !

Mission accomplie !

(via BlogoErgoSum)

Nouvelle campagne et nouveau site de campagne pour la marque de lingerie française : FrenchArtOfLoving.com. Au programme de ce mini-site : Une interface à tiroirs (littéralement !) et de belles transitions. La mise en page du site est très minimaliste avec une navigation tournant autour de la métaphore d’une commode :

La page d'accueil du site FrenchArtOfLoving

En cliquant sur les tiroirs, vous en découvrez le contenu après une belle cinématique de transition. Ici, l’assistant au choix :

L'assistant au choix du site FrenchArtOfLoving

il y a également une rubrique plus expériencielle avec des morceaux musicaux et des ambiance sonores :

Extraits sonores sur le site FrenchArtOfLoving

De même que des vidéos de la campagne de teasing :

Les vidéos sur le site FrenchArtOfLoving

En fait on a vite fait le tour de ce mini-site, et l’on se retrouve bien vite sur la boutique en ligne (nettement moins esthétique) :

La boutique en ligne de Aubade

Même si je ne peux que souligner la pertinence des choix esthétique, ce mini-site deçoit. Dans la même catégorie je préfère largement le très efficace Victoria’s Secret ou les mini-sites psychédéliques de Agent Provocateur.

Voilà un petit moment que traine dans mon calepin un projet d’article parlant de l’optimisation du référencement de contenus Flash et Ajax. Il faut dire que le sujet n’est pas tout neuf (on en parle depuis des années) et que les grands de ce monde s’en sont déjà préoccupés (Adobe collabore avec Google et Yahoo! pour améliorer l’indexation de Flash).

Dernièrement il y a eu des propositions et des améliorations techniques pour mieux indexer ces fameux contenus RIA : A proposal for making AJAX crawlable (traduction et interprétation en français : Google propose une méthode pour le référencement des sites AJAX) et Adobe Flash vs. Search Engine Optimization. En synthèse : Google est capable de référencer une partie des contenus textuels en Flash ou Ajax.

…

…

…

…

OK, on est content pour eux.

…

…

…

…

…

Pourquoi s’en soucier ? Après tout on ne fait pas un site en Flash ou en Ajax. Ce débat est à mon sens complètement superflu dans la mesure où la seule technologie viable pour faire un site est le HTML, l’astuce est de l’enrichir avec des contenus Flash / Ajax / Silverlight / 3D…

Dans un contexte de commerce en ligne, le référencement (naturel, optimisé ou payant) est un impératif. Améliorer la mise en scène des produits, fluidifier le parcours-client et favoriser l’immersion des internautes dans l’univers de marque sont aussi des objectifs primordiaux. Et ils ne devraient pas rentrer en conflit. Voilà pourquoi la seule technologie à envisager pour créer votre boutique en ligne est et restera le HTML. Ou du moins, c’est la technologie à adopter pour les pages que vous souhaitez réellement référencer : pages produit et pages de catégorie. Le reste des pages de votre site (accueil, recherche…) ne sont pas réellement intéressantes, c’est à dire critique pour votre activité.

Bien évidement rien ne vous empêche de créer des bannières ou des mini-sites évènementiels tout en Flash, mais l’effort de référencement ne doit pas être porté sur ces contenus périphériques.

La bonne pratique consiste donc à insérer des modules riches dans des pages HTML :

• Carrousel, sélecteur, cinématique… pour la page d’accueil ;
• Assistant, comparateur… pour les pages de catégorie ;
• Filtres et tris dynamiques avec rafraichissements silencieux pour les pages de recherche ;
• Démonstrateur, émulateur, configurateur, zoom et vues 360° / 3D pour les fiches produit.

Tous ces modules sont des blocs opaques aux “yeux” des robots chargés de parcourir les pages, mais le contenu est lui parfaitement visible et accessible selon un parcours client “pauvre” (sans avoir recours à ces modules).

Donc en résumer : À quoi bon référencer un configurateur ? (d’où le titre du billet)

Avez-vous vu le nouveau site de Dockers ? L’ambiance et l’immersion dans un univers à mi-chemin entre suranné et vintage y est très bien réussie. Mais ce qui séduit avant tout sur ce site se sont les visuels plein écran et la sonorisation. Vous pourrez apprécier la très bonne gestion du redimensionnement de l’écran (pas évident avec de telles photos).

Au niveau de la page d’accueil nous avons donc une structure peu commune qui met l’accent sur la dernière collection (série de 3 vignettes) et propose un menu de navigation sous forme de bandeau dépliant (original mais pas des plus intuitif) :

La page d'accueil de Dockers

Vous trouverez également en bas de l’écran sur la gauche la télécommande permettant de choisir la musique (le choix des morceaux est plutôt réussi) et d’apporter une dimension sonore participant à l’ambiance générale.

La page de collection propose une série de modèles que l’on peu fait tourner dans une vue à 360° avec des points d’intérêt à cliquer :

Présentation des ensembles chez Dockers

Il y a aussi un module de recherche avec des boîtes de filtres et un bel effet de floutage des produits :

L'interface de recherche chez Dockers

Vous trouverez également sur ce site une belle mosaïque de portraits dans la rubrique “Your Style” ainsi que des vidéos de défilés.

Au final nous avons donc un site qui n’apporte aucune innovation mais qui réussi tout de même à recréer une ambiance très agréable. La critique peut paraître dure mais je reconnais volontiers l’efficacité du résultat final (malgré un contenu très pauvre). Nous sommes bien loin des prouesses techniques / visuels d’un Uniqlo mais cette boutique parvient tout de même à procurer une expérience agréable.

LetsBuyIt.fr vient d’ouvrir ses portes en France (j’en ai parlé dans ce billet).

LetsBuyit est un moteur de shopping, dont l’une des innovation est l’interface.

L’interface est en effet conçue avec trois volets :

• La partie de gauche, qui est plutôt la partie “classique” du moteur de shopping, avec la présentation des produits, des marchands…
• La partie de droite, qui est centré sur l’utilisateur (mon compte, mes produits préférés, …)
• La partie centrale, qui est une zone graphique, et qui présente “différemment” les produits et les marchands.

On peut zoomer une zone, avec un effet de glissement horizontal. Exemple avec l’espace personnel ouvert :

Ce qui est vraiment intéressant avec ce service, c’est l’intégration assez poussé entre de l’Ajax et le Flash.

Bien sûr, l’espace central est en flash :

le système de navigation horizontal est en Ajax (un vrai challenge, bravo Olivier et toute l’équipe !).

L’intégration entre les différentes technologie est vraiment poussée : on peut même faire du drag & drop du flash vers l’ajax !

Vous avez qui pour faire la promotion de votre service ?

Youjob, et l’officiel du handicap a modestement misé sur… Nicolas Sarkozy !

Le rich media au service d’une noble cause, mis en scène par des champions de la communication !

La plupart des exemples présentés dans ce blog sont de grosses réalisations US, de ce fait je suis toujours content de pouvoir présenter des exemples français de qualité. Et c’est le cas aujourd’hui avec La Case du cousin Paul, une boutique en ligne de guirlande lumineuse qui propose une fonction de configuration en ligne très sympa : Votre guirlande.

Vous commencez par choisir la couleur du fil électrique ainsi que des boules lumineuses :

Choisissez la couleur des boules de votre guirlande

Si vous trouver trop laborieux de choisir la couleur de chaque boule (d’autant plus pour les guirlandes de grande taille), vous pouvez aussi utiliser le panier aléatoire :

Le panier aléatoire permet de gagner du temps

Et une fois que tout est prêt, vous pouvez enfin admirer le résultat en allumant la guirlande :

Le résultat final

Voici donc une réalisation très propre avec une interface très bien proportionnée. Cocorico !

(merci à Sébastien pour le lien).

J’avais déjà rédigé un billet l’année dernière sur le site de Dodge qui faisait un effort particulier pour soigner la mise en scène des véhicules et plus précisément des vues à 360° : Des voitures avec des gens dedans chez Dodge.

Ils poursuivent visiblement dans cette voie avec de nouvelles vues à 360° de toute beauté, à commencer par la superbe Challenger lancée à pleine vitesse sur l’autoroute (il est possible de faire pivoter la vue avec de magnifiques effet de halos lumineux) :

Il y a également la Ram dans un environnement plus “backcountry” et un magnifique franchissement de rivière (ils ont même mis des rondins sur la plateforme arrière) :

Voilà donc un très bon cas d’école d’intégration élégante d’un modèle 360° dans un environnement réel. Toyota avait commencé à systématiquement insérer ses modèles dans des scènes en simili-3D mais l’intégration n’est pas aussi soignée que chez Dodge.

Petite vidéo sympa, suite à la soirée organisée par la Fevad :