Gravir les échelles du design

Petite mission et pied dans la porte

En 2007, Michael Beirut décri­vait com­ment il gra­vis­sait l’échelle des enjeux pour gagner en légi­ti­mité :

The client asks you to design a busi­ness card. You respond that the pro­blem is really the client’s logo. The client asks you to design a logo. You say the pro­blem is the entire iden­tity system. The client asks you to design the iden­tity. You say that the pro­blem is the client’s busi­ness plan. And so forth. One or two steps later, you can claim whole indus­tries and vast his­to­rical forces as your pur­view. The pro­blem isn’t making some­thing 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 struc­turent celles du des­sous. Dans les cas extrêmes, un objet anodin encap­sule une bonne partie de la com­plexité de tout l’édifice. Exemple : les 36 don­nées pré­sentes sur un billet de la SNCF, com­men­tées ici.

Billet SNCF

Dans le même genre, j’ai récem­ment aidé à conce­voir d’un outil per­met­tant aux enca­drants d’une entre­prise de saisir un nombre, lequel était syn­di­ca­le­ment et poli­ti­que­ment sen­sible. Potentiellement, l’outil aurait pu se résumer à un champ et un bouton de vali­da­tion : chacun saisit le nombre pour son péri­mètre, qui sera agrégé en une stat global – et basta. Dans les faits, tout a été dis­cuté : quand doit-il être saisi, avec quelle régu­la­rité, selon quelle méthode d’estimation (le corpus juri­dique four­nis­sant seule­ment un cadre général), com­ment inciter les gens à le faire sans perdre en rigueur, etc.

Bref, beau­coup de ques­tions sou­vent inat­ten­dues pour un seul champ, alors qu’on était bien placés auprès de l’échelle des déci­deurs. C’est ce que tentent de faire beau­coup de gens : s’attaquer à un pro­blème par la racine et pas par la petite porte, en ayant d’emblée une posi­tion assez influente pour vrai­ment changer les choses. Faire du design stra­té­gique, de la stra­tégie UX, de la conduite du chan­ge­ment, etc.

C’est facile à dire

Dans un projet, il est bon d’être res­pon­sable de son niveau, consulté pour le niveau +1 et au cou­rant du niveau +2. Exemple : vous êtes res­pon­sable des IHM, on vous consulte sur les choix fonc­tion­nels et on vous tiens au cou­rant du rai­son­ne­ment der­rière les orien­ta­tions stra­té­giques. Il peut y avoir des niveaux en des­sous (décli­naison des IHM) et au dessus. Si vous avez besoin de gravir un échelon pour faire du bon tra­vail et que vous y par­venez (par exemple lors du projet sui­vant), tant mieux, mais :

  1. C’est plus facile à dire qu’à faire.
  2. Il est dif­fi­cile 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 éche­lons, on arrive au niveau de sys­tèmes socio-techniques com­plexes, qui posent des défis spé­ci­fiques :

  • Inter-dépendance des élé­ments
  • Relations cau­sales non-linéaires et non-séquentielles
  • Latences longues et impré­dic­tibles
  • Echelles mul­tiples
  • Données opé­ra­tion­nelles chan­geantes

Ces thèmes sont bien connus en théorie de la com­plexité mais c’est inté­res­sant de les voir convo­qués dans le domaine de la concep­tion centrée-utilisateur.

Hélas, l’article manque de réflexi­vité : les auteurs auraient pu se demander per­son­nel­le­ment quelles posi­tions ils ont dans leurs inter­ven­tions. Don fucking Norman n’a pas le même pres­tige quand il débarque dans un projet que le concep­teur en « design public » évoqué ici et sta­giaire à l’époque, même s’ils tra­vaillent sur des sujets simi­laires. 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 mis­sion offi­cielle, com­man­dité par qui, et cetera et cetera.

Cogner à son ordi

Ces temps-ci, j’ai l’occasion d’utiliser un Thinkpad (X230 pour les ama­teurs). Ces ordi­na­teurs por­tables sont dotés d’une petite lampe en haut de l’écran, pour l’éclairer quand la lumière ambiante est trop faible. Un rac­courci cla­vier (Fn+Espace) permet de l’éteindre et de l’allumer ins­tan­ta­né­ment.

