16 extensions Sketch pour aider le designer UX

Pour les designers UX qui travaillent sur Sketch, voici des plugins utiles pour faire des wireframes ou des wireflows.

Diagrammes

Userflows : sélectionner un calque, un plan de travail, générez une flèche et hop ça fait un wireflow. Il peut être actualisé à chaque déplacement de plan de travail.

Connection Flow Arrows : pareil mais vers n’importe quel calque. Et avec pas mal de paramètres utiles. Le détail qui fait la différence : des pointes de flèche orienté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 wireflow et là paf, les titres d’écrans sont minuscules et illisibles. Pas grave : ce plugin ajoute au dessus de chaque plan de travail un calque précisant son nom.

Deux plugins d’organisation automatiquement des plans de travail : Artboard Manager et Artboard Tools. Le premier fonctionne en continu et a plus d’options de style. Le second doit être actionné manuellement et a plus d’options de disposition.

Cliquer sur l’animation pour l’arrêter

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

Composants

Sketch Repeat : Duplique un objet à la même position dans tous les plans de travail. Pratique pour les composants transverses.

Sketch Material : générer facilement des composants 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éatoires.

Anima Autolayout propose plusieurs fonctions pour gérer des dimensions dynamiques. La gestion automatique du padding peut faciliter la vie quand on veut poser rapidement les blocs d’un wireframe.

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éparateur. Pratique quand on doit recopier plein de contenu depuis un brief.

Accessibilité des couleurs avec Stark : test de contraste, simulations de daltonisme et suggestions de couleur. Un autre plugin permet de tester une palette de couleurs entière.

Chercher & remplacer

Décompte de charactè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 tellement de variantes à travers les sociétés humaines que l’exception doit être considé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écanismes qu’il existe toute une littérature à ce sujet, avec un titre devenu coutumier : « Les erreurs que font les développeurs avec [bidule]».

S’il existe une longue liste de ces dispositifs, c’est qu’ils sont trop souvent mal pris en compte en informatique. 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 programmation et que vous faites tout bugger.

C’est un problème classique d’écart entre le territoire et la carte. Un concepteur modélise la réalité comme il peut, en faisant des raccourcis : un être humain est identifié par un prénom et un nom, dans cet ordre et sans rien d’autre. Il doit bien exister deux trois exceptions 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éfinition implicite.

Admettons que ce sont surtout des limites commerciales pensées pour que les gens n’abusent pas du système en ajoutant 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 quotidien et définit quels films peut regarder un enfant, avec qui et sur quel appareil. Tout ça dans un contexte d’objets toujours plus présents et connectés, où la famille peut avoir un appareil Google dans chaque pièce et plus d’appareils que de membre.

Nom, prénom et design tragique

Bref, concevoir un système peut avoir des conséquences graves et inattendues, c’est un thème dont la profession prend conscience, avec différents approches (design tragique, design systémique…) et spécialités (impact sur les minorités, biais et automatisation forcenée en intelligence artificielle…).

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’attaque de missiles à tout Hawaï ou de cockpits d’avions mal conçus. La majorité des gens aujourd’hui saisissent leur nom en deux secondes et leur adresse par auto‐complétion. Pourtant les noms sont une construction à l’intersection de bien des enjeux et des institutions sociales :

Enfin et plus largement, les noms de personnes sont en eux‐même un phénomène social complexe, avec un champ d’étude dédié en sciences sociales : l’anthroponymie, dont on pourra lire une synthèse fascinante ici. Elle nous apprend qu’ils ne servent pas qu’à identifier une personne, loin de là, mais aussi à classer et hiérarchiser, à inscrire la personne dans une certaine organisation sociale et symbolique, 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 formulaire.

Un plugin de typographie française pour Sketch

Résumé : j’ai créé un plugin Sketch pour respecter automatiquement les règles typo, espaces insécables et bien plus.

icone du plugin
Typographie frenchy

Tout a commencé par une interface comme celle‐ci :

screenshot de boite de dialogue

… Dans le titre, un magnifique point d’exclamation seul sur sa ligne, problème récurrent dans une application mobile sur laquelle je travaillais. Je me suis demandé comment résoudre ce problème, sans demander aux développeurs de mémoriser chaque règle et d’insérer systématiquement des caractères spéciaux à la main. Ces caractères, ce sont les espaces insécables, qui collent la ponctuation au signe précédent. Sur le web ça implique de taper des choses sympathiques comme   ou d’utiliser d’obscurs raccourcis clavier.

Une meilleure alternative est d’automatiser 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 nativement SPIP). Vu qu’il faudrait attendre longtemps que chaque système ait son plugin de typo, j’ai choisi d’explorer la première piste en créant un plugin pour Sketch. Ca ne règle pas le problème du contenu saisi directement dans l’interface de contribution des différents CMS, mais, de même qu’un développeur peut copier‐coller un code RGB depuis Zeplin ou Invision, l’idée est que des gens pourraient copier et coller du texte d’interface, par exemple celui d’une barre de menu. On est d’accord que c’est optimiste : 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éressante. Après tout, Invision, Figma ou Framer génèrent des maquettes de plus en plus compatibles avec du HTML/CSS. Cette proximité entre conception et réalisation pourrait aussi s’appliquer au texte.

Dans un tout autre angle, voir aussi Kopie, outil de rédaction collaborative synchronisée avec Sketch.

