Tamaños de los objetos táctiles en una aplicación móvil

| Última modificación: 18 de octubre de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Los tamaños de los objetos táctiles en una aplicación móvil son muy importantes porque intervienen directamente en las acciones que los usuarios pueden realizar, es decir, en la interfaz de usuario, y afectan, positiva o negativamente, a la UX que quieres ofrecer. En este post, te explicaremos cuáles son las recomendaciones para hacerlo.

Tamaños recomendados para los objetos táctiles

Los tamaños de los objetos táctiles en una aplicación móvil representan la posible interacción que el usuario tendrá con el dispositivo. Por ello, es necesario pensar en los botones o en las zonas aplicables que el usuario va a tener a su disposición, es decir, las zonas que tienen elementos que permitan realizar una acción.

Estos son muy significativos en la interfaz que le presentes al usuario, porque afectan a la percepción e interacción que la persona tiene con tu aplicación. Por esto, debes recordar que lo más importante en tu app es priorizar el contenido más relevante para el usuario, ya que es lo que determina si esta tiene una buena o una mala UX.

Al buscar información sobre cuáles son los tamaños recomendados para que el usuario no tenga inconvenientes, podemos encontrarnos con la problemática de que no hay una medida establecida de forma unánime, puesto que los grandes desarrolladores como Apple, Google y Microsoft difieren entre sí.

Sin embargo, podemos decir que el mínimo recomendado para los tamaños de los objetos táctiles en una aplicación móvil es de 44px. Aun así, muchas veces nos encontramos con que es necesario añadir tamaños más pequeños y, de hecho, podemos identificar aplicaciones que ponen elementos muy pequeños de forma intencional.

Por ejemplo, Instagram es una aplicación que no siempre se guía por los tamaños recomendados, sino que suele usar elementos pequeños que, en ocasiones, pueden resultar conflictivos para el usuario. Un caso específico es cuando aparece una foto y esta tiene varias opciones táctiles con información relevante para el usuario, como los me gusta, los comentarios, la opción de compartir, las etiquetas o la ubicación. La persona que usa la aplicación puede llegar a frustrarse, dado que todo los elementos son tan pequeños que no sabe dónde está clicando.

¿Qué pasa con esto? En un ordenador el problema es menor porque contamos con un ratón y el cursor es mucho más exacto, pero en una pantalla táctil la complejidad está en que es necesario usar el dedo humano, muchos menos preciso.

Cuando decimos que el tamaño mínimo recomendado es de 44px, hacemos referencia a la toma de acción del objeto y el espacio que este tenga. De esta forma, le facilitamos mucho al usuario la tarea de acceder a un botón o elemento.

Píxeles independientes de la densidad

Existen varios estilos de pantallas que difieren en la densidad. Cuanto más alta sea la densidad, más píxeles se tienen por pulgada. Este aspecto interviene en las dimensiones de los elementos incluidos en la interfaz de usuario.

Para que esto no suceda, puedes aplicar los píxeles independientes de la densidad, tema que está muy bien documentado por Google.

🔴 ¿Quieres entrar de lleno al Desarrollo Mobile? 🔴

Descubre el Desarrollo de Apps Móviles Full Stack Bootcamp de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp en Desarrollo de Apps Móviles por una semana

Para esto, debes tener en cuenta el número de píxeles que puedes encontrar en una pulgada, nombrados densidad de píxeles (dp). En el caso de Android, un dp equivale a un píxel físico de una pantalla que tiene una densidad de 160.

La recomendación de Google para conseguir este número es usar una ecuación:

  • Densidad de pantalla = Ancho de pantalla en píxeles / Ancho de pantalla en pulgadas

Después, puedes calcular el dp de esta forma:

  • dp = (ancho en px * 160) / densidad de pantalla

Este tipo de píxeles te ayudarán, sin importar la densidad de la pantalla, a que los elementos que agregues en la aplicación móvil tengan uniformidad.

En caso de que te interese aprender más sobre los aspectos que debes tener en cuenta para conseguir una UI práctica, te invitamos a leer visitar el post Guías, espacios y proporciones en el diseño de aplicaciones, en donde te hablamos de algunos elementos imprescindibles al diseñar una app.

¿Por dónde seguir?

Ahora que sabes más sobre los tamaños de los objetos táctiles en una aplicación móvil, seguro que deseas aprender más sobre otros elementos imprescindibles en el diseño. Para ello, no dudes en inscribirte en nuestro Desarrollo de Apps Móviles Full Stack Bootcamp. En menos de un año, dominarás diferentes herramientas para diseñar y lograrás aplicar las UI en el diseño de aplicaciones.

Jose Luis Bustos
Jose Luis Bustos

Lead Software Architect & Coordinador del Bootcamp en Desarrollo de Apps Móviles iOS & Android.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo de apps móviles ios & Android

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado