Leçons ergonomiques et techniques d’un projet perso

Il y a quel­ques mois j’ai publié un outil pour cal­cu­ler une addi­tion en terme de tickets resto (le post de l’époque est ici). Je sais, rien ne m’arrête. Voici une mise à jour, avec notam­ment des visuels plus tra­vaillés, ainsi qu’un cla­vier sur mesure et tou­jours pré­sent à l’écran. Vous pou­vez le tes­ter direc­te­ment dans le cadre ci-après ou l’ouvrir depuis votre ordi­phone pré­féré.

Pourquoi un thème sombre ?

Parce que c’est repo­sant pour les yeux, sur­tout 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à som­bres.

Pourquoi un clavier sur mesure ?

Se limi­ter à ce que four­nit l’OS oblige à uti­li­ser :

  • sur iOS, un cla­vier pensé pour la sai­sie de numé­ros de télé­phone, donc pas top
  • Sur Windows Phone et Android, un cla­vier plus adapté, sans carac­tè­res inuti­les et avec un sépa­ra­teur déci­mal. Malgré cela je n’aime pas trop leur dis­po­si­tion (voir plus bas).

De plus, le cla­vier natif appa­rait à l’appui sur un champ. C’est bien dans une page com­plexe, mais ici il est plus per­ti­nent d’avoir une mise en page sans scroll, avec les champs fixes et le cla­vier tou­jours pré­sent.

Enfin, pour uti­li­ser le cla­vier numé­ri­que natif, il faut que l’élément <input> soit de type number. Ca pose cer­tai­nes contrain­tes, car l’API a été pen­sée pour un contrôle de vali­dité dyna­mi­que mais après coup : c’est seule­ment quand l’utilisateur sort du champ que le champ signale l’erreur, par exem­ple s’il a saisi des let­tres au lieu de chif­fre. Ca rend dif­fi­cile le contrôle a priori que je vou­lais, puisqu’on n’a aucun accès pro­gram­ma­ti­que au texte inva­lide d’un champ (value devient vide). De plus, une valeur du genre « 10, » est consi­dé­rée comme inva­lide, alors qu’il fau­drait qu’elle cor­res­ponde à un état « en cours de sai­sie », comme c’est le cas dans les bon­nes biblio­thè­ques de ges­tion des mas­ques de sai­sie.

Ajoutons qu’en fran­çais le sépa­ra­teur déci­mal cor­rect est la vir­gule mais cer­tains navi­ga­teurs (Firefox Mobile) ne le loca­li­sent pas cor­rec­te­ment.

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

Totalement. C’était jus­te­ment ins­truc­tif pour moi de voir le nom­bre de cho­ses qu’il faut réim­plé­men­ter comme on peut. Le che­mi­ne­ment a res­sem­blé à ça :

  1. Je ne vou­lais pas du cla­vier, alors qu’il appa­rait par défaut, un com­por­te­ment théo­ri­que­ment non modi­fia­ble.
  2. Du coup, on tri­che en fai­sant per­dre le focus à un champ dès qu’il le gagne.
  3. Du coup, il faut en gar­der en mémoire quel champ on a sélec­tionné. Un focus cus­tom, quoi. Il faut éga­le­ment recréer un cur­seur et le pla­cer au bon endroit.
  4. Ah merde, il faut cal­cu­ler à la main la posi­tion du cur­seur.
  5. Et bien sûr ça oblige de bidouiller pour obte­nir la lar­geur d’un carac­tère (l’unité ch aurait été par­faite mais Chrome ne la sup­porte pas). Donc l’outil ne mar­che qu’avec des poli­ces à chasse fixe (mono­space).

Je vous passe les sub­ti­les dif­fé­ren­ces de com­por­te­ment entre navi­ga­teurs, notam­ment dans la ges­tion des évè­ne­ments focus et click. Bref, le tout mar­che mais n’est pas ultra robuste ni fran­che­ment réac­tif et le code est sans doute encore moins pro­pre et modu­laire que la der­nière fois.

