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)

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?).

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 Mistakes, The Hamburger is Bad for You, Why and How to avoid Hamburger Menus, Hamburgers & Basements: Why not to use left nav flyouts, The Advantages of table views over left nav flyouts, An update on the hamburger menu, Basement 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 :

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.

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.

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).

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.

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).

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.

Facebook a publié ses résultats trimestriels cette semaine, et ils sont excellents :

• Plus de 1,3 MM d’utilisateurs mensuels (dont 1,07 MM sur terminaux mobiles) ;
• Près de 830 M d’utilisateurs journaliers (dont 654 M sur terminaux mobiles) ;
• 2,9 MM$ de C.A. avec une forte hausse sur les revenus publicitaires mobiles (Where Facebook’s Money Comes From).

Les équipes de Facebook doivent savourer leur victoire, car la situation s’est grandement améliorée par rapport à ce qu’elle était il y a deux ans (le cours de l’action est passé de 17$ à 75$). Tous les détails sont commentés ici : Facebook’s Q2 2014 in charts: best quarterly revenue, now at 1.3B users.

Facebook n’est plus un réseau social, c’est un portail

La domination de Facebook est incontestable, aussi bien vis-à-vis des autres médias sociaux qu’au niveau du web (il n’y a que Google ou Amazon qui pourraient revendiquer également cette place, mais ils ne boxent pas dans la même catégorie). En à peine 10 ans, Facebook a su s’imposer comme LE nouveau portail du web. Par « portail », j’entends le site sur lequel on se connecte tous les jours sans trop savoir pourquoi (il y aura forcément un truc intéressant à lire). Auparavant cette place était occupée par Yahoo, et dans une certains mesure par Netvibes, c’est à dire par un intermédiaire qui vous donne accès à des contenus et services. Je ne range pas nécessairement Google dans cette catégorie, car un moteur de recherche vous donne accès à tous les types de contenu : les produits, tutoriels et services en ligne. La popularité de Facebook repose avant tout sur sa capacité à fournir aux internautes une infinité de contenus à « fort potentiel viral ». Traduction : on ne va pas sur Facebook pour s’instruire, on y va pour se détendre, quand on a du temps à perdre, un peu comme on allume la télévision. Les équipes de Facebook ont fournit de gros efforts pour relever le niveau de qualité des contenus (pour optimiser l’algorithme de filtrage affinitaire), mais ça reste globalement très pauvre, au raz des pâquerettes. Entendons-nous bien : critiquer la qualité des contenus sur Facebook revient à faire le procès des médias de masse (les chaines de TV grand public ou les magazines people ne proposent pas forcément des contenus de meilleur qualité). Ceci étant dit, comme le résume assez bien Bryan Goldberg : « what Facebook users really wanted… was to read shit » (cf. Facebook is no longer a social network. It’s the world’s most powerful news reader).

Facebook est donc devenu une sorte de portail : un meta-site web que l’on consulte machinalement tous les jours par habitude, parce que nous avons tous besoin de souffler et de nous détendre avec des contenus plus légers que sur Mediapart. Sur n’importe quel portai, il n’y a pas assez de place sur la page d’accueil pour tout le monde, il faut donc faire des choix pour n’afficher que les contenus qui ont le plus de chance de satisfaire le besoin d’évasion des lecteurs. Sur Facebook c’est la même chose, sauf que c’est un algorithme qui détermine si un message est affiché ou non sur votre newsfeed. Bien évidement, ces contenus proviennent de sources externes qui fournissent gratuitement des articles, photos ou vidéos dans l’espoir de capter une partie de ce trafic colossal : American Users Spend An Average Of 40 Minutes Per Day On Facebook. Comme Facebook agrège la plus forte audience, il est logique qu’il génère également le plus gros du trafic entrant chez les fournisseurs de contenu : In Q2, Facebook Drove 23.39% of Overall Visits to Sites.

Ceci se vérifie en France où Facebook est de très loin le premier apporteur de trafic comme le montrent les statistiques fournies par StatCounter (détaillées sur le Blog du Modérateur) :

Ces chiffres sont intéressants, car ils illustrent la façon dont les membres se servent de la plateforme : les internautes ne vont plus sur Facebook pour rencontrer de nouvelles personnes, donner des nouvelles ou discuter, car ils le font sur des applications mobiles comme Line, SnapChat ou Tinder (Des enjeux toujours plus élevés autour des applications mobiles sociales).

Il n’y a pas un, mais plusieurs Facebook

