Redfin propose la visite virtuelle en 3D des biens immobiliers

Le monde de l’immobilier a été secoué cet été avec l’annonce de la fusion des deux plus gros portails du secteur : Zillow and Trulia Merge to Disrupt the Real Estate Industry. Du coup, le troisième acteur se retrouve en position de fragilité… sauf qu’il a dégainé son arme secrète, la visite virtuelle des biens immobiliers : Redfin offers mobile homebuyers a 3D walk through properties. Certes, cette fonctionnalité est proposée depuis de nombreuses années, notamment par Previsite, pionnier en ce domaine, mais les récentes avancées technologiques en matière de scan 3D offrent un rendu de très grande qualité.

Cette visite virtuelle st pour le moment testée sur un petit nombre de biens immobiliers, dont cette maison avec vue sur un lac près de Seattle. Le chargement est un peu long, mais la restitution des intérieurs est très fidèle. De plus, contrairement à quicktimeVR, la visionneuse ne nécessite par de plugin.

redfin-3d-inside

La prise en main est immédiate et intuitive (ça ressemble à Google Street View), puisque la navigation se fait avec les flèches du clavier ou avec des marqueurs au sol que l’on peut choisir avec la souris. En promenant la souris sur l’interface, on se rend vite compte que les volumes sont parfaitement modélisés. La visionneuse propose également une vue de dessus ainsi qu’une « vue d’avion » baptisée dollhouse :

redfin-3d-dollhouse

Le rendu de cette vue générale est perfectible, mais il donne une très bonne idée de la qualité de la captation et de l’assemblage des vues 3D.

La technologie derrière cette visionneuse 3D est fournie par Matterport, une jeune startup qui commercialise à la fois le scanner 3D et le service pour compiler et restituer les images : Matterport taking pre-orders for 3D interior mapping camera.

matterport-3d-camera

Commercialisée 4.500$, la caméra / scanner 3D de Matterport s’adresse exclusivement aux professionnels (dans tous secteurs, mais principalement dans l’immobilier avec leur offre Real Estate 3D Showcase). Cette caméra exploite les puces PrimeSense déjà utilisées dans le module Kinect de la Xbox, une technologie rachetée par Apple l’année dernière. Précisons que Matterport collabore avec d’autres géants du secteur informatique (Google, Intel…) pour décliner son service sur les terminaux mobiles afin de proposer une offre plus abordable : Matterport Brings 3D Capture to Mobile.

//player.vimeo.com/video/75054565?title=0&byline=0&portrait=0

Les premiers retours sont visiblement très bons, puisque les biens immobiliers proposant une visite virtuelle 3D se vendent plus vite et en moyenne à un prix 8% plus élevé que des biens équivalents. J’imagine déjà la possibilité de visionner un appartement ou une maison avec un masque de réalité virtuelle… À quand un équivalent en France ?

La réalité virtuelle à portée de tous grâce aux kits en carton

En moins d’un an, la jeune stratup Oculus Rift aura réussi à complètement s’approprier le sujet de la réalité virtuelle. Le produit est très bon (j’ai eu l’occasion de le tester à nouveau du Salon du Jeux Vidéo), mais il est réservé à une minorité : ceux qui ont commandé le SDK et savent le faire tourner. Pour les autres, les casques de réalité virtuelle restent un concept fumeux. Il faut dire que les premières expérimentations des années 80 / 90 n’étaient pas très concluantes (euphémisme). Du coup, le grand public aborde la réalité virtuelle avec un terrible à priori qui ne peut être levé qu’en essayant un casque de dernière génération, mais ils sont extrêmement rares. Heureusement les choses sont en train de changer avec l’arrivée de kits en cartons.

Tout à commencé il y a quelques semaines quand le site iFixit a découvert que les casques d’Oculus utilisent un écran de smartphone : New Oculus Rift dev kit uses the front of a Galaxy Note 3 as its screen. Bon OK, il s’agit en fait de l’écran d’une phablette, mais partant du principe qu’il y a des centaines de millions de smarpthones en circulation, il serait dommage de ne pas les exploiter en bricolant. Ni une, ni deux, c’est ce qu’à proposé Google en dévoilant lors de sa dernière grande conférence annuelle son Cardboard VR Kit.

