Blog

Paris Web 2016 : ce qu’il faut retenir

La 11ème édition de Paris Web, le rendez-vous des gens qui font le web, s’est déroulée du jeudi 29 septembre au samedi 1er octobre. Quelques uns d’entre nous ont assisté aux 37 conférences et 12 ateliers. Nous étions également là pour soutenir l’une des nôtres, Marie-Amélie Cotillon, pour son retour d’expérience “Quand les militaires se prennent au jeu du design sprint”. Ce que l’on retient de ces 3 jours :

Progressive Web Apps

Nouveau terme, les Progressive Web Apps sont en fait des sites web responsives utilisant différents outils afin d’améliorer l’expérience utilisateur.

Passons sur le fait de pouvoir afficher une icône sur l’écran d’accueil de votre téléphone, ou un splashscreen, ceci est faisable depuis un moment.

La vraie nouveauté, ce sont les Service Workers, qui vont vous permettre de gérer le téléchargement de vos ressources et de vos données en background. Hubert Sablonnière nous a expliqué le fonctionnement de ces Service Workers, et le fait de rendre notre site disponible hors-ligne.

Couplé à l’API de push, votre site web aura un comportement proche d’une application native. En effet, vous allez pouvoir envoyer aux visiteurs de votre site web, qui l’ont accepté, des push notifications comme sur les applications natives.

Plus d’informations sur les progressive web apps ici.

HTML 5.1 et Web Platform APIs

Charles McCathieNevile et Léonie Watson nous ont présenté l’avancement du standard HTML 5.1 et des différentes APIs.

Au niveau des APIs, ils sont revenue sur l’API de push notifications, dont nous avons déjà parlé au niveau des Progressive Web Apps, qui pourra être sûrement être combiné avec l’API vibration, qui vous permet d’utiliser le vibreur du téléphone.

Vous souhaitez gérer une manette de jeux directement depuis votre site internet, c’est maintenant faisable avec l’API Gamepad. L’API pointer lock, elle, permet de verrouiller le pointeur de la souris sur un élément particulier de votre site web, utile notamment sur les canvas, si vous réalisé une web app de dessin par exemple.

Autre API présentée, la Web Speech, qui se découpe en deux parties, l’utilisation du synthétiseur vocale pour la lecture de texte, mais aussi de la reconnaissance vocale qui convertira la voix de votre utilisateur en texte via le microphone de son appareil.

Du côté de l’HTML 5.1, la grosse nouveauté est du côté des images grâce à la balise <picture> et des attributs srcset et sizes. C’est effectivement très intéressant, pour adresser la meilleur image (en terme de poids) en fonction de l’appareil qui visite votre site web. On notera aussi, de nouveaux types pour les inputs (week, month, datetime-locale), de nouveaux événements oncopy, oncut, onpaste et de nouvelles balises <details> et <summary>.

Du web plus rapide et plus fiable

A l’heure où l’environnement s’affirme comme une préoccupation majeure, Frédéric Bordage est venu nous parler d’éco-conception. Comme son nom l’indique, il s’agit d’une approche visant à réduire l’empreinte environnementale des produits et services. Appliquée dans le domaine de l’automobile depuis plus de 15 ans, cette démarche est loin d’être une priorité dans les services numériques et notamment dans le Web qui pourtant pèse aujourd’hui très lourd en terme d’écologie (le double de la France).

En résumé, il s’agit de « trouver le meilleur équilibre possible entre le niveau de performance à atteindre et la quantité de ressources nécessaires pour atteindre cette performance ». Pour cela, il faut intégrer la démarche d’éco-conception dès le début du projet en appliquant quelques bonnes pratiques majeures aux niveaux fonctionnel, graphique, ergonomique et technique.

Comme nous l’a montré Frédéric via quelques retours d’expérience, les résultats sont excellents, et concernent non seulement l’environnement mais aussi les coûts d’investissement, les coûts opérationnels, la qualité de l’expérience utilisateur et de l’accessibilité.

 Curieux, nous sommes allés voir quel était l’impact d’un article de notre blog grâce à l’outil d’évaluation présenté : ecoindex.fr, et voici un extrait du résultat :

éco-conception paris web 2016 pw2

Une conférence qui nous a beaucoup séduit et à laquelle a partiellement fait écho Christophe Porteneuve via son ode à Node.js. Une présentation en chiffres qui va convaincre les derniers réticents quant à la performance et la fiabilité de cette techno de plus en plus adoptée : front-end, mobile, desktop, APIs, microservices, IoT … rien n’y échappe ! Dans la continuité de la conférence, l’atelier technique nous a permis d’y mettre un pied et de se former à quelques principes de base de la techno.

