La disposición habla antes que tú

En pocas palabras: Los principios de la Gestalt hacen que los usuarios lean la estructura antes que el contenido. El espaciado, la alineación, la semejanza y la agrupación ya les dicen qué va junto y qué importa más, antes de leer una palabra.

Antes de que nadie lea una palabra, el cerebro ya ha empezado a organizar la pantalla. Ya está decidiendo qué va junto, qué importa más y qué mirar primero. No por las etiquetas, los textos ni la elección tipográfica. Por dónde están las cosas, qué distancia hay entre ellas y si parecen pertenecer al mismo conjunto. La estructura empieza a formarse antes de que tu explicación tenga una oportunidad.

Muchos diseñadores siguen tratando la composición como una preferencia visual, como si las cosas estuvieran cerca porque queda bien y no porque la proximidad le dice al usuario que pertenecen al mismo grupo. Se rompen patrones sin que nadie advierta siquiera que había uno. La composición acaba haciendo un trabajo que nadie le asignó explícitamente y enviando pistas que nadie pretendía enviar.

He visto a diseñadores dedicar horas a corregir textos mientras el espaciado ya contaba la historia equivocada.

El cerebro agrupa primero

A principios del siglo XX, un grupo de psicólogos alemanes documentó algo que parece obvio una vez que lo ves: la percepción no es pasiva. La mente ya está agrupando, separando y ordenando por importancia antes de que intervenga la atención consciente.

Max Wertheimer publicó el trabajo fundacional en 1923. Observaba algo sencillo: cómo percibe la gente las agrupaciones de puntos. No veía primero puntos individuales para después razonar hasta llegar a un patrón. Veía grupos y relaciones de inmediato. El espacio entre los puntos cambiaba cuáles parecían relacionados. Las formas coincidentes reunían elementos en conjuntos. Nada de esto necesitaba instrucciones. Simplemente ocurría. Lo que planteaba Wertheimer era que estas agrupaciones no eran interpretaciones deliberadas. Formaban parte de la propia percepción, y la gente no podía ignorarlas sin más aunque supiera lo que estaba ocurriendo.

Kurt Koffka lo expresó así:

El todo es distinto de la suma de sus partes.

— Kurt Koffka · Traducción del inglés

No mejor. Solo diferente. La composición percibida no es lo mismo que la composición ensamblada. Lo que se agrupa se procesa junto. Lo que queda separado se procesa aparte. Ningún diseñador inventó esto. Es sencillamente cómo organiza la gente lo que ve. Si lo entiendes, puedes trabajar con ello. Si no, las pistas siguen ahí. Solo que las envías a ciegas.

El espaciado dice qué encaja

En el diseño de interfaces, la proximidad suele ser lo primero que se percibe. Los elementos cercanos se perciben como un grupo, y eso ocurre antes de que el usuario haya decidido nada conscientemente.

Coloca una etiqueta y un campo cerca y los usuarios los leerán como una unidad. Sepáralos y la relación se volverá menos clara. Cuando el espaciado de un formulario es inconsistente, los usuarios tienen que averiguar «qué etiqueta pertenece a qué campo» en cada fila. El contenido no ha cambiado, pero el esfuerzo sí. Has añadido fricción y solo cambiaste un poco el margen. Un formulario de facturación desordenado puede parecer roto antes de que un solo campo sea técnicamente incorrecto.

La semejanza acompaña a la proximidad. Los elementos que comparten color, forma, tamaño o peso parecen miembros de la misma categoría. Por eso un estilo consistente de botones importa más allá de la estética. Cuando todas las acciones principales reciben el mismo tratamiento, los usuarios aprenden cómo se señala esa acción en tu producto. Rompe el patrón una vez, con otro color en esta ventana modal o un tamaño distinto en aquella pantalla, y el patrón aprendido también se rompe. Los usuarios dejan de tener claro a qué dirigirse primero. La pausa que sigue suele venir de la inconsistencia, no del texto.

La continuidad, el cierre y el destino común también importan. La continuidad ayuda a explicar por qué las alineaciones casi logradas pueden resultar peores que las rupturas deliberadas. El ojo sigue una línea hasta que algo la interrumpe. El cierre ayuda a explicar por qué un botón casi alineado puede consumir más atención que uno claramente fuera del eje: el cerebro intenta encajarlo y detecta el fallo. El destino común explica por qué la animación puede cambiar la agrupación. Los elementos que se mueven juntos se tratan como una unidad, tanto si lo pretendías como si no.

Google lo muestra bien

La página de búsqueda de Google es útil porque permite ver claramente estos efectos.

Cada resultado consta de tres elementos: título, URL y fragmento de texto. El poco espacio vertical entre ellos agrupa los tres en una unidad percibida antes de que la persona lea nada. El hueco entre resultados separa cada unidad de la siguiente. Los usuarios no se detienen a decidir «este título va con este fragmento». La proximidad ya se ocupa de eso. Simplemente leen. Esa es la parte que muchas revisiones de diseño pasan por alto. La gente ya lee la agrupación antes de leer las palabras.

Durante años, los estudios de seguimiento ocular de esa página sugirieron que los usuarios podían distinguir anuncios de resultados orgánicos más rápido de lo que podían leer la pequeña etiqueta que los identificaba como anuncios. La etiqueta seguía importando, pero la proximidad y la semejanza ya habían hecho parte del trabajo. El patrón visual de un grupo de anuncios difería del de un grupo orgánico, y la gente captaba esa diferencia antes de poder explicarla con claridad.

El borde izquierdo de la página hace algo más silencioso. Los títulos se alinean en un eje vertical consistente. Cuando el ojo encuentra ese eje en el primer resultado, lo sigue hacia abajo sin tener que buscar cada resultado siguiente. Quita la alineación y los usuarios tendrán que localizar cada resultado por separado en vez de llegar a él con fluidez. Nada en la página necesita explicarlo. La composición ya lo hizo.

Comprueba primero la estructura

Antes de lanzar una pantalla, haz una pregunta: ¿qué dice esta composición antes de que nadie lea nada? No preguntes qué aspecto tiene. Pregunta qué dice. ¿Qué elementos van juntos? ¿Qué viene primero? ¿Adónde va después la mirada? Tapa el texto y pregunta a alguien de qué trata la página, qué cosas se conectan y qué hacer primero. Si no puede responder solo a partir de la estructura visual, más contenido no lo arreglará. La agrupación falla. Todavía me descubro pasando esto por alto cuando una pantalla parece pulida.

Wolfgang Köhler, Max Wertheimer y Kurt Koffka intentaban entender la percepción. Acabaron describiendo algo con lo que los diseñadores trabajan cada día. A mí también se me ha escapado en mi propio trabajo. Una pantalla parecía limpia, así que supuse que era clara.

La pantalla que lanzas no es exactamente la que ven los usuarios. Lo que ven es la estructura que su cerebro construyó a partir de ella. Puedes guiar esa estructura, pero no puedes optar por que no exista.