cardboard-kit

Ce kit se présente sous la forme d’un patron en carton (qu’il faut plier pour lui donner la forme d’un masque), de deux lentilles et d’un petit mécanisme à aimant pour cliquer. Les mauvaises langues disent que c’est un façon pour Google de dévaloriser le rachat d’Oculus par Facebook, il n’empêche que ce principe de low-cost virtual reality fonctionne très bien : Google’s Cardboard turns your Android device into a VR headset.

google-cardboard

Ce kit est fourni avec une application mobile ainsi qu’un site web proposant différentes démos : Chrome Experiments for Cardboard. Le kit est tout de même un peu complexe à réaliser sois-même (sans compter qu’il faut les lentilles), aussi de nombreux opportunistes se sont engouffrés dans la brèche pour proposer leur propre kit, comme le Unofficial Cardboard. Vendus entre 20 et 25$, ces kits vous permettent d’avoir une très bonne première impression du potentiel des applications de réalité virtuelle. J’ai commandé un kit chez Dodo et je suis stupéfait des sensations que l’on peut éprouver avec un « simple » bout de carton. Le kit est plutôt simple à monter (comptez 5 minutes en vous trompant une ou deux fois) et donne accès un à certain nombre d’applications que l’on installe sur son smartphone. Autant le dire tout de suite : le kit de Dodo est fourni avec une puce NFC qui lance une mini app store dédiée à la réalité virtuelle, mais il y a beaucoup de déchet.

Les applications les plus intéressantes sont tout simplement celles proposées par Google dans son appli. L’interface est au début très déroutante, car on se retrouve face à des icônes qui flottent, mais un rapide tutoriel vous explique comment cliquer à l’aide de la boucle et de l’aimant sur le côté gauche du masque.

cardboard-home

Il n’y a « que » sept applications de proposées, mais elles sont très spectaculaires, à commencer par Google Earth qui vous permet de parcourir des lieux iconiques en mode immersif. Le rendu est tout simplement bluffant, à tel point qu’il donne rapidement le vertige et/ou le tourni !

cardboard-earth

Il y a également une visite guidée du château de Versailles, une interface immersive pour YouTube, un film d’animation et même une Street View de Paris qui tourne en boucle.

cardboard-streetview

Mais le plus impressionnant est sans conteste la possibilité de visionner vos photosphères dans le masque, un must ! Encore une fois, l’idée n’est pas de proposer un masque de grande qualité pour se passer de l’Oculus (ou matériel équivalent), mais de permettre au grand public de redécouvrir la réalité virtuelle et de gommer les a priori. Certes, ces masques en carton ne sont pas très solides, mais il existe des alternatives un peu plus qualitative comme le masque en plastique de chez Homido (une société française basée à Lille) : Homido Launches VR Smartphone Adapter and Sleek App for VR Video with Web Browser on iOS and Android.

Je ne saurais que trop vous conseiller de commander de ces kits pour bien vous rendre compte de l’incroyable potentiel des applications de réalité virtuelle. À consommer avec modération, car une utilisation prolongée peut néanmoins provoquer une terrible sensation de mal de mer…

Les tablettes s’installent dans le quotidien des français

Les tablettes sont avec les smartphones les appareils mobiles les plus emblématiques de la « nouvelle génération » de terminaux alternatifs (celle apparue à la fin des années 2000). Pourtant elles ont fait l’objet récemment de plusieurs articles annonçant leur déclin : Best Buy CEO Says Tablet Sales Are Crashing et Apple’s Tablet Market Share Has Fallen Drastically From Two Years Ago.

Évolution des ventes d tablettes
Évolution des ventes de tablettes (source : Statista)

