El Síndrome del “Hero Image”: Por qué dejamos de pensar para empezar a decorar

Ayer subí un short donde, admito, estaba ranteando un poco (como siempre):

Ya saben, uno de esos momentos donde abres cinco páginas web seguidas y las cinco se ven idénticas: Logo a la izquierda, menú arriba, una imagen gigante que no dice nada (el famoso Hero Image) y tres columnas de texto abajo.

Es el uniforme oficial de internet.

Pero lo que realmente me hizo perder un poco la fe en la humanidad no fue el diseño repetitivo — al final del día, la pereza es humana — , sino los comentarios. Una horda de diseñadores (y gente que cree que diseña) saltó a defenderlo con el pecho inflado:

“Ay, Adrián, es que es un patrón de diseño. Es la Ley de Jakob. Es para que el usuario no se pierda.”

Primero. No. Eso no es un patrón. Es una plantilla. Y segundo, confundir una cosa con la otra es el síntoma de una enfermedad mucho más grave que tiene a nuestra industria en terapia intensiva: la muerte del pensamiento crítico.

El Patrón vs. La Receta de Cocina

Vamos a ponernos técnicos un segundo, porque me interesa que entiendan la diferencia y dejen de repetir lo que leyeron en un post de Instagram.

Un Patrón de Diseño (Design Pattern) es una solución recurrente a un problema funcional específico.

• Problema: “En móvil no tengo espacio para el menú y no es fundamental para la navegación” / Patrón: Menú de hamburguesa u affordance oculto.
• Problema: “El usuario necesita saber dónde pagar” / Patrón: Carrito de compras arriba a la derecha.

Un patrón resuelve un comportamiento.

Lo que al parece varios defienden es una Plantilla (Template). Es una distribución visual. No resuelve nada funcional; solo resuelve tu miedo a la hoja en blanco.

Poner una foto gigante de gente sonriendo en una oficina (que claramente es de stock) no ayuda al usuario a “no perderse”. Al contrario, a menudo es un muro de 800 píxeles que lo separa de lo que vino a hacer.

El Culto a la Carga: Imitar sin Entender

Hay un concepto antropológico fascinante llamado “Cargo Cult” (Culto a la Carga): En la Segunda Guerra Mundial, tribus en islas del Pacífico veían a los soldados americanos mover banderas en una pista y, mágicamente, aterrizaban aviones con comida. Cuando la guerra terminó y los soldados se fueron, los isleños empezaron a imitar los movimientos de las banderas, esperando que los aviones volvieran a caer del cielo.

Hacían los movimientos correctos, pero no entendían la mecánica detrás.

En UX estamos llenos de isleños moviendo banderas. Vemos que Airbnb o Apple usan un Hero limpio. ¿Y qué hacemos? Copiamos el Hero. Pensamos que si nuestro sitio se ve como el de Apple, va a funcionar (y convertir) como el de Apple.

Esto es el Teatro de la Innovación en su máxima expresión. Diseñamos para que se vea “profesional” en el dribbble shot, no para que funcione en la vida real.

Marketing vs. Producto: La diferencia entre “Descubrir” y “Hacer”

En el video completo (que pueden ver aquí si quieren la versión sin censura)

- YouTube

hice un experimento en vivo comparando dos tipos de sitios:

• El sitio de Marketing (Ej. Ford): Entras y te recibe una foto gigante de una camioneta y un botón que dice “Descubre más”.
• Realidad: Nadie entra a una web por accidente a “descubrir”. Si yo entro a Ford.com es porque ya quiero ver precios, configurar mi modelo o buscar un distribuidor. El “Hero Image” y el botón de “Descubre” son obstáculos de vanidad.
• El sitio de Producto (Ej. Nubank o Mailchimp): Entras y lo primero que ves es un campo de texto: “Pon tu correo para empezar”.
• Realidad: Ellos entienden que tú vienes a hacer algo. No te bloquean con decoración; te abren la puerta.

El problema del layout “Hero + 3 Bullets” es que asume que todos somos Ford. Asume que el usuario necesita ser “inspirado” antes de actuar. Y déjenme decirles algo doloroso: a la mayoría de sus usuarios no les importa su “misión y visión”, solo quieren pagar el recibo de la luz o comprar los boletos e irse.

Deja de ser Decorador, empieza a ser Arquitecto

Entonces, ¿cómo salimos de este hoyo? ¿Cómo dejamos de ser “ensambladores de pantallas” para convertirnos en Consultores que Educan?

La próxima vez que tengas que diseñar una landing page, haz esto antes de abrir Figma:

1. Auditoría de Intención: Pregúntate: “¿Qué viene a hacer el usuario aquí?”. Si la respuesta es “Loguearse”, el Hero Image estorba. Si la respuesta es “Entender qué somos”, quizás el Hero sirva, pero asegúrate de que el texto diga algo más que “Soluciones integrales para un mundo digital” (por favor, basta de eso).
2. Cuestiona el Estándar: La Ley de Jakob dice que los usuarios esperan que tu sitio funcione como los demás, no que se vea idéntico a los demás. Cumple con los modelos mentales (dónde está el buscador, cómo funciona el scroll), pero no seas un clon visual.
3. Mata la Vanidad: Si un elemento está ahí solo “porque se ve vacío sin él”, bórralo. El espacio en blanco es mejor que el contenido basura.

Diseñar no es rellenar cajas en una retícula. Diseñar es tener los pantalones para decirle al cliente (o a tu jefe): “No necesitamos una foto gigante aquí. Necesitamos un botón que funcione”.

Eso es Empatía Estratégica. Lo demás son solo dibujos bonitos.