Autre thème abordé à plusieurs reprises lors des ces deux journées : l’automatisation des tâches. David Sferruzza est parti du besoin d’outils de partage de code et de gestion des dépendances pour nous présenter la mise en place du déploiement automatique d’une application via une plateforme d’intégration continue. Certes très intéressant, rien de bien nouveau pour nos experts en déploiement.

Les ateliers de co-création

Les méthodes de co-création étaient à l’honneur : sous format de conférence, comme celle de Marie-Amélie sur le design sprint, mais également via des ateliers comme celui sur le design thinking : une occasion sympa de passer de la théorie à la pratique en petits groupes, via un mini challenge “co-créons ensemble la valise idéale pour partir en voyage”. On est d’ailleurs assez fier du résultat, puisque le concept prototypé par le groupe dans lequel se trouvait Marie-Amélie a remporté le vote des participants. Malgré un timing serré, nous avons eu le temps de réaliser (presque) toutes les étapes : interviews, analyse des besoins, brainstorming, prototype, feedbacks, itérations, sélection, implémentation (trop court).

paris-web-2016
Le flexibag. Une valise en “kits” modulable répondant aux différents besoins (1 compartiment pour un séjour court, plusieurs compartiments pour de longues vacances en famille, etc.). Les éléments sont légers, pliables et se rangent à plat dans un sac, garantissant un gain de place dans nos petits appartements. On a même prévu des roulettes de secours clipsables !

A travers les conférences, on a également aimé l’approche DIY des designers pour répondre à des problématiques rencontrées lors d’ateliers de conception avec leurs clients. C’est comme ça que Emeline Racon en est arrivée à créer son “kit de survie UX” et que Belen Barros Pena et Bernard Tyers, insatisfaits des solutions disponibles sur le marché, ont expérimenté et mis en place un système permettant de filmer l’écran, le doigt et le visage des utilisateurs pour leurs tests utilisateurs sur mobile, en nous faisant une démo live de leur fabrication maison.

kit-de-survie-ux paris-web-2016

L’équipe de BlaBlaCar a présenté son expérimentation des feature flags. Technique qui permet de déployer progressivement à des populations restreintes les nouveautés développées (fonctionnelles, graphiques etc…). C’est une technique bien éprouvée qui présente beaucoup d’avantages à condition de ne pas se noyer sous une trop grande quantité de features flags. Utilisées à bon escient, elles sont également un très bon outil d’A/B testing, puisqu’elles permettent de tester des nouveautés par parcimonie à un échantillon d’utilisateurs.

L’accessibilité

L’accessibilité a été un des grands sujets de cette année à Paris Web et à cette occasion nous avons pu participer à un atelier sur ce thème. Lorsqu’on parle d’accessibilité, on pense souvent aux handicaps visibles (vue, audition, etc). Mais il existe également un handicap souvent oublié car invisible : les troubles de l’attention. Damien Senger, souffrant lui même de ce handicap, nous a expliqué en quoi il consiste et comment il peut altérer sa navigation sur le Web. Il nous a également amené à analyser des parcours utilisateurs sur certains sites, afin d’y déceler les soucis qu’ils peuvent causer aux personnes souffrant de cet handicap.

Les principaux symptômes sont les suivants :

  • Inattention et distraction
  • Tendance à ne pas obéir aux consignes
  • Difficulté à organiser ses travaux et son temps
  • Difficulté d’appréhension des tâches demandant un effort mental
  • Perte fréquente d’objets
  • Difficulté dans les discussions

La problématique du trouble de l’attention est souvent proche du spectre autistique. Ainsi, bon nombre de personnes souffrant de ces problèmes ont plus de difficultés dans les interactions sociales, comme la compréhension du sous entendu et du second degré.

Pour l’utilisateur souffrant de troubles attentionnels, toute perturbation extérieure l’éloigne de ce qu’il était en train de faire. Chaque image, mot ou information est une porte de sortie vers d’autres sujets. Combiné aux liens hypertextes, il est très facile de se perdre dans sa navigation et de ne plus savoir ce que l’on faisait à la base. Les distractions visuelles comme les animations, ou encore le contenu mal contextualisé et imprécis, sont également très perturbants. Les notifications intrusives (Slack, Hangouts, mails, etc) peuvent vite devenir problématiques car elles donnent envie d’aller vérifier ce qui se passe de manière compulsive.