Le graphique ci-dessus illustre bien le fait qu’il est surtout question d’un ralentissement des ventes de l’iPad (qui dont la part de marché a été divisée par deux), alors que les ventes des constructeurs alternatifs progressent. Ce retournement de marché n’a rien d’étonnant dans la mesure où l’iPad est une tablette qui s’adresse surtout aux tranches les plus aisées avec un taux d’équipement qui arrive à saturation (tous les foyers ne peuvent pas se payer un iPad tous les ans).

Des chiffres plus récents nous prouvent que les tablettes représentent un segment très dynamique : In Defense of Tablets, tiré par les ventes de machines plus abordables tournant sous Android : Le marché des tablettes en hausse de 4,7% à 52,4 millions d’unités au niveau mondial.

Parts de marché des fabriquants de tablettes
Parts de marché des livraisons de tablettes

Pour enfoncer le clou, je vous propose de découvrir les résultats de l’étude Media in Life de Médiamétrie portant sur les habitudes des Français au premier semestre 2014 : Les Français, chaque jour plus connectés aux médias et loisirs numériques. Cette étude nous révèle que les Français ont en moyenne 45 contacts quotidiens avec un média ou un loisir numérique. Pour le moment le média préféré des Français est encore la télévision, mais la tablette a fait une très belle progression puisque 1 foyer sur 3 en est équipé, un chiffre confirmé par la FEVAD dans son 10ème baromètre des comportements d’achats multicanal. L’étude de Médiamétrie nous apprend également que 15% des 25-34 ans l’utilisent tous les jours.

Infographie sur les tablettes en France
Infographie sur les tablettes en France

En termes d’usages, si les smartphones sont dominants à l’extérieur, la tablette est un support d’intérieur (86,5% des usages sont à domicile) dont on se sert principalement pour surfer ou lire ses emails :

Répartition des usages des tablettes
Répartition des usages des tablettes

Derniers enseignements de cette étude, les plages horaires : sans surprise les médias numériques sont plus consultés le soir, surtout les tablettes qui sont utilisées en parallèle avec la télévision.

Conclusion : la tablette s’installe petit à petit dans le quotidien des Français. La grande question est maintenant de savoir si votre marque ou votre offre sait exploiter les opportunités offertes par les tablettes : contexte d’usage plus détendu que sur un ordinateur, faible pression publicitaire,  versatilité…

Tout reste à faire en social commerce

Le social commerce est une espèce de serpent de mer : tout le monde en parle, sans réellement l’avoir vu, et chacun à sa propre définition. Il en résulte beaucoup de cacophonie et des nécessaires recadrages (Mythes et réalités du social commerce). Le problème est que les pratiques de commerce en ligne et les médias sociaux eux-mêmes évoluent énormément. Du coup, le social commerce est un sujet pour le moins instable. Je vous propose de faire le point en cette rentrée sur les tendances et les dernières actus.

Si vous ne l’avez pas encore vu, je vous recommande cette étude très instructive de Kenshoo et DataPop : Search and Social Commerce Index Report. Cette publication repose sur une analyse de 40 distributeurs et d’une base de près de 3 M de produits. Il en ressort les enseignements suivants :

  • En moyenne seul 1,7% des produits sont visibles sur les médias sociaux (Facebook, Pinterest, Polyvore, TheFancy…), 7,2% des produits dans l’habillement et la décoration ;
  • 70% des publications ne sont pas optimisées pour les médias sociaux (choix du nom ou descriptions).

Je reformule pour celles et ceux qui n’auraient pas bien lu : 9 produits sur 10 ne sont pas exposés sur les médias sociaux. Cela laisse donc une énorme marge de progression pour les marques et distributeurs. De même, cette histoire d’optimisation me travaille, car il y a pourtant de nombreuses options disponibles pour valoriser les publications en utilisant les bons marqueurs et surtout analyser leur impact.

datapop-kenshoo-commerce

