Quelle taille pour un bouton tactile ?
Une cible tactile est la zone d'un bouton ou d'un lien que le doigt doit toucher. Un repère courant est de la faire d'au moins 44 pixels de côté, avec un petit écart entre deux cibles.
Des cibles trop petites font appuyer à côté. Les utilisateurs perdent du temps, se trompent et quittent la page.
À la fin de cette leçon
Remarque
Je peux dimensionner des contrôles pour qu'un doigt les touche sans erreur.
Mots clés
| Mot | Ce que ça veut dire |
|---|---|
| Cible tactile | la zone d'un contrôle qui reçoit le toucher du doigt |
| Zone du pouce | la partie de l'écran que le pouce atteint sans effort quand on tient le téléphone d'une main |
| Espacement | la distance entre deux cibles voisines |
| Marge intérieure | l'espace entre le contenu d'un bouton et son bord, appelé padding en CSS |
| Survol | le fait de passer le pointeur de la souris sur un élément sans cliquer |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Un doigt est plus gros qu'un pointeur
Un pointeur de souris touche un seul pixel. Un bout de doigt couvre une zone de plusieurs millimètres et cache ce qu'il touche.
On mesure donc une cible en pixels CSS et on la compare à un minimum. Dans ce module le minimum est de 44 pixels, dans la largeur comme dans la hauteur.
Exemple : cinq boutons et leur verdict
| Bouton | Largeur | Hauteur | Verdict à 44 px |
|---|---|---|---|
| Fermer | 24 px | 24 px | trop petit dans les deux sens |
| Envoyer | 120 px | 32 px | trop bas |
| Retour | 32 px | 48 px | trop étroit |
| Valider | 44 px | 44 px | juste suffisant |
| Acheter | 160 px | 48 px | correct |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Agrandir la zone sans agrandir l'icône
/* La zone qui reçoit le toucher fait au moins 44 px de côté. */
.lien-menu {
display: inline-block;
min-width: 44px;
min-height: 44px;
padding: 12px; /* agrandit la zone, pas l'icône */
}
/* Un écart entre deux cibles voisines. */
.barre { display: flex; gap: 8px; }Mesurer les boutons de l'application du laboratoire
Un script lit la feuille de style de l'application et liste chaque largeur et chaque hauteur donnée à une classe. Il compare chacune à 44 pixels.
Les mots du résultat sont anglais : UNDER 44 veut dire sous 44, ok veut dire suffisant. Le script mesure seulement : il ne change aucun fichier. Le Run doit finir par under 44 px: 4.
Lister les tailles sous 44 pixels
docker exec jupyter python3 steps/touch.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Deux cibles trop proches se confondent
Même grande, une cible touchée par erreur pose un problème si sa voisine est collée contre elle. Un écart d'environ 8 pixels entre deux cibles réduit les erreurs.
En CSS, la propriété gap d'une grille ou d'une ligne souple règle cet écart. Une marge intérieure agrandit la zone qui reçoit le toucher.
Où le pouce arrive-t-il facilement ?
| Zone de l'écran | Effort du pouce | Ce qu'on y place |
|---|---|---|
| Le bas, près du pouce | faible | les actions fréquentes : valider, ajouter |
| Le milieu | moyen | le contenu à lire et à faire défiler |
| Le haut, côté opposé à la main | fort | les actions rares : réglages, aide |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une erreur fréquente
Attention
Beaucoup pensent qu'une petite icône oblige à un petit bouton. Faux : c'est la zone qui reçoit le toucher qui compte, pas le dessin. On garde l'icône petite et on agrandit la zone avec de la marge intérieure.
Le toucher n'a pas de survol
Un écran tactile ne sait pas qu'un doigt se trouve au-dessus d'un bouton avant de le toucher. Une information qui n'apparaît qu'au survol reste donc cachée sur un téléphone.
Placez l'information importante à la vue, pas seulement au survol de la souris.