El diseño de interfaces móviles, acertarle a los elementos más pequeños de la pantalla es la tarea más difícil. Al igual que en el tiro con arco, donde darle al centro de la diana es el tiro que mayor precisión requiere, en las apps móviles es más probable que los usuarios fallen al tratar de presionar botones u otros elementos interactivos si estos son demasiado pequeños. (yo tengo la manos grandes y soy victima de este problema muy seguido).
Por ejemplo, es posible que los usuarios de un grupo demográfico mayor no puedan tocar fácilmente botones más pequeños en su interfaz de usuario. Cuando diseñamos botones que ocupan la mayor parte del ancho de la pantalla, será mas fácil completar con éxito la acción.
Presionar un botón es una tarea simple y si un usuario no puede presionarlo con éxito, puede comenzar a sentir que es su culpa, lo que conduce a una experiencia negativa.
Si cometemos el error de diseñar nuestros objetivos táctiles demasiado pequeños, los diseñadores tienden a creer que tienen más espacio en pantalla para trabajar. Esto puede dar como resultado la agrupación de muchos elementos pequeños, lo que significa que no solo habrá una posibilidad de que el usuario no alcance el objetivo, sino que incluso podría dar en el objetivo equivocado.
Te comparto 4 consejos a considerar en el diseño de tus interfaces móviles para no fallarle a los usuarios.
1. Los objetivos pequeños, difíciles de alcanzar
Al diseñar interfaces móviles, es mejor hacer los objetivos táctiles grandes en lugar de pequeños para que los usuarios los alcancen con mayor facilidad.
Los objetivos táctiles son áreas de la pantalla programadas para responder a la entrada del usuario, y que frecuentemente se extienden más allá de los bordes visuales del elemento. Por ejemplo, en el botón “Bandejas de entrada” de la app de correo de iOS, el área táctil real es más grande que el texto mismo, permitiendo al usuario activar la acción aun si no ve toda la etiqueta.
Tocar con precisión objetivos táctiles diminutos en la pantalla demanda un mayor esfuerzo cognitivo de los usuarios. Esto puede frustrarlos y hacer que su experiencia sea negativa si cometen errores repetidamente. Acciones sencillas como presionar un botón se vuelven complicadas, y el usuario podría incluso sentir que es su propia culpa no poder lograrlo.
En algunos casos, los usuarios intentan utilizar la punta del dedo en lugar de la yema para pulsar elementos pequeños. Pero esto usualmente no funciona bien, ya que la mayoría de los teléfonos inteligentes usan pantallas táctiles capacitivas que están optimizadas para detectar el calor de la yema de los dedos. Las uñas fallan con más frecuencia en activar estas pantallas.
- Establcer un tamaño mínimo de 48 x 48 píxeles para todos los botones y controles táctiles. Esto facilita que los usuarios puedan presionarlos con precisión sin frustración.
- Extiende los límites invisibles de los elementos táctiles más allá de los bordes visuales. De esta forma, el área responderá a la entrada del usuario aunque no vea los bordes del botón.
- Realizar pruebas con usuarios reales representativos del público objetivo. Observar cómo interactúan con la interfaz permite detectar qué elementos presentan mayor dificultad de uso y deben modificarse.
La idea central es facilitar al máximo que cualquier usuario pueda realizar acciones básicas como tocar o presionar sin errors o impedimentos. Los controles deben ser simples e intuitivos, minimizando la carga cognitiva y frustación.
Es importante pensar también en los diferentes tipos de usuarios que utilizarán la aplicación. Personas mayores o con alguna discapacidad motriz pueden tener dificultad tocando elementos pequeños. Lo recomendable es hacer los targets de al menos unos 48 CSS pixels de ancho y alto para facilitar la interacción.
2. El riesgo de agrupar demasiados elementos
Si cometemos el error de hacer objetivos táctiles muy pequeños, podemos creer erróneamente que tenemos más espacio disponible en la pantalla. Esto resulta en la agrupación de muchos botones y controles diminutos, lo que aumenta la probabilidad de que el usuario falle al presionar, o bien, que presione el elemento equivocado sin darse cuenta.
- Dejar espacio razonable entre los elementos interactivos para evitar que el usuario presione por error opciones adyacentes. El espacio en blanco permite una mejor experiencia.
- Organiza los elementos en la interfaz mediante jerarquía visual y agrupación por zonas para que quede claro a dónde pertence cada opción. Esto reduce la probabilidad de errores del usuario.
- Limitar la densidad de información por página o vista a no más de 7 elementos clave para minimizar la sobrecarga cognitiva. Una interfaz muy sobrecargada genera estrés y frustración en los usuarios.
La premisa principal es evitar aglomerar demasiados elementos en el afán de ganar espacio. Es mejor tener menos opciones espaciadas que abundante contenidos táctiles pequeños agrupados sin ton ni son. Una interfaz ordenada pero vacía es mejor a una saturada con elementos diminutos.
3. El uso del pulgar como consideración ergonómica
Otra consideración es que la mayoría de los usuarios prefieren usar el pulgar para presionar botones y desplazarse por la pantalla mientras sostienen el celular con una mano. El diseño de la app debe tomar esto en cuenta al definir el tamaño de los elementos táctiles.
- Ubicar los elementos interactivos principales, como botones de acción primarios, en la parte inferior de la interfaz para facilitar alcanzarlos con el pulgar.
- Durante tests de usabilidad, observar cómo sostienen el dispositivo los participantes y qué dedos usan para interactuar. Esto brinda información para optimizar la colocación de elementos.
Tomando en cuenta la ergonomía del pulgar al sostener el celular con una mano, podemos diseñar interfaces que minimicen el esfuerzo y fatiga del usuario durante las tareas comunes. Hay que observar los patrones reales y naturales de uso para entender dónde ubicar los controles de modo óptimo.
Pautas de Diseño de Interfaz Móvil más populares
Las recomendaciones de diseño mencionadas buscan optimizar los elementos táctiles considerando limitaciones tanto físicas como cognitivas de los usuarios. Pero para profundizar aún más y sustentar estas guías con fundamentos sólidos, a continuación se presentan detalles técnicos extraídos de estándares y directrices de referencia, así como estudios especializados.
Esta información permite entender desde una perspectiva más analítica los principios que rigen el correcto dimensionamiento y espaciado de objetivos táctiles en interfaces móviles. Conceptos como densidad de píxeles, distintas escalas de pantallas y las dimensiones promedio del dedo humano cobran relevancia aquí.
Mientras que el enfoque inicial era brindar recomendaciones con una visión más práctica y centrada en la experiencia de usuario, esta sección se orienta a lectores con interés en profundizar en los temas técnicos subyacentes. Por ejemplo, diseñadores y desarrolladores encontrarán métricas y datos específicos para tomar decisiones informadas de implementación.
Objetivos táctiles de iOS
En las Directrices de interfaz humana, Apple recomienda un tamaño de destino mínimo de 44 píxeles (px) de ancho y 44 píxeles de alto.En Transspire creemos que este es definitivamente un “tamaño mínimo” y en la práctica todavía es un área demasiado pequeña para intentar aprovecharla con éxito. Personalmente, me gusta utilizar como guía la limitación física de un dedo de adulto.
Objetivos táctiles de Android
En las Pautas de diseño de materiales de Android se sugiere que los objetivos táctiles deben tener al menos 48 x 48 dp*. Un objetivo táctil de este tamaño da como resultado un tamaño físico de aproximadamente 9 mm, independientemente del tamaño de la pantalla. El tamaño objetivo recomendado para los elementos de la pantalla táctil es de 7 a 10 mm. Puede ser apropiado utilizar objetivos táctiles más grandes para dar cabida a un espectro más amplio de usuarios, como niños con habilidades motoras en desarrollo.
*PX y DP son diferentes pero similares. DP es la resolución cuando solo se tiene en cuenta el tamaño físico de la pantalla. Cuando utilice DP, escalará su diseño a otras pantallas de tamaño similar con diferentes densidades de píxeles.
Para hacer esto más simple:
Las pantallas de los dispositivos Android vienen en muchas densidades de píxeles diferentes. Esto se mide por la cantidad de puntos por pulgada o dpi. Cuantos más píxeles o puntos quepan en un espacio determinado, determinará el nivel de nitidez que tendrá la pantalla. Como puedes imaginar, como diseñador o desarrollador, puede resultar muy difícil gestionar todas estas densidades.
Para simplificar esto nuevamente, las pantallas de los dispositivos se agrupan en grupos conocidos como densidades lógicas de píxeles.
160 ppp = MDPI (Densidad Media) = Escala 1x. (Esto también se conoce como ‘densidad de referencia’)
240 ppp = HDPI (alta densidad) = 1,5x
320 ppp = XHDPI (densidad extraalta) = 2x
480 ppp = XXHDPI (densidad extraalta) = 3x
Personalmente, después de haber pasado mucho tiempo diseñando para iOS, me resulta más fácil pensar en la escala de la densidad dada. Por ejemplo, si diseña la interfaz de usuario de su aplicación en MDPI, considérelo como una escala 1x. Entonces, en efecto, 1dp es = 1px. Si estás creando vectores, es bastante fácil escalar la interfaz de usuario de tu aplicación para que coincida con las otras densidades.
Limitaciones físicas
Un estudio del MIT Touch Lab sobre las puntas de los dedos humanos para investigar la mecánica del sentido táctil encontró que la yema del dedo humano promedio mide entre 10 y 14 mm y la punta del dedo promedio mide entre 8 y 10 mm.
La mayoría de los usuarios utilizarán un dispositivo que tenga una pantalla táctil capacitiva, lo que significa que estarán familiarizados con el uso de la yema del dedo para interactuar. Por lo tanto, es mejor apuntar a alrededor de 54 dp/px (para todos los dispositivos táctiles) como mínimo para limitar la cantidad de errores del usuario.
Toque el espaciado entre objetivos
En la mayoría de los casos, los objetivos táctiles deben estar separados por 8 dp/16 px de espacio o más para garantizar una densidad de información y una usabilidad equilibradas.
La mejor manera de saber si vamos por el camino correcto
En mi opinión, la mejor manera de saber si sus objetivos táctiles son lo suficientemente grandes y efectivos es realizar pruebas de usabilidad con usuarios reales. Cumplir con las pautas es un excelente primer paso, pero obtener comentarios reales de los usuarios es aún mejor.
Cuando todo está dicho y hecho, puedes seguir todas las pautas y aún así equivocarte, por lo que para nosotros todo se reduce a si tus usuarios realmente pueden usar tu producto de manera eficiente y efectiva. Es lo único que puede hacer para estar absolutamente seguro de que sus objetivos táctiles funcionan según lo previsto.
En resumen, no hay que temerle al espacio en blanco en la interfaz. Permitir una holgura razonable entre controles hace la experiencia más amigable y reduce la frustración de los usuarios.
¿Cuáles crees que son algunos otros aspectos importantes en el diseño de aplicaciones móviles centradas en la facilidad de uso?