Ce rapport nous montre surtout qu’il y a une vie en dehors de Facebook et que les médias sociaux sont également un bon moyen d’améliorer le référencement et la visibilité globale des produits.

Une autre étude nous apprend que les Facebook Offers peuvent être un levier puissant, du moment qu’elles sont correctement exploitées : 84 Percent Claim Facebook Offers Can Influence a Purchasing Decision. Et puisque l’on parle du loup, la période estivale a été l’occasion pour Facebook de retirer sa fonction de cadeaux (Facebook Is Shutting Down Gifts To Focus On Its Buy Button And Commerce Platform) et de lancer ses boutons d’achat direct : Facebook Tests Buy Button To Let You Purchase Stuff Without Leaving Facebook.

facebook-buy

La fonction d’achat intégrée à Facebook est donc accolée aux publications et messages sponsorisés. L’implémentation est visiblement plutôt simple (Testing a New Way for People to Discover and Buy Products on Facebook). Certes, le lancement de cette fonctionnalité est une grosse annonce, mais ne vous leurrez pas sur son réel impact : elle ne concernera que des achats d’impulsion auprès des tranches de population les plus aisées. Cette interview publiée sur InsideFacebook nous rappelle à juste titre que seuls 15% des habitants possèdent une carte bancaire (obligatoire dans le processus d’achat sur Facebook) : Facebook’s Buy button and the future of global commerce. Déjà que les membres ne font globalement pas confiance à Facebook en ce qui concerne la confidentialité de leurs données personnelles (Do you trust Facebook with your personal information?), imaginez ce que ça pourrait donner avec des transactions en ligne et le stockage de numéro de cartes bancaires !

Ceci étant dit, personne ne peut reprocher à Facebook de lancer cette fonctionnalité, car elle était attendue de longue date. Idem pour Twitter qui n’en finit plus de tester son offre marchande : “Buy Now” Buttons Start Appearing in Tweets. Is Twitter Shopping Finally Here?.

twitter-buy

Outre Facebook et Twitter, les choses sont en train de bouger sur les autres plateformes sociales, notamment Instagram à travers l’offre Like2Buy de Curalate : Target, Nordstrom make Instagram shoppable. Grâce à cette offre, des distributeurs comme Nordstrom ou Target peuvent exporter une partie de leur catalogue sur Instagram. En cliquant sur le lien, les visiteurs sont amenés dans une boutique en ligne où les produits disponibles sont affichés de la même façon que sur Instagram.

nordstrom-instagram-shop

Nous ne parlons pas ici d’une fonctionnalité d’achat intégrée, mais plutôt d’un service permettant de facilement vendre des produits en exploitant Instagram. Ceci implique nécessairement une sélection rigoureuse des produits affichés.

Comme vous pouvez le constater, les pratiques de social commerce évoluent dans le temps, en fonction du comportement et des attentes des utilisateurs. Dans tous les cas de figure, l’important est de retenir n’est pas que les clients achètent sur les médias sociaux, mais que leur parcours client a été irrémédiablement modifié et que les médias sociaux en sont une composante essentielle (Meet Generation C, a new generation of connected customers). Cela fait plusieurs années que je vous parle de social commerce et le sujet est loin d’être clôt. Les comportements évoluent, les pratiques et outils à disposition des distributeurs s’enrichissent, et l’environnement légal s’affine (Un avis de consommateurs sur 2 publié sur internet est faux). Autant de bonnes raisons de bien penser en amont sa présence sur les médias sociaux et l’utilisation qui peut en être faite dans un cadre marchand. Ne vous précipitiez pas, car les écueils sont nombreux. Tout est question de préparation, de planification et d’anticipation.

Récapitulatif des annonces de l’été 2014

Nous sommes lundi, il pleut, c’est donc forcément la rentrée ! Quoi que, j’ai l’impression qu’il a plu tout l’été…. Enfin bref, ne commençons pas à nous égarer : le mois de septembre approche, il est donc temps de faire le point sur tout ce qui s’est passé dans le monde numérique durant le mois d’août. Pas de grosses annonces fracassantes, mais de nombreux signaux qui indiquent que l’activité est toujours aussi forte.

