web-dev-qa-db-fra.com

Quelle taille de bouton un doigt raisonnablement gros peut-il cliquer confortablement?

Disons que mon bouton est de forme carrée, dans un site Web, et je ne veux pas gêner les utilisateurs avec de gros doigts (et aussi les personnes âgées et ceux qui ont oublié leurs lunettes et ne sont pas précis à frapper l'endroit).

Ma conjecture est 40 x 40 les pixels sont une bonne zone de clic, mais ne seront-ils pas trop petits sur ces nouveaux écrans de téléphone Full HD? J'ai moi-même un ancien téléphone donc je ne peux pas l'essayer: X

Peut-être que quelqu'un a une bonne règle de "gros pouce" qu'il utilise pour ce genre de problèmes?

13
Arthur Tarasov

L'erreur `` gros doigt '' indique qu'un minimum de 44px x 44px (environ 11 mm x 11 mm) est conseillé pour la zone de contact de votre doigt/pouce. Le "centroïde" est la première partie de votre doigt qui est en contact avec l'écran. Voir ci-dessous pour les visuels.

enter image description here

enter image description here

Si vous utilisez quelque chose comme Sketch pour créer un prototype, regardez Mirr.io pour voir à quoi cela ressemblerait sur un appareil mobile si vous avez accès à des appareils de test, vous pouvez redimensionner en conséquence.

Pour plus d'informations, voir ici

8
UIO

Selon la documentation WCAG 2.0

2.2 Touchez la taille et l'espacement de la cible

La haute résolution d'écran des appareils mobiles signifie que de nombreux éléments interactifs peuvent être affichés ensemble sur un petit écran. Mais ces éléments doivent être suffisamment grands et suffisamment éloignés les uns des autres pour que les utilisateurs puissent les cibler en toute sécurité au toucher.

Les meilleures pratiques pour la taille de la cible tactile sont les suivantes:

Veiller à ce que les cibles tactiles mesurent au moins 9 mm de haut par 9 mm de large, indépendamment de la taille de l'écran, de l'appareil ou de la résolution. Veiller à ce que les cibles tactiles proches de la taille minimale soient entourées d'une petite quantité d'espace inactif. Remarque: le grossissement de l'écran ne devrait pas être utilisé pour obtenir cette taille, car le grossissement de l'écran introduit souvent la nécessité de faire un panoramique horizontal aussi bien que vertical, ce qui peut diminuer la convivialité.

Dans un autre endroit, il est décrit comme n'étant pas plus petit que 45 pixels de large et 45 pixels de haut comme taille minimale.

Page de référence 1

Page de référence 2

2
Chadembox

Google Fundamentals: La taille cible minimale recommandée pour le toucher est d'environ 48 pixels indépendants de l'appareil sur un site avec une fenêtre d'affichage mobile correctement définie. Par exemple, alors qu'une icône ne peut avoir qu'une largeur et une hauteur de 24 pixels, vous pouvez utiliser un rembourrage supplémentaire pour porter la taille cible du tap à 48 pixels. La zone de 48 x 48 pixels correspond à environ 9 mm, ce qui correspond à la taille de la zone de protection des doigts d'une personne.

1

7 règles de base pour la conception de boutons https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4

  1. Faire ressembler les boutons aux boutons
  2. Placez des boutons là où les utilisateurs s'attendent à les trouver
  3. Étiqueter les boutons avec ce qu'ils font
  4. Dimensionnez correctement vos boutons
  5. Attention à l'ordre
  6. Évitez d'utiliser trop de boutons
  7. Fournir une rétroaction visuelle ou audio sur l'interaction

En outre:

Ne présumez pas que quelque chose dans votre interface utilisateur est évident pour vos utilisateurs

0
Suresh kumar