Tamaño de botón y espacio más pequeños para una pantalla táctil
Para una pantalla táctil, como el iPhone, ¿cuál es el tamaño más pequeño para un botón con el que podría salirse con la suya?
¿Y qué tan cerca podrían ser empujados juntos?
Tengo una aplicación que tendrá muchos botones en una pantalla y necesito diseñarla para que sea útil.
(¡Como soy un poco flojo, comenzaré reimpreso mi respuesta de un hilo en SO)
Investigaciones científicas recientes han encontrado que:
[A] tamaño objetivo de 9.2 mm para tareas discretas [es decir, tareas de apuntar a un solo objetivo ] y los objetivos de 9.6 mm para tareas en serie deben ser lo suficientemente grandes para el uso del pulgar con una mano en dispositivos portátiles basados en pantalla táctil sin degradar el rendimiento y las preferencias.
Citado de Estudio de tamaño objetivo para el uso del pulgar con una sola mano en pequeños dispositivos de pantalla táctil (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), debe apuntar no menos de 59px en diagonal para cualquier objetivo.
(Tenga en cuenta que esto se verifica para ¡uso con el pulgar con una sola mano solamente.)
Si sigue estas pautas, se eliminará el espaciado can.
tl; dr? Todo se reduce a la densidad de píxeles.
Consulte las Pautas de la interfaz humana del iPhone (ese enlace va a las pautas para aplicaciones web) para obtener recomendaciones de Apple. Hay un capítulo llamado " Proporcione objetivos con el tamaño de la punta del dedo " que probablemente pueda usar para basar sus decisiones.
Además, no adivines, prueba. Obtenga algunas personas con dedos de diferentes tamaños (dentro de su público objetivo) y haga que intenten presionar botones de diferentes tamaños en un prototipo. Eso te enseñará mucho sobre qué esperar.
Editar: La Guía de diseño e interacción de la interfaz de usuario de Microsoft para Windows Phone 7 detalla "tamaños mínimos de objetivo táctil" en la página 4. En general, esto La guía es excelente y una lectura obligada para los diseñadores de interfaz de usuario que trabajan en la interfaz de usuario de pantalla táctil.
Al desarrollar algunas aplicaciones móviles Android) tuve que probar el área táctil más pequeña a la que el usuario puede acceder de manera fácil y precisa con un dedo/toque (realice acciones de clic y arrastre).
Las pruebas se realizaron en 3 Android: HTC Hero, Samsung Galaxy Spica, T-Mobile Pulse. Los teléfonos tenían pantallas de 3.2 pulgadas excepto el Pulse (que tiene una pantalla de 3.5 pulgadas), todos de ellos con resolución de pantalla de 320x480 píxeles y superficie de pantalla capacitiva.
En pocas palabras, todo lo que era más pequeño que 20x20 píxeles era inutilizable. También tenga en cuenta que debe haber espacio alrededor del botón (margen de 5 píxeles).
Muchas pautas de UX giran en torno al tamaño de la punta del dedo y estas pautas varían en tamaño y espacio recomendados. Los tamaños de las puntas de los dedos no deben ser el único factor para determinar qué controles de tamaño mínimo y espacio deben ser.
Parche de contacto
Considere el 'parche de contacto' real hecho por el dedo/pulgar al hacer contacto con una pantalla táctil. También debe tener en cuenta los errores de juicio realizados por el usuario al pensar que ha centrado visualmente su toque en el objetivo, pero de hecho, el contacto real hecho con la pantalla puede estar ligeramente a un lado.
Tipo de dispositivo
Debido a las formas en que se sostienen los diferentes dispositivos y la diferencia en la distancia del usuario (por ejemplo, compare un teléfono móvil con una tableta, un teléfono puede estar más cerca), los tamaños táctiles mínimos y el espacio también pueden variar. Podría decirse que podría salirse con mínimos mínimos en un teléfono porque están más cerca del espectador y es menos probable que se cometan errores. Para un dispositivo más grande como una tableta que se mantiene más lejos, es posible que deba aumentar sus tamaños mínimos para tener más posibilidades de cometer errores.
Hay un gran artículo que habla sobre este y otros factores en UXmatters ( http://www.uxmatters.com/mt/archives/ 2013/03/common-misconceptions-about-touch.php ).
Fragmentos del artículo:
... solo una parte del dedo o pulgar hace contacto con la pantalla ... el parche de contacto varía según la presión y el ángulo
Los tamaños físicos son importantes , por lo que todas las buenas pautas están en milímetros, pulgadas, puntos de tipógrafos u otras escalas del mundo real.
no es necesario aumentar el tamaño del objetivo visible. En cambio, puede simplemente aumentar las dimensiones del área en la que se puede hacer clic alrededor de un enlace o botón
Diseño para áreas visuales y táctiles. Considere las expectativas de los usuarios.
Tamaños:
Solo como una adición: el diseño del material de Google sugiere un mínimo de 7-10 mm para el tamaño del objetivo táctil https://www.google.com/design/spec/search.html?q=Touch+target+size