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. J’ajoute aussi une capture de l’espace pour entreprise, qui a une gueule encore différente.

Page particuliers Pole Emploi

Page entreprise 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 ?

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 :

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.

D’une métaphore oubliée : Macintosh et le lent déclin du bureau

Les raisons du succès des interfaces graphiques sont bien connues : des objets visuels simples (fenêtre, icônes, menus et pointeurs), permettant un panel d’actions limitées et explicites, organisés par une métaphore cohérente : des documents rassemblés en dossier, posés sur le bureau pour les affaires courantes et rangés dans des casiers pour le reste.

wooton
Bureau Wooton, station de travail tout-en-un

Un dossier = une fenêtre

il est moins connu que cette métaphore, à son origine, était plus forte et contraignante. Les premières versions du Finder (l’explorateur de fichier de Mac OS) obéissaient à un modèle dit « spatial », lequel a été abandonné à la sortie de Mac OS X (moment d’une refonte complète du système). Cela se traduisait par deux règles :

  1. Cohérence. Chaque dossier était représenté par une seule fenêtre et chaque fenêtre était liée à un seul dossier. L’icône d’un dossier changeait d’apparence pour signifier qu’il était ouvert ou fermé. Cliquer sur l’icône d’un dossier ouvert faisait clignoter sa fenêtre et rien d’autre, puisqu’il ne pouvait être ouvert deux fois. En bref, pour l’utilisateur il n’y avait aucune différence entre un dossier et sa fenêtre.
  2. Stabilité. Les fenêtres mémorisaient la manière dont l’utilisateur les personnalisait. La forme, la position, le mode d’affichage (grille, liste…), la position des icônes en mode grille, etc., tout cela était conservé. Grâce à l’association entre fenêtre et dossier, cette règle était beaucoup plus simple à appliquer qu’aujourd’hui et le comportement des fenêtres d’autant plus prédictible pour l’utilisateur. Si j’ouvre ce dossier, je sais qu’il apparaitra à droite sur toute la hauteur de l’écran ; si j’ouvre cet autre dossier, il apparaitra en petit à gauche et ses fichiers seront en liste. Aujourd’hui, le Finder conserve certains paramètres (taille et position) et d’autres non (mode d’affichage et style), selon des règles de priorité impénétrables (détails ici).

En résumé, le Finder « spatial » tentait de faire fonctionner le bureau comme un ensemble de choses tangibles et fixes, pouvant servir de véritable mémoire externe (l’être humain étant plus doué pour reconnaitre un objet que pour s’en rappeler). Au lieu d’utiliser une abstraction pour en gérer une autre (fenêtre et système de fichier), l’utilisateur manipulait des objets concrets qui ne changeaient pas dans son dos (principe de moindre surprise).

Contraignant mais adapté à son temps

Ce modèle pouvait être assez contraignant. Notamment, ouvrir un dossier faisait forcément apparaître une nouvelle fenêtre (la fenêtre de ce dossier). Pour éviter de se retrouver avec des dizaines ouvertes, il fallait déplier l’arborescence du dossier (comme dans Mac OS X aujourd’hui), ou bien utiliser Alt+click, ce qui fermait la fenêtre d’origine et ouvrait la nouvelle en même temps.

Un dossier dans un dossier dans un… (Mac OS 9)
Un dossier dans un dossier dans un… (Mac OS 9)

Pourtant, d’après ce que j’ai pu lire et tester, ça marchait pas mal. D’abord, ces dossiers superposés dans tous les sens ne faisaient que reproduire le rangement classique d’un bureau, dans ce qu’il peut avoir d’idiosyncrasique et d’apparement chaotique. Ensuite, l’OS était organisé autour de ce modèle. Par exemple, plutôt que de minimiser une fenêtre, on pouvait double-cliquer sur la barre de titre pour ne laisser que celle-ci et cacher tout le reste. Cette fonction de « stores » (shades) suivait, une fois encore, un principe de spatialité : la fenêtre restait à sa place.

Exemple de deux fenêtres réduites à leur barre de titres
Exemple de deux fenêtres réduites à leur barre de titres

Ensuite, la cible d’Apple était moins experte que le public typique de l’époque et n’était probablement pas à l’aise avec l’abstraction d’un système de fichiers arborescent. Enfin, les ordinateurs d’alors avaient peu de mémoire, peu de fichiers et peu d’applications, peu de mémoire et avaient donc moins besoin de manipuler des quantités énormes d’information.

