Leçons ergonomiques et techniques d’un projet perso

Il y a quelques 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à sombres.

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 inutiles 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é­rique natif, il faut que l’élément <input> soit de type number. Ca pose cer­taines contraintes, car l’API a été pen­sée pour un contrôle de vali­dité dyna­mique mais après coup : c’est seule­ment 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 dif­fi­cile le contrôle a priori que je vou­lais, puisqu’on n’a aucun accès pro­gram­ma­tique 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 bonnes biblio­thèques de ges­tion des masques 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­lisent 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 nombre de choses 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­fiable.
  2. Du coup, on triche en fai­sant perdre 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 marche qu’avec des polices à chasse fixe (mono­space).

Je vous passe les sub­tiles dif­fé­rences 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 marche mais n’est pas ultra robuste ni fran­che­ment réac­tif et le code est sans doute encore moins propre 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­lettes, avec le 9 en haut à droite. En plus, la pro­gres­sion des chiffres du bas vers le haut suit le mou­ve­ment 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é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 forces 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 couches supé­rieures struc­turent celles 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é­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 sai­sir un nombre, lequel était syn­di­ca­le­ment et poli­ti­que­ment sen­sible. Potentiellement, l’outil aurait pu se résu­mer à un champ et un bou­ton de vali­da­tion : cha­cun sai­sit le nombre 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­dique four­nis­sant seule­ment un cadre géné­ral), com­ment inci­ter 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 pla­cé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 chan­ger 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 pro­jet, 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­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 exemple lors du pro­jet 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 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­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é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 manque de réflexi­vité : les auteurs auraient pu se deman­der 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 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­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) 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 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 jouis­sif : uti­li­ser l’accéléromètre d’un ordi por­table 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 disque dur, mais on peut en tirer parti pour jouer, enre­gis­trer les séismes 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 propres 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­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­gi­ner, à par­tir d’un bête toc-toc et d’une simple 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 vitales 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­nates ? 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­tines cal­led 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 lit­tle pro­gram that makes use of these rou­tines 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 nombres : 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 remettre le total à zéro, sai­sir un nombre 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 encoche cor­res­pon­dant à un chiffre jusqu’à une butée. Quand le cal­cul implique 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 chiffres, ou bien une grille de nombres à sai­sir direc­te­ment.

Les pavés à dix chiffres sont le plus sou­vent dis­po­sé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 étu­dié. Voici par exemple 17 alter­na­tives qui on été tes­tées et lais­sées de coté :

bell

Ils peuvent être dis­po­sés sur deux lignes, comme sur cer­tains cla­viers « sécu­ri­sé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 com­mis de bureau devant addi­tion­ner des séries de valeurs. Les nombres sont dis­po­sés en colonne, avec depuis la droite les uni­tés, dizaines, cen­taines, etc. Si on en reste à l’addition, ces appa­reils sont très effi­caces : il suf­fit d’appuyer direc­te­ment sur les nombres 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 chaque touche. Le chiffre en petit sur la gauche est le com­plé­ment du chiffre 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 marque Sumlock

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

  • Usages inat­ten­dus : 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 plu­tôt que mon­ter 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­li­sés sur les touches, en alter­nance sur chaque ligne.
  • Conception holis­tique : 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­riques 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­logue 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­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­po­ser d’une biblio­thèque de styles. Cela évite par exemple 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 styles est propre à un fichier Axure. Cela dit, on peut impor­ter les styles depuis un fichier exis­tant, en allant dans Fichier > Importer. Là, avan­cez dans l’assistant jusqu’à la fenêtre d’importation de styles de wid­gets puis sélec­tion­nez 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 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 exemple, 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­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­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 maquettes 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­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 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 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 vou­lez cacher les ascen­seurs. :

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

Le résul­tat res­semble à ç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 simple (OK tout est rela­tif) est de créer un pan­neau dyna­mique pour chaque écran et de les pla­cer dans la même page. Chaque vue est ainsi un sous-panneau. La maquette sera longue à 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