banner-blindness

vjrivmon's avatarfrom vjrivmon

Los usuarios ignoran elementos que parecen anuncios. Use cuando diseñe CTAs, notificaciones importantes, o elementos promocionales dentro de la interfaz.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 7, 2026
[UI Copy and Microcopy]

When & Why to Use This Skill

This Claude skill helps designers and developers overcome 'Banner Blindness' by applying proven UX principles and psychological insights. It provides actionable guidance on how to design Call-to-Actions (CTAs), notifications, and promotional elements so they are noticed by users rather than being instinctively ignored. By focusing on selective attention and visual hierarchy, this skill ensures critical interface elements achieve higher engagement and conversion rates.

Use Cases

  • Optimizing Call-to-Action (CTA) placement and styling to ensure they reside within the user's natural reading flow rather than looking like external ads.
  • Designing system notifications and alerts that users won't dismiss prematurely by avoiding high-contrast 'ad-like' color schemes and standard banner dimensions.
  • Integrating promotional content or new feature announcements seamlessly into the main UI to prevent them from being filtered out by the brain's selective attention.
  • Conducting design reviews to identify and fix 'anti-patterns' such as placing important information in sidebars or using flashing animations that trigger user avoidance.
  • Improving landing page conversion rates by aligning the visual presentation of key information with user expectations and cognitive efficiency.
namebanner-blindness
authorux-ui-skills
version"1.0"
categoryperception

Ceguera a Banners

Resumen

Los usuarios han aprendido a ignorar todo lo que parece un anuncio, incluso cuando contiene información relevante. Esto incluye elementos con colores brillantes, posicionados en zonas típicas de ads, o con formato de banner.

Origen

  • Autor: Jan Panero Benway y David M. Lane
  • Año: 1998
  • Estudio: Rice University
  • Contexto: Primeros estudios de usabilidad web

Fundamento Psicológico

Atención Selectiva

  • El cerebro filtra estímulos irrelevantes
  • Patrones aprendidos de "esto es publicidad"
  • Foco en tareas, no en distracciones
  • Eficiencia cognitiva

Características Ignoradas

  • Posición: Top horizontal, sidebars
  • Formato: 728x90, 300x250 (tamaños estándar de ads)
  • Visual: Colores muy brillantes, animaciones
  • Texto: "Oferta", "Gratis", "Click aquí"

Aplicación en Diseño

Evitar Formato de Ad

  • No usar tamaños estándar de banners
  • Evitar posiciones típicas de publicidad
  • Integrar con el contenido principal
  • Estilo coherente con la UI

CTAs Efectivos

  • Posición en flujo natural de lectura
  • Contexto relevante (tras explicación)
  • Diseño integrado, no destacado artificialmente
  • Copy claro y específico

Notificaciones Importantes

  • Inline con el contenido
  • Estilo subtle pero presente
  • Relacionadas con la acción actual
  • No parecer promocionales

Información Crítica

  • Nunca en formato de banner
  • Integrada en el flujo
  • Visible sin parecer ad
  • Redundancia en ubicaciones

Ejemplos

  • Gmail Promotions Tab: Separado del mail importante
  • Wikipedia Donation Banners: Ignorados por millones
  • Cookie Notices: Despedidos sin leer
  • Feature Announcements: Mejor como tooltips contextuales

Anti-patterns

  • ❌ CTAs que parecen anuncios
  • ❌ Información importante en sidebars
  • ❌ Notificaciones con colores de alerta constantes
  • ❌ Animaciones para llamar atención
  • ❌ Posición de elemento basada en "visibilidad" sin contexto

Métricas

  • Click-Through Rate: Por posición y estilo
  • Eye Tracking: Áreas ignoradas
  • Heatmaps: Zonas frías
  • A/B Testing: Formato integrado vs banner
  • Task Failure Rate: Por información ignorada

Principios Relacionados

  • [[von-restorff-effect]] - Destacar sin parecer ad
  • [[nielsen-minimalist-design]] - Menos ruido visual
  • [[change-blindness]] - Cambios inadvertidos

Referencias