Módulo 1: Percepción

Lo que el usuario ve antes de pensar

Objetivos de aprendizaje: Al finalizar este módulo, serás capaz de:

Auditar la jerarquía visual de una pantalla identificando qué elementos capturan la atención antes del pensamiento consciente.
Anticipar qué zonas y elementos el usuario va a ignorar por atención selectiva.
Distinguir cuándo una interfaz es genuinamente clara de cuándo solo es estéticamente agradable: una diferencia que, como veremos, contamina la investigación si no la controlas.

Tiempo estimado: 1-1.5 horas

Hay un supuesto cómodo en el que tendemos a caer casi todos cuando diseñamos: que el usuario mira nuestra pantalla, la lee, y después decide. Como si hubiera un momento racional donde evalúa lo que le pusimos enfrente.

Pero las investigaciones nos dicen que la mente humana no funciona así. Antes de que el usuario "piense" algo sobre tu interfaz, su cerebro ya organizó, agrupó, priorizó y descartó buena parte de lo que hay en pantalla. Ese trabajo ocurre en milisegundos y sin permiso: cuando la persona toma conciencia de lo que ve, ya recibe una versión editada.

Este módulo trata de esa capa previa al pensamiento. Vamos a ver cuatro fenómenos de percepción que gobiernan el primer vistazo. Pero quiero ser clara desde el principio con algo que se repite en todo el curso: a estos fenómenos se les suele llamar "leyes", y la palabra promete más de lo que entregan. Describen tendencias fuertes y bien documentadas, no certezas mecánicas. Un buen diseñador las usa para formular hipótesis, no para cerrar una discusión.

1.1. La analogía del editor de portada

Imagina que entre el mundo y tu conciencia hay un editor de diario que nunca te consulta. Tus ojos capturan mucho más de lo que llegas a procesar; ese editor, en milisegundos, arma la portada por ti.

¿Y por qué hace ese trabajo por ti? Porque procesar de forma consciente es lento y costoso, y por los ojos entra mucha más información de la que el cerebro puede atender a la vez. El editor filtra para que puedas actuar rápido, sin quedarte paralizado ante cada pantalla. La contracara, la que nos ocupa como diseñadores, es que ese filtrado corre según las reglas del editor, no según lo que a ti te convendría que el usuario mirara.

Hace cuatro cosas, y cada una corresponde a un fenómeno que nos importa:

Decide qué va en el titular y qué queda en un recuadro chico al pie. Eso es jerarquía visual: no todos los elementos pesan igual, y el peso lo asigna la percepción antes que la lógica.
Agrupa las noticias relacionadas bajo un mismo bloque. Eso son los principios de Gestalt: el ojo une lo que está cerca o se parece, y lo lee como "una sola cosa".
Manda a la papelera lo que parece relleno o publicidad, sin leerlo. Eso es la atención selectiva (y su versión más estudiada en pantallas, la banner blindness).
Y si la portada está bien diseñada, te hace confiar en que las notas están bien escritas, aunque no las hayas leído. Ese es el efecto estético-usabilidad, el más traicionero de los cuatro.

Tú nunca negocias con este editor. Recibes la edición y crees que es el mundo.

1.2. Cómo auditar la percepción de una pantalla

Un procedimiento que puedes correr sobre cualquier pantalla en unos minutos: el sitio de tu compañía de teléfono, tu propio sitio, el de un cliente, la app que tengas abierta en este momento.

Paso 1: la prueba del entrecejo (squint test)

Entrecierra los ojos hasta que la pantalla se vuelva borrosa. Lo que sigue destacando es lo que el editor pone en portada; lo que se disuelve, no existe en el primer vistazo.

Su límite: te dice qué destaca, no si lo que destaca es lo correcto. Un botón puede ganar el squint test y ser el elemento equivocado.

Paso 2: mapear la agrupación (Gestalt)

Identifica qué elementos el ojo lee como un solo bloque por proximidad o similitud. Después pregúntate si esa agrupación visual coincide con la relación lógica real.

Su límite: los principios de Gestalt a veces compiten entre sí (proximidad versus similitud), y cuando chocan no hay una regla que diga cuál gana. La agrupación que tú ves puede no ser la que ve el usuario.

Paso 3: buscar los puntos ciegos (atención selectiva)

Marca las zonas que "parecen banner": franja superior, columnas laterales, cualquier cosa con estética publicitaria. Ahí el usuario no va a mirar, aunque pongas algo importante.