Heureusement, cette migration des usages vers les applications mobiles a été anticipé, notamment avec le rachat de WhatsApp en début d’année (Pourquoi Facebook achète WhatsApp pour 16 milliards de dollars ?). La stratégie de diversification initiée l’année dernière semble porter ses fruits, car il y en a maintenant pour tous les goûts : Facebook.com, Facebook Messenger, Facebook Home, Facebook Mentions, Slingshot Instagram… Facebook n’est pas un produit universel, c’est un service que l’on exploite sous différentes formes et à différentes fréquences. La mobilité est bien évidement au coeur de l’écosystème Facebook, mais cette notion de portail est toujours plus poignante à mesure que se dessinent de nouveaux services : Facebook and Uber Discuss Integration of Car Service Into Messenger et Zuckerberg Confirms: A Mobile Payments System Will Come To Facebook Messenger.

Le tour de force de Facebook est d’avoir su repenser la notion de portail et de proposer non pas une version universelle, mais plusieurs expériences pour fidéliser l’audience. Vous noterez d’ailleurs que c’est exactement cette stratégie qu’est en train d’adopter Yahoo. Le problème est que Yahoo ne possède pas des profils de membre aussi détaillés et qu’ils n’ont intégré que tardivement les mécaniques sociales (like et partage).

Facebook est donc LE nouveau portail de référence, un portail « moderne »qui exploite à merveille le web du XXIe siècle, le web SoLoMo : social, mobile et local (Introducing A New Optional Feature Called Nearby Friends). Sur ce terrain là, Facebook rencontre toujours une compétition acharnée de Google, même si les fondateurs semblent avoir d’autres ambitions (Google’s founders on the future of health, transport and robots et Google is collecting medical data to paint a picture of perfect human health).

Puisque Facebook évolue, les pratiques des annonceurs doivent également évoluer. L’idée n’est pas de régresser et d’adopter les tactiques utilisées sur les anciens portails (acheter de la bannière), mais plutôt exploiter Facebook au travers de ses offres publicitaires (Facebook est un support publicitaire de précision, pas un média de masse). J’ai déjà eu de nombreuses occasions de vous mettre en garde contre la course aux fans : vous ne gagnerez pas, car la compétition pour l’attention est trop rude. Plutôt que d’essayer de lutter face à des professionnels de l’édition de contenu ou des marques légendaires, mieux vaut concentrer vos efforts sur des campagnes de recrutement ciblées que d’essayer de faire grossir une base de fans qui est mécaniquement ultra-volatile.

Après de nombreuses évolutions et transformations, Facebook semble enfin avoir trouvé un modèle fiable et pérenne. À vous d’en comprendre le fonctionnement et la façon dont les internautes l’exploitent pour pouvoir améliorer la performance de vos actions et optimiser votre budget.

Vous connaissez certainement l’adage « un produit touché est déjà vendu« . Voilà pourquoi les vidéos interactives sont exploitées depuis de nombreuses années (au moins 6 ans déjà : Encore des tonnes de vidéos interactives chez American Eagle). Bon en fait cet adage est surtout valable dans l’habillement, un peu moins dans l’alimentaire. Le problème est qu’avec la généralisation des terminaux mobiles et l’impossibilité d’utiliser Flash, un véritable challenge technologique est venu compliquer ces pratiques.

Heureusement, la société Cinematique propose un lecteur vidéo capable d’enregistrer les clics et les touchés des internautes : With touchable video, brands see what consumers want to buy. Nous sommes tous d’accord sur le fait qu’un annonceur motivé peut tout à fait créer sa propre campagne, mais l’avantage de l’offre de Cinematique est de proposer une solution technologique simple à mettre en oeuvre qui fonctionne aussi les smarpthones.

Pour les utilisateurs, ce lecteur vidéo est assez semblable à ce qui se fait ailleurs, si ce n’est que certaines zones sont cliquables (ici le gilet de la jeune fille) :

Chaque clic (ou touche) vient incrémenter la liste en bas à droite, que l’on peut consulter en cours de visionnage :

Cette liste correspond en fait à des favoris qui sont associés à des produits que l’on peut visionner et mettre au panier directement dans le lecteur :

Encore une fois, l’intérêt de cette offre est de proposer une solution (visiblement) simple aux annonceurs. Certes, ce n’est pas très intéressant de mettre en oeuvre cette technologie avec une simple pub, mais pour un film promotionnel plus qualitatif, le rendu est particulièrement intéressant :

http://cinematique.com/embed/3/

J’imagine tout à fait une marque vestimentaire industrialiser l’utilisation de ces vidéos interactives dès qu’une nouvelle collection est disponible. Créée il y a deux ans, la société se définit comme « mobile first« , une bonne chose, car le marché est petit à petit en train de basculer. Plus d’info ici : Will Web Video Ever Be as Cool as This App?.

Je me demande s’il serait possible de combiner ces vidéos interactives avec ce principe de bannière déshabillante testée au Brésil : Déshabillez-la !.

