Bienvenue dans l’angle Alpha : la captation

Le meilleur spectacle que j’ai vu en 2015 est certainement « Bienvenue dans l’Angle Alpha »

L'échelle rouge au centre du spectacle

À la base, il s'agit d'une adaptation au théâtre d'un livre de Frédéric Lordon, « Capitalisme, désir et servitude ». Judith Bernard l’a adapté, mis en scène, et en a fait un spectacle passionnant, drôle et profond sur le monde du travail d’hier et d’aujourd’hui.

C'est un spectacle de théâtre, à la durée de vie forcément éphémère. Mais miracle : la compagnie vient de mettre en ligne une captation sur Youtube. Et franchement je vous le recommande :

Est-ce que ça rendra la même chose que joué devant vous au théâtre ? Non, clairement. Mais maintenant que la pièce est dite, c’est la meilleure approximation disponible, et c’est quand même pas mal.

Prenez une heure, un grand écran, et laissez vous plonger vous dans le monde du travail, du désir-maître et du conatus.

A self-hosted Slack alternative? Asking for a friend.

I started using Slack at CaptainTrain a while ago – and couldn’t go back. Having a nice chat client is good, desktop notifications are great, email notification for missed messages is awesome – plus searchable history, 1-to-1 discussions, images upload, and so on.

It’s so nice that I decided to setup a Slack team for chatting with my friends.

But for one of my friend there was a issue: Slack runs on Slack servers, and all your messages are stored elsewhere. He said he would use the chat only if it was open-source and self-hosted.

Well, fine. I trust Slack people, but having a large part of my private correspondance and musing with my friends on a private server (rather than on Slack databases) sounds like a good idea. So I started looking for open-source Slack alternatives. I found Rocket.Chat, which looks nice, but was young at that time. I found Let’s Chat, and used it for a while (but its development crawled down at some point). And recently I started to use Mattermost.

Mattermost

Mattermost is an “open source, self-hosted Slack-alternative”. Great, sounds exactly like what I want. It’s easy to install (especially the Docker-based evaluation version), works pretty well, supports several teams and many integration hooks – perfect.

Mattermost

Thruth to be told, this is a young product (the 1.0 is only a two months old), and many features, while present, are not as polished as their Slack counterparts. But its moving rapidly, and I’m confident in the work made by the development team.

Plus in my book decentralizing services is always a good thing: it’s better for software diversity, avoids single points of failure and global outages (like the Slack outage a few days ago), and protects privacy.

So I wondered how to make it easier to use Mattermost. And I made two things.

A Mattermost package for Yunohost

My server runs YunoHost, a package to run a self-hosted servers without being a sysadmin. It let you install webapps in one click (Wordpress, Roundcube, etc.), and frees you from tedious administration tasks. Try it, it’s awesome.

As installing a new app on a YunoHost server is so simple, I made a package to install Matermost in the same way! It allows you to install a production-ready web-based chat in a minute, complete with email notifications and all.

To use it, open your YunoHost admin webpage, go to “Install an application”, and choose “Install a custom application” at the bottom of the list. Then paste the package URL: https://github.com/kemenaran/yunohost-mattermost. And that’s it!

Installing Mattermost on YunoHost

Try the Mattermost package for YunoHost - GitHub

Binary builds for Matterfront

Mattermost runs great in a web-browser tab – and yet it is sometime convenient to have a desktop application that is separed from the browser. There is no official desktop client yet – but Loic Nageleisen made a nice cross-platform desktop client, named Matterfront.

Matterfront desktop client for Mattermost

Internally, Matterfront uses Electron, the same web-app packaging technology used by Slack. And it works great. Just one thing: there are no official builds yet, you have to build the app yourself from the command line.

So I compiled some builds for the latest release of Matterfront, and put them on GitHub. This should make it easier to use Matterfront for anyone – until there are official builds.

Download Matterfront desktop client for Windows, OS X and Linux

Happy Path, Sad Path

Cet article est la transcription d'une intervention donnée à ParisJS en octobre 2015, sur les liens entre la complexité métier et l'expérience utilisateur.

001

Aujourd’hui je voudrais vous parler de « comment gérer la complexité métier ». J'ai appelé ça « Happy Path et Sad Path », mais ça veut juste dire « Le chemin où tout se passe bien, et celui où on butte dans tous les cas spéciaux », et où on doit vraiment gérer la complexité.