Très natu­rel­le­ment je me suis dit : «  hey avec ça on peut com­mu­ni­quer en morse  ». Je n’ai pas été le pre­mier à y penser : voici un outil qui convertit du texte en morse et l’envoie direc­te­ment à la lampe, et le témoi­gnage de quelqu’un dont la lampe envoie S.O.S en boucle et qui n’arrive pas à l’arrêter.

En fai­sant mes recherches, je suis tombé sur un hack assez dif­fé­rent mais encore plus jouissif : uti­liser l’accéléromètre d’un ordi por­table pour détecter quand on toque dessus. Certains ordi­na­teurs ont un cap­teur de ce genre pour détecter une chute et désac­tiver le disque dur, mais on peut en tirer parti pour jouer, enre­gis­trer les séismes ou détecter des coups. On peut ainsi sortir son ordi­na­teur 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éver­rouillage de porte. Plus lar­ge­ment, on peut taper pour allumer l’écran de son smart­phone LG, pour déver­rouiller son ordi­na­teur depuis son télé­phone (en photo), etc.

J’aime le fait qu’on uti­lise un sen­seur interne, conçu pour détecter les mou­ve­ments propres de l’appareil, pour un usage externe. J’aime aussi le fait que l’ordinateur devient entiè­re­ment un bouton : on peut appuyer dessus n’importe où.

J’aime enfin l’idée de détourner les com­po­sants de banals ordi­na­teurs pour en faire des inter­faces tan­gibles dignes du MIT Media Lab. Il y a cer­tai­ne­ment plein d’usages mar­rants et de cho­ré­gra­phies com­plexes à ima­giner, à partir d’un bête toc-toc et d’une simple lampe. Jeu musical ? Discussions dis­crètes en salle de classe ? Détecter l’humeur des gens sui­vant les chocs que reçoit l’appareil ?

Et puis ça me permet de citer le roman Cryptonomicon, et une scène de dénoue­ment où le héros, pri­son­nier et convaincu que sa cel­lule et son ordi­na­teur sont pleins de mou­chards, passe des infor­ma­tions vitales en code morse via le voyant CAPS LOCK de son ordi­na­teur :

How does Randy know that there is a site called Golgotha, and how does he know its real coor­di­nates ? His com­puter told him using Morse code. Computer key­boards have LEDs on them that are essen­tially kind of use­less : one to tell you when NUM LOCK is on, one for CAPS LOCK, and a third one whose pur­pose Randy can’t even remember. And for no reason other than the general belief that every aspect of a com­puter should be under the control of hackers, someone, somew­here, wrote some library rou­tines called XLEDS that make it pos­sible for pro­gram­mers to turn these things on and off at will. And for a month, Randy’s been wri­ting a little pro­gram that makes use of these rou­tines to output the contents of a text file in Morse code, by fla­shing one of those LEDs. And while all kinds of use­less crap has been scrol­ling across the screen of his com­puter as camou­flage, Randy’s been hun­ched over gazing into the sub­li­minal channel of that blin­king LED, rea­ding the contents of the decrypted Arethusa inter­cepts. One of which says : THE PRIMARY IS CODE NAMED GOLGOTHA. COORDINATES OF THE MAIN DRIFT ARE AS FOLLOWS : LATITUDE NORTH (etc.)

Mille et une manieres de saisir des nombres

En sché­ma­ti­sant, on peut dis­tin­guer deux manières de saisir des nombres : avec une « échelle » et avec un cla­vier.

Échelles

Dans le pre­mier cas, on choisit une bonne valeur sur une échelle continue, avec un cur­seur ou un stylet. L’échelle peut être linéaire (comme sur l’Arithmomètre) ou cir­cu­laire (comme sur la Pascaline ou un télé­phone à cadran). L’échelle est par­fois impli­cite, comme sur la Curta où seule la valeur sélec­tionnée est affi­chée.

Pascaline
Pascaline
Curta
Curta

