L’héritage de Larry Tesler au-delà du copier-coller

Clavier auxiliaire utilisé par Tesler pour tester la fonction de couper-coller, avec des étiquettes notées "cut" et "paste".
Clavier auxi­liaire utilisé par Tesler pour tester la fonc­tion de couper-coller, avec des étiquettes notées « cut » et « paste ».

Larry Tesler, décédé récem­ment, est associé à l’in­ven­tion du copier-coller. De même qu’Engelbart a inventé bien plus que la souris, son influence est vaste : les premières inter­faces graphique chez Xerox Parc et Apple, SmallTalk, le PDA Newton… Vice a fait un bon portrait de son parcours.

Comme avec Engelbart, ce qui est inté­res­sant au-delà du cata­logue de ses accom­plis­se­ments, c’est de comprendre la vision qui les a motivé. En plus et comme souvent, Tesler est moins un inven­teur soli­taire que le synthé­ti­seur d’une effer­ves­cence collec­tive. Dans l’ar­ticle je m’ef­force de citer ses inspi­ra­tions.

Mais commen­çons pas du concret.

Le génie du copier-coller

Les actions de couper, copier et coller font partie de ces idées omni­pré­sentes qui ont pour­tant été créées un jour. Les barres de défi­le­ment, l’auto-complétion… j’ai continué ici une liste d’in­ven­tions commencée par Dan Saffer.

Tesler a inventé en fait plusieurs choses.

1. Une sélection intuitive du texte

A l’époque, la crur­seur était placé sous le carac­tère (ou derrière, en couleur inversée), ce qui intro­dui­sait de l’ambiguïté : si j’in­sère une lettre, va-t-elle être placée avant ou après le carac­tère sélec­tionné ?

NLS, le système d’Engelbart était plus avancé et utili­sait une souris comme poin­teur, mais n’avait pas de curseur perma­nent. La souris servait litté­ra­le­ment de poin­teur, pour indi­quer par exemple le début et à la fin d’une sélec­tion de texte.

Larry Tesler (avec Peter Deutsch) inventa alors le curseur placé entre les carac­tères que l’on connait aujourd’hui.

curseur en poutre en I

2. Le remplacement des modes par le presse-papier et les menus

Se débar­rasser des modes était le grand combat de Tesler. Qu’est-ce qu’un mode ? C’est un état global du système que l’uti­li­sa­teur enclenche et qui permet ou interdit d’autres actions. Par exemple appuyer sur la touche VERR MAJ permet de taper des lettres capi­tales mais interdit les minus­cules. Appuyer sur MAJ serait un quasi-mode (selon la termi­no­logie de Jef Raskin) qui oblige à main­tenir la touche pour rester actif.

Les éditeurs de texte étaient massi­ve­ment modaux, c’est-à-dire qu’il y avait un mode pour navi­guer, un pour insérer, un pour supprimer… La présence de modes complexifie les inter­ac­tions (dans quel mode suis-je ? Comment en sortir ?) mais élargit la palette d’ac­tions. Par exemple en mode Naviguer, chaque touche du clavier peut être un raccourci, ce qui permet des actions fines du genre « avancer de trois para­graphes ». L’éditeur Vim, encore popu­laire aujourd’hui, fonc­tionne essen­tiel­le­ment ainsi.

C’est aussi l’hé­ri­tage d’une époque où les éditeurs de texte étaient conçus pour un télé­type (c’est-à-dire concrè­te­ment une impri­mante), pas pour un écran. On dési­gnait une ligne, on faisait une modi­fi­ca­tion et on impri­mait le résultat en croi­sant les doigts pour ne avoir fait d’er­reur. Dans un contexte aussi peu inter­actif, des modes étaient néces­saires.

Les créateurs d'Unix utilisant un PDP-11 avec un terminal télétype
Les créa­teurs d’Unix devant un PDP-11

Même NLS, le système d’Engelbart avec clavier et souris n’était pas plus simple. Voici la procé­dure pour déplacer du texte :

  1. Touche M (pour Move)
  2. Touche T (pour Text)
  3. Pointer le début puis la fin du texte souhaité
  4. Pointer la desti­na­tion
  5. Valider

