Le futur sera trivial

J’aime beaucoup le concept de futur trivial (« future mundane ») de Nick Foster, qu’il a présenté dans un article et lors d’une conférence. Qu’est-ce à dire ?

Millenium Falcon

Thèse 1 : « dans le futur, les tables resteront branlantes » (source de la formule)

Comprendre : la technologie restera imparfaite, soumise à l’usure, pleine d’imprévus, et vecteur de désagréments, petits ou gros.

Thèse 2 : une société humaine change par accrétion.

  • Elle évolue selon des rythmes différenciés. Comme le suggère le schéma ci-après, la mode change plus vite que les infrastructures.
  • Elle évolue de manière non séquentielle : une technologie n’est pas adoptée instantanément et universellement, et des technologies de génération différente peuvent cohabiter et se mélanger. Pour reprendre l’exemple favori de David Edgerton, on n’a jamais autant utilisé de chevaux que pendant les deux guerres mondiales. Je recommande d’ailleurs vivement les articles et livres de cet historien des sciences.

2016-09-29_23h49_56

On peut interpréter ce concept de plusieurs manières :

  • Pessimisme (90% des choses sont nulles et le resteront).
  • Difficulté à concevoir un système complexe en anticipant tous ses aspects. Comme le dit Frederik Pohl : « une bonne histoire de science-fiction doit pouvoir prédire l’embouteillage et non l’automobile ».
  • L’idée que certains micro-phénomènes sont plus révélateurs de changement que les jetpacks et autres voitures volantes.

A ce sujet, on pourra aussi lire le chapitre « Futurs au quotidien » de ce livre par Nicolas Nova – d’ailleurs un collègue de Foster.

Archéologie des interfaces – Ou pourquoi il ne faut pas faire une refonte à moitié

Précédemment, je parlais du manque de cohérence entre les applications de Pocket. Il s’agissait pour beaucoup de points isolés qui s’accumulaient, alors que les exemples suivants sont plus graves : les interfaces sont incohérentes dans leur principe.

L’histoire est coutumière : un site Web entame une grosse refonte pour se moderniser. On voit arriver une page d’accueil flambante neuve et différents gabarits plus sobres et mieux pensés. Cela dit, quand on cherche dans les coins on trouve quelques pages qui ne respectent pas la nouvelle charte. Mais bon c’est pas grave, qui se soucie des mentions légales et des pages d’erreur 404.

Parfois, ce sont des pans entiers d’un site qui détonnent. Exemple : Pôle Emploi, dont la page d’accueil ressemble actuellement à ça :

Page d'accueil Pole Emploi

Pas mal pas mal. Sauf que cette « révolution numérique », « user-centric et disruptive », n’est pas encore allée très loin. Dès qu’on se connecte on retombe sur l’ancien, avec un style et une structure largement différente, et une utilisabilité sur laquelle je ne m’étendrai pas.

Page particuliers Pole Emploi

Bien sûr, je sais ce que c’est. Il y a des contraintes de temps et d’argent et je n’ose imaginer les décennies de dette technique et d’inertie architecturale pour ce genre de gros SI. Ce qui semble pour l’utilisateur une section parmi d’autres est peut-être un module à part, avec une technologie incompatible et géré par un département différent (une bonne illustration du principe de Conway). Je ne doute pas que les gens qui y travaillent soient les premiers frustrés. Mais bon, l’homogénéisation est prévue pour une V2, hein ? Hein ?

Sauf que ce n’est pas toujours le cas. Parfois, au fil des refontes ou des ajouts, les divergences s’aggravent au lieu de se résorber. Le site de la MAAF a trois gabarits largement hétérogènes, tantid que le site des impôts en a quatre (ou disons deux avec des fortes variantes chacun), plus désuets à mesure que l’on s’enfonce dans les profondeurs du site. L’absence de cohérence se ressent, car à l’utilisation l’on est facilement amené à passer d’un gabarit à l’autre. Oh, encore un autre exemple avec deux screenshots de l’espace client d’EDF ici et ici.

MAAF

MAAF

MAAF

MAAF

impots.gouv.fr

impots.gouv

impots.gouv

impots.gouv

