Diseño de interfaces móviles

El estudio de Steven Hoober sobre uso de dispositivos móviles reveló que el 49 % de los usuarios sostienen el teléfono con una mano y usan el pulgar para interactuar. Esto define tres zonas en la pantalla: la zona natural (fácil de alcanzar), la zona de estiramiento (alcanzable con esfuerzo) y la zona difícil (casi inaccesible sin cambiar el agarre).

Las acciones principales deben ubicarse en la zona natural: la mitad inferior de la pantalla, especialmente la zona central-inferior. Las acciones secundarias o menos frecuentes pueden ubicarse en la zona superior. Este principio es la razón por la que la bottom navigation se ha convertido en el estándar: coloca las acciones más importantes donde el pulgar llega con facilidad.

Un error frecuente en diseño móvil es crear botones, iconos y enlaces demasiado pequeños. El dedo pulgar tiene un área de contacto de aproximadamente 10×10 mm, lo que equivale a unos 44×44 px en densidad estándar. Apple define 44×44 pt como tamaño mínimo en sus Human Interface Guidelines; Google recomienda 48×48 dp en Material Design.

El tamaño mínimo no es solo el tamaño visible del icono: incluye el área táctil (tap target). Un icono de 24×24 px puede tener un tap target de 48×48 px con padding invisible. Lo crítico es que las áreas táctiles de elementos adyacentes no se solapen, para evitar toques accidentales.

Los gestos (swipe, pinch, long press, pull to refresh) son una herramienta poderosa para crear interacciones fluidas en móvil. Sin embargo, tienen un problema fundamental: no son visibles. No hay affordance visual que indique que un elemento se puede deslizar, a diferencia de un botón que se ve claramente como algo que se puede pulsar.

La regla es que los gestos deben ser atajos, no la única forma de realizar una acción. El swipe para eliminar un email en Gmail funciona porque también hay un botón de eliminar visible. El pinch para hacer zoom funciona porque también hay botones +/−. Si la única forma de acceder a una función es un gesto, los usuarios menos avanzados nunca la descubrirán.

Los bottom sheets son paneles que se deslizan desde la parte inferior de la pantalla para mostrar opciones, formularios o contenido contextual sin navegar a una nueva página. Son el equivalente móvil de los modales en desktop, pero mejor adaptados a la ergonomía táctil.

Google Maps popularizó este patrón: al seleccionar un punto de interés, un bottom sheet muestra detalles que el usuario puede expandir arrastrando hacia arriba o cerrar arrastrando hacia abajo. Los bottom sheets son especialmente útiles para acciones contextuales (compartir, filtrar, opciones de un elemento) porque mantienen el contexto visual de la pantalla principal.

iOS y Android tienen convenciones de diseño diferentes que los usuarios de cada plataforma han interiorizado. Ignorarlas genera fricción: un usuario de iPhone espera botones de acción en la esquina superior derecha y navegación de vuelta con gesto de swipe desde el borde izquierdo; un usuario de Android espera un FAB (floating action button) y navegación con el botón back del sistema.

Esto no significa diseñar dos interfaces completamente distintas. El contenido, la estructura y la jerarquía visual pueden ser los mismos. Lo que cambia son los patrones de interacción, la posición de elementos clave y los componentes nativos (UIKit en iOS, Material Design en Android).

En móvil, la percepción de velocidad es tan importante como la velocidad real. Un skeleton loader que aparece en 100 ms da la impresión de que la app responde instantáneamente, aunque el contenido tarde 2 segundos en cargar. Una transición animada entre pantallas enmascara el tiempo de carga y mantiene la sensación de fluidez.

Las técnicas clave de rendimiento percibido son: skeleton screens en lugar de spinners (comunican la estructura del contenido que viene), optimistic UI (mostrar el resultado de la acción antes de recibir confirmación del servidor) y transiciones que conectan visualmente la pantalla actual con la siguiente.