Au début on présentait Captain Train en disant « c’est un site pour acheter ses billets de train, super rapidement ». Historiquement il a été conçu comme une alternative au site de l'opérateur historique : plus rapide, plus simple.

Aujourd’hui l’ambition est plus large : Captain Train vend des billets dans toute l’Europe. Mais on a toujours cette attention à la simplicité et à la rapidité.

La question est : comment conserver cette rapidité malgré la complexité ?

Je ne vais pas parler de performances chiffrées, mais plutôt de l’impression de simplicité. La frontière entre « rapide » et « simple » est très floue – et souvent, quand une tâche est simple, qu’on n’a pas le cerveau encombré de plein de choses, on va plus vite pour faire cette tâche. Et on en garde un meilleur souvenir.

Happy Path

Sur Captain Train, le Happy Path (celui où tout se passe bien pour l’utilisateur) est très rapide. Une dizaine de clics tout au plus pour acheter un billet de train.

En pratique ça se fait en cinq écrans (en comptant large) :

1 - La recherche 007

2 - La réservation 008

3 - Le panier 009

4 - Le paiement 010

5 - Le billet 011

Ça a l’air simple.

Sad Path

Mais tout ne se passe pas toujours aussi bien. Il y a des erreurs, des avertissements, des problèmes, de la complexité métier. C’est le cas dans tous les domaines que vous pouvez rencontrer : le train, la presse, la restauration, l'astronomie, la chirurgie, tous les domaines.

Pour continuer sur l'exemple du train, on va faire un tour de tout ce à quoi vous échappez la plupart du temps, mais qui peut arriver.

Pour commencer, au moment de la réservation, il y a beaucoup de choses qui peuvent se passer.

Par exemple, parfois le train ne part pas de la gare que vous avez demandée. (Ou il n’arrive pas à la gare demandée, c’est possible aussi.) Dans ce cas on vous prévient, quand même.

014

Jusqu'ici, c’est d'une complexité raisonnable.

Cette fois-ci vous décidez de prendre un train OUIGO (vous savez, les TGV low-cost). À bord des OUIGO, les bagages sont payants. Une cause fréquente de réclamations est que l’utilisateur monte dans le train avec trop de bagages.

Si vous n’avez pas sélectionné de bagages, on vous rapelle que vous ne pourrez avoir qu’un bagage « cabine ».

015

Pour faire une réservation, OUIGO requiert absolument la date de naissance des voyageurs.

Donc au moment où vous voulez réserver, si on n'a pas votre date de naissance, on vous la demande (et on s’en souvient pour les prochaines fois).

016

OUIGO requiert également le numéro de téléphone. Pareil, si on ne l’a pas on le demande, et on s’en souvient pour les prochaines fois.

017

J’ai séparé les dialogues pour la démo, mais en vrai si on a besoin de toutes ces informations en même temps, on va même compacter le processus, et les demander en une seule fois dans le même dialogue.

Et ça y est, c’est bon, on peut réserver.

Autre possibilité : vous réservez un train allemand, ou italien. Ça se passe encore un peu différemment. Les trains allemands et italiens demandent des documents d’identification, pour justifier de votre identité à bord du train, en plus du billet.

Donc avant de réserver, on vous demande si vous voulez utiliser votre carte bancaire pour vous identifier, ou votre carte d’identité.

Oh, et la Deutsche Bahn demande une adresse, aussi. Pareil, si on ne l’a pas, on la demande et on s’en souvient pour les prochaines fois.

019

Ah, et si vous choisissez de présenter votre carte d’identité, la DB demande le numéro de la carte. Et l’adresse indiquée sur la carte d’identité, aussi. Pareil, on la demande, on s’en souvient pour les prochaines fois.

020

On arrive enfin au Panier, juste avant le paiement. Là encore il peut se passer des choses.

Par exemple vous cliquez sur « Payer », mais vous avez déjà acheté un billet identique. C’est à dire un billet pour le même trajet, le même jour, avec les mêmes personnes qui voyagent.

On est sympa, on prévient, et on vérifie que c’est bien ça que vous voulez, quand même.

022

Autre problème qui peut arriver : vous allez payer deux fois le même billet.

Ça a l’air bête, mais ça peut arriver quand on fait une recherche, puis qu’on revient plus tard, on en fait une autre, on paye – et paf le billet de la recherche précédente était en fait là aussi.