Mondialisation du commerce en ligne

Cet été a été marqué par l’entrée en bourse de Rocket Internet : IPO-Bound E-Commerce Giant Rocket Internet Consolidates, Holtzbrink Takes 2.5% Stake. Pour celles et ceux qui ne connaissent pas, c’est une société allemande passée maître dans l’art de copier les boutiques en ligne des autres sur d’autres continents : 15 US Companies That German ‘Clone Factory’ Rocket Internet Copied. Ceci étant dit, force est de constater que leur petit business fonctionne très bien : Ahead of Rocket Internet IPO, here are the numbers on its Southeast Asian ecommerce storesHow Rocket Internet’s Dafiti is helping to shape the future of e-commerce in Latin America.

Le commerce en linge en Inde décolleWith $1B funding, Flipkart fires salvo at Amazon: We’re going to be the Alibaba of India. Du coup, Amazon monte au créneau : Why Amazon Is Pouring $2 Billion into India, in Three Charts.

Puisque l’on parle du loup, Amazon se lance sur le créneau de l’encaissement : Amazon’s credit card reader is Here, and it’s dramatically cheaper than Square. Et pendant ce temps-là, Paypal fait du paiement mobile en un clic : PayPal announces “One-Touch Mobile Payments”.

Toujours autant de frénésie autour des applications mobiles

Rien ne semble arrêter l’inexorable montée en puissance des applications mobiles : Snapchat and WhatsApp are taking over photo sharing. Du coup, c’est à celui qui annoncera le plus d’utilisateurs : WhatsApp reaches 600 million active usersWeChat reaches 438 million monthly active users as growth slowsSnapchat Is Now The #3 Social App Among MillennialsRakuten: Viber has 608 million registered accounts, is the future of our company. Toute cette agitation autour des applications mobiles engendre une réflexion plus profonde sur l’impact des smarpthones sur notre vie quotidienne (I Moved To San Francisco, And Now I Have Apps Doing Everything For Me) et en inquiètent plus d’un (China reportedly blocked chat apps Line and Kakao Talk over terrorism concerns). Ceci étant dit, l’engouement pour les applications mobiles semble être concentré sur les applications de communication : Most smartphone users download zero apps per month et Are We Approaching Peak App Overload?.

Et pendant ce temps-là, l’inexplicable succès de l’application Yo ne faiblit pas : App Raises $1M In Funding For Simply Sending The Message ‘Yo’ Back And Forth, How Yo became one of the most viral apps of all time. ils pensent d’ailleurs à se diversifier : Yo App Updates With a ‘Whole New World of Possibilities et Yo goes beyond ‘yo’ and adds hashtags, links.

Omniprésence de Facebook sur les médias sociaux

Nous avons maintenant la preuve (empirique) que Facebook est de moins en moins un réseau social et de plus en plus un portail :  I Liked Everything I Saw on Facebook for Two Days. Here’s What It Did to Me. Soit, de toute façon il semblerait que les réseaux sociaux soit un concept dépassé : Secret Users Have Started Hosting Secret Dinner Parties, and They Are Brutal (précisons que pour utiliser Secret il faut un compte Facebook).

Sinon Instagram, qui est la propriété de Facebook, vient enfin de fournir des outils pour les annonceurs : Instagram announces three new business tools for brands: Account insights, Ad insights, and Ad staging.

Attendez-vous à d’autres annonces de la part de Facebook dans les prochaines semaines.

La publicité native en question

Gros buzz également cet été autour de la valorisation record de BuzzFeed, le portail de news qui s’est fait une spécialité des listes et GIF animés  : BuzzFeed reportedly worth $850M after $50M investment from Andreessen Horowitz, BuzzFeed valued at more than three times the Washington Post. Le succès de ce portail, et des techniques rédactionnelles très douteuses qu’il a su mettre en oeuvre, engendre des questionnements sur l’évolution des portails de news : Content Distributed.