L’Arithmomètre fut très popu­laire jusqu’à la moitié du XXe siècle, que ce soit l’appareil d’origine inventé par Tomas de Colmar ou la variante de Odhner, dotée d’un nou­veau méca­nisme. Notez que son usage était assez fas­ti­dieux : il fal­lait remettre le total à zéro, saisir un nombre puis le valider par un grand tour de mani­velle (voir la vidéo plus bas).

L’Addiator est un peu dif­fé­rent. Dans cette cal­cu­la­trice de poche vendue à partir de 1920 (et impres­sion­nante de com­pa­cité pour l’époque), un stylet intégré permet de pousser une encoche cor­res­pon­dant à un chiffre jusqu’à une butée. Quand le calcul implique une retenue, il faut pousser l’encoche jusqu’à la faire changer de colonne.

Claviers

Un cla­vier peut être un pavé de dix chiffres, ou bien une grille de nombres à saisir direc­te­ment.

Les pavés à dix chiffres sont le plus sou­vent dis­posés en trois colonnes, comme sur cer­taines cal­cu­lettes (inventé par David Sunstrand, 1911) ou sur les télé­phones depuis les tra­vaux de Chapanis aux labo­ra­toires Bell. Pour les cal­cu­lettes, on ne trouve his­to­ri­que­ment pas de rai­son­ne­ment par­ti­cu­lier pour avoir orga­nisé les chiffres du bas vers le haut (source), alors que l’ordre des chiffres sur un télé­phone, du haut vers le bas, a été minu­tieu­se­ment étudié. Voici par exemple 17 alter­na­tives qui on été tes­tées et lais­sées de coté :

bell

Ils peuvent être dis­posés sur deux lignes, comme sur cer­tains cla­viers « sécu­risés » de sites ban­caires ou comme le pre­mier cla­vier de cal­cu­lette à dix chiffres com­mer­cia­lisé.

ing direct
ING direct

On appelle sou­vent le second type de cla­vier un Comptomètre. Il est inté­res­sant car pensé pour l’usage par­ti­cu­lier des cais­siers ou des commis de bureau devant addi­tionner des séries de valeurs. Les nombres sont dis­posés en colonne, avec depuis la droite les unités, dizaines, cen­taines, etc. Si on en reste à l’addition, ces appa­reils sont très effi­caces : il suffit d’appuyer direc­te­ment sur les nombres voulus, sans vali­da­tion, et l’addition est affi­chée pro­gres­si­ve­ment en bas. Il n’y pas de bou­tons pour les dif­fé­rents opé­ra­tions ni pour le =. Il n’y a pas non plus besoin de zéro : 200 cor­res­pond au 2 sur la troi­sième colonne. Comme on le voit sur la photo, seule l’unité est affi­chée sur chaque touche. Le chiffre en petit sur la gauche est le com­plé­ment du chiffre prin­cipal et sert aux sous­trac­tions selon une méthode assez savante.

Un comptomètre de marque Sumlock
Un comp­to­mètre de marque Sumlock

Ces appa­reils ont donné lieu à des consi­dé­ra­tions ergo­no­miques tout à fait modernes :

  • Usages inat­tendus : les uti­li­sa­teurs experts n’utilisaient guère les nombres en haut des colonnes, puisqu’il était plus facile de taper deux fois 4 plutôt que monter la main jusqu’au 8.
  • Soucis de clarté : les colonnes étaient colo­riées dif­fé­rem­ment et deux revê­te­ments dif­fé­rents étaient uti­lisés sur les touches, en alter­nance sur chaque ligne.
  • Conception holis­tique : pour éviter de trop lever le bras, des bureaux spé­ciaux étaient uti­lisés avec un encas­tre­ment pour abaisser la machine.

Pour aller plus loin

Des sites his­to­riques spé­cia­lisés :

Six métaphores plus modestes qu’il n’y parait pour le rôle du designer

Le desi­gner comme hôte – Charles Eames, 1972.

Le desi­gner comme tra­duc­teur, per­for­meur ou réa­li­sa­teur — Mickael Rock, 1996.

Le desi­gner comme dra­ma­turge – Brenda Laurel, 1991.

Le desi­gner comme ven­tri­lo­quiste – Hutchins, 1987 (alerte mau­vais PDF) :

