Vidéo interactive et HTML5 pour Range Rover

Les vidéos interactives sont un grand classique des mini-sites de valorisation des produits. D’ailleurs, si vous lisez régulièrement ce blog, vous avez déjà dû voir passer un certain nombre d’exemples. Dans un article récent, je m’étonnais du fait que la majeure partie de ces vidéos interactives sont encore réalisées en Flash, un anachronisme tant le succès des smartphones et des tablettes est flamboyant (1/4 des foyers en sont équipés). Le constructeur automobile Land Rover me fournit ainsi le parfait exemple pour appuyer mon propos.

Le mini-site de la nouvelle Range Rover se présente donc sous la forme d’une vidéo interactive en plein écran :

LandRover_1

Un simple clic sur la souris fait apparaître les zones d’interaction qui ouvre alors un panneau avec les détails :

LandRover_3

Plus intéressants, des liens au sein de ce panneau vous donnent accès à encore plus de contenus (photos, vidéos…), le tout dans une superbe mise en page parfaitement épurée (également accessibles avec le menu de droite) :

LandRover_2

Comme vous pouvez le constater, la réalisation est donc de très bonne facture. Mais le plus intéressant dans tout ça est que le site est réalisé en HTML5, donc est parfaitement compatible avec les smartphones et tablettes :

RangeRover_mobile

La version mobile du site propose ainsi une mise en page responsive qui s’adapte à la taille de l’écran du terminal. Certes, les temps de chargement ne sont pas compatibles avec les réseaux de téléphonie, mais en WiFi, ça passe sans problème. Confortablement installé dans le canapé de votre salon avec votre tablette, ce mini-site délivre alors tout son potentiel. Assurément une bonne pratique.

Pinterest et Twitter vont-ils réussir à viabiliser le social commerce ?

Marche. Marche pas. Marche. Marche pas… C’est en substance l’évolution du consensus sur le social commerce. Peut-on réellement vendre sur les médias sociaux ? Non, pas réellement. Mais heureusement, l’acte d’achat ne se limite pas à la mise au panier et à la saisie d’un N° de carte bancaire. Comme je me suis déjà exprimé sur le sujet (Est-ce la fin du social commerce ?), je ne reviens pas dessus.

Une récente étude du cabinet Yuseo nous révélait le mois dernier que les acheteurs fréquents n’utilisaient pas les réseaux sociaux dans le cadre de leur achat : Réseaux sociaux pour les achats en ligne, miroir aux alouettes ou réel levier ?. Soit, mais je reste persuadé que les médias sociaux ont un impact sur les phases amont et aval du processus d’achat. Nous en étions à ces réflexions quand cou sur coup, deux plateformes sociales majeures ont annoncé de nouvelles fonctionnalités très intéressantes.

Il y a tout d’abord Pinterest, la fameuse plateforme d’inspiration et de partage qui m’a dans un premier temps laissé sceptique (Connaissez-vous Pinterest, le dernier épiphénomène d’une longue série), mais qui se révèle finalement très populaire sur la durée, au point d’intéresser Rakuten, le géant du commerce en ligne japonais qui y a investi 100 M$. S’appuyant sur différents formats de meta-données (oEmbed, Schema.org, Open Graph, micro-formats…) les photos sont maintenant enrichies d’informations complémentaires : Introducing More Useful Pins. Ce supplément d’information fonctionne pour les recettes de cuisine, les films, ainsi que les produits :

Pinterest_Rich_Pins

L’intégration est plutôt simple à réaliser et il existe une documentation détaillée sur les Rich Pins : Product Rich Pins Documentation. Une initiative qui semble plaire aux marques, mais également aux éditeurs de sites de contenus : Pinterest takes a “first step” toward working with big brands.

Pinterest_Product

Même principe chez Twitter, qui fait évoluer son principe d’Expended Tweet avec les Twitter Cards : Get more from 140 characters. Là encore, il suffit de rajouter les bonnes meta-données à vos contenus (article, image, application, lecteur média…) pour pouvoir afficher des informations complémentaires (résumé, aperçu…). Très bonne nouvelle, ce principe s’applique également aux produits sur les versions web et mobile :

