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


Estoy diseñando una aplicación para iPhone que cuenta con un conjunto bastante grande de botones rectos redondeados en pantalla. Dada la interfaz de usuario de pantalla táctil basada en dedos, ¿cuál crees que sería el tamaño de botón sensible más pequeño? Necesito encajar tantos de ellos como pueda en la ventana sin comprometer demasiado la usabilidad. 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 fue incómodo - los botones me sentí muy pequeño.

Author: Seva Alekseyev, 2009-12-18

5 answers

Apple dice que la media dedo tap 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 relleno para hacer que el área táctil sea 44x44. Por supuesto, la gente puede tocar un 1x1 si son muy cuidadosos, pero ¿por qué hacer que la gente se esfuerce más de lo necesario para usar tu aplicación?

 103
Author: coneybeare,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-12-18 15:54:13

Investigaciones científicas recientes han encontrado que:

[A] tamaño objetivo de 9,2 mm {[7] } para discretos tareas [es decir, tareas de apuntamiento de un solo objetivo] y objetivos de 9,6 mm para serial las tareas deben ser lo suficientemente grandes para uso del pulgar con una mano dispositivos de mano con pantalla táctil sin degradando el rendimiento y la preferencia.

Citado de Estudio del Tamaño Objetivo para el Uso del Pulgar con Una Sola Mano en Dispositivos Táctiles Pequeños (Parhi, Karlson, & Bederson 2006). Otras fuentes están de acuerdo en esta "regla cercana a 0.4 pulgadas" (p. ej. Diseño de Interfaces Gestuales (Saffer, 2008, p. 42)).

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

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

 50
Author: jensgram,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-01-07 11:10:20

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

Le recomiendan que proporcione Objetivos de tamaño de la punta del dedo en las Pautas de la interfaz de usuario, y luego diga 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 sea fácil presionar los botones, incluso cuando tenga manos bastante grandes...

- t

 5
Author: Tim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-12-18 16:38:46

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 se salga con la suya con menos píxeles en otros dispositivos, si el tamaño del píxel es mayor.)

 2
Author: David Dunham,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-12-19 20:21:08

En la práctica, al crear una interfaz de usuario de dispositivo basada en la web personalizada en las primeras pantallas táctiles, nos pareció importante diseñar para lo que uno de nuestros probadores beta se refirió como "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 probador encontró que 40 x 40 eran utilizables (el doble que para pantallas hi-def/Retina), cualquier cosa menos aumentó el número de fallas y errores (y frustración); y como beneficio adicional, las personas con dedos delgados encontraron que sentían 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 solución se menciona anteriormente, haciendo que la parte visual del control sea más pequeña que sus dimensiones reales, aunque esa no es una solución universal.

 2
Author: Marlin Ouverson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-18 04:54:58