The meta­phor of user and com­puter engaged in a conver­sa­tion with each other or car­rying on a dia­logue about the task at hand is the most popular of the mode of inter­ac­tion meta­phors for human com­puter inter­faces.

Voir aussi :

Vous n’avez pas le mono­pole du design.

Le Tao du design web (2000).

Gestion des styles dans Axure

Axure n’est pas un outil de maquet­tage à haute fidé­lité, pour­tant il est par­fois inté­res­sant de modi­fier les styles par défaut des wid­gets ou de dis­poser d’une biblio­thèque de styles. Cela évite par exemple de sélec­tionner cin­quante fois un niveau de gris et se retrouver avec une palette de gris pas homo­gène. Voici com­ment faire.

Axure - Style par défaut
Axure Créer un style réutilisable

La ges­tion des styles est propre à un fichier Axure. Cela dit, on peut importer les styles depuis un fichier exis­tant, en allant dans Fichier > Importer. Là, avancez dans l’assistant jusqu’à la fenêtre d’importation de styles de wid­gets puis sélec­tionnez ceux qui vous inté­ressent.

Axure - Import styles

Un prototype en plein écran et sur deux moniteurs

Dans les sys­tèmes d’information per­met­tant de suivre une situa­tion com­plexe et chan­geante (sys­tèmes de contrôle, de régu­la­tion, de com­mu­ni­ca­tion, etc.), un opé­ra­teur doit consulter beau­coup d’informations à la fois. Pour ça, il a sou­vent plu­sieurs écrans et une même appli­ca­tion peut uti­liser deux écrans. Par exemple, j’ai tra­vaillé récem­ment sur un sys­tème où l’écran prin­cipal était occupé par un tableau de bord et l’écran secon­daire par un outil car­to­gra­phique. Le tableau de bord per­met­tait d’accéder à d’autres vues (popups, onglets, etc.). Il y avait éga­le­ment des influences pos­sibles d’un écran à l’autre, par exemple sélec­tionner un élé­ment dans le tableau de bord permet de le loca­liser sur la carte.

Supposons qu’on veuille tester l’utilisabilité du dis­po­sitif en per­met­tant à l’utilisateur de mani­puler l’IHM et les deux écrans. L’outil de pro­to­ty­page uti­lisé génère pro­ba­ble­ment des maquettes en HTML et le plein écran des navi­ga­teurs est prévu pour un seul moni­teur. Un gros projet indus­triel a les moyens de déve­lopper un vrai pro­to­type fonc­tionnel, mais sup­po­sons que soit impos­sible. Voici une alter­na­tive pour Windows 8 et Firefox.

Configuration des fenêtres

Pour avoir un plein écran, il faut mas­quer les barre d’onglets, d’outil, d’adresse… tout ce que Mozilla appelle le « chrome »). Pour ça, l’extension sty­lish permet de modi­fier le CSS (c’est-à-dire en gros le style) de n’importe quel site, et même de Firefox lui-même.

  • Installez-la et redé­marrez Firefox ;
  • Pressez les touches Ctrl+Shift+A ;
  • Allez dans l’onglet de Stylish [1] et cli­quez sur « Créer un nou­veau style » [2].

2015-12-29_15h40_30

  • Dans la nou­velle fenêtre, reco­piez le code sui­vant et enre­gis­trer.
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#navigator-toolbox { 
    display:none !important; 
}

Voici éga­le­ment le code si vous voulez cacher les ascen­seurs. :

#content browser {
    margin-right: -14px !important;
    overflow-y: scroll;
    overflow-x: hidden;
}

Le résultat res­semble à ça :

2015-12-29_15h42_12

Quand vous vou­drez désac­tivez la per­son­na­li­sa­tion, réap­puyez sur Ctrl+Shift+A et cli­quez sur « Désactiver ».

Ensuite, passez Firefox en mode fenêtré et ajustez la taille de la fenêtre aux dimen­sions des deux écrans. Selon la manière dont le sys­tème est censé être uti­lisé, il faut ou non mas­quer la barre des tâches de Windows.

Configuration des maquettes

