La critique où votre écran passe au mur
Critique de maquette, jeudi, une demi-heure
Design Objectif sur la première planche : arriver à un filtre enregistré sans passer par les réglages. Deux versions.
Deuxième designer Avant tout le reste, la hiérarchie visuelle. Sur celle de gauche, tout pèse pareil, mon œil part en haut à gauche et abandonne.
Design On peut taper sur toute la ligne, c’est tout l’intérêt.
Deuxième designer L’affordance existe et rien ne le dit. Mets-lui un chevron, ou une ombre. Pour l’instant, le seul signifiant, c’est toi qui l’as dessiné et toi seul le sais.
Dev Sur celle de droite, il y a trois idées neuves sur un seul écran. Pour un premier lancement, ça fait beaucoup à tenir en tête.
Design Alors l’avancé part en divulgation progressive et le premier écran garde deux choses.
Rédaction La microcopie du bouton principal promet « Enregistrer et continuer », et l’écran enregistre, point. Quelqu’un ouvrira un ticket là-dessus.
Deuxième designer Et pourquoi une modale. Elle bloque la liste qu’on est en train de filtrer, donc les gens la ferment pour aller voir, et perdent le formulaire.
Design Bottom sheet, alors. La liste reste derrière.
Dev La cible tactile de la croix fait vingt-quatre points. Élargis la surface sensible, le dessin ne change pas.
Rédaction Et l’état vide affiche « Rien pour l’instant ». C’est le premier écran d’un compte neuf, et il ne dit rien.
Deuxième designer Dernier point, et je vais dire le mot : la case déjà cochée en bas, c’est un dark pattern. Décoche-la ou enlève-la.
Design Je l’enlève. Bottom sheet, chevron, deux lignes dans l’état vide, et je reviens jeudi.
Une demi-heure, quatre personnes, un écran. Chaque phrase prononcée porte sur quelque chose qui a un nom, et ce sont ces noms qui séparent un retour d’un goût personnel.
Une critique va de ce que fait l’œil à ce que l’écran exige d’une personne
Ça commence par le regard : le poids, la taille, ce qui se voit comme une commande. Ça passe ensuite à ce qu’on demande de tenir en tête d’un seul coup, et à ce qui peut attendre. Ça finit là où une interface cesse d’être maladroite et devient déloyale.
Critique de designDesign critique
Séance cadrée où les designers donnent leur retour au regard des objectifs annoncés, et non de leur goût personnel.
Amène-le en critique de design jeudi, avec l'énoncé du problème sur la première planche.
La réunion elle-même, et la raison pour laquelle c’est un métier plutôt qu’un tour d’opinions. Quand l’objectif manque au début, le goût prend la place.
Hiérarchie visuelleVisual hierarchy
Agencement des tailles, des graisses et des espaces qui indique à l'œil ce qu'il faut lire en premier.
La hiérarchie visuelle est plate, tout crie au même volume.
La première chose à laquelle on réagit, en général sans la nommer. « Chargé » et « fouillis » disent ça, faute d’avoir le mot.
Affordance
Propriété d'un objet qui rend une action possible ; dans une interface, ce que l'élément permet de faire avec lui.
L'affordance de tap porte sur toute la ligne, pas seulement sur le chevron au bout.
Ce qu’une chose permet vraiment de faire, que la personne s’en rende compte ou non. La moitié des disputes vient de la confusion avec l’indice qui l’annonce.
SignifiantSignifier
Indice visible — une ombre, une flèche, un libellé — qui dit où et comment on peut agir.
Il manque un signifiant : un chevron, une ombre, n'importe quoi qui dise que ça bouge.
L’autre moitié de cette dispute, et celle que les designers oublient de dessiner. Une commande peut se toucher parfaitement et rester invisible.
Charge cognitiveCognitive load
Quantité de réflexion qu'une tâche exige d'un coup ; l'interface en rajoute ou en absorbe une partie.
Trois notions nouvelles sur un même écran, c'est trop de charge cognitive.
La raison pour laquelle un écran techniquement complet repart quand même en arrière. Personne ne la mesure dans la salle, et tout le monde la sent.
Divulgation progressiveProgressive disclosure
Ne montrer que ce qui sert maintenant et n'ouvrir les options avancées qu'au moment où la personne les réclame.
Les réglages avancés passent en divulgation progressive, pas dans un formulaire à rallonge.
La réponse habituelle quand l’écran est juste et qu’il y en a trop d’un coup. Confondu avec cacher : l’un attend qu’on le demande, l’autre espère qu’on l’oublie.
ModaleModal
Fenêtre qui bloque le reste de l'interface tant qu'on ne s'en est pas occupé.
Trois modales d'affilée au premier lancement, pas étonnant que les gens partent.
Choisi bien plus souvent qu’il n’est défendu. Il coûte à la personne le contexte avec lequel elle est arrivée, et c’est pour ça qu’on le remplace sans arrêt.
Bottom sheet
Panneau qui remonte du bas de l'écran mobile par-dessus le contenu au lieu de le remplacer.
Mets les filtres dans une bottom sheet, comme ça la liste reste visible.
Le remplacement en question sur téléphone, et la raison pour laquelle celui-ci relève de l’habitude plutôt que du choix.
État videEmpty state
Ce qu'un écran affiche quand il n'y a pas encore de données ; c'est souvent la vraie première impression.
L'état vide dit juste « Aucun élément », et voilà un premier écran gâché.
L’écran que la plupart rencontrent en premier et que les équipes rédigent en dernier. C’est une conversation entière avec un compte tout neuf, et elle tient en un mot.
MicrocopieMicrocopy
Les petits textes de l'interface — libellés de boutons, indices, messages d'erreur — qui guident l'action.
La microcopie de ce bouton promet quelque chose que l'écran ne fait pas.
Le plus petit texte du produit et celui qui promet le plus. Quand lui et l’écran ne disent pas la même chose, le support l’apprend avant l’équipe.
Cible tactileTouch target
Zone d'un élément qu'on peut atteindre au doigt, et qui doit être assez grande pour qu'on la touche à coup sûr.
La cible tactile fait 24 points : agrandis la zone d'appui sans toucher à l'icône.
Là où une dispute de design devient une mesure, et où le dessin peut rester tel quel.
Dark pattern
Interface conçue pour pousser les gens vers un choix qu'ils ne voulaient pas : frais cachés, bouton d'annulation enterré.
Un désabonnement gris et minuscule, c'est un dark pattern, et le juridique dira pareil.
La limite que la salle cherche quand elle se tait. Rarement tracée exprès : en général, c’est le résultat d’un objectif chiffré réclamé trop fermement.
L’écran revient jeudi prochain
Avec un chevron, un panneau au lieu d’une fenêtre, et deux lignes là où il y en avait une. Les mots seront les mêmes. Celui qui présentera, ce sera vous.
Questions et réponses
Et les autres mots du produit ?
Sur la page du paquet, les 150. Ceux-là sont ceux qu’une seule critique emploie.
Pourquoi l’anglais est-il à côté ?
Le vocabulaire des interfaces voyage en anglais et se discute en français, et « affordance » n’a de traduction confortable nulle part. Les deux formes se tiennent sur une même carte.
D’où viennent les définitions ?
Du paquet « Produit et UX », les mêmes cartes que dans l’appli.
La prochaine critique tournera sur douze autres.
Le paquet « Produit et UX » en compte 150 ; dans l’appli, ils viennent par quelques-uns par jour.
