Sistema de Banners y Alertas

¿Qué hace Sistema de Banners y Alertas?

Propósito

El Sistema de Banners y Alertas proporciona una metodología para diseñar capas de comunicación no persistentes y sin superposición. A diferencia de los modales, que detienen al usuario, los banners y alertas proporcionan información crítica (actualizaciones de estado, advertencias o anuncios) mientras permiten al usuario continuar con su tarea actual. Este sistema garantiza que las notificaciones sean visualmente distintas, estén priorizadas adecuadamente y sean accesibles.

Casos de uso

• Comunicar anuncios en todo el sitio (por ejemplo, "Mantenimiento programado en 2 horas").
• Proporcionar retroalimentación contextual dentro de un formulario (por ejemplo, "Cambios guardados exitosamente").
• Advertir a los usuarios sobre problemas de cuenta (por ejemplo, "La suscripción vence en 3 días").
• Notificar a los usuarios sobre errores sistémicos que no bloquean toda la aplicación pero afectan la funcionalidad (por ejemplo, "La sincronización bancaria no está disponible actualmente").
• Mostrar "Banners de Marketing" para promociones o lanzamientos de nuevas funciones.

Cuándo NO usar

• Bloqueos críticos: Si el usuario debe realizar una acción antes de continuar, use overlay-and-dialog-system (Modal).
• Retroalimentación pasiva: Para actualizaciones de estado breves y de baja prioridad (por ejemplo, "Enlace copiado"), use Toasts (ver overlay-and-dialog-system).
• Etiquetas de datos: Para indicadores de estado simples en un solo elemento, use badge-and-tag-system.
• Navegación: No use banners para enlaces de navegación primaria o secundaria; use site-navigation-system.

Entradas

1. Gravedad del mensaje: ¿Es un mensaje de Error, Advertencia, Éxito o Información?
2. Alcance: ¿Es Global (en todo el sitio) o En línea (específico de una sección/página)?
3. Capacidad de descarte: ¿Puede el usuario ocultar este mensaje o debe permanecer visible?
4. Requisito de acción: ¿El mensaje requiere una acción de seguimiento (por ejemplo, "Actualizar facturación")?
5. Paleta de marca: Colores estándar para estados de estado (rojo de peligro, ámbar de advertencia, etc.).

Salidas

1. Especificación de anatomía de alerta: Definición del icono, jerarquía de texto y ubicación de la acción.
2. Lógica espacial: Reglas sobre dónde aparecen los banners (Parte superior del viewport, Encima del contenido o Dentro de una sección).
3. Matriz de estados: Tratamientos visuales para diferentes gravedades de mensaje.
4. Plan de accesibilidad: Roles ARIA y reglas de gestión de enfoque para alertas interactivas.

Flujo de trabajo

1. Determinar el nivel de alerta (Gravedad)

Asigne un estado según la intención:

• Error (Alta prioridad): Problemas críticos que requieren atención pero no rompen la vista.
• Advertencia (Prioridad media): Problemas potenciales o plazos próximos.
• Éxito (Baja prioridad): Confirmación de una acción completada.
• Información/Anuncio: Información neutral o actualizaciones de marketing.

2. Elegir el patrón de ubicación

• Banner global (Barra superior): Se sitúa en la parte superior del viewport. Ideal para anuncios de alta prioridad en todo el sitio.
• Banner de página: Se sitúa debajo del encabezado global pero encima del contenido de la página. Ideal para notificaciones específicas de una página.
• Alerta en línea: Se sitúa directamente dentro de una sección o junto a un componente relevante (por ejemplo, dentro de un formulario). Ideal para retroalimentación contextual.

3. Diseñar la anatomía del componente

Cada alerta debe seguir una jerarquía interna coherente:

• Icono: Una abreviatura visual de la gravedad (por ejemplo, marca de verificación para éxito).
• Título (Opcional): Un encabezado en negrita para alertas más largas.
• Descripción: El mensaje central. Manténgalo conciso.
• Acción: Un botón o enlace para el siguiente paso.
• Desencadenante de descarte: Un botón 'X' si la alerta no es crítica.

4. Establecer reglas de interacción

• Persistencia: Determine si la alerta desaparece después de una acción, después de un tiempo de espera (no recomendado para banners), o solo cuando se descarta manualmente.
• Gestión de cambios de diseño: Asegúrese de que los banners que aparecen no causen cambios de diseño bruscos (CLS). Use espacio reservado o transiciones suaves.

5. Definir el comportamiento responsive

• Apilamiento: En móvil, las acciones deben moverse debajo del texto si no caben horizontalmente.
• Ancho: Los banners globales tienen ancho completo; las alertas en línea siguen el ancho del contenedor.

Reglas de decisión

• La regla de "uno a la vez": Nunca apile más de dos banners globales. Si tiene varios anuncios, consolídalos en un solo "Centro de notificaciones" o un control deslizante.
• Color + Icono: Nunca confíe únicamente en el color para comunicar el estado de la alerta. Incluya siempre un icono para la accesibilidad.
• Ubicación por contexto: Si la alerta es causada por una acción del usuario (por ejemplo, presionar "Guardar"), coloque la alerta cerca del punto de acción (En línea). Si es un estado del sistema, colóquelo en la parte superior (Global).
• Lógica de descarte: Siempre permita a los usuarios descartar los banners de "Información" y "Éxito". Los banners de "Error" y "Advertencia" solo deben descartarse si el problema subyacente se ha resuelto.

Restricciones

• Accesibilidad: Use role="alert" para errores de alta prioridad y role="status" para actualizaciones de menor prioridad. Asegure una relación de contraste de 4.5:1 para el texto. Si un banner global es fijo/sticky, verifique que nunca oculte permanentemente un elemento enfocado mientras el contenido se desplaza (WCAG 2.2 SC 2.4.11).
• Tipografía: Use un tamaño de fuente claro (mín. 14px) y evite mayúsculas sostenidas para descripciones largas.
• Alcance móvil: Asegúrese de que los botones de descarte cumplan con el objetivo táctil mínimo de 24x24px de WCAG 2.2 SC 2.5.8, ampliado a 44x44px donde el diseño lo permita.

Patrones de fallo comunes

• El "error ignorable": Usar estilo de "Información" para un error crítico, haciendo que el usuario pase por alto advertencias importantes.
• Marketing intrusivo: Usar banners globales para promociones de bajo valor que molestan a los usuarios y devalúan el espacio de "Alerta".
• Falta de acciones: Decirle al usuario que algo está mal (por ejemplo, "Pago fallido") sin proporcionar un enlace directo para solucionarlo.
• Sacudida de diseño: Banners que "aparecen" y empujan todo el contenido de la página hacia abajo, haciendo que los usuarios hagan clic incorrectamente.

Criterios de validación

• Cada alerta usa una combinación de icono y color que coincide con su gravedad.
• Los banners globales están posicionados en la parte superior de la jerarquía.
• Las alertas en línea se colocan en estrecha proximidad a su contenido relacionado.
• Todos los elementos interactivos (Cerrar, CTA) cumplen con el objetivo táctil mínimo de 24x24px de WCAG 2.2 (2.5.8).
• Las alertas de alta prioridad usan roles ARIA apropiados (alert).
• Los banners descartables recuerdan su estado (o tienen una lógica para cuándo reaparecer).