Ajoutons que le plugin apporte aussi quelques embellissements directement dans les maquettes, indépendamment de ces questions de workflow :

  • De " à «
  • De double tiret (--) à tiret demi‐quadratin ( – )
  • Certaines fractions (½, ⅓, ¼ )
  • Suffixes ordinaux : de 2e à 2ᵉ
  • Points de suspension…
  • De N° à №

Bref. Plugin de typographie automatique. C’était fun à faire. Retours bienvenus.

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

Lors de deux moments importants pour l’histoire de l’informatique, on trouve une personne assise à une machine et utilisant autant ses pieds que ses mains.

D’abord, le métier Jacquard nécessitait l’emploi d’une pédale, comme d’autres métiers à tisser avant lui. Cette invention inspirera le proto‐ordinateur de Babbage et Lovelace. Ensuite, Engelbart est connu pour être le premier, dès 1968, à proposer un système cohérent comprenant interface graphique, souris et collaboration à distance. Ce qui est moins connu, c’est que pour lui le succès de la souris fut presque accidentel. Lui croyait plus dans le potentiel du clavier à accords et avant ça avait expérimenté avec des dispositifs où la position du pointeur était transmise par un casque, ou encore par la position… 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éritable somme podologique !). Il identifie notamment une gamme de gestes, utilisés principalement dans des expériences artistiques ou académiques. De manière plus populaire, on retrouve les tapis des jeux de danse, les pédaliers des jeux de course, mais aussi différents plateaux d’équilibre, initiés dès 1982 par le Joyboard d’Amiga (en photo plus haut).

Quoi d’autre ? On peut parler de l’industrie, où les risques d’activation intempestive (analysés ici) exigent des pédales avec des clapets et autres garde‐fous.

Pédale industrielle

Les utilisateurs avec des problèmes de posture ou de motricité peuvent utiliser toute sorte de « souris à pied », comme cette fascinante Souris‐Sandale.

Souris-sandale ou toe-mouse

La première machine à écrire à être largement utilisée comprenait une pédale pour la touche Entrée. Toujours dans l’édition de texte, la VIM Clutch constitue un exemple intéressant de convergence entre matériel et logiciel. L’éditeur de texte VIM fonctionne par modes : un mode normal, un pour l’insertion, un pour la sélection de texte, etc. Ça parait bizarre mais c’est beaucoup plus sensé que ça n’en a l’air. Un maitre‐nerd a donc bricolé une pédale qui permet, tant qu’on la maintient, de rester dans le mode le plus courant. Ça rappelle un peu les pédaliers de piano et c’est assez logique d’avoir une touche dédiée et accessible à part pour une action aussi fondamentale.

Sholes and Glidden typewriter

Citons aussi les chaussures intelligentes, avec uniquement des senseurs, ou carrément avec des actuateurs modifiant le niveau d’amorti.

Le meilleur pour la fin : par deux fois, des petits malins ont essayé de tricher au casino en portant un ordinateur qui communiquait des informations à un complice (source 1, source 2). Comment le tricheur faisait‐il pour saisir ces informations ? En tapant du pied. Un bel exemple d’habitronique, dès 1960 et à nos pieds.

« Habitronique », parfaitement. Je vous laisse sur l’ouverture 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 similaire àsoi, de plus émotionnellement facile. Et tout ça quel but exactement ?

Petite synthèse d’article lus à ce sujet.

Se mettre dans la peau des consommateurs, ça ne marche pas :

The more empathetic managers were, the more they used their personal preferences to predict what customers would want. […] the more they ignored the market research on customers 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’ perspective, but not the solutions.

Empathie signifie surtout empathie pour la clientèle, au risque d’exclure d’autres personnes :

Empathy for commercial ends is simply marketing. […]

Back to our coffee shop. Here’s a standard solution : Keep the bathroom door locked and require people to ask for a key available only to paying customers. This solves a discrete problem for the coffee shop. After all, how can one business possibly take on an issue like inequality or homelessness ? But it does more ; it actively ignores the larger, systemic responsibilities the business has to the community. By empathizing with one group of people, we necessarily exclude another. »

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

All of this is to say that well‐meaning VR empathy experiences might come with some hidden costs. One study shows that people who have experienced something themselves can, in some cases, have less sympathy for those who are currently struggling with that same issue. This same study found that, for example, someone who had been bullied in the past was actually less empathetic towards a child being bullied than those who hadn’t been targeted before. Psychology researchers think that perhaps those who have managed to endure an experience might see someone in the midst of it and essentially 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 experience in VR might actually wind up feeling less compassion for people in real‐world situations. It wasn’t so bad when we went through it virtually, we might think, so why is this person complaining ?

What studies have found is that after, say, putting on a blindfold and navigating a room without sight, people do feel more warmly towards blind people. They feel more empathetic towards them. But they also develop negative stereotypes to go along with this warm feeling. [In an experiment,] participants came out of the experiment with the belief that blind people are incapable 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 navigate that they assume that every blind person spends his or her days wallowing in this same state of frustration and confusion.

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

But I would worry about the irrational, arbitrary, 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 intelligence, concern for others, and self‐control. I would want to ensure that anger is modified, shaped, and directed by rational deliberation. It would occasionally spur action, but it would be subservient to the capacities for rationality and compassion. If we were all constituted 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.