Au-delà des titres racoleurs et du contenu très pauvre, c’est le modèle économique de BuzzFeed (reposant sur la publicité native) qui agace et divise la profession : Native advertising remains an awkward but very necessary mess et Native-Ad Experts Critique John Oliver’s Harsh Critique of Native Advertising.

Divers

Nous avons retrouvé l’inventeur des pop-up publicitaires, il s’excuse et nous apprend que tout partait d’une bonne intention : Apologies From The Creator Of The Pop-Up Ad.

Au cas où vous ne vous en seriez pas rendu compte, les robots sont partout : Meet The Robot That Made Me Want More Robots, Honda’s new, smarter ASIMO brings robots closer to the mainstream, Robotics Pioneer Launches the First Personal Robot You Might Actually Buy, This drone can find lost or stranded people by picking up their mobile phone signals, South Korean Shipyard Workers Wear Robo-Suits For Super-Strength et Starwood Introduces Robotic Butlers At Aloft Hotel In Cupertino.

Voilà, c’est ce que j’ai retenu des événements numériques de ce mois d’août. Sinon la rentrée devrait être très très chaude avec de multiples annonces des constructeurs de terminaux mobiles et notamment la sortie imminente de l’iPhone 6 et de l’iWatch. Au boulot !

Des expériences visuelles toujours plus sophistiquées avec HTML5

Saviez-vous que les dernières recommandations officielles du W3C concernant le langage HTML remontent au siècle dernier ? La version 4.01 des spécifications HTML date très exactement du 24 décembre 1999. Nous sommes en 2014, cela fait donc 15 ans que les technologies de présentation de pages web évoluent, mais que l’organisme de standardisation des technologies web piétine. Heureusement l’industrie s’est organisée pour pallier le retard, notamment à travers des initiatives conjointes comme WebPlatform.org.

Au cours des 15 dernières années, nous avons pu assister au triomphe de technologies propriétaires comme Flash, et à leur disparition avec la montée en puissance des terminaux mobiles. Rétrospectivement, il est amusant de constater que le discours d’Apple était d’exploiter les standards du web, alors qu’ils ne jurent plus maintenant que par leurs technologies propriétaires pour développer des applications (notamment le nouveau langage Swift). Heureusement, certains éditeurs militent pour faire valoir les qualités de HTML, notamment Adobe. Ironie du sort, les rôles se sont inversés !

Vous seriez extrêmement surpris de découvrir tout ce qu’il est possible de faire avec les dernières versions de HTML, CSS et javascript. Je vous propose dans ce cadre de découvrir la présentation de CJ Gammon qui compile les dernières innovations en matière de présentation et d’expériences visuelles : Rich Web Experiences.

Au programme de ces expériences visuelles :

  • Le masquage de certaines zones d’image avec ClipPath ;
  • Les masques CSS (statiques et dynamiques) ;
  • Les fonctions de mélange et de filtre CSS ;
  • La manipulation d’objets SVG et Canvas 2D ;
  • Les objets et représentations 3D avec WebGL et javascript ;
  • La manipulation de vidéos (masques, effets, transitions…) ;
  • La scénarisation de contenus avec CSS ;
  • Les moteurs de jeux en ligne ;
  • La communication en temps réel avec WebRTC…

Ces expériences sont très impressionnantes, par contre il vous faudra impérativement un navigateur moderne, et encore : aucun navigateur actuellement sur le marché ne permet d’afficher correctement tout ce qui est décrit dans la présentation. En jonglant entre Chrome, Safari et Firefox, vous pourrez néanmoins voir toutes ces expériences en « live ». Si l’une ou l’autre de ces technologies vous intéresse, je vous recommande de vérifier leur compatibilité sur le site CanIUse.