Inspiré par Pentti Kanerva, Tesler abolit ces modes en inver­sant le modèle d’in­te­rac­tion : au lieu de dési­gner d’abord l’ac­tion (effacer) puis son objet (tel groupe de mot), on sélec­tion­nait du texte puis on agis­sait dessus. Le clavier ne servait plus qu’à une chose, taper du texte. Les commandes ont d’abord été attri­buées à des touches spéciales puis au menu dérou­lant « éditer », inventé juste après.

La complexité a été ainsi déplacée des modes au presse-papier : celui-ci stocke de l’in­for­ma­tion sans l’af­fi­cher à l’uti­li­sa­teur, ce qui occa­sionne parfois des surprises. Mais globa­le­ment, copier et coller étant souvent conco­mi­tants, on a beau­coup gagné au change.

Capture d'écran de Mac OS 9, avec un éditeur de texte ouvert dans lequel il est écrit "Larry Tesler 1945-2020")
Réalisé avec cet émula­teur

3. La métaphore de couper et coller

La dernière pièce du puzzle a été de rassem­bler le dépla­ce­ment et la dupli­ca­tion. Suivant l’ac­tion précé­dente, coller peut couper ou bien copier. Cela n’al­lait pas de soit : encore aujourd’hui Mac OS permet de copier un fichier mais pas de le couper, car le dépla­ce­ment est vu comme une action bien distincte. On a fina­le­ment trois actions réunies par une même méta­phore, celle du papier.

La méthode Tesler

Quelle approche a suivi Tesler pour faire tout ça ?

1. Tester, tester et tester

Malgré ses fortes convic­tions (qui allaient jusqu’à avoir une plaque d’im­ma­tri­cu­la­tion anti-modale), Tesler n’a jamais succombé à l’illu­sion de connaitre les utili­sa­teurs et a donc très tôt mené des tests.

My obser­va­tions of secre­ta­ries lear­ning to use the text editors of that era soon convinced me that my beloved compu­ters were, in fact, unfriendly mons­ters, and that their shar­pest fangs were the ever-present modes. The most common ques­tion asked by new users, at least as often as « How do I do this?, » was « How do I get out of this mode ? »

The Smalltalk Environment, 1981

Before doing it he decided that he wanted to observe a user, and used a tech­nique similar to his“guided fantasy.” He describes working with a secre­tary who had just started at PARC and was not yet influenced by the programs that were being used:I sat her down in front of a screen, and did what’s now called a“blank screen expe­riment.”

“Imagine that there is a page on the screen, and all you’ve got is this device that you can use to move a cursor around, and you can type,” I said. “You’ve got to make some changes to this docu­ment. How would you do it?”I gave her a paper docu­ment with lots of markups on it for refe­rence, and asked her to imagine that is was on the screen. She just desi­gned it right there!“I would point there, and then I would hit a delete key,” she said.To insert, she would point first and then start typing. She’d never been conta­mi­nated by any computer programs before, so I wrote all this down, and I thought, “That sounds like a pretty good way to do it!”

p. 62, Bill Moggridge, Designing inter­ac­tions. MIT press, 2007. Tout le chapitre est dispo­nible ici

2. Prendre les problèmes à la racine

Ce qui m’im­pres­sionne, c’est sa capa­cité très tôt dans sa carrière à argu­menter et théo­riser ses choix. Dès 1981, son disours contre les modes est solide et construit. En 2010 il réalise ce schéma pour montrer qu’il faut moins d’étapes pour corriger une erreur avec une inter­face amodale. Voir ces enjeux néces­si­tait de s’abs­traire du fonc­tionnel et de modé­liser des inter­ac­tions. Cela va plus loin que compter le nombre de clics et relève de la séman­tique : les opéra­tions de l’uti­li­sa­teur sont compo­sées de verbes et de noms, l’ordre nom-verbe est-il supé­rieur à l’ordre inverse, pour­tant plus proche de l’an­glais ? Les tests lui ont montré que oui.

A Personal History of Modeless Text Editing

3. La démocratisation contre l’avant-garde

L’opposition de Tesler à Engelbart fut parfois fron­tale et révèle une diffé­rence fonda­men­tale dans leurs visions. Pour sché­ma­tiser, le premier visait le grand public et le second des experts.

Engelbart déve­lop­pait un système ambi­tieux et complet pour inventer de nouvelles manières de travailler colla­bo­ra­ti­ve­ment et même de raisonner. Plusieurs ordi­na­teurs étaient connectés entre eux et équipés d’un clavier, d’une souris à trois boutons et d’un clavier-accord. Ce dernier, à gauche sur la photo, résume bien la complexité de l’en­semble, puisque chaque combi­naison de touches exécu­tait une action diffé­rente.

