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.)

Mille et une manieres de saisir des nombres

En schématisant, on peut distinguer deux manières de saisir des nombres : avec une « échelle » et avec un clavier.

Échelles

Dans le premier cas, on choisit une bonne valeur sur une échelle continue, avec un curseur ou un stylet. L’échelle peut être linéaire (comme sur l’Arithmomètre) ou circulaire (comme sur la Pascaline ou un téléphone à cadran). L’échelle est parfois implicite, comme sur la Curta où seule la valeur sélectionnée est affichée.

Pascaline
Pascaline
Curta
Curta

L’Arithmomètre fut très populaire 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 nouveau mécanisme. Notez que son usage était assez fastidieux : il fallait remettre le total à zéro, saisir un nombre puis le valider par un grand tour de manivelle (voir la vidéo plus bas).

L’Addiator est un peu différent. Dans cette calculatrice de poche vendue à partir de 1920 (et impressionnante de compacité pour l’époque), un stylet intégré permet de pousser une encoche correspondant à 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 clavier peut être un pavé de dix chiffres, ou bien une grille de nombres à saisir directement.

Les pavés à dix chiffres sont le plus souvent disposés en trois colonnes, comme sur certaines calculettes (inventé par David Sunstrand, 1911) ou sur les téléphones depuis les travaux de Chapanis aux laboratoires Bell. Pour les calculettes, on ne trouve historiquement pas de raisonnement particulier pour avoir organisé 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é minutieusement étudié. Voici par exemple 17 alternatives qui on été testées et laissées de coté :

bell

Ils peuvent être disposés sur deux lignes, comme sur certains claviers « sécurisés » de sites bancaires ou comme le premier clavier de calculette à dix chiffres commercialisé.

ing direct
ING direct

On appelle souvent le second type de clavier un Comptomètre. Il est intéressant car pensé pour l’usage particulier des caissiers ou des commis de bureau devant additionner des séries de valeurs. Les nombres sont disposés en colonne, avec depuis la droite les unités, dizaines, centaines, etc. Si on en reste à l’addition, ces appareils sont très efficaces : il suffit d’appuyer directement sur les nombres voulus, sans validation, et l’addition est affichée progressivement en bas. Il n’y pas de boutons pour les différents opérations ni pour le =. Il n’y a pas non plus besoin de zéro : 200 correspond au 2 sur la troisième colonne. Comme on le voit sur la photo, seule l’unité est affichée sur chaque touche. Le chiffre en petit sur la gauche est le complément du chiffre principal et sert aux soustractions selon une méthode assez savante.

Un comptomètre de marque Sumlock
Un comptomètre de marque Sumlock

Ces appareils ont donné lieu à des considérations ergonomiques tout à fait modernes :

  • Usages inattendus : les utilisateurs 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 coloriées différemment et deux revêtements différents étaient utilisés sur les touches, en alternance sur chaque ligne.
  • Conception holistique : pour éviter de trop lever le bras, des bureaux spéciaux étaient utilisés avec un encastrement pour abaisser la machine.

Pour aller plus loin

Des sites historiques spécialisés :

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

Le designer comme hôte – Charles Eames, 1972.

Le designer comme traducteur, performeur ou réalisateur — Mickael Rock, 1996.

Le designer comme dramaturge – Brenda Laurel, 1991.

Le designer comme ventriloquiste – Hutchins, 1987 (alerte mauvais PDF) :

The metaphor of user and computer engaged in a conversation with each other or carrying on a dialogue about the task at hand is the most popular of the mode of interaction metaphors for human computer interfaces.

Voir aussi :

Vous n’avez pas le monopole du design.

Le Tao du design web (2000).

Gestion des styles dans Axure

Axure n’est pas un outil de maquettage à haute fidélité, pourtant il est parfois intéressant de modifier les styles par défaut des widgets ou de disposer d’une bibliothèque de styles. Cela évite par exemple de sélectionner cinquante fois un niveau de gris et se retrouver avec une palette de gris pas homogène. Voici comment faire.

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

La gestion des styles est propre à un fichier Axure. Cela dit, on peut importer les styles depuis un fichier existant, en allant dans Fichier > Importer. Là, avancez dans l’assistant jusqu’à la fenêtre d’importation de styles de widgets puis sélectionnez ceux qui vous intéressent.

Axure - Import styles

Un prototype en plein écran et sur deux moniteurs

Dans les systèmes d’information permettant de suivre une situation complexe et changeante (systèmes de contrôle, de régulation, de communication, etc.), un opérateur doit consulter beaucoup d’informations à la fois. Pour ça, il a souvent plusieurs écrans et une même application peut utiliser deux écrans. Par exemple, j’ai travaillé récemment sur un système où l’écran principal était occupé par un tableau de bord et l’écran secondaire par un outil cartographique. Le tableau de bord permettait d’accéder à d’autres vues (popups, onglets, etc.). Il y avait également des influences possibles d’un écran à l’autre, par exemple sélectionner un élément dans le tableau de bord permet de le localiser sur la carte.

Supposons qu’on veuille tester l’utilisabilité du dispositif en permettant à l’utilisateur de manipuler l’IHM et les deux écrans. L’outil de prototypage utilisé génère probablement des maquettes en HTML et le plein écran des navigateurs est prévu pour un seul moniteur. Un gros projet industriel a les moyens de développer un vrai prototype fonctionnel, mais supposons que soit impossible. Voici une alternative pour Windows 8 et Firefox.

Configuration des fenêtres