Pour Axure, la solu­tion la plus simple (OK tout est relatif) est de créer un pan­neau dyna­mique pour chaque écran et de les placer dans la même page. Chaque vue est ainsi un sous-panneau. La maquette sera longue à charger, mais ensuite la navi­ga­tion sera fluide. Cela évite de dupli­quer du contenu et permet de garder fixe le contenu d’un écran pen­dant un chan­ge­ment de vue dans l’autre écran.

Configuration des écrans

Dans Windows, confi­gurez la posi­tion des deux écrans (Bureau > Clic droit > Résolution de l’écran) en fonc­tion de la manière dont l’utilisateur sera réel­le­ment ins­tallé à son poste. Quelque chose comme ça :

2015-12-29_09h59_17

Les ancêtres d’Excel et de Powerpoint

Excel

Ce pho­to­gramme est tiré du film La Garçonnière de Billy Wilder. On y voit le héros, comp­table parmi des cen­taines d’autres dans une com­pa­gnie d’assurance. Ben Evans a avancé l’idée qu’on peut com­parer ce bureau à un fichier Excel et chacun de ces employés à une cel­lule effec­tuant un calcul précis. Evans sur­es­time sans doute le degré de tay­lo­ri­sa­tion des employés de bureau, mais il est vrai qu’il est ten­tant de com­parer à un énorme tableau tous les dépar­te­ments d’une orga­ni­sa­tion s’occupant de chiffres et que le déve­lop­pe­ment de l’informatique a lar­ge­ment auto­ma­tisé les cal­culs et permis d’étendre les méthodes de tra­vail et de rai­son­ne­ment, comme l’a très bien perçu Steven Levy dès 1984.

Il existe un cas encore plus par­lant : les cal­culs mathé­ma­tiques com­plexes requis par des domaines tels que l’astronomie, la balis­tique ou la cryp­ta­na­lyse. Chaque calcul était décom­posé en opé­ra­tions simples et suc­ces­sives, effec­tuées par des per­sonnes armées de cal­cu­lettes et autres tables de loga­rithme. En anglais, ces per­sonnes étaient appe­lées des… com­pu­ters, Cf. cet article et ce livre. Bletchley Park était ainsi un centre mili­taire tout entier dédié au but de casser les codes secret uti­lisé par l’Axe, ce qui se reflé­tait dans son orga­ni­sa­tion.

Powerpoint

Powerpoint est autre exemple d’organisation entière se retrou­vant réduite à un simple logi­ciel. Dans les années 1980, la concep­tion d’une pré­sen­ta­tion se fai­sait par ordi­na­teur, mais il fal­lait tou­jours pro­duire les sup­ports, que ce soit sur dia­po­si­tive argen­tique ou sur trans­pa­rent. Powerpoint 2.0 avait ainsi un bouton Envoyer à Genigraphics, qui per­met­tait de trans­mettre un fichier direc­te­ment à une entre­prise spé­cia­lisée dans l’impression de dia­po­si­tives.

Si on remonte jusqu’au début du 20e siècle, on trouve l’entreprise de chimie DuPont, qui pos­sé­dait une salle dédiée. Ses diri­geants pou­vaient assister à des pré­sen­ta­tions étayées par des tableaux et gra­phiques, les­quels étaients affi­chés sur de grands pan­neaux, d’abord montés sur des char­nières puis sur tout un sys­tème de mono­rail. C’est fas­ci­nant, car le dis­po­sitif a inventé ou popu­la­risé à la fois :

  • L’usage des gra­phiques, pas très répandu à l’époque
  • L’idée de la dia­po­si­tive comme docu­ment syn­thé­tique et sup­port d’un dis­cours
  • L’idée d’une pré­sen­ta­tion comme suite de dia­po­si­tives
  • L’idée d’un réper­toire de dia­po­si­tives dans lequel on puisse pio­cher, puisque la salle ser­vait autant de lieu de réunion que d’archive.

Et DuPont a fait ça de la manière la plus lit­té­rale et steam­punk qui soit : avec des rails.

1919 : pre­mière ver­sion
1950 : ver­sion plus évo­luée

Pour aller plus loin

  • Un article très com­plet sur l’histoire du format de la dia­po­si­tive
  • Un livre sur l’histoire du tra­vail intel­lec­tuel au prisme des bureaux et envi­ron­ne­ments de tra­vail.