Le germaphobe et l'écran tactile

Ainsi une auto­route peut être une voie pour le conduc­teur et une limite pour le pié­ton. (Kevin Lynch, The Image of the City)

Le manuel du par­fait ger­ma­phobe pour ache­ter un ticket de métro est un magni­fique tra­vail d’enquête sur une inter­face omni­pré­sente dans les villes : le dis­tri­bu­teur auto­ma­tique. L’auteur, agacé de la lour­deur du pro­ces­sus pour cré­di­ter sa carte à New-York (11 étapes contre 3 à San Francisco), est allé dis­cuté avec les créa­teurs de ces sys­tèmes pour com­prendre leurs moti­va­tions. C’est un très bon exemple d'interface frus­trante cachant des com­pro­mis datant d'une autre époque et à une volonté d'être acces­sible à des pro­fils d'utilisation très dif­fé­rents.

Mais c'est l'origine de l'article qui m’a le plus fas­ci­née : la légère ger­ma­pho­bie de l'auteur. Sa peur des microbes le rend sen­sible à tout contact phy­sique, sur­tout dans un envi­ron­ne­ment aussi hygié­ni­que­ment dou­teux qu'une grande ville et cela l’a conduit à comp­ter le nombre de fois qu’il doit tou­cher un objet par­ti­cu­liè­re­ment hor­ri­fiant à ses yeux : l’écran tac­tile d’un dis­tri­bu­teur de billets.

Je trouve fas­ci­nant ce regard sur les IHM, dia­mé­tra­le­ment opposé du mien. Il y a pour moi un aspect magique à tou­cher un écran, à le voir réagir et à savoir que l'impression d'un simple bout de papier a néces­sité l'invocation d'un sys­tème com­plexe et me donne libre accès à une infra­struc­ture publique. Dans ce contexte, la tape sur l'écran consti­tue l'alphabet de base de nos inter­ac­tions avec l'informatique. Pour un usa­ger, les bou­tons d'une borne tac­tile sont des signaux forts, ils disent « tapote-moi, tu peux dia­lo­guer avec moi » .

Pour un ger­ma­phobe, la sémio­tique d'une borne tac­tile est au contraire le dégoût. En concep­tion d'IHM, on consi­dère les affor­dances comme for­cé­ment bonnes et la visi­bi­lité est notre cri­tère pour les éva­luer : est-ce qu'on voit bien que le bou­ton est un bou­ton. Pourtant la gamme de réac­tions est plus riche, même en res­tant au niveau du réflexe. Un bou­ton peut être trom­peur (comme noté par Gaver), ou sus­ci­ter le doute, voire le rejet.

Au-delà des IHM, c'est le regard sur la ville qui change : ce n'est plus une pla­te­forme de dépla­ce­ments et de liberté mais un ter­rain dan­ge­reux où tous les objets utiles (poi­gnées, rampes, plans) ins­til­lent la méfiance.

Notre expé­rience d'un sys­tème ou d'un envi­ron­ne­ment varie selon notre condi­tion, par­fois signi­fi­ca­ti­ve­ment, par­fois de manière invi­sible. Il est tou­jours bon de se le voir rap­pe­ler.

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

Les rai­sons du suc­cès des inter­faces gra­phiques sont bien connues : des objets visuels simples (fenêtre, icônes, menus et poin­teurs), per­met­tant un panel d'actions limi­tées et expli­cites, orga­ni­sés par une méta­phore cohé­rente : des docu­ments ras­sem­blés en dos­sier, posés sur le bureau pour les affaires cou­rantes et ran­gés dans des casiers pour le reste.

wooton
Bureau Wooton, sta­tion de tra­vail tout-en-un

Un dos­sier = une fenêtre