Su límite: la banner blindness se aprende, y hoy la gente ignora cualquier cosa que parezca aviso, incluido contenido legítimo. El problema no siempre es la posición: a veces es que tu elemento útil se disfrazó de publicidad.

Paso 4: separar bonito de usable (efecto estético-usabilidad)

Pregúntate honestamente si estás juzgando la pantalla como clara o solo como agradable.

Su límite, y por qué es el paso más difícil: este sesgo opera también sobre ti y sobre tus usuarios durante un test. Una interfaz bonita hace que la gente reporte que es más usable de lo que es, y que perdone o no mencione problemas reales. No lo resuelves con más autoconciencia; lo resuelves con método, y de eso trata el ejemplo que viene.

1.3. Caso práctico: "PlataClara" (fintech)

PlataClara es un neobanco ficticio (cualquier parecido con uno real es justamente el punto). Su pantalla de apertura de cuenta estaba, objetivamente, bien diseñada: tipografía cuidada, espaciado generoso, una ilustración amable. En los tests de usabilidad moderados, casi todos los participantes la describían como "clara", "limpia", "fácil". Y sin embargo, la tasa de personas que completaban la apertura era baja.

El equipo corrió la auditoría perceptual:

Squint test: al entrecerrar los ojos, el botón "Abrir cuenta" pesaba casi lo mismo que tres enlaces secundarios ("Conocer planes", "Ayuda", "Ingresar"). No había titular. El editor de portada no sabía cuál era la nota principal.
Gestalt: el sello del ente regulador estaba pegado, por proximidad, al pie de página con los términos legales. El ojo lo agrupaba con "letra chica", no con "esto es confiable".
Atención selectiva: ese mismo sello vivía en la esquina superior derecha, la zona banner por excelencia. Nadie lo veía.
Estético-usabilidad: acá estaba la trampa. El equipo casi archiva el problema, porque la evidencia cualitativa decía "está todo claro". Lo que pasaba es que la pantalla era tan agradable que los participantes reportaban una claridad que su comportamiento no confirmaba.

La corrección de jerarquía y posición es la parte fácil: un solo CTA con peso real, secundarios degradados a texto, sello fuera de la zona banner. La parte que importa para ti como investigador es la otra: el equipo dejó de creerle al "está claro" y fue a mirar el comportamiento (dónde abandonaban, en qué campo se detenían). El dato cualitativo y el cuantitativo se contradecían, y la contradicción era el hallazgo. Cruzar ambas fuentes y perseguir dónde no calzan es, hasta donde he visto, la mejor defensa contra este sesgo.

1.4. Actividad de aplicación (15 minutos)

Elige una pantalla que uses a diario (tu app de banco, una tienda online, tu herramienta de trabajo) o una que hayas diseñado tú.

Córrele el squint test y anota: ¿qué queda en portada?, ¿qué desaparece?
Identifica un elemento que tú creías prominente y que en realidad no gana el primer vistazo.
Marca una zona que "parece banner" y revisa si hay algo importante escondido ahí.

Solución sugerida: no hay una respuesta única, pero un buen resultado casi siempre incluye un hallazgo incómodo. Lo más común es darte cuenta de que tu CTA principal compite con dos o tres elementos del mismo peso, o que algo que considerabas visible (un aviso, un sello, un enlace clave) cayó en una zona de ceguera. Si terminaste la actividad sin ningún hallazgo incómodo, probablemente miraste la pantalla como su autor y no como su usuario: vuelve a intentarlo con una pantalla ajena.

1.5. Referencias

Wagemans, J., et al. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6).
Benway, J. P., & Lane, D. M. (1998). Banner blindness: Web searchers often miss "obvious" links. ITG Newsletter.
Kurosu, M., & Kashimura, K. (1995). Apparent usability vs. inherent usability: experimental analysis on the determinants of the apparent usability. CHI '95 Conference Companion.
Tractinsky, N., Katz, A. S., & Ikar, D. (2000). What is beautiful is usable. Interacting with Computers, 13(2), 127–145.
Ware, C. (2012). Information Visualization: Perception for Design (3rd ed.). Morgan Kaufmann.

Material adicional (en inglés). La psicología que está debajo de este módulo se enseña completa y gratis en Introduction to Psychology (9.00SC) del MIT: Vision I, Vision II y Attention. Es psicología, no UX: allá vas por el fundamento, no por la receta de diseño.