Le lent déclin du bureau façon Macintosh

Aujourd’hui, bien peu d’explorateurs de fichiers utilisent encore un modèle spatial. Les seuls projets actifs que j’ai trouvé sont Haiku OS (héritier de BeOS), Enligthenment (dit-on) et MATE (mais pas par défaut).

A moins que vous n’utilisiez un système exotique, il y a de fortes chances que votre bureau fonctionne différemment. Un simple test : y a-t-il des boutons Précédent et Suivant dans une fenêtre de l’explorateur ? Si oui, c’est qu’il ressemble plus à un navigateur Internet : il permet de parcourir différents dossiers à travers une fenêtre.

Ce modèle a été popularisé par Windows 98 (avec des prémisses dans 95). Dans une optique de convergence avec Internet Explorer, une barre d’adresse et des boutons Précédent et Suivant ont été ajoutés. Ouvrir un dossier a cessé d’ouvrir une nouvelle fenêtre. Ce comportement a été adopté par Mac OS X à sa sortie, créant un Finder bâtard, avec deux types de fenêtres et des réactions imprévisibles. Pour des détails, voyez notamment cet article de Siracusa, et celui-ci de Tog (un des premiers spécialistes en IHM employés par Apple).

Cachez ces fenêtres que je ne saurais voir

Le modèle de Windows est donc devenu la convention dominante – son ubiquité n’y est sans doute pas étrangère.

A la sortie de Mac OS, Steve Jobs a déclaré qu’un utilisateur ne devrait pas avoir à faire le ménage dans ses fenêtres. Il disait surtout ça pour promouvoir certaines nouveautés plus que pour exposer une quelconque vision du futur des interfaces, mais cela signale à mon avis un changement profond quoique lent de l’OS, dont l’abandon du Finder spatial constitue la première étape.

En gros, tout est fait pour qu’on n’ait plus à déplacer ou redimensionner ses fenêtres. La plupart des fonctions introduites depuis dix ans et dédiées à la navigation vont dans ce sens :

  • Mission Control (anciennement Exposé), une vue éclatée présentant simultanément des vignettes de toutes les fenêtres
  • Launchpad, grille montrant toutes les applications
  • Spaces, permettant de gérer des bureaux virtuels au lieu de fenêtres
  • Le mode plein écran, apparu avec Lion et qui a remplacé la fonction de maximisation
  • Des onglets pour le Finder.

Certains se sont inquiétés de l’importation de certains concepts depuis iOS. Il est vrai qu’aujourd’hui, tout est fait pour qu’on puisse utiliser un Mac comme un iPad, en affichant toutes les applications en plein écran et en naviguant entre elles grâce à un geste du trackpad. Après l’abandon du Finder spatial, faut-il s’attendre un jour à la disparition des fenêtres ?

Pour aller plus loin

Le flat design de la Grèce antique à nos jours

Le 04 décembre, j’ai donné une présentation à Lille dans le cadre du quatrième Welsh Design, qui m’a gentiment donné l’opportunité de parler de mes lubies.

L’angle est très proche de cet article sur l’éternelle querelle du minimalisme, mais le contenu est largement remanié. A l’origine, il y a ma frustration face au débat du flat design, débat nécessaire mais manquant à mon sens cruellement de recul. D’une part, j’ai voulu apporter quelques repères historiques, montrer que l’opposition entre le chargé et le sobre ne date pas d’hier. D’autre part, j’ai tenté de distinguer des concepts différents mais souvent confondus, car ayant tous à voir avec l’historicité du design et de la technique : skeuomorphisme, métaphore, signe, kitsch et ce que j’ai appelé « exaptation », faute d’une meilleure traduction pour repurposing.

Vu les limites de temps et de mes capacités oratoires, le contenu était un peu ambitieux, mais enfin voilà les diapositives vaguement annotées de la présentation. (Je tente un lecteur de PDF embarqué, dites-moi si ça déconne.)

Vu les limites de temps et de mes capacités oratoires, le contenu était un peu ambitieux, mais enfin les diapositives vaguement annotées de la présentation sont disponibles ici.

« Cette voiture a été conçue pour quelqu’un avec trois bras et une jambe »