Pourquoi cette disposition de clavier ?

Vu qu’on est dans la sai­sie de mon­naie je me suis rap­pro­ché de la conven­tion des cal­cu­let­tes, avec le 9 en haut à droite. En plus, la pro­gres­sion des chif­fres du bas vers le haut suit le mou­ve­ment de la main ou du doigt pro­pre au mobile.

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 sys­tem. 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­ri­cal for­ces as your pur­view. The pro­blem isn’t making some­thing look pretty, you fool, it’s world hun­ger !

Boy that escalated quickly

Toute la SNCF dans un papelard

Dans ce mille-feuilles d’enjeux, les cou­ches supé­rieu­res struc­tu­rent cel­les du des­sous. Dans les cas extrê­mes, un objet ano­din encap­sule une bonne par­tie de la com­plexité de tout l’édifice. Exemple : les 36 don­nées pré­sen­tes 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 sai­sir un nom­bre, lequel était syn­di­ca­le­ment et poli­ti­que­ment sen­si­ble. Potentiellement, l’outil aurait pu se résu­mer à un champ et un bou­ton de vali­da­tion : cha­cun sai­sit le nom­bre pour son péri­mè­tre, qui sera agrégé en une stat glo­bal – 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 cor­pus juri­di­que four­nis­sant seule­ment un cadre géné­ral), com­ment inci­ter les gens à le faire sans per­dre en rigueur, etc.

Bref, beau­coup de ques­tions sou­vent inat­ten­dues pour un seul champ, alors qu’on était bien pla­cés auprès de l’échelle des déci­deurs. C’est ce que ten­tent 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 chan­ger les cho­ses. Faire du design stra­té­gi­que, de la stra­té­gie UX, de la conduite du chan­ge­ment, etc.

C’est facile à dire

Dans un pro­jet, il est bon d’être res­pon­sa­ble de son niveau, consulté pour le niveau +1 et au cou­rant du niveau +2. Exemple : vous êtes res­pon­sa­ble 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é­gi­ques. Il peut y avoir des niveaux en des­sous (décli­nai­son des IHM) et au des­sus. Si vous avez besoin de gra­vir un éche­lon pour faire du bon tra­vail et que vous y par­ve­nez (par exem­ple lors du pro­jet sui­vant), tant mieux, mais :

  1. C’est plus facile à dire qu’à faire.
  2. Il est dif­fi­cile de sui­vre 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 arti­cle récent de Donald Norman et Pieter Jan Stappers. Son pro­pos 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­fi­ques :

  • Inter-dépendance des élé­ments
  • Relations cau­sa­les non-linéaires et non-séquentielles
  • Latences lon­gues et impré­dic­ti­bles
  • Echelles mul­ti­ples
  • Données opé­ra­tion­nel­les chan­gean­tes

Ces thè­mes sont bien connus en théo­rie 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 man­que de réflexi­vité : les auteurs auraient pu se deman­der per­son­nel­le­ment quel­les posi­tions ils ont dans leurs inter­ven­tions. Don fucking Norman n’a pas le même pres­tige quand il débar­que dans un pro­jet que le concep­teur en « design public » évo­qué ici et sta­giaire à l’époque, même s’ils tra­vaillent sur des sujets simi­lai­res. 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­ta­bles sont dotés d’une petite lampe en haut de l’écran, pour l’éclairer quand la lumière ambiante est trop fai­ble. Un rac­courci cla­vier (Fn+Espace) per­met 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 pen­ser : voici un outil qui conver­tit 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 bou­cle et qui n’arrive pas à l’arrêter.

