Un dedo es más grande que un puntero
Un objetivo táctil es cualquier cosa que se pulsa con el dedo: un botón, un enlace, una casilla. Si es pequeño, la gente falla, pulsa el vecino y se enfada.
Piensa en una app para comprar un billete de autobús con una sola mano, de pie y con prisa. Cada botón mal medido es un billete mal comprado.
Al terminar esta lección
Nota
Puedo dar a cada control un tamaño y una separación que se puedan pulsar con el dedo.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Objetivo táctil | lo que se pulsa con el dedo | |
| Tamaño mínimo | el menor lado que damos a un objetivo táctil | 44px |
| Separación | el espacio vacío entre dos objetivos táctiles | |
| Zona del pulgar | la parte de la pantalla que alcanza el pulgar con una mano | |
| Área pulsable | la zona que responde al toque, aunque el dibujo sea menor |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un objetivo táctil necesita unos 44 píxeles
La yema de un dedo mide más de un centímetro. Por eso una guía común pide un tamaño mínimo de unos 44 píxeles CSS de alto y de ancho. Algunas guías piden 48.
Con el dedo, además, tapas lo que pulsas. No ves si has acertado hasta que lo sueltas.
Ejemplo resuelto: qué controles pasan el mínimo
| Control | Alto | Ancho | Mínimo de 44 px |
|---|---|---|---|
| Botón Comprar billete | 48 px | 200 px | Pasa |
| Enlace Ver horarios | 28 px | 120 px | No pasa: el alto es corto |
| Casilla Ida y vuelta | 24 px | 24 px | No pasa en ninguna medida |
| Botón Cambiar origen | 44 px | 44 px | Pasa, justo en el límite |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un objetivo grande también necesita aire
Dos botones de 44 píxeles pegados siguen siendo un problema, porque un dedo toca los dos. Deja una separación de unos 8 píxeles entre objetivos.
Si el dibujo es pequeño, agranda el área pulsable con relleno. El icono puede seguir midiendo 24 píxeles y el botón, 44.
Un botón con relleno y separación
.buy {
min-height: 48px;
min-width: 48px;
padding: 0 16px;
}
.actions {
display: flex;
gap: 8px;
}El laboratorio mide los botones de su app
La app de hábitos del laboratorio tiene botones a propósito un poco pequeños. El script siguiente lee la hoja de estilos y mide cada alto y cada ancho en píxeles.
Marca con ok los que llegan a 44 y con UNDER 44 los que se quedan cortos. Sus palabras están en inglés, porque son del laboratorio. Al final cuenta cuántos tamaños no llegan.
Medir los tamaños de la hoja de estilos
docker exec jupyter python3 steps/touch.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
El pulgar alcanza mejor la parte baja
Mucha gente usa el móvil con una mano. El pulgar llega bien al centro y a la parte de abajo, y mal a la esquina de arriba contraria a la mano.
Las acciones que más se usan van abajo. Las que se pulsan sin querer, como borrar, van lejos del pulgar y piden confirmación.
Ejemplo resuelto: dónde poner cada acción
| Zona de la pantalla | Cómo llega el pulgar | Qué poner allí |
|---|---|---|
| Abajo | Fácil | Comprar, siguiente, la barra de navegación |
| Centro | Bastante fácil | Listas y contenido |
| Arriba, lejos de la mano | Difícil | Ajustes y acciones poco frecuentes |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un error frecuente
Advertencia
Mucha gente cree que basta con que el botón se vea grande. Lo que cuenta es el área que responde al toque. Un icono de 24 píxeles sin relleno sigue siendo difícil de pulsar. Agranda el área pulsable con relleno, no solo el dibujo.