L’atelier nous a permis de retenir quelques règles qu’il est utile de connaître en phase de conception Web :

  • Limiter les animations et autres distractions visuelles
  • Contextualiser le contenu, celui-ci doit être clair et précis. On veillera également à éviter les sous entendus
  • Mettre en place une présentation aérée : par exemple, préférer des listes à des gros blocs de texte
  • Utiliser des images pertinentes : il faut faire attention à ne pas mettre des images totalement décorrélées du sujet, qui seront une porte de sortie supplémentaire (elles appellent à se renseigner sur de nouvelles thématiques )
  • Utiliser des maquettes simples avec des layouts cohérents, préférer la simplicité dans la présentation du contenu.
  • Ne pas interdire les bloqueurs de publicité : les gens souffrant de troubles attentionnels les utilisent massivement car le contenu publicitaire qui est une grande source de distraction

Lors des “Lightning talks” (des micro conférences de quelques minutes), plusieurs intervenants atteints de handicaps visibles ont pris la parole pour exprimer leur ressenti vis à vis de leur expérience de la navigation Web. Ces témoignages directs nous ont permis de mieux prendre conscience des difficultés rencontrées par ces personnes, et que des éléments qui nous semblent anodins peuvent se transformer en calvaire pour ces utilisateurs.

Pour aller plus loin, on peut consulter les posters d’accessibilité mis en ligne par gov.uk. Ces posters regroupent des bonnes pratiques à adopter en fonction des types de handicaps.

Conclusion

D’un point de vue technique pure…

Ces conférences Paris Web ont essentiellement eu un effet de réassurance quant aux orientations prises par Backelite. En effet aucune réelle surprise, aucune découverte technologique bouleversante, aucune remise en cause de nos carrières professionnelles. Tout juste quelques piqûres de rappel:

  • Une piqouze nodeJS, administrée par Sir Christophe Porteneuve, qui nous a bien fait comprendre que la France est un des pays les plus en retard (de l’ordre de 3 années) dans son adoption, que toutes les sociétés du Fortune 500 ont au moins 1 application structurante tournant sur Node.
    C’est ce dernier arguments qui aura fini de nous convaincre ….
  • Une autre intitulée “ChiffroFête”, ou CryptoParty, le meetup du grand public et des ingénieurs spécialisées dans la protection des données.
    Ici nous ne retiendrons que 2 points:
    – notre rôle/devoir de protection vis à vis de nos innocents et crédules utilisateurs qui fait écho au thème « On a tous un rôle à jouer »
    – la nécessité de sensibiliser l’ensemble de la chaîne de production à ces problématiques de sécurité

D’un point de vue conférences…

Nous avons été également réceptifs au thème du “syndrôme de l’imposteur”, abordé par Agnès Hasser ; thème également sous-jacent via d’autres sujets, comme “D’imposteur à mentor ?” ou “L’accessibilité décomplexée”.

Ces conférences ont particulièrement fait écho à Marie-Amélie, oratrice dans cette édition de Paris Web. Voici ces conseils sur ce sujet :

Nous sommes sûrement nombreux à parfois douter de notre légitimité à prendre la parole sur tel ou tel sujet, à se demander si l’on a vraiment quelque chose à apprendre aux autres ou encore se questionner sur la façon de sensibiliser les autres à ce sujet qui nous passionne tant.

Partons du principe que l’on a tous quelque chose à apprendre à quelqu’un. Si vous avez envie de donner une conférence, faites-le d’abord pour vous, pour que cela soit avant tout un plaisir. C’est l’occasion de faire des recherches et de monter en compétence sur le sujet choisi, de prendre du recul par rapport à son expertise et son expérience, de prendre confiance en soi, et de rencontrer de nouvelles personnes qui partagent la même passion. C’est une belle aventure, donc j’incite mes petits camarades à faire de même !”

De plus, cela s’inscrit tout à fait dans le thème de Paris Web 2016 : « On a tous un rôle à jouer ». Un thème très bien abordé notamment lors des interventions liées à l’accessibilité bien sûr, mais aussi via la question de l’inclusivité, autrement dit le fait de n’exclure aucun individu sur motif de genre, race, classe sociale, sexualité, handicap, etc.

Une belle portée sur l’éthique donc, de laquelle se rapproche la conférence de Thibault Jouannic, « Anatomie d’une désintoxication au Web sous surveillance », qui nous rappelle, à nous professionnels du Web, que la protection de l’utilisateur est notre responsabilité. Toute donnée récoltée peut être « sensible » et doit être considérée comme telle. Afin de ne pas la diffuser il est donc recommandé de toujours permettre à nos utilisateurs d’avoir la main sur les données qu’ils nous confient et de limiter autant que possible la collaboration avec les acteurs dont l’éthique n’est pas une priorité, comme par exemple : les géants du Web.