Pareil, on vous demande de vérifier.

023

Si vous persistez, vous arrivez enfin au paiement.

Normalement ça se passe bien. Mais si votre banque nous demande de vous authentifier plus sérieusement, vous allez voir le décevant dialogue de confirmation 3D-Secure, celui qui vous envoie un SMS sur votre téléphone mobile.

Il y a pas mal d’abandons d'achat à cet étape, parce qu'il y a beaucoup de possibilités que ça ne fonctionne pas, d'une manière ou d'une autre. Ce dialogue joue donc sur plusieurs choses :

  • Rester dans le contexte de l’application (pas de popup ou d’iframe plein écran),
  • Afficher un message un peu léger pour dédramatiser,
  • Indiquer qui est probablement à blâmer en cas d’erreur bizarre (c'est souvent votre banque),
  • Afficher ce dialogue le moins souvent possible (si on a vraiment confiance dans votre paiement, on vous épargne le 3D-Secure).

025

Ça y est, le paiement s’est bien passé. Vous avez votre billet.

Enfin presque. À ce stade, votre billet est payé, mais pas encore émis. On prétend que vous l’avez déjà, mais ce n’est pas complètement vrai, c’est « en cours ».

Par exemple, si on a vraiment des doutes sur votre paiement, malgré le 3D-Secure, on va jeter un œil manuellement, quand même, avant de vous générer un billet qui vaut de l’argent. Ça nous permet de lutter contre la fraude.

En tout cas on vous informe de ce qui se passe, et de combien de temps ça va prendre.

027

Une fois qu’on est raisonnablement confiant dans votre paiement, l’émission est lancée.

Normalement ça prend moins d’une minute – mais parfois les systèmes de réservation de la SNCF ou de la DB ont des hoquets, et il faut attendre quelques heures que ça revienne.

Alors pareil, on indique ce qui se passe.

028

On a réussi à émettre votre billet, mais catastrophe, le serveur qui permet de récupérer les e-billets en PDF est en rade.

Allez, on vous informe, quand même.

031

Ça y est, on a enfin récupéré votre e-billet en PDF.

Enfin vos billets : ici il y a deux passagers, et ce transporteur génère un PDF par passager. Donc deux PDF. Mais ça dépend.

033

Et puis parfois le mode de retrait est différent. Par exemple si vous prenez un train TER, le e-billet n’est souvent pas disponible. Dans ce cas il faut retirer un billet cartonné à une borne en gare. C’est inhabituel, donc on a intérêt à l’indiquer clairement.

035

Tout ça dans un message d’une seule ligne. Pour info, il y a plus d’un millier de combinaisons différentes de ce message. Ça dépend :

  • du transporteur (SNCF, ou Thalys, Trenitalia, DB…)
  • du mode d’émission du billet (e-billet ou cartonné)
  • du programme de fidélité (carte Grand Voyageur, ou autre…)
  • de l’application (application web, ou mobile, ou email)

Contraintes métier

Toutes ces problématiques sont liées au train : ce sont nos contraintes métiers. Mais tout le monde a ses propres contraintes métier (même si ce n’est pas le métier du train).

Comment gérer la complexité qui vient des contraintes métier d’une manière générale ? Comment éviter de tout complexifier juste à cause de quelques contraintes métier ?

Déterminer ce qu'on voudrait faire est plutôt facile :

Ce sont des choses plutôt évidentes, nous voulons tous ça.

Éviter l'effet sapin-de-Noël

Mais si on n’y prend pas garde, on répond à des besoin évidents par des solutions évidentes : pour chaque confusion possible, rajouter un avertissement ; pour chaque cas spécial, rajouter un « if » dans le code.

Par exemple sur Captain Train on aurait pu mettre des dialogues systématiques pour :

Mais ça détériore l'expérience utilisateur, et ça rend le code de moins en moins maintenable.

Garder simple ce qui est simple

Ce qu'on veut vraiment, ce ne sont pas les solutions naïves, c'est garder simple ce qui est simple – et gérer au cas-par-cas quand ça se complique.

Pour rebondir sur ce dernier point, on essaie de résister à la tentation d'avoir des messages d'erreurs génériques, comme par exemple :

« Ce train ne part pas de la gare demandée. » 😕

À la place on utilise toutes les informations du contexte pour afficher un message pertinent : quelle était la gare demandée initialement, quelle est celle finalement remontée, et est-ce que c'est tout près ou vraiment loin :

« Ce train ne part pas de Paris, mais de Massy-Palaiseau, à 30km de Paris. » 😌

Autre exemple :

« Pour faire cette opération, contactez votre administrateur. » 😕

Allons bon, qui est mon « administrateur », déjà ? Et si j'arrive à le joindre, je lui demande d'effectuer quelle opération ?

« Pour ajouter un passager, contactez Delphine ou Jean-Luc. » 😌

Certains messages d’avertissement ou d’erreur sont générés à partir de 5 ou 10 bouts de phrases, et 50 lignes de code. Pour un seul message. C’est du travail, mais ça en vaut la peine.

Des promesses, toujours des promesses

Il y a quelques patterns qu'on utilise régulièrement pour améliorer l'expérience utilisateur :

Le premier pattern concerne le code. Une des manières de ne pas avoir à rajouter des « if » à chaque cas spécial est d’encapsuler les séquences de plusieurs dialogues dans des promesses.

Par exemple, quand on clique sur le bouton « Ajouter au Panier », on construit cette chaîne de promesses :

function addToCartClicked() {
  return luggagesDialog.prompt().then(() => {
    return birthdateDialog.prompt();
  }).then(() => {
    return identificationDialog.prompt();
  }).then(() => {
    return book();
  });
}


Si le dialogue n’a pas besoin d’être affiché, la promesse est résolue immédiatement, et on passe au dialogue suivant.

Par contre, s'il est nécessaire d'afficher un dialogue, la promesse sera résolue seulement au moment où l'utilisateur cliquera sur “OK”. Et si à une étape l'utilisateur clique sur “Annuler”, la promesse est rejetée, et toute les étapes suivantes sont court-circuitées.

Un autre exemple, quand on clique sur le bouton « Payer » :

function payButtonClicked() {
  return similarTicketDialog.prompt().then(() => {
    return duplicateTicketDialog.prompt();
  }).then(() => {
    return invalidCouponDialog.prompt();
  }).then(() => {
    return payDialog.prompt();
  });
}


Ça correspond exactement à notre cas d’usage : rajouter des dialogues optionnels sur le chemin, tout en maintenant le code lisible.

Tester les cas d'erreur en priorité

Les messages d’erreur sont les premiers à souffrir quand on refactore, ou que l’API change, etc.

Le Happy Path est le plus fréquent, il est utilisé en permanence : s’il casse, ça se verra forcément. Les cas d’erreurs, c’est plus compliqué. Finalement, pour les tests d’intégrations il vaut mieux tester les cas d’erreur en priorité. On n’est pas encore très bon élèves là dessus, mais on essaie.

visit('/pay');click('Payer');
andThen(function() {
  assert.present('Le paiement a été refusé');
});

Tests utilisateurs

Les tests utlisateurs nous ont permis de clarifier certains éléments de l’interface. Parce que épurer, c’est bien, mais parfois on a besoin de rendre les choses plus évidentes, au contraire.

Par exemple il a fallu qu’on aille dans un café faire des tests utilisateurs pour voir que les gens avaient du mal à trouver comment ajouter des passagers, ou comment ajouter une carte de réduction.

055

Alors on a rendu ça plus clair, sur le fond et sur la forme. D'abord en signalant un peu mieux l'ajout de passagers, avec un bouton « + », purement visuel, qui n'apporte rien fonctionnellement, si ce n'est un signal « Pour ajouter, c'est par ici. »

057

Ensuite en signalant mieux la possibilité d'ajouter des cartes de réductions.

059

Pour résumer ce qui peut vous être utile :

  1. Maitrisez vos contraintes métiers : ça permet de simplifier le cas le plus fréquent, et de demander des opérations supplémentaires au moment où vous en avez vraiment besoin.

  2. Une interface simple aura l'air rapide à l'utilisation, parce qu'elle diminue la charge cognitive. (Et pour moi c'est orthogonal aux performances brutes.)