il est moins connu que cette méta­phore, à son ori­gine, était plus forte et contrai­gnante. Les pre­mières ver­sions du Finder (l'explorateur de fichier de Mac OS) obéis­saient à un modèle dit « spa­tial », lequel a été aban­donné à la sor­tie de Mac OS X (moment d'une refonte com­plète du sys­tème). Cela se tra­dui­sait par deux règles :

  1. Cohérence. Chaque dos­sier était repré­senté par une seule fenêtre et chaque fenêtre était liée à un seul dos­sier. L'icône d'un dos­sier chan­geait d'apparence pour signi­fier qu'il était ouvert ou fermé. Cliquer sur l'icône d'un dos­sier ouvert fai­sait cli­gno­ter sa fenêtre et rien d'autre, puisqu'il ne pou­vait être ouvert deux fois. En bref, pour l'utilisateur il n'y avait aucune dif­fé­rence entre un dos­sier et sa fenêtre.

  2. Stabilité. Les fenêtres mémo­ri­saient la manière dont l'utilisateur les per­son­na­li­sait. La forme, la posi­tion, le mode d'affichage (grille, liste…), la posi­tion des icônes en mode grille, etc., tout cela était conservé. Grâce à l'association entre fenêtre et dos­sier, cette règle était beau­coup plus simple à appli­quer qu'aujourd'hui et le com­por­te­ment des fenêtres d'autant plus pré­dic­tible pour l'utilisateur. Si j'ouvre ce dos­sier, je sais qu'il appa­rai­tra à droite sur toute la hau­teur de l'écran ; si j'ouvre cet autre dos­sier, il appa­rai­tra en petit à gauche et ses fichiers seront en liste. Aujourd'hui, le Finder conserve cer­tains para­mètres (taille et posi­tion) et d'autres non (mode d'affichage et style), selon des règles de prio­rité impé­né­trables (détails ici).

En résumé, le Finder « spa­tial » ten­tait de faire fonc­tion­ner le bureau comme un ensemble de choses tan­gibles et fixes, pou­vant ser­vir de véri­table mémoire externe (l'être humain étant plus doué pour recon­naitre un objet que pour s'en rap­pe­ler). Au lieu d'utiliser une abs­trac­tion pour en gérer une autre (fenêtre et sys­tème de fichier), l'utilisateur mani­pu­lait des objets concrets qui ne chan­geaient pas dans son dos (prin­cipe de moindre sur­prise).

Contraignant mais adapté à son temps

Ce modèle pou­vait être assez contrai­gnant. Notamment, ouvrir un dos­sier fai­sait for­cé­ment appa­raître une nou­velle fenêtre (la fenêtre de ce dos­sier). Pour évi­ter de se retrou­ver avec des dizaines ouvertes, il fal­lait déplier l'arborescence du dos­sier (comme dans Mac OS X aujourd'hui), ou bien uti­li­ser Alt+click, ce qui fer­mait la fenêtre d'origine et ouvrait la nou­velle en même temps.

Un dossier dans un dossier dans un… (Mac OS 9)
Un dos­sier dans un dos­sier dans un… (Mac OS 9)

Pourtant, d'après ce que j'ai pu lire et tes­ter, ça mar­chait pas mal. D'abord, ces dos­siers super­po­sés dans tous les sens ne fai­saient que repro­duire le ran­ge­ment clas­sique d'un bureau, dans ce qu'il peut avoir d'idiosyncrasique et d'apparement chao­tique. Ensuite, l'OS était orga­nisé autour de ce modèle. Par exemple, plu­tôt que de mini­mi­ser une fenêtre, on pou­vait double-cliquer sur la barre de titre pour ne lais­ser que celle-ci et cacher tout le reste. Cette fonc­tion de « stores » (shades) sui­vait, une fois encore, un prin­cipe de spa­tia­lité : la fenêtre res­tait à 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 pro­ba­ble­ment pas à l'aise avec l'abstraction d'un sys­tème de fichiers arbo­res­cent. Enfin, les ordi­na­teurs d'alors avaient peu de mémoire, peu de fichiers et peu d'applications, peu de mémoire et avaient donc moins besoin de mani­pu­ler des quan­ti­tés énormes d'information.

Le lent déclin du bureau façon Macintosh

Aujourd'hui, bien peu d'explorateurs de fichiers uti­lisent encore un modèle spa­tial. Les seuls pro­jets actifs que j'ai trouvé sont Haiku OS (héri­tier de BeOS), Enligthenment (dit-on) et MATE (mais pas par défaut).

A moins que vous n'utilisiez un sys­tème exo­tique, il y a de fortes chances que votre bureau fonc­tionne dif­fé­rem­ment. Un simple test : y a-t-il des bou­tons Précédent et Suivant dans une fenêtre de l'explorateur ? Si oui, c'est qu'il res­semble plus à un navi­ga­teur Internet : il per­met de par­cou­rir dif­fé­rents dos­siers à tra­vers une fenêtre.

Ce modèle a été popu­la­risé par Windows 98 (avec des pré­misses dans 95). Dans une optique de conver­gence avec Internet Explorer, une barre d'adresse et des bou­tons Précédent et Suivant ont été ajou­tés. Ouvrir un dos­sier a cessé d'ouvrir une nou­velle fenêtre. Ce com­por­te­ment a été adopté par Mac OS X à sa sor­tie, créant un Finder bâtard, avec deux types de fenêtres et des réac­tions impré­vi­sibles. Pour des détails, voyez notam­ment cet article de Siracusa, et celui-ci de Tog (un des pre­miers spé­cia­listes en IHM employés par Apple).