Idéalement, nous devrions attendre que ces techniques soient standardisées, mais nous avons maintenant un minimum de recul sur la lenteur du processus. L’important à retenir est que HTML5 est beaucoup plus sophistiqué qu’on ne le pense, notamment grâce à javascript et CSS3 (cf. A Map of the Best Animation Libraries for JavaScript and CSS3). Comme toujours, le meilleur moyen de s’en convaincre est de regarder du côté des jeux : Play a Microsoft-made HTML5 version of Settlers of Catan in your browser right now et Current state and the future of HTML5 games.

En synthèse : HTML n’est pas qu’un langage simpliste pour afficher des pages web, c’est une plateforme de développement pour pouvoir distribuer des contenus riches et des applications en ligne. Ceci est particulièrement pertinent en cette période où les usages des internautes migrent vers des terminaux mobiles propulsés par différents systèmes d’exploitation (iOS, Android, AOSP, Windows Phone, FirefoxOS, Tizen…).

(via CMSWire)

Faut-il abandonner les menus façon hamburger ?

Voilà presque 7 ans que l’iphone a été mis sur le marché. Sept années au cours desquelles les éditeurs se sont arraché les cheveux pour adapter leur site web aux contraintes des smartphones. Au fil des années les concepteurs se sont rapidement rendu compte qu’il n’y aurait jamais assez de pixels pour afficher un menu de navigation digne de ce nom et qu’il fallait donc s’en passer. Assez rapidement, un consensus a été trouvé autour d’un symbole abstrait en forme de hamburger. L’origine de ce symbole remonterait au PARC et désignerait une liste ou un empilement d’items (Who Designed the Hamburger Icon?).

hamburger-button

Le problème est que ce pictogramme pose des problèmes d’interprétation. Autant le symbole de la loupe est universellement associé à une recherche (The Magnifying-Glass Icon in Search Design: Pros and Cons), autant ce symbole de hamburger n’évoque pas grand chose aux mobinautes : Don’t Make These Mobile Menu Mistakes. Du coup, nous avons eu droit ces derniers mois à une série d’articles déconseillant l’utilisation de ce symbole : Don’t Make These Mobile Menu MistakesThe Hamburger is Bad for YouWhy and How to avoid Hamburger MenusHamburgers & Basements: Why not to use left nav flyoutsThe Advantages of table views over left nav flyoutsAn update on the hamburger menuBasement Menus and Breaking the Rules of App Design

Les auteurs de ces articles sont unanimement tous d’accord pour dire que « la forme suit la fonction« , qu’il ne faut surtout pas « enfreindre le modèle mental des utilisateurs » et que comme le rappel Dieter Rams, « Good Design Makes A Product Understandable« . OK… soit… Je ne sais pas pour vous, mais la lecture de ces articles me laisse sur ma faim dans la mesure où ils ne donnent pas de solution alternative viable. Je sais bien que « Good Design Is Unobtrusive« , mais ça ne me dit pas comment résoudre le problème de place : le manque drastique de pixels nous force à trouver des compromis, pas des solutions idéales qui fonctionnent dans 100% des cas. Adopter le pictogramme du hamburger est d’autant plus tentant qu’il a été utilisé à de nombreuses reprises, notamment par des applications mobiles et desktop, cela créé donc un précédent :

hamburgers-icons

Heureusement certains apportent des données concrètes à ce débat, notamment l’équipe d’Exis Web avec une série d’articles : Do Users Understand Mobile Menu Icons?Mobile Menu AB Tested: Hamburger Not the Best Choice?Hamburger vs Menu: The Final AB Test. Plusieurs versions du bouton « Menu » ont ainsi été testées auprès de presque 240.000 personnes.

hamburger-menu-test

