it-swarm-es.com

Tamaño mínimo del botón sensible en iPhone

Estoy diseñando una aplicación para iPhone que presenta un conjunto bastante grande de botones rectos redondeados en pantalla. Dada la interfaz de usuario de la pantalla táctil basada en los dedos, ¿cuál crees que sería el tamaño de botón sensible más pequeño? Necesito encajar tantos como pueda en la ventana gráfica sin comprometer demasiado la facilidad de uso. Tal vez hay un tamaño mínimo recomendado por Apple? En este momento es 33x33, y se veía bien en un simulador, pero estaba jugando con la aplicación en un teléfono real anoche, y era incómodo, los botones se sentían demasiado pequeños.

65
Seva Alekseyev

Apple dice que el promedio del toque del dedo es 44x44 (de WWDC). Se recomienda que todas las filas de la tabla tengan al menos esa altura. Es común que los iconos aparezcan 32x32, pero tienen un relleno para hacer que el área táctil sea 44x44. Por supuesto, las personas pueden tocar un 1x1 si son muy cuidadosas, pero ¿por qué hacer que las personas se esfuercen más de lo necesario para usar su aplicación?

105
coneybeare

La investigación científica reciente ha encontrado que:

[A] tamaño de destino de 9.2 mm para tareas discretas [es decir, tareas de apuntar de un solo objetivo] y los objetivos de 9.6 mm para tareas en serie deben ser suficientemente grandes para uso con el pulgar con una sola mano en computadoras de mano con pantalla táctil sin degradar el rendimiento y las preferencias.

Citado en Estudio de tamaño objetivo para uso con el pulgar con una sola mano en dispositivos con pantalla táctil pequeños (Parhi, Karlson, y Bederson 2006). Otras fuentes están de acuerdo con esta "regla de cerca de 0.4 pulgadas" (por ejemplo, Diseño de interfaces gestuales (Saffer 2008, p. 42)).

Dada la densidad de píxeles del iPhone de 163 PPI (6.417px/mm), preferiblemente debe apuntar no inferior a 59px diagonal para cualquier objetivo.

(Tenga en cuenta que esto se verifica solo para uso del pulgar con una mano).

52
jensgram

Apple no es consistente en esto, y no hay reglas duras.

Le recomiendan que proporcione Objetivos de tamaño de punta de los dedos en las Pautas de la interfaz de usuario, y luego continúan diciendo que los botones de la calculadora son 44x44.

También en ese documento dicen que las imágenes para la barra de herramientas y los iconos de navegación deben ser 20x20, y para los iconos de la barra de pestañas deben ser 30x30.

Creo que simplemente debe probar su aplicación y asegurarse de que es fácil presionar los botones, incluso cuando tiene manos bastante grandes ...

-t

5
Tim

En la práctica, mientras creamos una interfaz de usuario personalizada basada en web en las primeras pantallas táctiles, nos pareció importante diseñar para lo que uno de nuestros probadores beta denominó "mis dedos gordos". Y tenía razón: es fácil diseñar controles elegantes y finos que un número significativo de usuarios encontrarán propensos a errores o inutilizables. En ese proyecto, el tamaño exacto dependía de la aplicación, pero ese comprobador encontró que 40 x 40 eran utilizables (el doble que en las pantallas de alta definición/retina), y mucho menos aumentaba el número de fallos y errores (y la frustración); y como beneficio adicional, las personas con dedos delgados encontraron que podían moverse más rápido y no tenían que ser tan precisos, lo que hacía que todo se sintiera más suave, menos fricción subjetiva, más espacio para respirar. El truco es hacer que los controles de ese tamaño no parezcan torpes o dominantes; Una de las soluciones se menciona anteriormente, haciendo que la parte visual del control sea más pequeña que sus dimensiones reales, aunque no es una solución universal.

2
Marlin Ouverson

Podría haber jurado que dijeron que el mínimo era de 37 píxeles, pero hoy estoy encontrando 44. De cualquier manera, 33 parece pequeño.

(Tenga en cuenta que las imágenes pueden ser más pequeñas porque a menudo forman parte de un área rectangular más grande).

(Es posible que salgas con menos píxeles en otros dispositivos, si el tamaño de píxeles es mayor).

2
David Dunham