Cachez ces fenêtres que je ne sau­rais voir

Le modèle de Windows est donc devenu la conven­tion domi­nante — son ubi­quité n'y est sans doute pas étran­gère.

A la sor­tie de Mac OS, Steve Jobs a déclaré qu'un uti­li­sa­teur ne devrait pas avoir à faire le ménage dans ses fenêtres. Il disait sur­tout ça pour pro­mou­voir cer­taines nou­veau­tés plus que pour expo­ser une quel­conque vision du futur des inter­faces, mais cela signale à mon avis un chan­ge­ment pro­fonds quoique lent de l'OS, dont l'abandon du Finder spa­tial consti­tue la pre­mière étape.

En gros, tout est fait pour qu'on n'ait plus à dépla­cer ou redi­men­sion­ner ses fenêtres. La plu­part des fonc­tions intro­duites depuis dix ans et dédiées à la navi­ga­tion vont dans ce sens :

  • Mission Control (ancien­ne­ment Exposé), une vue écla­tée pré­sen­tant simul­ta­né­ment des vignettes de toutes les fenêtres
  • Launchpad, grille mon­trant toutes les appli­ca­tions
  • Spaces, per­met­tant de gérer des bureaux vir­tuels au lieu de fenêtres
  • Le mode plein écran, apparu avec Lion et qui a rem­placé la fonc­tion de maxi­mi­sa­tion
  • Des onglets pour le Finder.

Certains se sont inquié­tés de l'importation de cer­tains concepts depuis iOS. Il est vrai qu'aujourd'hui, tout est fait pour qu'on puisse uti­li­ser un Mac comme un iPad, en affi­chant toutes les appli­ca­tions en plein écran et en navi­guant entre elles grâce à un geste du track­pad. Après l'abandon du Finder spa­tial, faut-il s'attendre un jour à la dis­pa­ri­tion des fenêtres ?

Pour aller plus loin

  • Un article de John Siracusa réca­pi­tu­lant sa défense du Finder spa­tial
  • Une démo de Mac OS 7 acces­sible depuis un navi­ga­teur
  • Une démo de Mac OS 9 télé­char­geable et uti­li­sable sur Mac sans ins­tal­la­tion ni confi­gu­ra­tion. Le lien direct vers le télé­char­ge­ment est ici.

Les méthodes de déplacement du curseur sur un clavier tactile

