16 extensions Sketch pour aider le designer UX

Pour les desi­gners UX qui travaillent sur Sketch, voici des plugins utiles pour faire des wire­frames ou des wire­flows.

Diagrammes

Userflows : sélec­tionner un calque, un plan de travail, générez une flèche et hop ça fait un wire­flow. Il peut être actua­lisé à chaque dépla­ce­ment de plan de travail.

Connection Flow Arrows : pareil mais vers n’im­porte quel calque. Et avec pas mal de para­mètres utiles. Le détail qui fait la diffé­rence : des pointes de flèche orien­tées par rapport au trait, pas à l’objet cible.

Exemple de flèches avec le plugin Connection flow arrows
Connection Flow Arrows

Plans de travail

Artboard Titles : vous exportez votre grand wire­flow et là paf, les titres d’écrans sont minus­cules et illi­sibles. Pas grave : ce plugin ajoute au dessus de chaque plan de travail un calque préci­sant son nom.

Deux plugins d’or­ga­ni­sa­tion auto­ma­ti­que­ment des plans de travail : Artboard Manager et Artboard Tools. Le premier fonc­tionne en continu et a plus d’op­tions de style. Le second doit être actionné manuel­le­ment et a plus d’op­tions de dispo­si­tion.

Cliquer sur l’ani­ma­tion pour l’ar­rêter

Exemple d'arrangement automatique des blocs avec Artboard manager
Artboard Manager

Composants

Sketch Repeat : Duplique un objet à la même posi­tion dans tous les plans de travail. Pratique pour les compo­sants trans­verses.

Sketch Material : générer faci­le­ment des compo­sants Material, même complexes comme des tableaux.

Générateur de carte

Générateur de graphique, avec des données réelles ou aléa­toires.

Anima Autolayout propose plusieurs fonc­tions pour gérer des dimen­sions dyna­miques. La gestion auto­ma­tique du padding peut faci­liter la vie quand on veut poser rapi­de­ment les blocs d’un wire­frame.

Contenu

Automate Sketch : plein de commandes utiles. Ma préférée : Décomposer un calque de texte en plusieurs, en prenant le retour à la ligne comme sépa­ra­teur. Pratique quand on doit reco­pier plein de contenu depuis un brief.

Accessibilité des couleurs avec Stark : test de contraste, simu­la­tions de dalto­nisme et sugges­tions de couleur. Un autre plugin permet de tester une palette de couleurs entière.

Chercher & remplacer

Décompte de charac­tère

Lorem Ipsum

Toute la complexité du monde se cache dans le champ Nom d’un formulaire

Une personne n’a pas forcé­ment un seul prénom suivi d’un seul nom de famille. Elle peut avoir un seul nom, ou trois prénoms et quatre noms de famille, en changer au cours de sa vie, son nom peut être très long ou très court… il y a telle­ment de variantes à travers les sociétés humaines que l’ex­cep­tion doit être consi­dérée comme la norme. Cette complexité existe aussi pour les numéros de télé­phone, les adresses, et pour tant d’autres méca­nismes qu’il existe toute une litté­ra­ture à ce sujet, avec un titre devenu coutu­mier : « Les erreurs que font les déve­lop­peurs avec [bidule] ».

S’il existe une longue liste de ces dispo­si­tifs, c’est qu’ils sont trop souvent mal pris en compte en infor­ma­tique. Cela peut avoir des consé­quences très gênantes, par exemple si votre nom de famille est aussi un mot réservé qui signifie le « rien » en program­ma­tion et que vous faites tout bugger.

C’est un problème clas­sique d’écart entre le terri­toire et la carte. Un concep­teur modé­lise la réalité comme il peut, en faisant des raccourcis : un être humain est iden­tifié par un prénom et un nom, dans cet ordre et sans rien d’autre. Il doit bien exister deux trois excep­tions mais on verra plus tard, se dit-il.

Les noms sont déjà complexes, alors imaginez une notion comme la famille. Par exemple le service Google Play Family impose des règles qui forment une défi­ni­tion impli­cite.

