1. Ley de la Proximidad (Gestalt) y el escaneo en “F”
Los patrones de lectura en entornos digitales siguen la forma de “F” (de izquierda a derecha y de arriba abajo).
-
En disposición vertical (Label arriba): El ojo del usuario realiza un movimiento natural en caída. Lee la etiqueta y, sin esfuerzo, desliza la vista ligeramente hacia abajo para encontrar el campo de entrada. La distancia es mínima y la relación es inequívoca.
-
En disposición horizontal (Label al costado): El ojo debe hacer un “salto” lateral forzado. Además, si los labels tienen diferentes longitudes (ej: “Apellido” vs “Dirección de Facturación”), el campo de texto comenzará en líneas desiguales. Esto rompe el alineamiento vertical, obliga al usuario a “buscar” dónde empieza cada input y aumenta el tiempo de procesamiento (Cognitive Load).
2. El problema del “Label al costado” en móviles y responsividad
En un entorno profesional, no podemos ignorar el mobile-first.
-
Cuando el label está al costado en una pantalla pequeña, el espacio horizontal es limitado. Para que quepa, el label se trunca, se reduce su tamaño o el input se vuelve demasiado angosto.
-
Esto provoca errores de tipeo (el usuario no ve lo que escribe completo) y frustración (debe hacer zoom o girar el dispositivo). El label arriba garantiza un ancho completo (100%) para el input, maximizando la legibilidad y la precisión del dedo en táctiles.
3. La teoría del “Coste de Interacción” (Fitts’ Law)
La Ley de Fitts establece que el tiempo para alcanzar un objetivo es función de la distancia y el tamaño.
-
Si el label está arriba, el área de clic/tap es enorme y el movimiento es corto y predecible.
-
Si el label está al costado, el usuario muchas veces hace clic en el label pensando que es el input (pues están muy pegados horizontalmente), o tiene que estirar el dedo/ratón hacia la derecha. Esto genera micro-fricciones que, sumadas en un formulario de 10 campos, aumentan la tasa de abandono hasta en un 20%.
4. Accesibilidad y lectores de pantalla (WCAG)
Desde un punto de vista técnico y de cumplimiento normativo (W3C), asociar un label a un input es sencillo con el atributo for.
-
Sin embargo, en lectores de pantalla (para usuarios con discapacidad visual), la navegación suele ser lineal (de arriba a abajo).
-
Un diseño vertical respeta el orden natural del DOM: primero el contexto (Label) y luego la acción (Input). Esto permite que el usuario invidente escuche qué debe escribir antes de activar el campo, sin confundirse con labels que están “flotando” a la derecha.
5. Escalabilidad y mantenimiento del sistema de diseño
Un sistema de diseño profesional (como Material Design o Atlassian) estandariza el label arriba porque es agnóstico al idioma.
-
En español usamos palabras largas (“Confirmación de contraseña”). En alemán son aún más largas.
-
Si diseñamos con labels al costado, el ancho de la columna izquierda debe ser fijo para alinear los inputs. Cuando un label es más largo que ese ancho, se rompe o se corta.
-
Con el label arriba, el ancho del label es infinito; no importa el idioma ni la longitud, el sistema siempre se verá limpio y ordenado.