Twitter_Product_Card

Là encore, l’intégration est très simple et le résultat est plus que convainquant, comme vous pouvez le constater avec ce même produit tweeté avant et après.

Twitter_Product_Card_2

Encore mieux, ils viennent d’annoncer la possibilité de faire de l’embasement directement depuis un tweet : Twitter just added Lead Generation to Twitter Cards.

Twitter_Lead_Gen_Card

Pour le moment, cette fonctionnalité est encore réservée aux sites partenaires US, mais ils devraient prochainement la déployer dans le monde et auprès de « petits commerçants ». Je ne peux qu’approuver ces initiatives tant elles sont indolores d’un point de vue technique et tant elles vont permettre de mieux qualifier le trafic entrant pour les boutiques en ligne. Finalement, j’ai comme l’impression que nous avançons dans la bonne direction et qu’après quelques égarements, les différentes plateformes sociales commencent à proposer de réels outils d’aide à la vente.

Google Maps + WebGL = Google Earth

J’ai toujours considéré Google Earth comme une sorte de jeu vidéo dans lequel on se téléporte d’un endroit à un autre, on survol les immeubles et on plonge au plus profond des océans. Le problème est qu’il faut installer ce logiciel et que l’interface peut être complexe à manipuler (à cause d’une navigation en 3D). Nous avions donc chez Google d’un côté le très fonctionnel Google Maps, avec ses itinéraires et ses adresses, et le très récréatif Google Earth de l’autre. Mais tout a changé le mois dernier avec l’annonce d’une nouvelle version majeure : Meet the new Google Maps, A map for every person and place.

La nouvelle version de Google Maps n’est pour le moment accessible que sur invitation, et les places sont chères tant ce nouveau service est spectaculaire. Il y a d’une part une nouvelle mise en page où la carte recouvre tout l’écran et les éléments sont posés par dessus :

GoogleMaps_1

Il y a ensuite une personnalisation de la carte en temps réel en fonction de votre historique de recherche. Puisque l’on parle de temps réel, il y a également les horaires des prochains trains / métros qui sont pris en compte dans les itinéraires proposés :

GoogleMaps_4

Mais la grande nouveauté est incontestablement la possibilité d’afficher une vue 3D des villes avec les bâtiments. Comme vous pouvez le constater, ce sont les mêmes contenus que dans Google Earth, mais avec une interface simplifiée :

GoogleMaps_2

Pour le moment les bâtiments ne sont disponibles que pour quelques villes (NY, Rome…), mais le rendu est splendide et parfaitement fluide. Encore plus impressionnant, cette nouvelle version propose une vue d’ensemble de la Terre avec affichage des formations nuageuses en temps réel :

GoogleMaps_3

Ce mode de visualisation est d’autant plus spectaculaire que la transition se fait en douceur. Cerise sur le gâteau, en reculant la perspective au maximum, vous avez une vue de la Terre depuis l’espace avec les étoiles en arrière-plan ainsi que la limite jour / nuit :

GoogleMaps_5

Cette dernière vue est tout simplement splendide, et d’autant plus bluffante que chaque étoile est à sa place, car les coordonnées sont très précises. Tout ceci étant disponible sans aucun plug-in grâce à WebGL. Disponible depuis de nombreuses années, cette nouvelle version de Google Maps sera la première application à très grande échelle (WebGL, le nouveau standard de la 3D sur le web).

C’est donc un authentique tour de force de la part des équipes de Google, qui n’en sont pas à leur premier essai (WebGL Experiments), et surtout une grande victoire pour la 3D dans le navigateur. Des sessions ont déjà été organisées pour décrire les aspects techniques lors du dernier Google I/O (Google Maps + HTML5 + Spatial Data Visualization), mais ce sont avant tout les aspects fonctionnels qui sont à travailler, car il me semble plutôt compliqué de manipuler une interface 3D avec des périphériques conçus pour la 2D (souris, clavier ou pavé tactile). Vous avez la possibilité d’investir dans un SpaceNavigaotr 3D, mais peut-être la solution se trouve-t-elle dans les interfaces gestuelles