Admettons que ce sont surtout des limites commer­ciales pensées pour que les gens n’abusent pas du système en ajou­tant trois cent personnes du monde entier à leur « famille ». Mais quand même. Qui est Google pour dire qu’une famille ne peut être composée de nombreuses personnes vivant dans plusieurs pays ? Ensuite, ça influe forcé­ment sur la vie des gens : le service devient intriqué avec leur quoti­dien et définit quels films peut regarder un enfant, avec qui et sur quel appa­reil. Tout ça dans un contexte d’ob­jets toujours plus présents et connectés, où la famille peut avoir un appa­reil Google dans chaque pièce et plus d’ap­pa­reils que de membre.

Nom, prénom et design tragique

Bref, conce­voir un système peut avoir des consé­quences graves et inat­ten­dues, c’est un thème dont la profes­sion prend conscience, avec diffé­rents approches (design tragique, design systé­mique…) et spécia­lités (impact sur les mino­rités, biais et auto­ma­ti­sa­tion forcenée en intel­li­gence arti­fi­cielle…).

Mais ce que j’aime avec mes exemples, c’est qu’ils paraissent anodins. On ne parle pas de l’UI qui a causé l’envoi d’une fausse alerte d’at­taque de missiles à tout Hawaï ou de cock­pits d’avions mal conçus. La majo­rité des gens aujourd’hui saisissent leur nom en deux secondes et leur adresse par auto-complétion. Pourtant les noms sont une construc­tion à l’in­ter­sec­tion de bien des enjeux et des insti­tu­tions sociales :

Enfin et plus large­ment, les noms de personnes sont en eux-même un phéno­mène social complexe, avec un champ d’étude dédié en sciences sociales : l’an­thro­po­nymie, dont on pourra lire une synthèse fasci­nante ici. Elle nous apprend qu’ils ne servent pas qu’à iden­ti­fier une personne, loin de là, mais aussi à classer et hiérar­chiser, à inscrire la personne dans une certaine orga­ni­sa­tion sociale et symbo­lique, ainsi qu’à s’adresser à elle d’une certaine manière, dans un certain contexte.

Bref, pour peu qu’on creuse un peu, toute la complexité de ce qu’on appelle un système socio-technique peut surgir d’un modeste champ de formu­laire.

Un plugin de typographie française pour Sketch

Résumé : j’ai créé un plugin Sketch pour respecter auto­ma­ti­que­ment les règles typo, espaces insé­cables et bien plus.

icone du plugin
Typographie frenchy

Tout a commencé par une inter­face comme celle-ci :

screenshot de boite de dialogue

… Dans le titre, un magni­fique point d’ex­cla­ma­tion seul sur sa ligne, problème récur­rent dans une appli­ca­tion mobile sur laquelle je travaillais. Je me suis demandé comment résoudre ce problème, sans demander aux déve­lop­peurs de mémo­riser chaque règle et d’in­sérer systé­ma­ti­que­ment des carac­tères spéciaux à la main. Ces carac­tères, ce sont les espaces insé­cables, qui collent la ponc­tua­tion au signe précé­dent. Sur le web ça implique de taper des choses sympa­thiques comme   ou d’uti­liser d’obs­curs raccourcis clavier.

Une meilleure alter­na­tive est d’au­to­ma­tiser le problème, soit en début de chaine (comme le fait Word), soit en fin de chaine (comme ce plugin pour WordPress ou comme le fait nati­ve­ment SPIP). Vu qu’il faudrait attendre long­temps que chaque système ait son plugin de typo, j’ai choisi d’ex­plorer la première piste en créant un plugin pour Sketch. Ca ne règle pas le problème du contenu saisi direc­te­ment dans l’in­ter­face de contri­bu­tion des diffé­rents CMS, mais, de même qu’un déve­lop­peur peut copier-coller un code RGB depuis Zeplin ou Invision, l’idée est que des gens pour­raient copier et coller du texte d’in­ter­face, par exemple celui d’une barre de menu. On est d’ac­cord que c’est opti­miste : si demain ce texte change, il y a peu de chance qu’il soit ressaisi d’abord dans Sketch.

