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.

Vous n'avez pas le monopole du design

Les rela­tions entre client et pres­ta­taire sont com­pli­quées, presque par défi­ni­tion. Un pro­blème fré­quent pour le pres­ta­taire est de faire recon­naître son exper­tise, notam­ment quand il est dans un rôle de concep­tion. Il est sans doute ten­tant d'apprendre son métier à un concep­teur d'interfaces, à un archi­tecte (de sys­tèmes ou de bâti­ments) ou à un sty­liste auto­mo­bile, plus qu'à un illus­tra­teur, un déve­lop­peur ou tout autre per­sonne qui réa­lise elle-même le résul­tat final.

Face à cette pré­ten­tion, la solu­tion habi­tuelle est d'essayer d'asseoir cette exper­tise : « vous me payez pour ça, faites-moi confiance ». Ça peut mar­cher, mais c'est un joker qui ne marche pas éter­nel­le­ment et qui rem­place l'échange par le bras de fer. Il y a certes bien des manières de convaincre et on peut être péda­gogue avec un client sans l'envoyer bou­ler. Mais si cela se résume à sur­en­ché­rir d'arrogance en vou­lant « édu­quer » le client, j'ai peur que cela n'enterre toute pos­si­bi­lité d'aborder la racine du pro­blème – et il y en a sou­vent une.

Le design comme symp­tôme

Prenons un cas auquel j'ai assisté : un client n'était pas content de pro­po­si­tions de pic­to­grammes. Après quelques échanges, il nous a envoyé des contre-propositions se résu­mant à des cli­parts tirés d'une banque d'images et à des cro­quis faits par eux-même. Clairement, c'était mau­vais, ça ne mar­chait pas. L'épisode nous a énervé et donné l'impression que le client pré­ten­dait faire le tra­vail à notre place. A mon sens, notre très com­pré­hen­sible colère se trom­pait de cible. Le pro­blème n'est pas qu'ils aient osé prendre le feutre et l'initiative, c'est qu'ils l'aient fait dans leur coin.

Il y avait là une situa­tion idéale pour une séance de co-conception, tous ensemble autour d'un tableau. On aurait ainsi pu les gui­der vers de meilleures solu­tions, voire remettre à plat l'iconographie et son uti­li­sa­tion. C'était peu envi­sa­geable parce qu'il n'y avait pas assez de res­pect mutuel. La ques­tion du design était sur­tout le symp­tôme d'un pro­blème de com­mu­ni­ca­tion et de cadrage. Cette gué­guerre pour savoir si ces pic­tos étaient intel­li­gibles n'était que le der­nier épi­sode d'un pro­jet mal parti, le genre où l'on doit jus­ti­fier le moindre détail.

Dans ce contexte, s'arc-bouter sur ses pré­ro­ga­tives n'est au mieux qu'une solu­tion à court-terme. Asséner « c’est moi le desi­gner » ne rem­place pas une vraie argu­men­ta­tion voire, soyons fous, des tests auprès d'utilisateurs. Adopter une approche plus col­la­bo­ra­tive offre bien des avan­tages. Avoir un rôle de conseiller plu­tôt que d'expert tout puis­sant per­met de gagner en confiance ce que l'on perd en contrôle. Mais cela sup­pose dès le départ une rela­tion saine et pro­pice.

Le design comme mono­pole

Plus fon­da­men­ta­le­ment, cette idée même de pré­ro­ga­tive est contes­table. Chacun a émi­nem­ment le droit de se sen­tir vis­cé­ra­le­ment desi­gner, mais dans le cadre d'un pro­jet ce n'est qu'un un poste attri­bué à quelqu'un. Il y a de nom­breuses manières d’organiser ce qui relève du « design ». Ça peut être une des cas­quettes de quelqu'un, aussi bien qu'être décom­posé en spé­cia­li­tés : concept, études uti­li­sa­teur, pro­to­ty­page, ani­ma­tions, spé­ci­fi­ca­tion, édi­to­rial, gra­phisme, tests… c'est large.

Enfin, le design (et par exten­sion le design UX) peut être vu comme une res­pon­sa­bi­lité de tout l'équipe, moins une com­pé­tence par­ti­cu­lière qu'un pro­ces­sus plus ou moins for­ma­lisé et plus ou moins co-extensif à tout le pro­jet. La lit­té­ra­ture en théo­rie du design et en ges­tion de pro­jet est abon­dante.