Douglas Engelbart démontrant son système
Douglas Engelbart démon­trant son système

Il se préoc­cu­pait plus d’uti­lité que d’uti­li­sa­bi­lité. Mettre des mois à apprendre à maitriser le système n’était pas vrai­ment un problème si ça valait le coup. A la fin l’uti­li­sa­teur pouvait mani­puler de grandes quan­tités d’in­for­ma­tions, raisonner sur des problèmes complexes ou résoudre des défis scien­ti­fiques. Engelbart avait cette vision de l’or­di­na­teur comme nouveau medium cognitif capable « d’ac­croitre notre intel­lect ».

Le problème est qu’il voulait créer un instru­ment merveilleux comme le violon alors que pas grand monde ne prendra le temps d’ap­prendre à jouer du violon, pour reprendre une formule d’Alan Kay cité par Bardini, p. 215)

Tesler, à l’in­verse, voulait créer des logi­ciels simples à comprendre par le plus grand nombre :

[Avec un collègue] ils rédi­gèrent une note interne à Xerox décri­vant ce qu’ils appe­lèrent IT, pour « Intuitive Typewriter » [machine à écrire intui­tive]. Ils déci­dèrent que la faci­lité d’uti­li­sa­tion était impor­tante, en réali­sant que ce serait un « désac­cord majeur avec Engelbart ».

p. 157, Bardini, Thierry (2000). Bootstrapping : Douglas Engelbart, Coevolution, and the Origins of Personal Computing. Stanford University Press.

Pour Engelbart, un nouveau medium appe­lait de nouvelles conven­tions, tant pis si cela rompait avec les habi­tudes. Pour Tesler c’était l’in­verse :

Il fallait adapter l’in­ter­face à la manière dont les gens travaillent et pas utiliser l’in­ter­face pour les forcer à apprendre à travailler mieux et diffé­rem­ment.

Idem

Dès le début des années 70 est donc née cette oppo­si­tion entre deux philo­so­phies. Elle reste prégnante dans la concep­tion de logi­ciels : élitisme ou démo­cra­ti­sa­tion, puis­sance ou faci­lité, respect des habi­tudes ou nouveauté. Présentée ainsi, l’op­po­si­tion tend à la cari­ca­ture et il y a sans doute de la place pour tous les types de logi­ciel. D’aucuns ont cepen­dant argué qu’une vision a écrasé l’autre et a tué dans l’œuf tout un champ d’ou­tils exigeants et avancés.

Quoiqu’il en soit, voici quelques personnes qui chacun à leur manière tentent de combler ce fossé et de faire avancer le medium.

Références complémentaires

Computer History Museum, Oral History of Lawrence G. “Larry” Tesler

Une démons­tra­tion par Tesler de son éditeur de texte phare

Larry Tesler face à un Xerox Alto

Post-scriptum : où l’on retrouve Don Norman

J’évoque dans cet article les éditeurs de texte des années 70. Il s’avère que l’un d’entre eux fut long­temps l’édi­teur par défaut d’Unix et fut dure­ment critiqué dans un article de Don Norman : The truth about Unix : The user inter­face is horrid (PDF).

L’article date de 1981 et fut appa­rem­ment très popu­laire. C’est le premier d’un longue série de textes qu’il consacre à l’in­for­ma­tique.

La fascination pour le pire

Comme beau­coup de desi­gners dont le travail est de créer de bonnes inter­faces, je suis fasciné par l’extrême inverse : des inter­faces mons­trueu­se­ment mauvaises.

Il y a les inter­faces fron­ta­le­ment horribles, comme cet outil de main­te­nance pour un distri­bu­teur de billet.

Il y a les inter­faces qu’il faut avoir utilisé pour comprendre. Prenez Lotus Notes : des analyses et des sites entiers sont dédiés à sa nullité. On parle d’une appli­ca­tion qui ne suit pas des raccourcis univer­sels et basiques (par exemple CTRL+A pour tout sélec­tionner). On parle d’une appli­ca­tion fournie avec un utili­taire pour la forcer à quitter quand les choses tournent mal. Une appli­ca­tion suici­daire.