Dans sa thèse magistrale sur l’histoire des IHM, Benjamin Thierry relate l’influence immédiate qu’a eue la sortie du Macintosh sur l’industrie : en 1984, de nombreux vendeurs commencent à proposer des souris et des interfaces graphiques. L’industrie adopte rapidement autour des même conventions.

Et pour les voitures ? Un modèle précis est-il à l’origine de l’agencement moderne des commandes ?

On pourrait penser à la Ford T, puisqu’elle a révolutionné la production et le marché des automobiles. Mais elle était compliquée à opérer et n’a pas eu de grande influence à ce niveau là. L’accélérateur était sous le volant à droite et trois pédales servaient respectivement à l’embrayage, à la marche arrière et au frein. Le levier à gauche servait à basculer entre les modes haute vitesse, neutre et frein d’urgence, en combinaison avec l’embrayge. Cette page vous donnera une idée plus juste de la complexité du bousin.

Extrait du manuel officiel de 1911 de la Ford T
Extrait du manuel officiel de 1911 de la Ford T

La plupart des Ford T avaient aussi une manette à gauche du volant pour ajuster le timing de la combustion. Plus on remonte dans le temps, plus on découvre ce genre de concept étrange, ayant disparu ou été automatisé. Par exemple, la De Dion-Bouton de 1902 avait un décélérateur plutôt qu’un accélérateur et celle de 1904 un frein qui agissait sur la transmission et un autre directement sur le moteur (sur le même principe que la manette de la Ford évoquée plus haut, si je comprend bien).

Bref, les commandes étaient positionnées différemment selon les modèles et n’avaient pas forcément d’équivalent contemporain direct. Il faut attendre la sortie de la Cadillac T53 en 1916 pour faire un grand saut en avant et trouver un agencement familier avec le contact sous le volant, trois pédales dans l’ordre actuel et le frein à main à droite. Cette voiture n’a pas eu un gros succès commercial mais a été imitée par l’Austin 7, qui elle fut très populaire et largement copiée. Il y a surement une leçon d’histoire des techniques à en tirer.

Les présentateurs de Top Gear (S10E08) se sont essayé à démarrer et piloter ces voitures et c’est plutôt fendard. Le titre et une bonne partie des références de ce texte viennent de là.

Cadillac T53 (oui on voit pas grand chose)
Cadillac T53 (oui on voit pas grand chose)

Aux origines des interactions

Dan Saffer, auteur d’un livre sur la notion de « micro-interaction », tient une liste sur l’origine d’interactions aujourd’hui omniprésentes : l’auto-correction, le copier-coller, les barres de défilement, etc.

Une invention qui aurait mérité de figurer dans la liste est celle du caret (un curseur placé entre deux caractères). Auparavant, le curseur était signalé en surlignant ou soulignant un caractère, si bien qu’il n’était pas évident de savoir si le texte inséré allait se placer avant ou après le caractère sélectionné. Les possibilités de manipulation du texte s’étoffant (par exemple avec l’apparition du couper-coller), le besoin d’une amélioration devenait pressant. Tout ce qu’il manquait, c’était des écrans dotés d’une résolution suffisante et quelqu’un de suffisamment malin pour avoir l’idée toute bête de placer le curseur après un caractère, ce qui après tout reflète mieux l’action d’insérer du texte entre des lettres. Heureusement, la division R&D de Xerox (le PARC) ne manquait pas des deux. On trouvera d’autres détails (par exemple l’invention du double-clic) dans Designing Interactions, page 64 et suivantes.

Un exemple
Un exemple

Ces histoires illustrent l’importance des détails dans le design d’interfaces, ainsi que la fréquence des inventions incrémentales : les interfaces graphiques ne sont pas sorties parfaites et achevées de la cuisse de Douglas Engelbart. Par exemple il est connu qu’Apple s’est largement inspiré du travail effectué au PARC. Il est certain qu’un certain nombre d’idées y sont nés, mais il ne faut pas oublier un certain nombre de prédécesseurs (Bush, Papert, Licklider, Sutherland, Engelbart, etc.), ni les progrès d’Apple. Celui-ci a heureusement simplifié certaines interactions (la barre de défilement) et en a inventé d’autres (menu déroulant, glisser-déposer).

EDIT : Bien que ce soit plus visuel qu’interactif, on peut ajouter à la liste l’origine du symbole x pour fermer et des bulles dans les applications de chat.