Merci.

Si ça vous intéresse de travailler sur des sujets comme celui-là, on recrute. Envoyez moi un mail, ou allez jeter un œil à www.captaintrain.com/fr/jobs.

Alors j’ai pas osé lancer ma recherche

Les boîtes noires du gouvernement, qui surveillent en permanence ce que vous faites sur Internet et signalent les « comportements suspects », posent de beaucoup de problèmes.

Pour moi le plus grave est que quand on se sent regardé, on ne fait plus la même chose. Quand on me regarde, je ne danse plus de la même façon, je ne fais pas les mêmes grimaces, et je me dis moins par curiosité « au fait, ça ressemble à quoi un site djihadiste ? »

L’excellente Klaire l’a parfaitement illustré dans cette vidéo de 3 minutes, qui parle du danger des boîtes noires pour votre vie privée, et donc vos libertés :

Juste après avoir regardé cette vidéo, je me suis souvenu « au fait, je me demandais hier soir les boîtes noires pouvaient casser le traffic chiffré HTTPS ? » J’ai tapé « boîtes noires ssl »… et je n’ai pas osé lancer ma recherche.

Projet de loi sur la Surveillance : écrivez à vos représentants

Le Projet de loi sur la Surveillance est aujourd’hui examiné par la commission des lois, et par l’Assemblée Nationale dans deux semaines. C’est donc pile le moment de dire à votre député·e ou votre sénateur·rice tout le bien que vous pensez de ce projet de loi.