impots.gouv

Windows, ce palimpseste

Microsoft est un spécialiste pour ajouter des couches d’IHM à Windows sans rénover ou enlever les anciennes. C’est parfois une preuve de sagacité (le sélecteur de couleur est correct et à peine bougé) en vingt ans, parfois d’immobilisme (il a fallu quinze ans et Vista pour avoir une réelle mise à jour de Paint). Ce que je trouve le plus fascinant, c’est le panneau de configuration : avec ses successions de panneaux toujours plus avancés et vieillots, on traverse une bonne partie de l’histoire du système d’exploitation.

D’abord, l’accueil datant de Windows 10. Ensuite, celui datant de XP. Les deux suivent le même concept : une grille d’icônes ouvrant des fenêtres maximisées dotées avec une barre de navigation latérale. Mais mystérieusement, les deux ont été conservés. Il y a donc des fenêtres redondantes (Désinstaller des programmes), d’autres qui n’ont pas été migrées vers la charte Windows 10 (Centre de réseau et partage).

Parametres Windows

Panneau de configuration Windows 10

Ensuite, on arrive aux panneaux à taille fixe et à onglets, qui datent de Windows 95. Les paramètres de l’explorateur de fichiers en est le meilleur exemple : à part le retrait et surtout l’ajout de certaines options, il n’a pas bougé en vingt ans – et il en aurait bien besoin, avec cette liste interminable dans un cadre minuscule.

Options de l'explorateur de fichier

Un dernier exemple

L’historique de Google Chrome ne ressemblent pas aux favoris, qui ne ressemblent pas du tout à la fenêtre de téléchargement (voir screenshots). C’est apparemment temporaire, mais pourquoi une transition aussi désordonnée vers le Material Design ?

Leçons ergonomiques et techniques d’un projet perso

Il y a quelques mois j’ai publié un outil pour calculer une addition en terme de tickets resto (le post de l’époque est ici). Je sais, rien ne m’arrête. Voici une mise à jour, avec notamment des visuels plus travaillés, ainsi qu’un clavier sur mesure et toujours présent à l’écran. Vous pouvez le tester directement dans le cadre ci-après ou l’ouvrir depuis votre ordiphone préféré.

Pourquoi un thème sombre ?

Parce que c’est reposant pour les yeux, surtout quand l’arrière-plan est très présent, comme ici, et que mon téléphone et son OS (Moto G et Android vanillé) sont déjà sombres.

Pourquoi un clavier sur mesure ?

Se limiter à ce que fournit l’OS oblige à utiliser :

  • sur iOS, un clavier pensé pour la saisie de numéros de téléphone, donc pas top
  • Sur Windows Phone et Android, un clavier plus adapté, sans caractères inutiles et avec un séparateur décimal. Malgré cela je n’aime pas trop leur disposition (voir plus bas).

De plus, le clavier natif apparait à l’appui sur un champ. C’est bien dans une page complexe, mais ici il est plus pertinent d’avoir une mise en page sans scroll, avec les champs fixes et le clavier toujours présent.

Enfin, pour utiliser le clavier numérique natif, il faut que l’élément <input> soit de type number. Ca pose certaines contraintes, car l’API a été pensée pour un contrôle de validité dynamique mais après coup : c’est seulement quand l’utilisateur sort du champ que le champ signale l’erreur, par exemple s’il a saisi des lettres au lieu de chiffre. Ca rend difficile le contrôle a priori que je voulais, puisqu’on n’a aucun accès programmatique au texte invalide d’un champ (value devient vide). De plus, une valeur du genre « 10, » est considérée comme invalide, alors qu’il faudrait qu’elle corresponde à un état « en cours de saisie », comme c’est le cas dans les bonnes bibliothèques de gestion des masques de saisie.

Ajoutons qu’en français le séparateur décimal correct est la virgule mais certains navigateurs (Firefox Mobile) ne le localisent pas correctement.

C’est pas une mauvaise pratique de réinventer des comportements natifs ?