Il ressort de cette étude que les deux premières versions fonctionnent le mieux, avec une préférence pour le libellé « MENU » encadré. Loin de moi l’idée de remettre en cause les résultats de cette étude… mais cette version ne règle pas forcément le problème de place. Parfois, vous n’avez pas d’autres choix que d’utiliser le pictogramme du hamburger parce que vous n’avez ni la place, ni le temps de trouver une meilleure solution (Mobile Navigation Menus and Great User Experience). Parfois, le choix n’est pas ici guidé par des règles ergonomiques, mais par le pragmatisme : il faut que ça rentre. Même s’il n’est pas parfait, ce pictogramme a été adopté par de nombreux sites, chacun en faisant sa propre interprétation : Le Parisien l’isole à gauche, Eurosport le met en italique, Le Figaro l’associe à son logo et 20Minutes la place à droite avec des puces.

hamburger-menu-fr-550x238

Dans les exemples cités plus haut, ce n’est pas tant le picto qui pose problème, mais ses variations. Il serait bien moins risqué d’adopter une implémentation « standard » (ex : la responsive navbar de Boostrap). Ce n’est pas un hasard si les quatre exemples précédents sont issus du monde de l’édition : les portails d’information sont ceux qui ont le plus besoin de place, donc qui doivent impérativement masquer le menu de navigation. Deux sites s’illustrent dans cette catégorie : le Time Magazine (avec un picto qui change de couleur quand il est activé) et USA Today (avec l’intégration d’un moteur de recherche et d’une croix pour fermer le menu).

hamburger-menu-us-550x221

Puisque nous parlons d’afficher / masquer le menu de navigation, il est également très important de s’assurer d’une bonne réactivité de l’interface. Pour cela il existe une astuce très pratique dans la dernière version de Chrome pour Android : 300ms tap delay, gone away.

Donc… le pictogramme en forme de Hamburger s’impose petit à petit comme la convention de conception pour désigner un menu dans les interfaces mobiles. Avec le temps, les mobinautes vont finir par s’y habituer et développer un nouveau modèle mental (associer le picto du hamburger à un menu de navigation). Là où la situation se complique, c’est que certains commencent à l’utiliser pour gagner de la place sur la version desktop de leur portail : Le Time Magazine, Fortune, Money ou encore L’Express.

money

Certes, cela donne plus de visibilité à ce picto et accélère (en théorie) l’apprentissage de ce à quoi il correspond, mais cela génère également un gros risque de désorientation : Killing Off the Global Navigation: One Trend to Avoid. Je suis donc très mitigé quant à cette pratique, et je rejoins l’avis de l’auteur de l’article précédent : cette solution doit impérativement être testée pour valider sa viabilité.
Comme le dit le proverbe : « Il faut savoir balayer devant sa porte« , je me suis penché sur l’exercice délicat qui consiste à adapter la mise en page de mes blogs aux smartphones. Mon approche a été de partir de la version mobile en se concentrant sur l’essentiel : le titre du blog et les derniers articles. J’ai ensuite rajouté des éléments d’interface permettant de basculer à un autre blog (la flèche qui pointe vers le bas à droite du titre), d’afficher la liste des derniers articles (la bordure et l’étiquette avec un chevron à gauche) et d’afficher les outils (le picto hamburger en haut à droite).

mobile-menu-fcnet

La justification de ces choix est la suivante :

  • Utiliser une flèche pour afficher la liste des blogs est une convention déjà utilisée dans les menus déroulants, cela permet également d’utiliser le titre du blog qui est déjà affiché ;
  • La bordure à gauche fonctionne comme un indice visuel sur l’existence d’un panneau que l’on peut déplier en « tirant » sur la languette (comme le fait le site du Time Magazine dans sa version mobile) ;
  • J’ai adopté le picto du hamburger pour signaler l’existence d’un menu déroulant et je l’ai positionné à droite du titre en bout de ligne, comme le fait le navigateur de façon native (à droite de la barre d’adresse).

Le résultat est, je pense, satisfaisant, même si je trouve le contraste encore trop faible.

Conclusion : le pictogramme du hamburger n’est pas la solution idéale, mais c’est un compromis intéressant pour les concepteurs qui manquent de place et de temps, à partir du moment où il est implémenté sans exantricité. Ceci étant dit, rien ne vous empêche de réfléchir à des alternatives et de tester l’impact pour valider les changements.