Vous pouvez trouver le contact de vos représentants parlementaires à partir de votre code postal sur nosdeputes.fr et nossenateurs.fr. Et je vous met aussi en dessous une copie de ce que j'ai envoyé à ma députée. N’hésitez pas à reprendre ce texte si ça peut vous être utile.

Madame la députée,

Le projet de Loi relatif au Renseignement, aujourd’hui en cours d’examen en commission des lois, est inscrit à l’ordre du jour de l’Assemblée Nationale à partir du 13 avril.

Comme vous le savez, l'objectif de projet de loi est de légaliser un certain nombre de pratiques des services de Renseignement. Ces services effectuent depuis plusieurs années des opérations de surveillance, collectes d’informations, mises sur écoute, etc. illégalement et sans contrôle de l’autorité judiciaire.

Ce projet de loi est dénoncé par les membres de la société civile. Citons par exemple :

  • l’ARCEP (Autorité de Régulation des Communications Électroniques et des Postes)
  • le Conseil National du Numérique
  • la CNIL
  • le Conseil de l’Europe
  • Amnesty International
  • la Ligue des Droits de l’Homme
  • Reporters sans Frontières
  • l’Union Syndicate des Magistrats

Parmi les personnes ayant exprimé une opposition, on trouve également :

  • Marc Trédicic, juge anti-terroriste

    (qui parle d’un projet de loi donnant « des pouvoirs exorbitants » aux services de renseignement)

  • Alain Marsaud, ancien juge anti-terroriste

    (qui considère qu’« avec un tel texte, toutes les oppositions, même politiques, peuvent être surveillées. »)

Ce projet de loi contient également des dispositions illégale au regard du droit international — comme le souligne le Haut-Commissariat aux Droits de l’Homme des Nations Unies.

En tant que citoyen, ce qui m’inquiète le plus est l’aspect généralisé de cette surveillance. Il ne s’agit pas de surveiller quelques personnes suspectes. Ce projet de loi permettrait de mettre « sur écoute » non seulement l’ensemble d’un groupe (parti politique, association, syndicat) mais également l’ensemble de la population française (via l’analyse des données transitant sur Internet).

Cette surveillance pourrait se faire sans contrôle de l’autorité judiciaire. Seule la justice est garante du droit — et dans le cadre de ce projet de loi aucun magistrat n’aurait de contrôle sur la légitimité des écoutes.

Voulons-nous d’une société où, chaque fois que nous composons un numéro de téléphone ou que nous ouvrons un navigateur web, une petite voix nous rappelle que ce que nous allons faire est surveillé et pourra être retenu contre nous ?

Aujourd’hui, ce projet loi n’offre pas les garanties nécessaires au maintien d’un état de droit plutôt que d’une société de surveillance. Je vous demande, Madame la députée, de soutenir les amendements assurant le contrôle des services de renseignement par l’autorité judiciaire et de rejeter les dispositions visant à une surveillance généralisée (plutôt que ciblée sur les personnes suspectées).

Pour en savoir plus, je vous invite à consulter les analyses rédigées par l’association La Quadrature du Net, disponibles ici : https://wiki.laquadrature.net/PJL_relatif_au_renseignement

Je vous priée d’agréer, Madame la députée, l’expression de ma considération distinguée,

\<Signature>