Ergonomia Mobile

El 49% de los usuarios sostiene el telefono con una mano, el 36% lo apoya en la otra mano (cuna), y solo el 15% usa dos manos simultaneamente. Diseñar para el pulgar como dispositivo de entrada principal garantiza que la mayoría de interacciones sean naturales y sin esfuerzo.

El tercio inferior central de la pantalla es la zona verde (96% de precision). Los laterales del tercio medio son amarillos (requieren ajuste de agarre). Las esquinas superiores son rojas (alcance extremo, 60% de errores). Ubicar acciones criticas siempre en zona verde.

La navegacion principal en la parte superior obliga al pulgar a estirarse hacia la zona roja en cada cambio de seccion. Moverla a una barra inferior fija la coloca en zona verde, reduciendo el esfuerzo y los errores de toque en hasta un 40% segun estudios de Google.

El 67% de los usuarios usa el pulgar derecho como principal; el 33% usa el izquierdo. La zona de alcance confortable del pulgar derecho y el izquierdo se solapan en el centro inferior. Centrar los elementos interactivos principales maximiza la cobertura para ambos grupos sin sacrificar a ninguno.

En telefonos de menos de 6 pulgadas el pulgar alcanza el 75% de la pantalla comodamente. En telefonos de 6.5" o mas ese alcance cae al 36%. Con pantallas grandes es mas critico aun colocar acciones principales en la zona inferior y evitar el tercio superior para CTAs.

Los telefonos modernos con relacion de aspecto 19.5:9 o mayor son mas altos pero no mas anchos. El ancho extra no ayuda al pulgar; la altura adicional extiende la zona roja hacia arriba. Cada centimetro extra de altura empuja contenido vital fuera del alcance natural del pulgar.

Los usuarios no mantienen el mismo agarre durante toda la sesion. Al navegar usan una mano; al escribir texto cambian a dos pulgares; al comprar usan la cuna con el indice para mayor precision. Los cambios de agarre son costosos (250ms promedio). Agrupar acciones similares minimiza los cambios.

Los usuarios moviles no estan sentados en un escritorio. El 60% usa el telefono caminando (atencion dividida, una mano), el 40% acostado (telefono sobre la cara, dos pulgares o indice), el 20% cocinando o comiendo (manos sucias, taps grandes). Disenar para la situacion mas exigente primero.

En modo retrato el teclado ocupa el 45% de la pantalla; en landscape asciende al 55-70%, dejando una franja minima de contenido visible. Detecta la orientacion con @media (orientation: landscape) y el teclado activo escuchando window.visualViewport.resize para ocultar elementos no esenciales (cabeceras, listas de mensajes largas) y garantizar que el campo de texto activo y el CTA queden siempre por encima del teclado. Sin esta adaptacion, el campo puede quedar completamente oculto y el usuario no puede enviar.

El boton de accion flotante (FAB) es la accion primaria de una pantalla. Debe estar en la esquina inferior derecha (zona verde para el 67% de pulgares derechos). Colocar el FAB en la esquina superior derecha o izquierda es el error mas comun, obliga a un estiramiento de pulgar innecesario.

Formularios con multiples campos juntos requieren cambio de agarre para rellenar campos superiores. Dividir en un campo por paso y anclar el CTA de forma sticky sobre el teclado mantiene todo en zona verde sin obligar al usuario a reposicionar el telefono. Esto reduce abandonos de formulario hasta un 30%.

La zona de alcance comodo del pulgar derecho y del pulgar izquierdo se solapan en el tercio inferior central de la pantalla. Los elementos de alta frecuencia de uso (busqueda, navegacion principal, CTA) deben ubicarse en este solapamiento para maximizar la accesibilidad sin importar que mano usa el usuario.

El icono hamburguesa en la esquina superior izquierda es el elemento de navegacion mas usado pero ergonomicamente el peor: requiere estiramiento hasta la esquina de la zona roja. Los estudios muestran que las tab bars inferiores generan un 50% mas de interacciones de navegacion que los hamburguesas superiores.

Google Material Design establece 48dp como minimo para targets tactiles; Apple HIG recomienda 44pt. En la practica, 56dp reduce los errores de toque al 2% frente al 12% de los targets de 24dp. Para elementos criticos (CTAs, nav) usar 56-64dp de area de toque aunque el elemento visual sea mas pequeno.

El pulgar no se mueve en linea recta: sigue un arco desde la esquina inferior del telefono hacia el centro superior. Los gestos de deslizamiento deben seguir este arco natural. Swipes horizontales son mas faciles que verticales para el pulgar. Los gestos hacia arriba son mas naturales que hacia abajo en pantallas grandes.