Totalement. C’était justement instructif pour moi de voir le nombre de choses qu’il faut réimplémenter comme on peut. Le cheminement a ressemblé à ça :

  1. Je ne voulais pas du clavier, alors qu’il apparait par défaut, un comportement théoriquement non modifiable.
  2. Du coup, on triche en faisant perdre le focus à un champ dès qu’il le gagne.
  3. Du coup, il faut en garder en mémoire quel champ on a sélectionné. Un focus custom, quoi. Il faut également recréer un curseur et le placer au bon endroit.
  4. Ah merde, il faut calculer à la main la position du curseur.
  5. Et bien sûr ça oblige de bidouiller pour obtenir la largeur d’un caractère (l’unité ch aurait été parfaite mais Chrome ne la supporte pas). Donc l’outil ne marche qu’avec des polices à chasse fixe (monospace).

Je vous passe les subtiles différences de comportement entre navigateurs, notamment dans la gestion des évènements focus et click. Bref, le tout marche mais n’est pas ultra robuste ni franchement réactif et le code est sans doute encore moins propre et modulaire que la dernière fois.

Pourquoi cette disposition de clavier ?

Vu qu’on est dans la saisie de monnaie je me suis rapproché de la convention des calculettes, avec le 9 en haut à droite. En plus, la progression des chiffres du bas vers le haut suit le mouvement de la main ou du doigt propre au mobile.

Gravir les échelles du design

Petite mission et pied dans la porte

En 2007, Michael Beirut décrivait comment il gravissait l’échelle des enjeux pour gagner en légitimité :

The client asks you to design a business card. You respond that the problem is really the client’s logo. The client asks you to design a logo. You say the problem is the entire identity system. The client asks you to design the identity. You say that the problem is the client’s business plan. And so forth. One or two steps later, you can claim whole industries and vast historical forces as your purview. The problem isn’t making something look pretty, you fool, it’s world hunger !

Boy that escalated quickly

Toute la SNCF dans un papelard

Dans ce mille-feuilles d’enjeux, les couches supérieures structurent celles du dessous. Dans les cas extrêmes, un objet anodin encapsule une bonne partie de la complexité de tout l’édifice. Exemple : les 36 données présentes sur un billet de la SNCF, commentées ici.

Billet SNCF

Dans le même genre, j’ai récemment aidé à concevoir d’un outil permettant aux encadrants d’une entreprise de saisir un nombre, lequel était syndicalement et politiquement sensible. Potentiellement, l’outil aurait pu se résumer à un champ et un bouton de validation : chacun saisit le nombre pour son périmètre, qui sera agrégé en une stat global – et basta. Dans les faits, tout a été discuté : quand doit-il être saisi, avec quelle régularité, selon quelle méthode d’estimation (le corpus juridique fournissant seulement un cadre général), comment inciter les gens à le faire sans perdre en rigueur, etc.

Bref, beaucoup de questions souvent inattendues pour un seul champ, alors qu’on était bien placés auprès de l’échelle des décideurs. C’est ce que tentent de faire beaucoup de gens : s’attaquer à un problème par la racine et pas par la petite porte, en ayant d’emblée une position assez influente pour vraiment changer les choses. Faire du design stratégique, de la stratégie UX, de la conduite du changement, etc.

C’est facile à dire

Dans un projet, il est bon d’être responsable de son niveau, consulté pour le niveau +1 et au courant du niveau +2. Exemple : vous êtes responsable des IHM, on vous consulte sur les choix fonctionnels et on vous tiens au courant du raisonnement derrière les orientations stratégiques. Il peut y avoir des niveaux en dessous (déclinaison des IHM) et au dessus. Si vous avez besoin de gravir un échelon pour faire du bon travail et que vous y parvenez (par exemple lors du projet suivant), tant mieux, mais :

  1. C’est plus facile à dire qu’à faire.
  2. Il est difficile de suivre ou de s’occuper de trop de niveaux en même temps.

Qui es-tu et d’où parles-tu ?

Ces réflexions m’amènent à un article récent de Donald Norman et Pieter Jan Stappers. Son propos est que si on monte très haut dans les échelons, on arrive au niveau de systèmes socio-techniques complexes, qui posent des défis spécifiques :

  • Inter-dépendance des éléments
  • Relations causales non-linéaires et non-séquentielles
  • Latences longues et imprédictibles
  • Echelles multiples
  • Données opérationnelles changeantes

