UX móvil: zona del pulgar, gestos y objetivos táctiles que se pulsan sin pensar

Una mañana, en la terraza de una cafetería de Estepona, me fijé en la mesa de al lado. Una señora intentaba pagar el aparcamiento desde una app con el móvil en una mano y la correa del perro en la otra. El botón de «Confirmar» estaba arriba a la derecha. Probó a estirar el pulgar, recolocó el teléfono, casi se le cae, y al final soltó la correa para usar las dos manos. El perro, encantado.

Esa escena resume lo que significa diseñar para el móvil. No diseñamos para un cursor preciso que llega a cualquier esquina, sino para un dedo grande y blando, con un alcance limitado, en manos de alguien que casi siempre está haciendo otra cosa a la vez. En el estudio, cada vez que revisamos una pantalla móvil, nos hacemos la misma pregunta: ¿se puede usar con una mano y con prisa?

En esta guía repasamos cómo sujeta la gente el teléfono, qué zonas alcanza el pulgar, dónde colocar cada tipo de acción, qué tamaño necesita un objetivo táctil según las normas y guías de referencia, y cómo usar los gestos para que ayuden sin esconder nada.

01Cómo sostenemos el móvil de verdad

La referencia clásica es el estudio de Steven Hoober publicado en UXmatters en 2013. Observó a más de 1.300 personas usando el móvil en la calle, en aeropuertos y en el transporte. El 49 % lo usaba con una sola mano, el 36 % lo sostenía con una mano y tocaba con el índice o el pulgar de la otra, y el 15 % lo agarraba con las dos manos y usaba ambos pulgares.

Hay dos ideas de aquel trabajo que siguen muy vigentes. La primera es que la gente cambia de postura constantemente, según la tarea y la situación: con una mano para mirar, con dos para escribir. La segunda, de investigaciones posteriores del propio Hoober, es que las personas tienden a mirar y a tocar con más precisión en el centro de la pantalla, y que en los bordes los toques son menos precisos.

Las pantallas han crecido mucho desde entonces, y eso refuerza la conclusión: diseñamos para que lo esencial se pueda hacer con una mano, y aceptamos que lo secundario pida un pequeño esfuerzo.

02La zona del pulgar, explicada

Josh Clark popularizó en su libro Designing for Touch el mapa de la zona del pulgar. Si sostienes el móvil con la mano derecha, el pulgar barre con comodidad un abanico en la parte inferior y central de la pantalla. Más arriba y en la esquina opuesta, el alcance se complica.

Se suelen distinguir tres áreas:

No todo lo difícil es malo

La zona difícil tiene su utilidad. Una acción destructiva, como «Eliminar cuenta», está bien lejos del pulgar, donde no se pulsa por accidente. Y la parte superior es perfecta para lo que se lee pero no se toca: el título de la pantalla, el estado de un pedido, el saldo.

Recuerda también a las personas zurdas y a quien cambia de mano: los diseños más robustos colocan las acciones principales en el centro inferior, que es cómodo para ambas manos, en lugar de pegadas a una esquina.

03Dónde colocar cada acción en una pantalla móvil

De la zona del pulgar se derivan varios patrones que hoy son estándar, y por buenas razones.

• →Navegación inferior. Una barra con tres a cinco destinos principales, siempre visible y al alcance. Hablamos de sus variantes en la guía de navegación en apps.
• →Botón principal abajo. En flujos de compra, reserva o formulario, el botón de continuar anclado a la parte inferior se pulsa sin estirar el dedo.
• →Hojas inferiores en lugar de menús superiores. Los paneles que suben desde abajo, con opciones o filtros, dejan cada elección a un par de centímetros del pulgar.
• →Búsqueda abajo. Varias apps y navegadores móviles han movido la barra de búsqueda o de direcciones a la parte inferior precisamente por alcance.
• →Contenido arriba, acciones abajo. La regla general: lo que se mira, arriba; lo que se toca, abajo.

04Objetivos táctiles: tamaños que se aciertan

Un objetivo táctil es cualquier elemento que se puede tocar: botón, enlace, casilla, icono. Su tamaño y su separación deciden si se acierta a la primera o si toca repetir. Y aquí sí hay cifras de referencia claras.

En nuestros proyectos trabajamos con 44-48 píxeles para cualquier acción relevante y dejamos los 24 como suelo para enlaces dentro de texto o controles muy secundarios. Este tamaño se refiere al área que responde al toque, no necesariamente al dibujo: un icono de 24 píxeles puede tener un área táctil de 44 a su alrededor sin que se vea más grande.

La ley de Fitts, que repasamos en leyes de UX, lo explica bien: cuanto más grande y más cerca está un objetivo, más rápido y con menos errores se alcanza. En móvil, «cerca» significa cerca del pulgar.

Cómo se traduce en CSS

Unas pocas reglas cubren los casos más habituales: tamaño mínimo para los controles, áreas táctiles ampliadas para iconos y respeto a las zonas seguras de la pantalla, como la barra de inicio del iPhone.

