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 ?

3 fonctions d’Invision qui mériteraient d’être plus connues

Design system, mood­board, créa­tion de maquette avec Studio… Invision est devenue une plate­forme complète. Voici pour­tant trois fonc­tions que vous avez peut-être manqué.

Visite guidée

Quoi : Guide le visi­teur à travers une suite de commen­taires. Cliquer sur Suivant l’emmène au prochain commen­taire, même dans une autre page.

Pourquoi : Le visi­teur découvre la maquette de manière contrôlée, avec des expli­ca­tions en contexte. Parfait pour les clients qui veulent voir la maquette avant une réunion et qui ne liraient jamais un mail d’ar­gu­men­taire.

Comment : Ajouter un commen­taire et changer son type en cliquant en haut à gauche du panneau (cf. screen­shot).

ajout d'une étape de visite guidée

Export local

Quoi : exporter vos maquettes en version HTML. Conserve les inter­ac­tions.

Pourquoi : Pratique pour les présen­ta­tions ou tests utili­sa­teur dans un endroit sans réseau, ou pour faire un backup.

Pour y accéder : accueil du projet > points de suspen­sion à droite de la barre de menu > Download proto­type > choisir ZIP.

Démonstration :

Démonstration d'accès à la fonction d'export

Gestion de projet

Vite ! A quoi sert le rond bleu en bas en à droite quand vous consultez une maquette ?

Screenshot de la barre d'outils en bas de l'écran quand on visualise une maquette dans Invision

C’est assez discret mais cela corres­pond au statut de l’écran. Invision possède en effet un système assez complet de gestion de projet. De base cela permet d’as­si­gner un statut à une maquette (en attente, en cours, validé, etc.) et de changer de changer en chan­geant la maquette de colonne.

S’y ajoutent des fonc­tions plus avan­cées. on peut notam­ment asso­cier échéance, personne et tâches à chaque maquette.

Screenshot des colonnes de statut de maquettes dans Invision

Plus de détails ici

Protocoles, normes, infrastructures : la main invisible de Google

Plusieurs jour­na­listes ont raconté leurs périples pour se passer des géants améri­cains du numé­rique (chez Motherboard, chez Gizmodo). Conclusion : c’est compliqué, tant ils sont omni­pré­sents. Par exemple, Amazon (via AWS) c’est un tiers de l’in­fo­nua­gique.

Je vais décrire quelque chose d’à la fois simi­laire et diffé­rent :

  • D’abord, comment on peut passer la journée sans quitter l’uni­vers Google – avec des degrés de proba­bi­lité variable suivant les étapes : les produc­tions Youtube n’ont pas la même prégnance que Youtube lui-même.
  • Ensuite, comment cet univers n’est pas seule­ment constitué des offres qu’il propose et des filiales qu’il possède, mais aussi des langages, normes, et proto­coles invi­sibles sur lesquelles il a un large contrôle.
Chromebook

1. J’ouvre mon ordi­na­teur Google.

Logo OS Fuschia

2. Bientôt, j’allumerai un système d’exploitation inté­gra­le­ment créé par Google.

Logo language Dart

3. Je lance une appli­ca­tion de mail codée dans un langage créé par Google.

Logo AMP pour Email

4. J’ouvre un message affiché dans un sous‐langage contrôlé par Google.

Logo format d'image Webp

5. Je clique sur une image, qui est dans un format contrôlé par Google.

Logo protocole QUIC

6. Pour ouvrir la page, une requête est envoyée dans un proto­cole contrôlé par Google.

Logo Google DNS

7. L’URL de la page est traduite en IP avec un annuaire contrôlé par Google.

Carte du cable sous-marin FASTER

8. Les donnée sont trans­mises par un cable sous-marin en partie contrôlé par Google.

9. L’intégrité de la page est garantie par un certi­ficat de sécu­rité racine délivré par Google.

Logo Google Cloud Platform

10. La page est hébergée chez Google.

Logo Youtube Red

11. J’arrive sur une plate­forme de vidéo et regarde une série produite par Google.

Logo Widevine

12. Je ne peux pas télé­charger la vidéo à cause d’un DRM géré par Google.

galerie de matériel Google

13. Mon assis­tant Google Home m’en­voie une alerte d’une caméra Google connectée à une borne wifi Google.

Mascotte Android en cag

14. Pour en savoir plus, j’ouvre mon télé­phone Google et son système d’ex­ploi­ta­tion contrôlé par Google.

Et cetera et cetera. Je n’ai pas inclus l’offre d’accès à Internet Google Fiber puis­qu’elle est en pause.

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.