Cibles tactiles : pourquoi 44px compte

Les icônes archiver et supprimer se côtoient à la fin de chaque ligne dans l’application de messagerie, chacune dessinée à 24 pixels, chacune complétée par une marge intérieure jusqu’à une cible de 32px, sans aucun écart entre elles. La surface de contact d’un pouce est plus large que chacune d’elles. Vous visez archiver, le toucher atterrit quelques pixels à droite de l’endroit visé, et le message a disparu. Rien dans le design visuel n’est incorrect : les icônes sont nettes, alignées, sur la grille. Ce sont les zones actives qui ont échoué.

Une cible tactile est la région qui reçoit le toucher — la zone active, pas le contrôle visible — et les principales recommandations s’accordent sur son plancher : les Human Interface Guidelines d’Apple recommandent au moins 44×44pt, Material Design spécifie 48×48dp, et WCAG 2.2 fait des 24×24 pixels CSS une exigence de niveau AA (critère de succès 2.5.8), avec des exceptions pour les cibles bien espacées.

Atteindre ces planchers relève surtout de l’arithmétique — des marges intérieures, des écarts et des sommes tirés du même système d’espacement qui dimensionne tout le reste. Cet article explique d’où viennent les chiffres, comment la marge intérieure transforme un petit visuel en cible confortable, et pourquoi l’espace entre les cibles compte autant que les cibles elles-mêmes.

D’où viennent 44px et 48px ?

Les unités d’abord : les points iOS, les dps Android et les pixels CSS sont tous des unités indépendantes de la densité, de taille physique comparable, si bien que les chiffres des recommandations peuvent être comparés directement même s’ils ne sont pas formellement identiques. 44pt sur un iPhone typique et 48dp sur un téléphone Android typique correspondent tous deux à environ 7mm d’écran physique — soit à peu près la surface de contact du bout d’un doigt.

Le fond scientifique est la loi de Fitts, présentée ici comme un arrière-plan plutôt que comme une formule à appliquer : le pointage devient plus rapide et plus précis à mesure que les cibles grossissent et se rapprochent, et les études sur le toucher constatent invariablement que les taux d’erreur grimpent en flèche dès que les cibles descendent sous environ 7mm de taille physique. Les planchers des plateformes se situent juste au-dessus de ce coude, arrondis à des valeurs compatibles avec la grille dans l’unité de chaque plateforme — 44 et 48 n’ont rien de magique : ce sont le point où les erreurs de toucher cessent d’être courantes, exprimé en chiffres qui se composent avec un espacement fondé sur 4 et 8.

Le troisième plancher est plus récent et plus bas. Le critère Taille de cible (minimum) de WCAG 2.2 — critère de succès 2.5.8, niveau AA — exige des cibles d’au moins 24×24 pixels CSS, avec des exceptions : une cible plus petite est conforme si elle est espacée de sorte qu’un cercle de 24px centré sur elle ne chevauche aucune cible voisine ni son cercle, si la même action est disponible via un contrôle plus grand, ou si la cible est un lien à l’intérieur d’une phrase. Parce que de nombreuses réglementations et règles de marchés publics renvoient au niveau AA de WCAG, 24px est ce qui se rapproche le plus d’un plancher légal dans le domaine. Ce n’en est pas moins un plancher : une interface tactile confortable se situe à 44–48, et l’écart entre « conforme » et « confortable » est exactement l’écart entre la question d’un juriste et celle d’un designer.

La cible tactile est-elle la même chose que le contrôle visible ?

Non — et c’est dans cette distinction que réside la plupart des corrections. Le visuel peut rester petit ; c’est la marge intérieure qui agrandit la zone active. Une icône de 24px avec 12px de marge intérieure de chaque côté forme une cible de 48×48 (24 + 2 × 12 = 48) : l’icône que vous voyez représente un quart de la surface que vous pouvez toucher.

La raison intuitive pour laquelle la marge intérieure fonctionne : vous visez le visuel avec vos yeux, mais vous atterrissez avec une surface de peau plus large que la plupart des glyphes, et les touchers se dispersent autour du point visé. La marge intérieure, c’est là où cette dispersion atterrit. Un visuel de 24px avec 12px de marge intérieure pardonne un écart pouvant aller jusqu’à 12px dans n’importe quelle direction ; le même visuel avec 4px de marge intérieure sanctionne tout ce qui dépasse 4.