En fai­sant mes recher­ches, je suis tombé sur un hack assez dif­fé­rent mais encore plus jouis­sif : uti­li­ser l’accéléromètre d’un ordi por­ta­ble pour détec­ter quand on toque des­sus. Certains ordi­na­teurs ont un cap­teur de ce genre pour détec­ter une chute et désac­ti­ver le dis­que dur, mais on peut en tirer parti pour jouer, enre­gis­trer les séis­mes ou détec­ter des coups. On peut ainsi sor­tir 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 allu­mer 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étec­ter les mou­ve­ments pro­pres de l’appareil, pour un usage externe. J’aime aussi le fait que l’ordinateur devient entiè­re­ment un bou­ton : on peut appuyer des­sus n’importe où.

J’aime enfin l’idée de détour­ner les com­po­sants de banals ordi­na­teurs pour en faire des inter­fa­ces tan­gi­bles 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­gi­ner, à par­tir d’un bête toc-toc et d’une sim­ple lampe. Jeu musi­cal ? 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 per­met 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 vita­les en code morse via le voyant CAPS LOCK de son ordi­na­teur :

How does Randy know that there is a site cal­led Golgotha, and how does he know its real coor­di­na­tes ? His com­pu­ter 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 remem­ber. And for no rea­son other than the gene­ral belief that every aspect of a com­pu­ter should be under the control of hackers, someone, somew­here, wrote some library rou­ti­nes cal­led XLEDS that make it pos­si­ble for pro­gram­mers to turn these things on and off at will. And for a month, Randy’s been wri­ting a lit­tle pro­gram that makes use of these rou­ti­nes to out­put 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­pu­ter as camou­flage, Randy’s been hun­ched over gazing into the sub­li­mi­nal chan­nel of that blin­king LED, rea­ding the contents of the decryp­ted 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 sai­sir des nom­bres : avec une « échelle » et avec un cla­vier.

Échelles

Dans le pre­mier cas, on choi­sit une bonne valeur sur une échelle conti­nue, avec un cur­seur ou un sty­let. 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­tion­née est affi­chée.

Pascaline
Pascaline
Curta
Curta

L’Arithmomètre fut très popu­laire jusqu’à la moi­tié 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 remet­tre le total à zéro, sai­sir un nom­bre puis le vali­der 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 ven­due à par­tir de 1920 (et impres­sion­nante de com­pa­cité pour l’époque), un sty­let inté­gré per­met de pous­ser une enco­che cor­res­pon­dant à un chif­fre jusqu’à une butée. Quand le cal­cul impli­que une rete­nue, il faut pous­ser l’encoche jusqu’à la faire chan­ger de colonne.

Claviers

Un cla­vier peut être un pavé de dix chif­fres, ou bien une grille de nom­bres à sai­sir direc­te­ment.

Les pavés à dix chif­fres sont le plus sou­vent dis­po­sés en trois colon­nes, comme sur cer­tai­nes cal­cu­let­tes (inventé par David Sunstrand, 1911) ou sur les télé­pho­nes depuis les tra­vaux de Chapanis aux labo­ra­toi­res Bell. Pour les cal­cu­let­tes, on ne trouve his­to­ri­que­ment pas de rai­son­ne­ment par­ti­cu­lier pour avoir orga­nisé les chif­fres du bas vers le haut (source), alors que l’ordre des chif­fres sur un télé­phone, du haut vers le bas, a été minu­tieu­se­ment étu­dié. Voici par exem­ple 17 alter­na­ti­ves qui on été tes­tées et lais­sées de coté :

bell

Ils peu­vent être dis­po­sés sur deux lignes, comme sur cer­tains cla­viers « sécu­ri­sés » de sites ban­cai­res ou comme le pre­mier cla­vier de cal­cu­lette à dix chif­fres 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 com­mis de bureau devant addi­tion­ner des séries de valeurs. Les nom­bres sont dis­po­sés en colonne, avec depuis la droite les uni­tés, dizai­nes, cen­tai­nes, etc. Si on en reste à l’addition, ces appa­reils sont très effi­ca­ces : il suf­fit d’appuyer direc­te­ment sur les nom­bres vou­lus, 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 cha­que tou­che. Le chif­fre en petit sur la gau­che est le com­plé­ment du chif­fre prin­ci­pal et sert aux sous­trac­tions selon une méthode assez savante.

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

