Notification Badge

El badge de notificación tiene dos modos con semántica distinta: el dot comunica "hay algo nuevo" sin cuantificar, y el badge numérico comunica "hay N ítems pendientes que deberían influir en cuánta atención le das ahora." Usar número donde el volumen cambia la decisión del usuario (inbox con 3 mensajes vs. 47 mensajes no son equivalentes), y dot donde el número no aporta información accionable. Mostrar "0" es el antipatrón más frecuente: si no hay nada pendiente, el badge no debe existir. Un badge vacío erosiona la confianza en el sistema porque sugiere un bug antes que un estado.

Un badge numérico que crece sin límite se deforma visualmente y pierde legibilidad; "1034" en un badge no solo es difícil de leer, sino que añade tensión visual innecesaria a la interfaz. El formato de overflow debe seleccionarse según el rango esperado para ese elemento: un carrito de compras probablemente nunca supera 9 ítems, un inbox supera los 99, y un repositorio con stars puede superar los 1000. La regla de los 4 caracteres máximos (incluyendo el +) mantiene la geometría del pill consistente y legible al tamaño típico de badge (14–18px de alto).

El badge se ancla en la esquina superior derecha del ícono padre con top: -4px y right: -4px, colocándolo parcialmente fuera del área del ícono. La separación perceptual entre el ícono y el badge crea jerarquía clara: el badge no compite con el ícono sino que lo complementa. Crucialmente, la box-shadow del badge debe usar el color exacto del fondo sobre el que se muestra, no blanco fijo. En nav oscura, usar shadow oscura; en nav clara, shadow clara; en nav de color, shadow del mismo color. Una shadow de color incorrecto delata descuido y destruye la ilusión de separación visual.

El rojo es el color de alerta más potente en la interfaz: activa la respuesta de amenaza antes de que el usuario procese el contenido del badge. Usarlo en notificaciones de likes, comentarios o actualizaciones de producto genera ansiedad crónica de interfaz, el usuario siente urgencia donde no la hay. Investigación de Stanford sobre dopamine-driven design (2021) muestra que redes sociales con badges rojos para engagement aumentan el FOMO pero reducen la satisfacción a largo plazo. Reservar rojo para errores críticos, fallos de sincronización, o ítems que requieren acción inmediata para evitar pérdida de datos o dinero.

Un lector de pantalla que lee "3" sin contexto no transmite ninguna información útil. El número dentro del badge debe marcarse aria-hidden="true" y un elemento hermano con clase sr-only debe proveer la descripción completa: "3 mensajes no leídos." Para badges que se actualizan dinámicamente (contadores en tiempo real, notificaciones push), un contenedor con aria-live="polite" garantiza que el lector de pantalla anuncia el cambio sin interrumpir la lectura actual del usuario. aria-live="assertive" solo para errores críticos que requieren atención inmediata; aria-atomic="true" asegura que el SR lee el contenido completo del live region.

La animación de pulse en un badge cumple una función: llamar la atención sobre un evento nuevo que el usuario aún no ha visto. Una vez cumplida esa función, la animación debe detenerse. Un badge pulsando en loop es una de las formas más agresivas de distracción en la interfaz: el movimiento periférico activa constantemente el sistema visual de alerta del usuario. WCAG 2.1 SC 2.2.2 requiere que contenido en movimiento por más de 5 segundos tenga mecanismo de pausa. El principio de "minimum effective dose" de animación aplica aquí directamente: usar animation-iteration-count: 1 con easing ease-out que se disipa naturalmente.

El momento en que desaparece un badge es tan crítico como el momento en que aparece. Para badges informativos (mensajes sin leer, notificaciones nuevas) el clear automático al visitar la sección es la experiencia correcta: el usuario entiende que "leer = resolver." Para badges de errores o tareas pendientes, el clear automático es peligroso: el badge debe desaparecer solo cuando el problema se resuelva, no cuando el usuario visite la pantalla. Bajo ninguna circunstancia mostrar "0" en el badge, cuando el contador llega a cero, el badge debe desaparecer completamente del DOM.

Cuatro antipatrones recurrentes degradan sistemas de badges funcionales. Badge blindness ocurre cuando la interfaz acumula tantos badges simultáneos que el usuario los filtra perceptualmente y deja de verlos. Rojo en todo diluye la señal de urgencia hasta hacerla inútil. Canal único viola el principio de redundancia informativa: si el badge es la única representación de datos críticos y desaparece, la información se pierde. Badge como control confunde affordance: el badge comunica estado, no es un target de interacción; el click debe ir al elemento padre, nunca al badge directamente.