Mais c’est une voie inté­res­sante. Après tout, Invision, Figma ou Framer génèrent des maquettes de plus en plus compa­tibles avec du HTML/CSS. Cette proxi­mité entre concep­tion et réali­sa­tion pour­rait aussi s’ap­pli­quer au texte.

Dans un tout autre angle, voir aussi Kopie, outil de rédac­tion colla­bo­ra­tive synchro­nisée avec Sketch.

Ajoutons que le plugin apporte aussi quelques embel­lis­se­ments direc­te­ment dans les maquettes, indé­pen­dam­ment de ces ques­tions de work­flow :

  • De " à «
  • De double tiret (--) à tiret demi-quadratin ( – )
  • Certaines frac­tions (½, ⅓, ¼ )
  • Suffixes ordi­naux : de 2e à 2ᵉ
  • Points de suspen­sion…
  • De N° à №

Bref. Plugin de typo­gra­phie auto­ma­tique. C’était fun à faire. Retours bien­venus.

Au doigt de pied et à l’œil : contrôler un ordinateur avec les pieds

Lors de deux moments impor­tants pour l’his­toire de l’in­for­ma­tique, on trouve une personne assise à une machine et utili­sant autant ses pieds que ses mains.

D’abord, le métier Jacquard néces­si­tait l’emploi d’une pédale, comme d’autres métiers à tisser avant lui. Cette inven­tion inspi­rera le proto-ordinateur de Babbage et Lovelace. Ensuite, Engelbart est connu pour être le premier, dès 1968, à proposer un système cohé­rent compre­nant inter­face graphique, souris et colla­bo­ra­tion à distance. Ce qui est moins connu, c’est que pour lui le succès de la souris fut presque acci­dentel. Lui croyait plus dans le poten­tiel du clavier à accords et avant ça avait expé­ri­menté avec des dispo­si­tifs où la posi­tion du poin­teur était trans­mise par un casque, ou encore par la posi­tion… du pied et du genou !

Ensuite, le pied se retrouve un peu partout. Si vous ne me croyez pas, je vous conseille la lecture de cette somme sur le sujet (trente pages, une véri­table somme podo­lo­gique !). Il iden­tifie notam­ment une gamme de gestes, utilisés prin­ci­pa­le­ment dans des expé­riences artis­tiques ou acadé­miques. De manière plus popu­laire, on retrouve les tapis des jeux de danse, les péda­liers des jeux de course, mais aussi diffé­rents plateaux d’équi­libre, initiés dès 1982 par le Joyboard d’Amiga (en photo plus haut).

Quoi d’autre ? On peut parler de l’in­dus­trie, où les risques d’ac­ti­va­tion intem­pes­tive (analysés ici) exigent des pédales avec des clapets et autres garde-fous.

Pédale industrielle

Les utili­sa­teurs avec des problèmes de posture ou de motri­cité peuvent utiliser toute sorte de « souris à pied », comme cette fasci­nante Souris-Sandale.

Souris-sandale ou toe-mouse

La première machine à écrire à être large­ment utilisée compre­nait une pédale pour la touche Entrée. Toujours dans l’édi­tion de texte, la VIM Clutch constitue un exemple inté­res­sant de conver­gence entre maté­riel et logi­ciel. L’éditeur de texte VIM fonc­tionne par modes : un mode normal, un pour l’in­ser­tion, un pour la sélec­tion de texte, etc. Ça parait bizarre mais c’est beau­coup plus sensé que ça n’en a l’air. Un maitre-nerd a donc bricolé une pédale qui permet, tant qu’on la main­tient, de rester dans le mode le plus courant. Ça rappelle un peu les péda­liers de piano et c’est assez logique d’avoir une touche dédiée et acces­sible à part pour une action aussi fonda­men­tale.

Sholes and Glidden typewriter