:root {
  --touch-min: 44px;
}
button,
.icon-button,
.nav-link {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}
/* Barra inferior que respeta la zona segura del dispositivo */
.bottom-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
/* Pantallas que ocupan el alto visible real, con o sin barras del navegador */
.full-screen-sheet {
  min-height: 100dvh;
}

Para que env(safe-area-inset-bottom) funcione en iOS, la etiqueta viewport tiene que incluir viewport-fit=cover. Y la unidad dvh evita el clásico salto de contenido cuando la barra del navegador móvil aparece y desaparece.

05Gestos: atajos que ayudan, sin esconder nada

Deslizar para borrar, pellizcar para ampliar, arrastrar para reordenar, tirar hacia abajo para actualizar. Los gestos hacen que una app se sienta ágil y natural, y bien usados ahorran muchos toques. Su punto débil es que son invisibles: nadie sabe que una fila se puede deslizar hasta que lo prueba o alguien se lo cuenta.

Por eso aplicamos tres criterios:

1. 01Cada gesto es un atajo, no el único camino. Si deslizar una fila la archiva, también hay un botón o un menú que hace lo mismo. WCAG 2.2 lo recoge en dos criterios: el 2.5.1 pide alternativa de un solo punto para gestos complejos y el 2.5.7 pide alternativa a las acciones de arrastrar.
2. 02Gestos que la gente ya conoce. Pellizcar para ampliar una foto, deslizar en un carrusel o tirar para actualizar están aprendidos. Inventar gestos nuevos obliga a enseñarlos y rara vez compensa.
3. 03Pistas visuales. Un borde de tarjeta que asoma indica que hay más contenido al deslizar; un asa en la parte superior de una hoja indica que se puede arrastrar.

Respeta los gestos del sistema

iOS y Android reservan los bordes de la pantalla para sus propios gestos: deslizar desde el borde izquierdo para volver, desde abajo para ir al inicio o cambiar de app. Si tu interfaz coloca un carrusel que arranca justo en el borde o un control pegado a la barra de inicio, ambos gestos compiten y la persona termina saliendo de la app sin querer. Deja un margen razonable en los bordes y respeta las zonas seguras.

06Más allá del pulgar: contexto, teclado y movimiento

El alcance es la parte más visible de la UX móvil, pero no la única. Hay otros detalles que marcan la diferencia en el día a día.

• →El teclado adecuado. Un campo de teléfono con type="tel" abre el teclado numérico; uno de correo con type="email" muestra la arroba. Pequeño gesto, mucha comodidad.
• →El teclado no tapa lo importante. Cuando aparece, el botón de enviar y el campo activo tienen que seguir visibles.
• →Movimiento y vibración con mesura. Una vibración breve al confirmar una acción ayuda; usarla para todo cansa. Y quien activa la reducción de movimiento en su sistema agradece que la interfaz lo respete.
• →Luz y contraste. El móvil se usa a pleno sol. Un contraste mínimo de 4,5:1 para el texto, como pide WCAG, es el punto de partida, no el techo.
• →Interrupciones. El móvil se usa a ratos. Guardar el progreso de un formulario o de un carrito permite retomar la tarea donde se dejó.

07Checklist para revisar una pantalla móvil en diez minutos

Cuando auditamos una web o una app desde el móvil, recorremos esta lista con el teléfono en una mano. Sirve para cualquier pantalla y no necesita herramientas:

1. 01¿La acción principal está en el tercio inferior y se alcanza con el pulgar de cualquiera de las dos manos?
2. 02¿Todos los botones y enlaces relevantes miden al menos 44 píxeles de alto, y ninguno baja de 24?
3. 03¿Hay espacio suficiente entre objetivos vecinos para no pulsar el de al lado?
4. 04¿Las acciones destructivas están lejos de las frecuentes y piden confirmación?
5. 05¿Cada gesto tiene su alternativa visible?
6. 06¿Nada importante queda pegado a los bordes ni bajo la barra de inicio?
7. 07¿Cada campo abre el teclado adecuado y el botón de enviar sigue visible con el teclado abierto?
8. 08¿El texto se lee bien a pleno sol y con el brillo bajo?
9. 09¿La tarea se puede retomar si llega una llamada a mitad?

Si la respuesta es sí en todo, la pantalla está lista para la vida real. Si no, la lista te dice exactamente por dónde empezar.

08Diseñar para la mano, no para la pantalla

Cuando diseñamos en el ordenador, vemos la pantalla del móvil entera, plana y quieta, y todo parece alcanzable. La realidad es una mano, un pulgar y una persona caminando, esperando el autobús o con un niño en brazos. Diseñar teniendo eso presente cambia muchas decisiones: dónde va cada botón, qué tamaño tiene, qué se hace con un gesto y qué con un toque.

En SIMA probamos cada pantalla en móviles reales y con una mano antes de darla por buena, tanto en webs como en las apps que diseñamos y desarrollamos dentro de nuestros proyectos de desarrollo web y apps. Si tu web o tu app se usa sobre todo desde el móvil y quieres que se sienta cómoda en la mano, escríbenos y la revisamos juntos.