Il ne se passe pas une semaine sans que l’on constate la part grandissante que les smartphones ont prise dans notre quotidien (Mobile Is Eating Global Attention), les marques et annonceurs sont pourtant encore ancrés dans des logiques héritées du XXe siècle. Je n’ai eu de cesse de vous répéter que les habitudes des consommateurs ont changé (Mobile First, Second, and Third), j’ai même écrit un livre sur le sujet, mais les mentalités sont dures à faire évoluer…

Les éditeurs asiatiques lancés dans une course de vitesse

La situation est différente en Asie, et plus particulièrement en Chine où l’adoption des smartphones est nettement plus rapide (China’s mobile internet users now outnumber its PC internet users). Du coup, les annonceurs se posent moins de questions et ont été bien plus rapides à faire leurs arbitrages budgétaires (China spends more money on mobile ads than the rest of the world combined). Les éditeurs asiatiques ne sont pas en reste, car ils ont su imposer leurs applications mobiles et faire changer les habitudes des utilisateurs (WeChat is crushing text messaging, people in China now only send about 1 SMS per day). Face à un tel engouement, ils ont rapidement déployé de nouvelles fonctionnalités pour capitaliser sur leur audience, à l’image de Tencent en Chine avec son application WeChat : commande de taxis, achat de billets de cinéma, jeux d’argent et même transfert d’argent entre particuliers (WeChat users in China can now transfer money to each other).

De même, une offre publicitaire est en train d’être testée, avec un déploiement plus large envisagé dans quelques mois : WeChat opens up advertising platform to official accounts with over 100k followers.

L’éditeur Japonais Naver est également très actif avec son application Line qui propose un ensemble de fonctionnalités marchandes : ventes privées, achat entre particuliers et boutiques intégrées (Chat app Line experiments with e-commerce, as it prepares for an IPO).

La Corée du Sud est également un marché très prospère dans ce domaine, notamment avec Kakao une application mobile qui a récemment fusionné avec le deuxième plus gros portail du pays : Korean messaging app KakaoTalk to merge with Daum, the country’s second-largest web portal. Eux aussi se sont lancés dans une course de vitesse pour proposer toujours plus de fonctionnalités avec l’ajout récent d’un Lab : Kakao Talk adds a ‘lab’ to its Android chat app to let users beta test new features.

Une évolution à deux vitesses sur les marchés occidentaux

La situation est différente dans les pays occidentaux, car les foyers sont historiquement bien mieux équipés en ordinateurs et connexions à haut-débit. Ceci étant dit, les internautes n’en sont pas moins accros à leur smartphone : Les Apps, 51% du temps media digital aux Etats-Unis.

Certains ont flairé le filon et concentrent leurs efforts sur les terminaux mobiles à l’image d’Amazon (Zappos rolls out fancy new credit card-reader with help from parent Amazon) ou de Yahoo qui est en pleine transformation (Yahoo Buys Mobile Analytics Firm Flurry For North Of $200M). Autant les éditeurs asiatiques ont une approche intégrée avec des applications mobiles toujours plus riches fonctionnellement, autant le marché US semble se passionner pour des applications qui ne font qu’une seule chose à la fois, et pas forcément la plus intelligente ou utile (cf. How Two Ex-Googlers Turned A Crappy Messaging Service Into A $100 Million App et How Yo became one of the most viral apps of all time).

Du côté des grandes plateformes sociales, les équipes se plient en quatre pour déployer de nouvelles fonctionnalités ou racheter des services. Facebook a ainsi lancé deux nouvelles applications en un mois (Facebook officially launches Slingshot, its latest messaging app, Facebook has released Mentions, an iOS app only for celebrities) et est en train de tester une fonctionnalité marchande sur son site et son application mobile : Facebook starts testing Buy button on News Feed ads and Page posts.

Twitter a également été très actif le mois dernier avec le rachat de deux startups (Twitter Confirms Acquisition Of Mobile Ad Retargeting Startup TapCommerce, Twitter Acquires CardSpring To Power In-Tweet Commerce And Offers) et la finalisation d’une fonction marchande : Buy Now Buttons Start Appearing in Tweets, Is Twitter Shopping Finally Here?.

D’autres éditeurs adoptent une stratégie de développement proche des acteurs asiatiques, notamment Tango qui se fait une spécialité des jeux mobiles : Tango launches a $25m fund for mobile games as it looks to win the US chat app race.

Comme vous pouvez le constater, tous les efforts convergent vers les smartphones, et les applications sociales mobiles sont au coeur de cette course à la domination. Je déplore par contre l’extrême discrétion des acteurs européens qui ne sont représentés qu’à travers les jeux et la publicité mobile. Nous sommes donc rentrés dans une configuration bipolaire où les acteurs asiatiques et américains dominent le marché et tirent l’innovation, donc les usages. Quoi qu’il en soit, j’espère vous avoir convaincu de revoir vos priorités et de placer les smartphones en tête de votre liste.