Citons aussi les chaus­sures intel­li­gentes, avec unique­ment des senseurs, ou carré­ment avec des actua­teurs modi­fiant le niveau d’amorti.

Le meilleur pour la fin : par deux fois, des petits malins ont essayé de tricher au casino en portant un ordi­na­teur qui commu­ni­quait des infor­ma­tions à un complice (source 1, source 2). Comment le tricheur faisait-il pour saisir ces infor­ma­tions ? En tapant du pied. Un bel exemple d’ha­bi­tro­nique, dès 1960 et à nos pieds.

« Habitronique », parfai­te­ment. Je vous laisse sur l’ou­ver­ture de Footloose.

Les limites de l’empathie

L’empathie c’est bien mais ce n’est pas une panacée. On essaye de se mettre à la place de l’autre mais on y trouve surtout ce qu’il y a de plus de simi­laire àsoi, de plus émotion­nel­le­ment facile. Et tout ça quel but exac­te­ment ?

Petite synthèse d’ar­ticle lus à ce sujet.

Se mettre dans la peau des consom­ma­teurs, ça ne marche pas :

The more empa­thetic mana­gers were, the more they used their personal prefe­rences to predict what custo­mers would want. […] the more they ignored the market research on custo­mers that we provided them.

L’empathie n’est qu’une étape :

We needed distance — a psychic removal — in order to really assess the problem and take action to change it. […] Empathy will get you to see the problems from the users’ pers­pec­tive, but not the solu­tions.

Empathie signifie surtout empa­thie pour la clien­tèle, au risque d’ex­clure d’autres personnes :

Empathy for commer­cial ends is simply marke­ting. […]

Back to our coffee shop. Here’s a stan­dard solu­tion : Keep the bathroom door locked and require people to ask for a key avai­lable only to paying custo­mers. This solves a discrete problem for the coffee shop. After all, how can one busi­ness possibly take on an issue like inequa­lity or home­less­ness ? But it does more ; it acti­vely ignores the larger, systemic respon­si­bi­li­ties the busi­ness has to the commu­nity. By empa­thi­zing with one group of people, we neces­sa­rily exclude another. »

Les limites de l’empathie dans la réalité virtuelle :

All of this is to say that well-meaning VR empathy expe­riences might come with some hidden costs. One study shows that people who have expe­rienced some­thing them­selves can, in some cases, have less sympathy for those who are currently strug­gling with that same issue. This same study found that, for example, someone who had been bullied in the past was actually less empa­thetic towards a child being bullied than those who hadn’t been targeted before. Psychology resear­chers think that perhaps those who have managed to endure an expe­rience might see someone in the midst of it and essen­tially think : “I went through this, it wasn’t so bad, they should just suck it up.” If that theory is correct, then those of us who go through an expe­rience in VR might actually wind up feeling less compas­sion for people in real-world situa­tions. It wasn’t so bad when we went through it virtually, we might think, so why is this person complai­ning ?

What studies have found is that after, say, putting on a blind­fold and navi­ga­ting a room without sight, people do feel more warmly towards blind people. They feel more empa­thetic towards them. But they also develop nega­tive stereo­types to go along with this warm feeling. [In an expe­riment,] parti­ci­pants came out of the expe­riment with the belief that blind people are inca­pable of holding jobs or living alone, and that their lives are defined by misery. The subjects are so focused on their own struggles with trying to navi­gate that they assume that every blind person spends his or her days wallo­wing in this same state of frus­tra­tion and confu­sion.

L’empathie est comme la colère, une émotion brute à contrôler :

But I would worry about the irra­tional, arbi­trary, and self-destructive aspects of anger, so I wouldn’t wish that my child possess too much of it. And I would make sure to add plenty of intel­li­gence, concern for others, and self-control. I would want to ensure that anger is modi­fied, shaped, and directed by rational deli­be­ra­tion. It would occa­sio­nally spur action, but it would be subser­vient to the capa­ci­ties for ratio­na­lity and compas­sion. If we were all consti­tuted in this way, if we could all put anger in its place, ours would be a kinder and better world.

That is how we should think about empathy too.