La sai­sie de texte est deve­nue rai­son­na­ble­ment bonne sur les prin­ci­paux OS mobiles. Tous ont des sys­tèmes de sai­sie pré­dic­tive (pour anti­ci­per le mot sui­vant le plus sus­cep­tible d'être tapé) et des méthodes de sai­sie au « tracé » (sans appuyer sur chaque lettre, genre Swype ou SwiftKey).

Ça se corse pour ce qui est de mani­pu­ler le texte : sélec­tion, dépla­ce­ment, copie, etc. Pour ces fonc­tions avan­cées, une opé­ra­tion essen­tielle est de pla­cer le cur­seur. Sur mobile, sans sou­ris ni touches direc­tion­nelles, c'est com­pli­qué. Je vois en gros trois méthodes pour ça (liste non-exhaustive) :

La mani­pu­la­tion directe, en dépla­çant le doigt le long du texte. Les implé­men­ta­tions varient. Sur Android, un pre­mier tap déplace le cur­seur et fait appa­raitre une poi­gnée pour le dépla­cer de manière conti­nue. Sur Windows Phone 8.1, cette poi­gnée est visible en per­ma­nence. Dans les ver­sions pré­cé­dentes de Windows Phone, il fal­lait main­te­nir le tap pour pou­voir pla­cer pré­ci­sé­ment le cur­seur. Par ailleurs, Le sys­tème était cali­bré pour deman­der de plus grands gestes et ainsi favo­ri­ser les dépla­ce­ments de quelques lettres.

La mani­pu­la­tion indi­recte. Notamment, pas mal d'éditeurs de texte pour tablette ont une barre de touches sup­plé­men­taires avec des bou­tons « droite » et « gauche » ou « pla­cer au début du mot » et « à la fin du mot ».

iA-Writer clavier
iA-Writer

Enfin, les méthodes que faute de mieux j’appellerais « alter­na­tives. Je pense au tout nou­veau cla­vier de Windows Phone 10, qu'on voit très briè­ve­ment dans cette vidéo. En appuyant sur le rond en bas à gauche, on fait appa­raitre des touches direc­tion­nelles.

Clavier Windows Phone 10
Windows Phone 10

Il faut aussi citer le pro­to­type de Daniel Hooper, dans lequel glis­ser laté­ra­le­ment avec un doigt, n’importe où sur le cla­vier, déplace le cur­seur (ou avec deux pour sélec­tion­ner le texte). Je trouve ça assez brillant, même si c’est dif­fi­ci­le­ment cumu­lable avec des sys­tèmes de type Swipe. Hélas, des limi­ta­tions d’API empêchent l’ajout d’un tel cla­vier à iOS sous forme d’extension.

MISE À JOUR : je découvre qu'Editorial, un très bon édi­teur de texte pour iOS, a com­biné méthode de Hooper et barre de touches, puisqu'il per­met de dépla­cer le cur­seur en glis­sant son doigt sur la barre.

Une alternative au Lorem ipsum pour Axure

Dans une maquette, le texte peut ser­vir à plein de choses :

  • Tester des tour­nures et des déno­mi­na­tions
  • Apprécier le style d'une police
  • Vérifier des contraintes de for­ma­tage ou de lon­gueur

Mais en pre­mier lieu ça sert à dire "là il y a aura du texte". Une manière sty­li­sée et mini­male de signa­ler cette pré­sence sans induire de conno­ta­tion indé­si­rable est d'utiliser un effet de "grif­fon­nage" avec une police spé­ciale.

screenshot
Cliquer pour voir une démo

La pro­cé­dure à suivre pour inté­grer une web font en local avec Axure est un peu tor­due. La voici (ver­sion 7 requise) :

1/ Générer une pre­mière fois votre maquette.

2/ Ajouter le fichier de police (lien direct ici) à la racine du dos­sier créé.

3/ Dans les para­mètres de géné­ra­tion, aller dans l'onglet "web fonts", cocher "include web­fonts", ajou­ter un item, nom­mer la police "Redacted" (par exemple), puis ajou­ter ceci dans la zone de texte :

font-family: "Redacted";
src: url('redacted-script.woff') format('woff');
font-weight: normal;
font-style: normal;

4/ Dans "font map­pings", ajou­ter un item, sélec­tion­ner une police rare­ment uti­li­sée (exemple : Comic Sans MS), laquelle sera rem­pla­cée par la police sou­hai­tée à la géné­ra­tion de la maquette. Pour font-family sai­sir "Redacted" (ou le nom de la police saisi dans l'onglet "web fonts").

5/ Dans votre maquette, les textes spé­ci­fiés en Comic Sans MS seront désor­mais géné­rés en Redacted.

Petits défauts :

  • A taille égale, la police appa­rait plus petite, il faut donc anti­ci­per en choi­sis­sant une taille un peu plus trande.
  • Pas de sup­port des accents, donc atten­tion en conver­tis­sant du vrai texte déjà saisi.

Quel nom pour l'utilisateur

Après Don Norman, Jack Dorsey et bien d'autres, c'est au tour de la direc­trice du design de pro­duit chez Facebook de décla­rer qu'elle pré­fère ne pas dire « uti­li­sa­teur » mais tout sim­ple­ment « per­sonne ». L'idée der­rière ce refus est tou­jours de rap­pe­ler que les uti­li­sa­teurs sont des êtres humains et ne se résument pas à leur uti­li­sa­tion d'un ser­vice. C'est très bien que des com­pa­gnies mettent en avant une démarche cen­trée sur l'utilisateur, pour­tant je trouve la démarche mal­avi­sée. (Sans par­ler de l'ironie à voir Facebook don­ner des leçons de res­pect.)

Prendre conscience que les uti­li­sa­teurs sont des créa­tures com­plexes, c'est très bien mais c'est seule­ment le point de départ de toute approche ergo­no­mique et ne doit pas se faire au prix d'un appau­vris­se­ment de notre voca­bu­laire. Au lieu de tout réduire à une notion aussi géné­rique que « les gens », il faut au contraire affi­ner notre seg­men­ta­tion. Par exemple, des uti­li­sa­teurs pro­fes­sion­nels, ama­teurs ou grand public n'ont pas les mêmes attentes et com­por­te­ment. Parmi le grand public, un abonné n'est pas la même chose qu'un ache­teur, qui n'est pas la même chose qu'un crowd­sour­cer, qui n'est pas la même chose qu'un fan de la pre­mière heure, etc. Il y a ainsi plein de typo­lo­gies et de clas­si­fi­ca­tions à trou­ver (pré­lude au recours à des per­so­nas spé­ci­fiques à un pro­jet).

Par ailleurs, ce terme a une rai­son his­to­rique : l'utilisateur est quelqu’un qui uti­lise la machine pour son propre compte, contrai­re­ment à l'opérateur ou à l'ingénieur. C’est aussi for­cé­ment un indi­vidu, contrai­re­ment au client qui peut être une orga­ni­sa­tion. La figure de l'entrepreneur en consti­tuait l'archétype d'origine. Grâce à la micro-informatique nais­sante, il fai­sait ses comptes ou des pré­vi­sions sans deman­der de l'aide au dépar­te­ment de trai­te­ment des don­nées (cf cet article pas­sion­nant). Le terme est sans doute insuf­fi­sant pour décrire l'ubiquité crois­sante de l'informatique, mais ce n'est pas en par­lant de « per­sonnes » qu'on com­pren­dra mieux cette évo­lu­tion.

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

Le 04 décembre, j'ai donné une pré­sen­ta­tion à Lille dans le cadre du qua­trième Welsh Design, qui m'a gen­ti­ment donné l'opportunité de par­ler de mes lubies.

L'angle est très proche de cet article sur l'éternelle que­relle du mini­ma­lisme, mais le contenu est lar­ge­ment rema­nié. A l'origine, il y a ma frus­tra­tion face au débat du flat design, débat néces­saire mais man­quant à mon sens cruel­le­ment de recul. D'une part, j'ai voulu appor­ter quelques repères his­to­riques, mon­trer que l'opposition entre le chargé et le sobre ne date pas d'hier. D'autre part, j'ai tenté de dis­tin­guer des concepts dif­fé­rents mais sou­vent confon­dus, car ayant tous à voir avec l'historicité du design et de la tech­nique : skeuo­mor­phisme, méta­phore, signe, kitsch et ce que j'ai appelé "exap­ta­tion", faute d'une meilleure tra­duc­tion pour repur­po­sing.

Vu les limites de temps et de mes capa­ci­tés ora­toires, le contenu était un peu ambi­tieux, mais enfin voilà les dia­po­si­tives vague­ment anno­tées de la pré­sen­ta­tion. (Je tente un lec­teur de PDF embar­qué, dites-moi si ça déconne.)

Voir d'autres travaux

L'offre crée sa propre demande

Cette for­mule de Keynes résume l'idée que la demande n'est pas sta­tique et tend au contraire à aug­men­ter lorsque l'offre croît elle aussi. La rai­son est simple : si un domaine est en situa­tion de pénu­rie, une par­tie de la demande va res­ter inex­pri­mée. Par exemple, je ne vais même pas essayer d'emprunter une route si je sais qu'elle est en per­ma­nence bou­chée. Cela ne veut pas dire que je n'en ai pas envie. Ce phé­no­mène a été redé­cou­vert, avec des variantes, dans bien des domaines :

  • Mon exemple est un pro­blème de pla­ni­fi­ca­tion des réseaux de trans­port. On y trouve le concept de demande induite (ou latente), la conjec­ture de Lewis-Mogridge et le para­doxe de Braess.
  • L'effet de rebond en éco­no­mie : aug­men­ter l'efficacité des méthodes de consom­ma­tions d'une res­source natu­relle tend à en aug­men­ter la demande. Par exemple, l'invention du moteur à vapeur de Watt, net­te­ment plus effi­cace que ses pré­dé­ces­seurs, a lar­ge­ment aug­menté la demande en char­bon, alors que le volume néces­saire à l'industrie avait tech­ni­que­ment dimi­nué.
  • Le prin­cipe de Blynn, en image de syn­thèse : la puis­sance crois­sante des ordi­na­teurs s'est réper­cu­tée dans une aug­men­ta­tion de la qua­lité des images, pas dans une dimi­nu­tion des temps de rendu. Le prin­cipe de Wirth, plus géné­ral, peut aussi être inter­prété dans ce sens.
  • Le prin­cipe de Parkinson : dans une orga­ni­sa­tion, le temps néces­saire pour accom­plir une tâche aug­mente jusqu'à occu­per toute la durée qu'on lui a attri­bué.

Je tiens à remer­cier la sec­tion "voir aussi" de Wikipédia, sans qui je n'aurais pas décou­vert la moi­tié de ces idées.