Ces appa­reils ont donné lieu à des consi­dé­ra­tions ergo­no­mi­ques tout à fait moder­nes :

  • Usages inat­ten­dus : les uti­li­sa­teurs experts n’utilisaient guère les nom­bres en haut des colon­nes, puisqu’il était plus facile de taper deux fois 4 plu­tôt que mon­ter la main jusqu’au 8.
  • Soucis de clarté : les colon­nes étaient colo­riées dif­fé­rem­ment et deux revê­te­ments dif­fé­rents étaient uti­li­sés sur les tou­ches, en alter­nance sur cha­que ligne.
  • Conception holis­ti­que : pour évi­ter de trop lever le bras, des bureaux spé­ciaux étaient uti­li­sés avec un encas­tre­ment pour abais­ser la machine.

Pour aller plus loin

Des sites his­to­ri­ques spé­cia­li­sé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­pu­ter enga­ged in a conver­sa­tion with each other or car­rying on a dia­lo­gue about the task at hand is the most popu­lar of the mode of inter­ac­tion meta­phors for human com­pu­ter inter­fa­ces.

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 sty­les par défaut des wid­gets ou de dis­po­ser d’une biblio­thè­que de sty­les. Cela évite par exem­ple de sélec­tion­ner cin­quante fois un niveau de gris et se retrou­ver 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 sty­les est pro­pre à un fichier Axure. Cela dit, on peut impor­ter les sty­les depuis un fichier exis­tant, en allant dans Fichier > Importer. Là, avan­cez dans l’assistant jusqu’à la fenê­tre d’importation de sty­les de wid­gets puis sélec­tion­nez ceux qui vous inté­res­sent.

Axure - Import styles

Un prototype en plein écran et sur deux moniteurs

Dans les sys­tè­mes d’information per­met­tant de sui­vre 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 consul­ter beau­coup d’informations à la fois. Pour ça, il a sou­vent plu­sieurs écrans et une même appli­ca­tion peut uti­li­ser deux écrans. Par exem­ple, j’ai tra­vaillé récem­ment sur un sys­tème où l’écran prin­ci­pal était occupé par un tableau de bord et l’écran secon­daire par un outil car­to­gra­phi­que. Le tableau de bord per­met­tait d’accéder à d’autres vues (popups, onglets, etc.). Il y avait éga­le­ment des influen­ces pos­si­bles d’un écran à l’autre, par exem­ple sélec­tion­ner un élé­ment dans le tableau de bord per­met de le loca­li­ser sur la carte.

Supposons qu’on veuille tes­ter l’utilisabilité du dis­po­si­tif en per­met­tant à l’utilisateur de mani­pu­ler l’IHM et les deux écrans. L’outil de pro­to­ty­page uti­lisé génère pro­ba­ble­ment des maquet­tes en HTML et le plein écran des navi­ga­teurs est prévu pour un seul moni­teur. Un gros pro­jet indus­triel a les moyens de déve­lop­per un vrai pro­to­type fonc­tion­nel, mais sup­po­sons que soit impos­si­ble. 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 per­met 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é­mar­rez Firefox ;
  • Pressez les tou­ches 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 vou­lez cacher les ascen­seurs. :

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

Le résul­tat res­sem­ble à ça :

2015-12-29_15h42_12

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

Ensuite, pas­sez Firefox en mode fenê­tré et ajus­tez 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 sim­ple (OK tout est rela­tif) est de créer un pan­neau dyna­mi­que pour cha­que écran et de les pla­cer dans la même page. Chaque vue est ainsi un sous-panneau. La maquette sera lon­gue à char­ger, mais ensuite la navi­ga­tion sera fluide. Cela évite de dupli­quer du contenu et per­met de gar­der fixe le contenu d’un écran pen­dant un chan­ge­ment de vue dans l’autre écran.

Configuration des écrans

Dans Windows, confi­gu­rez 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