Pour avoir un plein écran, il faut masquer les barre d’onglets, d’outil, d’adresse… tout ce que Mozilla appelle le « chrome »). Pour ça, l’extension stylish permet de modifier 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 cliquez sur « Créer un nouveau style » [2].

2015-12-29_15h40_30

  • Dans la nouvelle fenêtre, recopiez le code suivant et enregistrer.
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#navigator-toolbox { 
    display:none !important; 
}

Voici également le code si vous voulez cacher les ascenseurs. :

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

Le résultat ressemble à ça :

2015-12-29_15h42_12

Quand vous voudrez désactivez la personnalisation, réappuyez sur Ctrl+Shift+A et cliquez sur « Désactiver ».

Ensuite, passez Firefox en mode fenêtré et ajustez la taille de la fenêtre aux dimensions des deux écrans. Selon la manière dont le système est censé être utilisé, il faut ou non masquer la barre des tâches de Windows.

Configuration des maquettes

Pour Axure, la solution la plus simple (OK tout est relatif) est de créer un panneau dynamique 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 navigation sera fluide. Cela évite de dupliquer du contenu et permet de garder fixe le contenu d’un écran pendant un changement de vue dans l’autre écran.

Configuration des écrans

Dans Windows, configurez la position des deux écrans (Bureau > Clic droit > Résolution de l’écran) en fonction de la manière dont l’utilisateur sera réellement installé à son poste. Quelque chose comme ça :

2015-12-29_09h59_17

Les ancêtres d’Excel et de Powerpoint

Excel

Ce photogramme est tiré du film La Garçonnière de Billy Wilder. On y voit le héros, comptable parmi des centaines d’autres dans une compagnie d’assurance. Ben Evans a avancé l’idée qu’on peut comparer ce bureau à un fichier Excel et chacun de ces employés à une cellule effectuant un calcul précis. Evans surestime sans doute le degré de taylorisation des employés de bureau, mais il est vrai qu’il est tentant de comparer à un énorme tableau tous les départements d’une organisation s’occupant de chiffres et que le développement de l’informatique a largement automatisé les calculs et permis d’étendre les méthodes de travail et de raisonnement, comme l’a très bien perçu Steven Levy dès 1984.

Il existe un cas encore plus parlant : les calculs mathématiques complexes requis par des domaines tels que l’astronomie, la balistique ou la cryptanalyse. Chaque calcul était décomposé en opérations simples et successives, effectuées par des personnes armées de calculettes et autres tables de logarithme. En anglais, ces personnes étaient appelées des… computers, Cf. cet article et ce livre. Bletchley Park était ainsi un centre militaire tout entier dédié au but de casser les codes secret utilisé par l’Axe, ce qui se reflétait dans son organisation.

Powerpoint

Powerpoint est autre exemple d’organisation entière se retrouvant réduite à un simple logiciel. Dans les années 1980, la conception d’une présentation se faisait par ordinateur, mais il fallait toujours produire les supports, que ce soit sur diapositive argentique ou sur transparent. Powerpoint 2.0 avait ainsi un bouton Envoyer à Genigraphics, qui permettait de transmettre un fichier directement à une entreprise spécialisée dans l’impression de diapositives.

Si on remonte jusqu’au début du 20e siècle, on trouve l’entreprise de chimie DuPont, qui possédait une salle dédiée. Ses dirigeants pouvaient assister à des présentations étayées par des tableaux et graphiques, lesquels étaients affichés sur de grands panneaux, d’abord montés sur des charnières puis sur tout un système de monorail. C’est fascinant, car le dispositif a inventé ou popularisé à la fois :

  • L’usage des graphiques, pas très répandu à l’époque
  • L’idée de la diapositive comme document synthétique et support d’un discours
  • L’idée d’une présentation comme suite de diapositives
  • L’idée d’un répertoire de diapositives dans lequel on puisse piocher, puisque la salle servait autant de lieu de réunion que d’archive.

Et DuPont a fait ça de la manière la plus littérale et steampunk qui soit : avec des rails.

1919 : première version
1950 : ver­sion plus évo­luée

Pour aller plus loin

  • Un article très complet sur l’histoire du format de la diapositive
  • Un livre sur l’histoire du travail intellectuel au prisme des bureaux et environnements de travail.

Un bidule optimisé pour la main mais codé avec les pieds

EDIT : Infos plus récentes ici.

S’il y a bien un moment où je n’ai pas envie d’utiliser mes faibles capacités de calcul mental, mais plutôt un artefact cognitif adapté (en français : dégainer une calculette), c’est quand il s’agit de payer en tickets restaurant. Étant toujours à la recherche d’occasions concrètes d’apprendre à programmer, j’ai donc bricolé un petit outil qui affiche le nombre de tickets à donner et le reste en liquide.

Le bidule est pensé pour une utilisation sur petit écran et une saisie au pouce. J’ai essayé de rendre le formulaire dynamique, pour empêcher la saisie de lettres ou des montants mal formatés. C’est un parti pris ergonomique (blocage versus message d’erreur), mais c’est également instructif de voir à quel point le développement de web app peut être CHIANT si on tombe sur la mauvais combinaison de cas – en l’occurrence, combiner un contrôle à la saisie et un clavier adapté à la saisie numérique sur mobile. Par exemple, l’outil bloque la saisie d’une seconde virgule après « 1,01 », mais après « 1, » ou « 1,00 ».

Avertissement : on parle d’un truc optimisé pour la main mais codé avec les pieds. Donc pas de support de Safari <9 ni d’Internet Explorer (et temporairement de Firefox sur Android, grrr). et un code d’une qualité très relative.

C’est ici.

Screenshot_2016-01-03-00-05-00