Tamaño ideal de los elementos gráficos para crear aplicaciones móviles fáciles de usar

Tamaño ideal de los elementos gráficos para crear aplicaciones móviles fáciles de usar
Facebook Twitter Flipboard E-mail


Si algo puede llegar a ser realmente desesperante en un smartphone es que la interfaz no reconozca bien nuestras pulsaciones, ya sea ignorando o lo que es peor, confundiendo el elemento que queríamos tocar por el de al lado. Por desgracia, nuestro “periférico de introducción de datos en el sistema” (más conocido por el nombre común de dedo, o según el caso dedazo) tiene unas dimensiones que le impiden actuar con la precisión a la que estábamos acostumbrados por el ratón de los ordenadores o el estilete de las PDAs.

Los principales fabricantes de smartphones no son ajenos a esta circunstancia, y no sólo crean aplicaciones donde la interacción humana sea lo más fluida y lo menos frustrante posible, sino que además nos proporcionan guías para que todos los que desarrollemos aplicaciones o páginas web orientadas a sus dispositivos, las hagamos bajo este mismo principio. Además, la adecuación de los elementos de la interfaz al tamaño de nuestros dedos conlleva otra ventaja inherente: debido a que se fuerza a dejar unos espacios mínimos entre elementos y a no sobrecargar la pantalla, se consiguen diseños minimalistas de esos que están tan de moda.

Como suele ser habitual, no hay una única directiva a seguir, sino que cada fabricante tienes sus propias recomendaciones que conviene seguir si queremos que nuestros usuarios no se sientan con la obligación de tener buena puntería al usar el móvil.


Interfaces iOS


En su guía de interfaces humanas, Apple recomienda usar elementos de 44 × 44 puntos, y pone como ejemplo de una interfaz muy usable su propia calculadora. Hasta la salida del iPhone 4 y su pantalla retina, la referencia hablaba de píxeles en lugar de puntos, por lo que conviene repasar la diferencia entre estas dos medidas para entender bien cuándo nos referimos al tamaño interno (creación y edición de la imagen) y cuándo al externo (representación en pantalla).

Windows Phone


La guía de interfaces de usuario Windows Phone es de las más completas en este aspecto. En primer lugar, definen 9 mm como el tamaño ideal del menor elemento pulsable, ya que tras cientos de horas de pruebas comprobaron que este tamaño reducía los errores al 1,6%. A partir de este mínimo, recomiendan crear elementos mayores si es posible, dejar espacios de 2 mm entre dos elementos con los que se pueda interactuar y definir un área de pulsación mayor que la parte visible del elemento, de forma que el borde del mismo funcione de un modo igual de correcto que el centro.

Lista de elementos en un Windows Phone

En tablas, la altura máxima se reduce a 7mm


Como excepción a la norma de los 9 mm, se recomienda bajar hasta un mínimo de 7 mm de altura cuando se necesite apilar gran cantidad de elementos, con la condición de que sean al menos el doble de anchos que de altos, como podría ocurrir en una lista formateada como una tabla vertical. Como curiosidad, en lugar de ofrecer una equivalencia entre píxeles y milímetros, Microsoft aconseja medir los elementos con un calibre en el dispositivo final.

Nokia


El fabricante finlandés apuesta por un enfoque práctico y en las consideraciones de usabilidad de su guía para desarrolladores sugiere que los elementos tengan como mínimo el tamaño y espaciado equivalente a la yema de un dedo.

Pero no se queda ahí la cosa, y hacen distinción entre los elementos de la interfaz que se manejan fácilmente con el pulgar y los que no se pueden alcanzar con él y han de pulsarse con otro dedo. Así, establece un diámetro de 7 mm con 1 mm de espaciado para elementos a tocar con el índice, y unas dimensiones de 8 mm con 2 mm de espaciado para los que se tocan con el pulgar.

Ubuntu


Ubuntu pretende saltar al mercado de los tablets y smartphones y por ello ya tiene buena parte del camino preparado, al haber establecido su guía de diseño de interfaces dactilares. En este sentido, sus recomendaciones son muy similares a las de Nokia: ajustarlo al tamaño de la yema del dedo de un adulto. Sin embargo, hacen hincapié en el uso de toda la yema y no sólo la punta, por lo que sugieren tamaños de entre 10 y 20 mm, y además proporcionan una cómoda tabla de equivalencias entre milímetros y píxeles, dependiendo del tamaño y definición de la pantalla usada.

¿Android?


Por sorprendente que pueda parecer, Android no ofrece ninguna recomendación concreta sobre el tamaño en su guía sobre diseño de interfaces de usuario. Apelando a la lógica, lo más razonable sería adoptar un enfoque “dedocentrista” como el de Nokia y Ubuntu, mientras que las guías más específicas de Apple y Windows Phone van enfocadas no sólo a la usabilidad, sino también a mantener ciertos patrones estéticos.

En busca de un estándar


Como en tantos otros aspectos de la informática, lo ideal sería disponer de un estándar al que poder acudir en todo momento, independientemente de la tecnología utilizada. En este aspecto se pueden apuntar varios estudios que intentaron definir el promedio de tamaño y uso del dedo humano.

Por una parte, en 2003 un laboratorio de estudio del MIT se dedicó a calcular desde el punto de vista anatómico el tamaño medio de la yema de un dedo humano. El resultado es que una yema normal mide entre 10 y 14 mm, mientras que la punta del dedo mide entre 8 y 10 mm.

En 2005, un estudio de las universidades de Oulu (Finlandia) y Maryland (EEUU) más enfocado al uso de los dispositivos en sí, calculó la precisión de uso del pulgar de la mano con que se sujeta el móvil. El resultado determinó que somos hábiles a la hora de manejar elementos de un mínimo de 9,2 mm usando el móvil a una sola mano, o de 9,6 mm cuando hay que usar ambos pulgares.

En cualquier caso, como programadores y diseñadores, lo lógico es que hagamos un diseño razonable y que luego lo probemos tan exhaustivamente como sea posible para determinar algo que no se puede medir en milímetros, puntos, ni píxeles: si nuestra interfaz es fácil y cómoda de usar o no.

Guías oficiales | Guía de interfaces humanas iOS, Guía de diseño de experiencia de usuario Windows Phone, Experiencia de usuario en interfaz táctil de Nokia, Guía de diseño de interfaces dactilares Ubuntu, Guía de diseño de interfaces de usuario Android
Vía | LukeW – Touch target sizes
En Applesfera | El tamaño importa. La ventaja de las 3.5 pulgadas

Comentarios cerrados
Inicio