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

J’ai déjà eu de multiples occasions de vous vanter les sites de constructeurs automobiles qui rivalisent d’ingénuosité pour nous proposer des sites toujours plus spectaculaires (vues 360°, 3D, configurateurs, comparateurs…).

Je souaihterais aujourd’hui vous faire découvrir une réalisation tout à fait intéressante pour la marque Dodge qui nous propose une mise en scène très réaliste de son Journey avec une vue en 360° dans son environnement naturel (déjà vu chez de nombreux constructeurs dont Toyota). Là où ils apportent une nouveauté, c’est que le véhicule est mis en situation (dans la rue) avec un conducteur dedans :

On distingue clairement le conducteur (qui me regarde bizarrement d’ailleurs…) :

Ca n’a l’air de rien, mais aucun autre constructeur « n’équipe » ses véhicules de conducteurs. Cette petite attention apporte une touche de réalisme supplémentaire qui fait son petit effet. Bon en tout cas j’y suis sensible, pas vous ?

Potoroze propose des fonctions pour aménager virtuellement votre intérieur :

Observez en particulier la facilité pour placer un meuble (2/3 de la vidéo environ) ou la façon dont on déplace une horloge murale, qui « sait » rester « aimanté » contre le mur !

Bravo Sébastien pour cette nouvelle démonstration !

Voilà le billet que j’aurais aimé écrire : The ROI of RIA. Il y est question de l’intérêt des interfaces riches dans une optique d’efficacité marchande : « est-ce que ma boutique en ligne transforme mieux grâce aux interfaces riches ?« 

Vaste question à laquelle l’auteur s’en sort plutôt bien. Son point de vue est de dire que les interfaces trop avant-gardistes présentent un trop gros risque et qu’il est plus prudent d’enrichir certains écrans-clés plutôt que d’opter pour une boutique surréalistes. Certains exemples sont proposés :

• Le panier « riche » de GAP ;
• Le check-out process en 1 écran de RueLaLa ;
• Les quick previews (également utilisées chez GAP) ;
• La recherche de disponibilité de façon transparente ;
• L’utilisation du multimédia…

Vous noterez que le point de vue de l’auteur est très proche de celui que nous vous avons présenté lors de notre premier petit déjeuner consacré au rich commerce (cf. la compte rendu).

Souvenez-vous, il y a quelques semaines j’avais fais une interview Sheila Dahlgren (la directrice marketing de Scene7), elle nous avait fait une petite visite guidée de Sunglass Hut, une très belle boutique en ligne de lunettes.

A mon tour de vous en faire une visite guidée plus détaillée avec tout d’abord la page catégorie qui est bordée par les options de filtre et de tri, les modes de visualisation et les outils de comparaison / panier :

Vous remarquerez sur le bas de l’écran les zones où il est possible de mettre des articles en glissé-déposé et de lancer une comparaison :

Il y a également une page produit très sobre avec une bonne répartition de l’espace d’affichage :

J’adore cette fonction de zoom en pleine largeur de page :

Il existe également dans le site des rubriques inspirationnelles comme cet assistant de recherche par style de vie :

Pour finir, ces séquences vidéo mettant en scène les articles :

Inutile de chipoter, c’est du très bon bouleau. Pour être plus précis, il est très rare de voir des boutiques en ligne de cette qualité : mise en page, intuitivité, sophistication de l’interface, variété des contenus…

Vu chez Hebi Flash cette très belle boutique en ligne polonaise : Ecoworld. La particularité de cette boutique est de proposer des vidéos de l’ensemble de ces modèles de chaussure afin d’illustrer le style et la cassure de la chaussure en situation réelle :

Un principe également brillamment utilisé chez MBT pour faire de la pédagogie autour de leurs étranges chaussures à semelle convexe :

Deux beaux exemples d’utilisation élégante de la vidéo.

Aviez-vous remarqué la fonction zoom de la boutique Apple ? Non… moi non plus. En fait elle se fait très discrète (uniquement sur certains produits) mais propose un modèle d’interaction tout à fait convainquant. Exemple ici : SwissGear Neon Backpack.

Il y a tout d’abord ce petit lien sous les vignettes des vues alternatives :

En cliquant dessus, une petite cinématique affiche une vue plus large :

En passant le souris par dessus, une petite loupe permet d’avoir une vue rapprochée :

Voilà, c’est discret et élégant. (via Ajaxian)

Un des aspects tout à fait fondamental, quand on développe un site « riche », c’est la technologie : Flash ou Ajax ?

Les avantages d’Ajax sont nombreux, mais il y a quelques « points durs » :

• C’est compliqué et difficile d’écrire une application Ajax, le code est réparti entre le serveur et les clients ;
• Le code doit s’adapter aux différent navigateurs.

Le dernier point est vraiment un aspect très délicat. Le Javascript (langage de programmation côté client donc) est différent, suivant le navigateur, avec de grosses différences, même entre plusieurs version d’un même navigateur (je pense bien évidement à Internet Explorer 6).

Google propose une alternative : GWT.

GWT permet de développer son application 100% en Java.

Le développeur est donc dans un environnement unique (un seul langage) et peut mettre au point son application plus simplement.

Ensuite, GWT génère le code qui va bien. Le programmeur n’a donc pas à écrire du JavaScript, c’est le générateur de Google qui s’en charge.

Sur le principe, je trouve cette approche très intéressante et je sais qu’il y a une communauté de « fan » (hello Didier).

Maintenant, la question est : existe-t-il des services grand public basés sur cette technologie ?

Le Coq Sportif, vous connaissez ? Mais si enfin : Yannick Noah et sa mythique victoire à Roland Garros en 1983 ! Bon bref, tout ça pour dire qu’ils viennent de mettre en ligne une nouvelle version de leur site qui fait un usage intensif du rich media.

Il y a tout d’abord cette page d’accueil très épurée :

Il y a ensuite une boutique « riche«  :

Il y a ensuite un blog très sympa :

Et il y a surtout cette incroyable interface de visualisation du patrimoine de la marque :

C’est une sorte de patchwork des grands évènements sportifs auxquels la marque a été associé (façon NewsMap) avec la possibilité de mettre des dates dans vos favoris (par un drag & drop), de filtrer le contenu par type (photos, vidéos…), de modifier l’affichage… Bref, c’est ludique et parfaitement réussi. J’adore !

La mise en ligne de la vidéo a été un peu longue. Juste un petit billet pour vous dire que tout est en ligne :

Les slides sont ici.

Les vidéos sont là.

Merci pour votre patience !

Je viens d’avoir un authentique coup de foudre pour le site de Virgin America. Non seulement la charte graphique est superbement sobre et la mise en page incroyablement efficace mais en plus l’utilisation des interfaces riches y est parfaitement subtile.

Ca commence avec une page d’accueil très sobre :

Nous avons de même cette superbe interface où il est possible de visionner les différentes villes desservies (Where We Fly) :

Il y a ensuite cette très belle page de promotions à la grille de lecture impeccable :

Et nous avons enfin cette liste de résultats très sobre avec un parcours narratif très intuitif :

Bref, un site remarquable qui n’a pas laissé indifférent nos amis de chez GrokDotCom : Why Virgin’s Banner Ads Work, Even on Facebook!