Mais pour aller au fond de la nullité et creuser encore, il faut la créer soi-même.

Il y a ce défi collectif sur Reddit pour créer le pire sélec­teur de numéro de télé­phone.

Des gens sur Reddit ont remis ça, autour d’un varia­teur de volume. Magnifique et tota­le­ment pata­phy­sique.

Il y aussi sur cette expé­ri­men­ta­tion autour du choix des cookies

Et enfin, le petit dernier : un formu­laire abso­lu­ment atroce. Ce n’est plus un dark pattern, c’est un trou noir.

Les points communs entre tout ça ? Le meilleur des worst prac­tices, une connais­sance fine des habi­tudes des inter­nautes pour s’en écarter le plus, des inter­faces possé­dées, ayant leur vie propre ou luttant acti­ve­ment contre l’uti­li­sa­teur, un succès toujours tech­ni­que­ment possible mais avec des proba­bi­lités infimes, un humour noir auto-référencé… J’en passe.

Pourquoi cette fasci­na­tion pour le pire ? Déjà, elle n’est pas limitée aux inter­faces. Il y a bien des gens se consa­crant à trouver l’al­go­rithme le plus inef­fi­cace possible et des commu­nautés de fans de nanar.

Cependant, voici quelques hypo­thèses sommaires :

  • Catharsis : on se purge de tous les travaux peu glorieux dont on est respon­sable.
  • Expertise : inves­ti­guer le pire permet par contraste de mieux comprendre le meilleur et de prendre consciene des méca­niques cogni­tives à l’oeuvre chez l’uti­li­sa­teur.
  • Pédagogie : ce peut être une bonne tech­nique d’ani­ma­tion, comme le suggèrent Jared Spool ou Akiani.
  • Prise de recul : après tout, qu’est-ce qu’une bonne inter­face ? Quelle est la limite entre le défi ludique et la corvée ?

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 traduc­teur, perfor­meur ou réali­sa­teur — Mickael Rock, 1996.

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

Le desi­gner comme ventri­lo­quiste – Hutchins, 1987 (alerte mauvais PDF) :

The meta­phor of user and computer engaged in a conver­sa­tion with each other or carrying on a dialogue about the task at hand is the most popular of the mode of inter­ac­tion meta­phors for human computer inter­faces.

Voir aussi :

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

Le Tao du design web (2000).

L’architecture de l’information expliquée avec Twitter

Twitter est un terrain d’ex­pé­ri­men­ta­tions inté­res­sant pour les créa­teurs d’ap­pli­ca­tions. Non parce que la plate­forme permet des travaux révo­lu­tion­naires, mais au contraire parce qu’elle est limitée en complexité et enca­drée par des règles assez strictes. Chacun fait de son mieux à partir des mêmes données, des mêmes concepts de base, des mêmes inter­dic­tions.

C’est aussi une bonne illus­tra­tion d’une idée simple mais fonda­men­tale en archi­tec­ture de l’in­for­ma­tion : il n’y a pas qu’une manière d’or­ga­niser le contenu d’un service. Pour commencer, tout le monde n’est pas d’ac­cord sur les concepts de base : rédiger, mentions, message privé, favoris, recherche, listes, abon­ne­ments, abonnés, acti­vité, décou­verte, brouillon…

Seule une poignée de ces concepts est retenu pour figurer dans la navi­ga­tion globale. Chaque appli­ca­tion (y compris les versions offi­cielles) fait des choix diffé­rents :

twitter2twitter1

Twittelator
Twittelator pour iPad

Les contraintes de place et les parti­cu­la­rités de l’OS entrent aussi en jeu mais n’ex­pliquent pas tout. Par exemple, la refonte de Twitter.com de 2011 a été pas mal criti­quée pour avoir relégué l’accès aux messages privés dans un sous-menu et créé un onglet « décou­verte ». C’était une stra­tégie consciente pour privi­lé­gier les conver­sa­tions publiques et les sugges­tions de contenu, pas seule­ment une ques­tion d’al­léger l’in­ter­face.

Twitter pour MacAutre exemple : tous les clients offi­ciels choi­sissent d’en­fouir les favoris dans un sous-menu du profil, à trois clics de profon­deur. C’est aussi le cas sur Mac, alors que la navi­ga­tion globale n’est pas vrai­ment bondée. Le choix se défend mais signale que pour eux, les favoris sont loin d’être une fonc­tion essen­tielle.