Un avis ?

VGE, wink wink
Source

Pour aller plus loin

Design et compromis : le cas du nouveau Blackberry

all design is a series of com­pro­mises; but good design finds the right ones. (Doug Bowman)

Blackberry Passport
Blackberry Passport

Avec la Surface, Microsoft est l'archétype de la com­pa­gnie qui, à force de ne vou­loir faire aucun com­pro­mis, finit par faire les pires et sor­tir un pro­duit batard. Le cas du Blackberry Passport parait dif­fé­rent puisqu'il vise un public pré­cis (les pro­fes­sion­nels) et qu'il est prêt à sacri­fier cer­tains cas d'utilisation (la vidéo) au pro­fit d'autres (la bureau­tique). Pourtant la situa­tion est simi­laire.

Plusieurs cri­tiques ont vu dans le Passport l'achèvement de ce que Blackberry fait depuis quinze ans, une manière de se démar­quer en per­sé­vé­rant dans les même choix for­mels. À mon humble avis, c'est plus com­pli­qué : l'entreprise essaye de satis­faire les der­niers fidèles et les gens n'ayant jamais été convain­cus par les cla­viers vir­tuels, tout en s'adaptant à l'air du temps. L'ancienne pro­messe était : vous aurez un petit écran (3.1” le plus sou­vent) mais un bon cla­vier, vu que votre acti­vité essen­tielle est d'écrire et conver­ser. La nou­velle est : puisque les écrans sont de plus en grands, les appli­ca­tions de plus en plus puis­santes et que vous vou­lez faire de plus en plus de choses sur votre télé­phone, vous aurez un cla­vier phy­sique et aussi un grand écran. C'est là que les com­pro­mis se trans­forment en impos­sible jeu d'équilibriste.

En guise d'exercice pour com­prendre le dilemme, consi­dé­rons une autre solu­tion : le cla­vier cou­lis­sant. C'est d'abord un gros défi tech­nique et aug­mente for­cé­ment l'épaisseur. Ensuite, on perd en modu­la­rité puisque le cla­vier ne peut s'adapter au contexte (mode adresse mail, mode mot de passe, etc.) et que l'OS n'a pas l'air de pro­fi­ter de la ran­gée de carac­tères vir­tuels. Enfin, le cla­vier est placé en mode pay­sage sur la plu­part des modèles (mal­gré d'honorables ten­ta­tives comme le Palm Pre ou le Dell Venue, ce qui com­plique l'utilisation. Personnellement je ne sais jamais dans quel sens tenir ces machins. En ne sacri­fiant rien du cla­vier et de l'écran, cette solu­tion fait naitre encore d'autres contraintes.

Revenons à la solu­tion rete­nue par Blackberry : le cla­vier a une ergo­no­mie dou­teuse (trop large pour taper à une main, placé trop bas) et ses trois ran­gées de touche ne satis­fe­ront pas les habi­tués d'un jeu de touches plus com­plet. La peti­tesse du cla­vier per­met un plus grand écran, mais qui fait « seule­ment » 4.5” (par com­pa­rai­son, le Galaxy Note fait 5.7”). La forme carré est inté­res­sante et per­met de ne pas hési­ter en per­ma­nence entre les deux orien­ta­tions, mais elle empêche sur­tout de pro­fi­ter des avan­tages de cha­cun (par exemple por­trait pour Twitter, pay­sage pour les jeux). Il y a quelques trou­vailles, notam­ment le cla­vier tac­tile qui per­met de scrol­ler et dépla­cer le cur­seur, mais rien qui rat­trape une ergo­no­mie glo­bale cri­ti­quable.

Bref, on ne peut que res­pec­ter la ten­ta­tive de Blackberry, mais elle tourne à la qua­dra­ture du cercle et finit par com­pro­mettre ce qui fai­sait sa force, à savoir une bonne expé­rience de frappe. Son erreur a sans doute été de croire que celle-ci signi­fiait for­cé­ment un cla­vier phy­sique et d'ignorer des alter­na­tives comme les écrans immenses des pha­blets.

Pour aller plus loin