Misdirection — cuando el diseño visual te lleva exactamente adonde la empresa quiere
El botón de 'Aceptar todas las cookies' es grande, colorido y está en el centro. El botón de 'Gestionar preferencias' es texto gris, pequeño, en la esquina. Ofrecen la misma elección con visibilidad opuesta. Esa asimetría no es un accidente estético — es la decisión de diseño más importante del banner.
En 30 segundos
Qué es
El uso de tamaño, color y posición para guiar la atención hacia la opción que la empresa quiere que elijas
Por qué
Hacer el botón de rechazo igual de visible que el de aceptar reduce las aceptaciones del 90% al 18% — el diseño decide el resultado
Qué hacer
Cuando hay opciones con visibilidad muy diferente, asume que la diferencia no es estética — busca la opción menos visible
Si llegaste buscando por qué los banners de cookies tienen un botón grande de aceptar y uno pequeño de rechazar: porque el diseño está optimizado para maximizar las aceptaciones. El estudio de Utz et al. (2019) mostró que hacer el botón de "rechazar no esenciales" igual de prominente que el de "aceptar" reducía las aceptaciones del 90% al 18%. El diseño no es neutro — produce un resultado.
Hay magia real: no la de los trucos de escenario, sino la de la atención humana. Los magos saben que el cerebro no puede prestar atención a todo a la vez. Dirigen la mirada del público hacia donde quieren que mire, mientras el truco ocurre en otro lugar.
El diseño digital hace exactamente lo mismo.
El mecanismo
La misdirection como dark pattern usa la jerarquía visual para dirigir la atención hacia una opción y alejarla de otra, cuando ambas opciones son igualmente válidas y el diseñador tiene interés en que el usuario elija una específica.
Los elementos visuales que crean jerarquía de atención:
⬛
Tamaño
Un elemento más grande recibe más atención. Un botón de 200×50px compite de forma diferente que un texto de 12px — aunque ofrezcan la misma elección.
🎨
Color y contraste
Los colores de alta saturación atraen la mirada antes que los de baja saturación. El botón naranja llama antes que el texto gris, independientemente de su contenido.
📍
Posición
La mitad superior y el lado izquierdo reciben más atención en culturas de lectura occidental. Lo periférico — esquinas inferiores, footers — pasa desapercibido.
🔲
Formato
Un botón con borde y relleno activa el patrón de reconocimiento de elemento interactivo. El mismo texto sin formato parece información pasiva, no una opción que se puede elegir.
La combinación de estos elementos puede producir una diferencia de atención enorme entre dos opciones que representan la misma elección para el usuario. Y esa diferencia de atención se traduce directamente en diferencia de elección.
Demo interactivaMisdirection · banner de cookies A
Este sitio usa cookies. ¿Cómo respondes?
Usamos cookies 🍪
Usamos cookies propias y de terceros para personalizar contenido, analizar el tráfico y ofrecerte publicidad relevante. Al continuar navegando aceptas su uso.
Haz tu elección para ver la versión B
¿Tu elección cambió entre el banner A y el B? Los estudios documentan tasas de aceptación del 90%+ con diseños de tipo A y del 18-30% con diseños de tipo B. La misma elección, presentada con jerarquía visual diferente, produce resultados radicalmente distintos. No porque los usuarios sean irracionales — porque la atención es un recurso limitado y el diseño decide cómo se asigna.
90%
aceptación de cookies con botón 'Aceptar' prominente y 'Rechazar' en texto gris pequeño
Utz et al. 2019
18%
aceptación cuando los dos botones tienen el mismo tamaño y visibilidad
Utz et al. 2019
Lo que acabas de vivir
El experimento usa banners de cookies porque son el ejemplo más visible y documentado. La misdirection aparece en muchos otros contextos.
Los checkboxes preactivados. En flujos de checkout, los añadidos opcionales — seguro, suscripción, donación — suelen estar preactivados con checkboxes marcados. El diseño visual hace que desactivarlos sea equivalente a hacer algo activo (click para desactivar) mientras activar los que no están marcados es también activo. La diferencia está en cuál es el default visual — y el default visual es lo que la empresa quiere vender.
El contraste cromático en opciones de pago. En páginas de precios con múltiples planes, el plan que la empresa quiere que elijas tiene mayor contraste visual, tamaño mayor, y etiquetas de "más popular" o "recomendado". Los otros planes están en un diseño más apagado. La jerarquía visual predice qué plan eligen la mayoría de usuarios de forma estadísticamente significativa.
La ubicación del opt-out en emails. El enlace de "darse de baja" en emails de marketing está diseñado sistemáticamente para ser difícil de encontrar: texto pequeño, color gris, posición en el footer, varios clics requeridos. La regulación requiere que exista — no requiere que sea prominente.
El diseño del flujo de renovación. En servicios de suscripción, el email de renovación automática suele tener un botón grande de "Ver mis beneficios" y en algún lugar menos prominente la información sobre la renovación automática. La jerarquía visual dirige hacia la confirmación de valor, no hacia la decisión de renovar o no.
👀
Cómo reconocerlo
Aceptar cookies en prácticamente todos los sitios web sin leer qué implica, principalmente porque el botón de aceptar es el más visible y accesible.
Compras online con servicios añadidos no deseados (seguros, suscripciones) que se activaron como defaults y no se desmarcaron.
Darte de baja de un email de marketing y encontrar el enlace de baja después de varios intentos de buscarlo.
En adolescentes: clicks en "aceptar" o "continuar" en interfaces sin leer, siguiendo el elemento más prominente visualmente.
Cuándo es un problema y cuándo no
Señales de que la misdirection está capturando las decisiones
Elecciones que se tomaron siguiendo el elemento más visible sin leer las alternativas
Si la decisión fue "clicar en lo más visible" más que "elegir entre opciones entendidas", la misdirection puede haber determinado la elección.
Servicios o suscripciones añadidos sin haberlos pedido
Los añadidos preactivados con diseño que deprima el opt-out producen este resultado de forma consistente.
Perspectiva relevante
La jerarquía visual tiene usos legítimos
Destacar la acción principal en una interfaz es diseño funcional. El problema es cuando la acción principal para el diseñador no coincide con la decisión que el usuario querría tomar si tuviera toda la información.
La consciencia del patrón reduce su efectividad
Saber que el elemento más prominente no es necesariamente la mejor opción introduce fricción deliberativa que atenúa el efecto de la misdirection.
Tres cosas que puedes hacer esta semana
1. Busca deliberadamente la opción menos visible antes de hacer clic en la más visible
En cualquier interfaz con múltiples opciones — banners de cookies, checkouts, formularios — antes de hacer clic en el botón prominente, localiza el texto pequeño, el enlace gris, la opción en el footer. Esa búsqueda activa de lo menos visible revierte la misdirection.
2. Lee los checkboxes en los checkouts antes de confirmar
En compras online, antes de confirmar el pago, verifica qué checkboxes están marcados. Los preactivados que no has pedido son misdirection aplicada al modelo de negocio de los añadidos opcionales.
3. Explica la jerarquía visual como alfabetización de diseño
"¿Ves que el botón grande dice 'aceptar' y el pequeño dice 'gestionar opciones'? Los diseñadores hacen eso a propósito para que la mayoría de gente haga clic en el grande sin pensar. ¿Cuál crees que sería mejor para proteger tus datos?" Es alfabetización de interfaces — una habilidad que se aprende mirando.
Habla de esto con tu hijo/a
"Cuando en internet aparece algo con botones, a veces un botón es muy grande y de colores, y otro es pequeño y gris. Los que hicieron la página lo hicieron así a propósito, para que la mayoría de gente haga clic en el grande sin pensar. Antes de hacer clic en el botón grande, siempre busca si hay otro botón más pequeño que diga algo diferente."
El botón grande no es necesariamente la mejor opción — es la opción que el diseñador quiere que elijas. Esa distinción, una vez vista, cambia la relación con cualquier interfaz digital.
El botón grande no es necesariamente la mejor opción — es la opción que el diseñador quiere que elijas. Esa distinción, una vez vista, cambia la relación con cualquier interfaz digital.
Continúa leyendo
El 40% restante explica cómo desactivar este mecanismo
Suscríbete gratis para leer el essay completo, la demo interactiva y la guía práctica.
Sin spam. GDPR compliant.
Fuentes
1.Brignull, H. — Dark Patterns (darkpatterns.org, 2010). Misdirection como dark pattern: usar el diseño visual para distraer del elemento importante.
2.Nouwens, M. et al. — Dark Patterns after the GDPR: Scraping Consent Pop-ups and Demonstrating Their Influence (2020). Análisis de banners de cookies antes y después del GDPR.
3.Utz, C. et al. — (Un)informed Consent: Studying GDPR Consent Notices in the Field (2019). Experimento de campo sobre el impacto del diseño del banner de cookies en las tasas de aceptación.
4.European Data Protection Board — Guidelines on Dark Patterns in Social Media Platforms (2022). Misdirection explícitamente listada como dark pattern prohibido.
5.Nielsen Norman Group — F-Pattern in Reading Digital Content (2006). Cómo los usuarios escanean las páginas — base para el diseño de atención en interfaces.