Je n’ai pas encore parlé de la time­line. Tout s’ar­ti­cule autour de cette vue chro­no­logie, mais là aussi on peut l’in­ter­préter de diverses manières. La première version de Twitter mettait au même plan la chro­no­logie publique et celle de l’uti­li­sa­teur, vu qu’à l’époque le volume global de messages était faible. Quant à Tweetbot pour iPad, il permet de basculer entre la chro­no­logie prin­ci­pale et les listes de l’uti­li­sa­teur, si bien que, d’une certaine manière, celles-ci deviennent le concept premier. La chro­no­logie n’est plus qu’une liste parmi d’autres.

Twitter en 2006
Twitter en 2006

Citons égale­ment toute les expé­ri­men­ta­tions autour des conver­sa­tions, qui contri­buent à complexi­fier la time­line et à aller au-delà d’une simple présen­ta­tion anté-chronologique.

Le responsive design ailleurs que sur le web

Les appli­ca­tions natives mobiles, sur Android (et Apple depuis peu) ont accès à des fonc­tions respon­sive, mais sur desktop la pratique est moins fréquente. Non seule­ment les inter­faces ont rare­ment des agen­ce­ments diffé­rents selon la taille de la fenêtre, mais en plus elles ne sont pas toujours fluides, c’est-à-dire que tailles et marges des éléments ne sont pas redi­men­sion­nées. Certains logi­ciels bloquent égale­ment la largeur mini­male de la fenêtre, parfois dras­ti­que­ment. C’est dommage, car ce serait l’oc­ca­sion de mieux prendre en compte les petits écrans (cf. par exemple les distri­bu­tions de Linux visant spéci­fi­que­ment les notet­books) et toutes les manières d’uti­liser un OS fenêtré.

Il y a évidem­ment des contre-exemples : en mode album, iTunes ajuste le nombre de colonnes et la taille des jaquettes. Depuis des années, Microsoft adapte intel­li­gem­ment son fameux « ribbon », avec un grand nombre de points de rupture au fur et à mesure qu’on réduit la fenêtre.

ribbon microsoft word en responsive design

Dans mon expé­rience, ce n’est pour­tant pas fréquent. Il y a évidem­ment de bonnes raisons pour ces limi­ta­tions. D’une, dans la plupart des cas on a affaire à un view­port dont le contenu est par défi­ni­tion fixe (exemple : une page Word). On peut alors seule­ment jouer sur l’UI (comme dans l’exemple d’Office). De deux, on retombe sur le grand problème du « device-agnostic respon­sive design » (conce­voir pour une largeur donnée, sans préjuger de l’ap­pa­reil utilisé) : il est diffi­cile de prédire les préfé­rences des gens. Si je redi­men­sionne la fenêtre, serais-je content d’avoir un agen­ce­ment adapté et sans scroll hori­zontal, ou au contraire énervé qu’on m’im­pose quelque chose ? Suivant les cas et les raisons du redi­men­sion­ne­ment, la réponse varie.

La solu­tion la plus utilisée dans les logi­ciels de produc­ti­vité un peu complexes, c’est de laisser l’uti­li­sa­teur person­na­liser les diffé­rentes palettes, barres et panneaux d’interface comme il l’en­tend. Par exemple, Photoshop permet de créer diffé­rents « espaces de travail », c’est-à-dire diffé­rents agen­ce­ments que l’uti­li­sa­teur pourra activer comme il lui sied.

Jusqu’ici j’ai surtout parlé du cas assez restreint où l’uti­li­sa­teur redi­men­sionne sa fenêtre. Le problème du respon­sive se pose de manière peut-être plus aiguë si l’on veut créer des services dans l’éco­sys­tème Windows. Microsoft promet une plate­forme unifiée où le déve­lop­pe­ment à travers les OS sera unique, ou en tout cas faci­lité. Que Microsoft tienne sa promesse et que ce soit une bonne idée ou non, il reste que Windows, (feu ?) Windows RT et Windows Phone sont de plus en plus bâtis sur les mêmes fonda­tions, aussi bien dans le design que dans la tech­nique. Cela pose la ques­tion de la conver­gence des diffé­rentes appli­ca­tions : à quel point doivent-elles être semblables, faut-il un processus de concep­tion unique, etc.