Sur l’échelle modulaire utilisée dans ces articles — base 16, ratio 2, deux notes, générant 8, 11, 16, 23, 32, 45, 64 — la marge intérieure de la zone active est l’un des endroits où la sous-grille de 4pt justifie sa présence. 12 n’est pas un pas de l’échelle en ratio 2, mais il appartient à la couche de 4pt, et il fait tomber la somme sur le 48 de Material. Le pas 11 de l’échelle elle-même fonctionne aussi : 24 + 2 × 11 = 46, au-dessus du 44 d’Apple et bien au-dessus du 24 de WCAG. Les deux se défendent ; 12 maintient en outre le total sur le multiple de 8 auquel tendent les hauteurs de barres d’outils. La répartition des rôles est la répartition habituelle — l’échelle fournit les tailles d’icônes et les écarts, la couche de 4pt ajuste la somme.

À quoi ressemble une barre d’outils tactile en chiffres ?

Un exemple concret : quatre contrôles dans une barre d’outils de messagerie sur un écran de 360px de large.

Quatre cibles de 48px et trois écarts de 8px s’étendent sur 216px — confortable sur un écran de 360px, avec de la place pour un titre. Deux détails portent la leçon. La recherche dessine son glyphe à 16 (un pas exact de l’échelle) et ajoute une marge intérieure du pas 16 pour arriver au même total de 48 : les tailles visuelles peuvent varier tandis que les zones actives restent uniformes. Et supprimer se trouve à un écart de 8px d’archiver — assez pour qu’un toucher légèrement raté meure dans l’écart ; les actions destructrices méritent souvent plus de séparation ou une confirmation par-dessus, mais c’est une décision de placement, pas de taille.

Ouvrez l’échelle d’où viennent ces chiffres — 8, 11, 16, 23, 32 — et lisez-y la barre d’outils : le pas 8 est l’écart, 16 la petite icône et sa marge intérieure, la couche de 4pt fournissant le 12.

Les écarts entre les cibles comptent-ils ?

Oui — l’espacement entre les cibles achète de la précision de la même manière que la taille. Les touchers se dispersent autour du point visé, si bien que la couture entre deux cibles adjacentes est l’endroit où les ratés cessent d’être inoffensifs : deux cibles de 48px sans aucun écart entre elles produisent quand même des touchers déclenchant la mauvaise action au bord commun, car près de ce bord la moitié environ de la dispersion atterrit sur la voisine. Un écart de 8px transforme la couture en espace mort — un raté n’y fait rien, ce qui est rattrapable, au lieu de déclencher la mauvaise action, ce qui ne l’est pas forcément.

WCAG encode ce même compromis explicitement : son exception d’espacement permet à une cible sous-dimensionnée d’être conforme lorsqu’elle est suffisamment isolée, ce qui revient à ce que la norme admette que la taille effective d’une cible est sa taille plus sa séparation. La disposition la plus dense qui reste sûre est rarement le nombre maximal de cibles collées les unes aux autres — c’est une cible de moins, avec des écarts.

Quand une cible plus petite est-elle acceptable ?

Les exceptions de WCAG esquissent la réponse honnête : les liens à l’intérieur d’une phrase sont exemptés, une petite cible passe lorsque la même action existe sous forme d’un contrôle plus grand ailleurs sur la page, et l’exception d’espacement couvre les dispositions denses mais isolées. Au-delà de la conformité, le contexte compte — les pointeurs de souris tolèrent des cibles plus petites que les doigts — mais les appareils hybrides ordinateur portable-tablette brouillent la frontière, si bien que lorsque le mode de saisie est incertain, les planchers tactiles sont le choix par défaut le plus sûr.

Densifier la barre d’outils sans perdre le plancher

Parfois les 48 ne rentrent vraiment pas — plus de contrôles que la ligne ne peut en accueillir. La solution n’est pas de rogner la marge intérieure au feeling mais de la re-dériver : ouvrez la même échelle avec une troisième note par octave et le menu gagne des pas à 10, 13, 20 et 25. Complétez l’icône de 24px avec le nouveau pas 10 et la zone active tombe exactement sur 44 — le plancher d’Apple — récupérant 4px par contrôle tandis que chaque chiffre reste dérivé plutôt qu’improvisé.