Ces thèmes sont bien connus en théorie de la complexité mais c’est intéressant de les voir convoqués dans le domaine de la conception centrée-utilisateur.

Hélas, l’article manque de réflexivité : les auteurs auraient pu se demander personnellement quelles positions ils ont dans leurs interventions. Don fucking Norman n’a pas le même prestige quand il débarque dans un projet que le concepteur en « design public » évoqué ici et stagiaire à l’époque, même s’ils travaillent sur des sujets similaires. Comme on disait dans le temps : « qui es-tu et d’où parles-tu ? » Bref, tout est affaire de contexte : à quel stade commence-t-on, avec quelle mission officielle, commandité par qui, et cetera et cetera.

Cogner à son ordi

Ces temps-ci, j’ai l’occasion d’utiliser un Thinkpad (X230 pour les amateurs). Ces ordinateurs portables sont dotés d’une petite lampe en haut de l’écran, pour l’éclairer quand la lumière ambiante est trop faible. Un raccourci clavier (Fn+Espace) permet de l’éteindre et de l’allumer instantanément.

Très naturellement je me suis dit : «  hey avec ça on peut communiquer en morse  ». Je n’ai pas été le premier à y penser : voici un outil qui convertit du texte en morse et l’envoie directement à la lampe, et le témoignage de quelqu’un dont la lampe envoie S.O.S en boucle et qui n’arrive pas à l’arrêter.

En faisant mes recherches, je suis tombé sur un hack assez différent mais encore plus jouissif : utiliser l’accéléromètre d’un ordi portable pour détecter quand on toque dessus. Certains ordinateurs ont un capteur de ce genre pour détecter une chute et désactiver le disque dur, mais on peut en tirer parti pour jouer, enregistrer les séismes ou détecter des coups. On peut ainsi sortir son ordinateur de veille avec un rythme de coups qu’on aura défini.

knockToUnlock

L’idée du secret knock a été reprise par des apps de déverrouillage de porte. Plus largement, on peut taper pour allumer l’écran de son smartphone LG, pour déverrouiller son ordinateur depuis son téléphone (en photo), etc.

J’aime le fait qu’on utilise un senseur interne, conçu pour détecter les mouvements propres de l’appareil, pour un usage externe. J’aime aussi le fait que l’ordinateur devient entièrement un bouton : on peut appuyer dessus n’importe où.

J’aime enfin l’idée de détourner les composants de banals ordinateurs pour en faire des interfaces tangibles dignes du MIT Media Lab. Il y a certainement plein d’usages marrants et de chorégraphies complexes à imaginer, à partir d’un bête toc-toc et d’une simple lampe. Jeu musical ? Discussions discrètes en salle de classe ? Détecter l’humeur des gens suivant les chocs que reçoit l’appareil ?

Et puis ça me permet de citer le roman Cryptonomicon, et une scène de dénouement où le héros, prisonnier et convaincu que sa cellule et son ordinateur sont pleins de mouchards, passe des informations vitales en code morse via le voyant CAPS LOCK de son ordinateur :

How does Randy know that there is a site called Golgotha, and how does he know its real coordinates ? His computer told him using Morse code. Computer keyboards have LEDs on them that are essentially kind of useless : one to tell you when NUM LOCK is on, one for CAPS LOCK, and a third one whose purpose Randy can’t even remember. And for no reason other than the general belief that every aspect of a computer should be under the control of hackers, someone, somewhere, wrote some library routines called XLEDS that make it possible for programmers to turn these things on and off at will. And for a month, Randy’s been writing a little program that makes use of these routines to output the contents of a text file in Morse code, by flashing one of those LEDs. And while all kinds of useless crap has been scrolling across the screen of his computer as camouflage, Randy’s been hunched over gazing into the subliminal channel of that blinking LED, reading the contents of the decrypted Arethusa intercepts. One of which says : THE PRIMARY IS CODE NAMED GOLGOTHA. COORDINATES OF THE MAIN DRIFT ARE AS FOLLOWS : LATITUDE NORTH (etc.)