Ley de proximidad: usa el espacio para mostrar qué va junto

¿Qué es la ley de proximidad?

En 1923 el psicólogo Max Wertheimer describió una serie de reglas sobre cómo percibimos patrones. Una de ellas es la proximidad: si en una fila de puntos algunos están más juntos, vemos parejas o grupos en lugar de una sola línea. Nuestro sistema visual hace esta agrupación al instante y sin esfuerzo.

Por eso la proximidad es una de las herramientas más potentes del diseño de maquetación. Solo con el espacio se crea una estructura que se entiende de un vistazo, sin líneas, cajas ni colores.

Por qué el espacio importa tanto

Los visitantes escanean la página antes de leerla. En ese primer vistazo, los huecos entre elementos les dicen cómo está organizada. Si los huecos fallan, la gente relaciona lo que no es: una etiqueta con el campo de abajo en vez del de arriba, o un precio con el producto equivocado.

Otras señales pueden imponerse a la proximidad. Los elementos dentro de una misma caja o fondo se ven agrupados aunque estén lejos: Stephen Palmer lo llamó región común. Lo que se parece también se agrupa (semejanza). Un buen diseño hace que estas señales vayan en la misma dirección.

Cómo aplicarla en una web

1. Pon cada etiqueta cerca de su campo

   La etiqueta debe estar claramente más cerca de su campo que del campo anterior. Coloca los mensajes de error justo al lado del campo al que se refieren.

2. Usa una escala de espaciado con dos niveles

   Elige un hueco pequeño dentro de cada grupo y uno mayor entre grupos, por ejemplo 8 px y 24 px. Una proporción de 1:2 o más se percibe fácilmente.

3. Deja más espacio encima de los títulos que debajo

   Un título pertenece al contenido que le sigue. Con el mismo espacio arriba y abajo, queda flotando entre dos secciones.

4. Agrupa los enlaces por temas

   Divide los pies de página largos y los megamenús en grupos pequeños con huecos claros. También ayuda con la ley de Miller.

5. Pon las acciones junto a lo que modifican

   «Editar» y «Borrar» van dentro de la tarjeta que cambian, y el botón principal, justo después del formulario que envía.

6. Mantén juntos los datos de cada producto

   Nombre, precio y datos clave deben formar un bloque compacto, bien separado del siguiente producto.

Errores habituales de proximidad

• El mismo espacio en todas partes. Si todos los huecos son iguales, nada parece agrupado y la página se siente como una lista interminable.
• Etiquetas a medio camino entre dos campos. No se sabe a qué campo pertenecen y la gente rellena el que no es.
• Bordes en lugar de espacio. Las líneas alrededor de cada bloque añaden ruido visual. Prueba primero con más espacio.
• Botones lejos de su formulario. Un botón de enviar en el extremo de una pantalla ancha se pasa por alto y cuesta más alcanzarlo (ley de Fitts).

Una prueba rápida: entorna los ojos o desenfoca la captura hasta no poder leer el texto. Los grupos que sigues viendo son los que verán tus visitantes.

Preguntas frecuentes