Sistema de Centro de Notificaciones

¿Qué hace Sistema de Centro de Notificaciones?

Propósito

El Sistema de Centro de Notificaciones proporciona un marco de diseño estructurado y reutilizable para centros de notificaciones, feeds o bandejas de entrada dentro de la aplicación. En aplicaciones web modernas, particularmente en espacios de trabajo SaaS, portales comunitarios, editores colaborativos y cuentas de comercio electrónico, las notificaciones mantienen a los usuarios actualizados sobre eventos asíncronos (ej., menciones, comentarios, alertas del sistema, actualizaciones de estado del flujo de trabajo, finalizaciones de tareas).

Sin un centro de notificaciones dedicado, las aplicaciones se ven obligadas a depender de superposiciones intrusivas (Modales) o notificaciones transitorias y fáciles de pasar por alto (Toasts/Banners). Este sistema centraliza esas actualizaciones, gestionando su jerarquía visual, estados interactivos (leído vs. no leído), agrupaciones contextuales y adaptaciones responsivas, mientras garantiza la accesibilidad completa para teclado y lectores de pantalla (WCAG AA).

Casos de Uso

• Espacios de Trabajo Colaborativos: Agregar comentarios de documentos, carpetas compartidas, asignaciones de tareas y menciones (ej., Slack, Notion, Figma).
• Flujos de Trabajo Asíncronos: Seguimiento de operaciones de larga duración como exportaciones de datos, informes en segundo plano, despliegues de compilación o procesamiento por lotes.
• Actualizaciones Transaccionales: Seguimiento de actualizaciones de entrega de comercio electrónico, recordatorios de renovación de suscripciones o confirmaciones de pago.
• Feeds Sociales y Comunitarios: Gestión de 'me gusta', respuestas, seguimientos, invitaciones a grupos y actualizaciones de actividad.
• Seguridad y Salud de la Cuenta: Informar a los usuarios sobre nuevas ubicaciones de inicio de sesión, cambios de contraseña o advertencias de cuota de almacenamiento.

Cuándo NO Usarlo

• Bloqueos Críticos: Si un evento debe evitar que el usuario complete su tarea actual (ej., pago fallido, sesión expirada, envío de datos no válido), use un sistema-de-superposición-y-diálogo (Modal/Alertdialog).
• Retroalimentación Transitoria de una Sola Tarea: Para la confirmación inmediata de una acción directa (ej., "Enlace copiado", "Configuración guardada"), use un Toast (consulte sistema-de-toast-y-snackbar).
• Anuncios de Inactividad Global: Para alertas del sistema de alta prioridad en todo el sitio (ej., "Mantenimiento programado en 30 minutos"), use banners globales (consulte sistema-de-banner-y-alerta).
• Páginas de Aterrizaje de Conversión Independientes: Las páginas de aterrizaje independientes deben minimizar los enlaces externos y las distracciones. Los iconos de notificación globales son contraproducentes.

Entradas

1. Arquitectura de la Información (Esquema de Notificación):
   • Metadatos: Avatar/iniciales del autor, fuente del evento, tipo de acción.
   • Contenido: Título (qué sucedió), cuerpo del texto (detalles adicionales/contexto), marca de tiempo.
   • Estado: Leído vs. no leído, prioridad alta/media/baja, archivado.
   • Acciones: Enlace de destino principal, acciones rápidas en línea (ej., "Aprobar", "Marcar como leído", "Silenciar hilo").
2. Contexto de Visualización y Densidad: ¿La interfaz es un dashboard SaaS altamente denso (necesita elementos de lista de ventana emergente eficientes en espacio) o una plataforma espaciosa (puede utilizar un cajón deslizable o una página)?
3. Iconografía del Disparador: El ancla visual (generalmente un icono de campana) y el diseño de la insignia de notificación (conteos numéricos vs. un indicador de punto simple).
4. Diseño de Acciones Interactivas: Acciones masivas disponibles (ej., "Marcar todo como leído", "Limpiar todo", "Configuración de notificaciones").

Salidas

1. Anatomía de la Insignia del Disparador: Criterios de diseño específicos para el icono del encabezado, el conteo de insignias numéricas y el punto indicador silencioso.
2. Especificación del Diseño del Contenedor: Tamaño, límites, posicionamiento y comportamiento del contenedor (Desplegable, Cajón Lateral o Página Dedicada).
3. Anatomía de la Tarjeta de Notificación: Diseño interno explícito (avatar, cuerpo, marca de tiempo, punto indicador de no leído, disparadores de acción rápida).
4. Matriz de Transición de Estados: Estilo diferenciado para estados de no leído vs. leído, estados de hover, estados activos, anillos de enfoque y esqueletos de carga.
5. Especificación para Teclado y Lector de Pantalla: Parámetros de trampa de enfoque, estructura de tabindex móvil, definiciones de anuncios de región en vivo y descripciones aria personalizadas.

---

Flujo de Trabajo

1. Diseñar el Disparador del Encabezado y el Indicador de Insignia

El punto de entrada para el centro de notificaciones se encuentra casi universalmente en el encabezado de utilidad global (lado derecho).

• El Icono de Campana: Elija un icono de campana limpio.
• La Insignia de Conteo de No Leídos:
  • Coloque una insignia circular en el cuadrante superior derecho del icono de campana.
  • Limite el conteo de la insignia a 99+ (o 9+ en diseños extremadamente ajustados) para evitar el desbordamiento del contenedor.
  • Si el conteo es 0, la insignia debe eliminarse del DOM u ocultarse usando display: none (nunca muestre 0 dentro de una burbuja roja).
  • Incluya un aria-label o texto oculto para lectores de pantalla que indique explícitamente el número de notificaciones no leídas (ej., <span class="sr-only">, 4 notificaciones no leídas</span>).

2. Elegir el Patrón de Diseño del Contenedor

Seleccione el diseño según la densidad, el dispositivo de destino y la cantidad de interacción requerida:

• Patrón A: Ventana Emergente Desplegable (Valor predeterminado de escritorio para densidad de contenido media)
  • Posicionado en relación con el disparador.
  • Dimensiones recomendadas: Ancho mínimo 320px, Ancho máximo 420px. Altura restringida a 500px con un contenedor desplazable (overflow-y: auto).
  • Ancle la ventana emergente utilizando mecánicas de ventana emergente estándar (o la API Popover nativa) para asegurarse de que aparezca en el contexto de apilamiento superior.
• Patrón B: Cajón Lateral (Mejor para alta densidad de contenido o flujos de acción complejos)
  • Se desliza desde el borde derecho de la pantalla, ocupando la altura completa de la ventana gráfica.
  • Ancho recomendado: 360px a 480px.
  • Atenúe el fondo de la página con una superposición de fondo sutil (scrim).
• Patrón C: Página de Notificaciones Dedicada (Alternativa para ventanas gráficas móviles o gestión de bandeja de entrada compleja)
  • Una vista de pantalla completa adecuada para ordenar, buscar, filtrar y gestionar de forma masiva archivos profundos de notificaciones.

3. Establecer la Jerarquía y Anatomía Interna de la Tarjeta

Cada notificación individual es una tarjeta (un elemento de lista <li> dentro de un <ol> o <ul>). Debe seguir una jerarquía de cuadrícula vertical y horizontal estricta:

+-------------------------------------------------------------+
| (•) [Avatar]  **Juan Pérez** te mencionó en _Proyecto X_  (x) |
|               "Por favor revisa los bocetos de UI revisados." |
|               [ Hace 3 horas ]  [ Aprobar ] [ Rechazar ]      |
+-------------------------------------------------------------+

• Punto Indicador de No Leído (Ancla Horizontal): Coloque un punto pequeño, de alto contraste y de color primario (ej., azul o morado) en el extremo izquierdo. Este es el ancla de escaneo más rápido para elementos no leídos.
• Área de Avatar/Icono: Coloque un avatar circular (para eventos generados por el usuario) o un icono de utilidad categorizado dentro de un fondo de color (para eventos del sistema) junto al indicador.
• Bloque de Texto (Flujo Vertical):
  • Título/Encabezado: Texto en negrita que resalta el actor y la acción.
  • Extracto: Texto más pequeño y atenuado que muestra el contenido secundario (ej., texto del comentario, descripción del error). Limite a 2 líneas de texto como máximo con CSS line-clamp.
  • Marca de Tiempo: Texto pequeño y atenuado (ej., 12px) que muestra la hora relativa (ej., "Hace 5m", "Ayer").
• Acciones Rápidas (Disparadores Contextuales):
  • Coloque botones de acción rápida alineados debajo del extracto de texto (ej., "Aceptar Invitación", "Ver Comentario").
  • Proporcione un disparador secundario sutil (ej., un botón de menú desbordante, o un botón de marca de verificación directo "Marcar como leído") al pasar el cursor/enfocar en la esquina derecha.
  • El icono de cerrar/descartar (X) debe estar posicionado en la esquina superior derecha, midiendo al menos 24x24px para interacciones táctiles.

4. Crear Transiciones de Estado Claras

Proporcione estados distintos para reflejar la interacción del usuario:

• Estado No Leído: Fondo claro, texto en negrita, punto indicador azul visible.
• Estado Leído: Atenúa el fondo de no leído, cambia el peso del texto a regular, oculta el punto indicador.
• Estado Hover/Enfoque: Cambia ligeramente el color de fondo (ej., de blanco a un gris neutro suave) y revela los disparadores secundarios en línea (ej., "Archivar", "Marcar como leído").
• Estado Enfocado: Anillos de enfoque de alto contraste alrededor de elementos individuales cuando se navega con el teclado. Mantenga el enfoque visible y nítido (mínimo 2px de contorno con desplazamiento).
• Estado Deshabilitado: Si una tarjeta de acción se está procesando (ej., al hacer clic en "Aprobar"), aplique un spinner de carga en línea, disminuya la opacidad a 0.5 y establezca los atributos del botón en disabled para evitar dobles clics.

5. Definir Operaciones Masivas y Estados Vacíos

• Navegación del Pie de Página: Siempre proporcione un enlace de pie de página para "Ver todas las notificaciones" (enlaza a una página dedicada) o "Marcar todo como leído".
• Estado Vacío: Cuando no haya notificaciones presentes, o cuando todas las notificaciones estén limpiadas, muestre un estado vacío que contenga un visual alentador (ej., una marca de verificación o una campana), un encabezado neutral ("¡Todo al día!") y un enlace descriptivo secundario a "Configuración de Notificaciones" (consulte sistema-de-estado-vacío).

6. Implementar la Gestión del Enfoque del Teclado y del Lector de Pantalla

• Alternar Disparador: Presionar Enter o Espacio en el icono de Campana alterna la ventana emergente. Aplique aria-expanded="true/false" y aria-controls="notification-panel-id".
• Trampa de Enfoque (para Cajones y Ventanas Emergentes): Cuando se abre, el enfoque del teclado debe moverse inmediatamente al primer elemento accionable dentro del panel (generalmente el botón "Marcar todo como leído" o el primer elemento de notificación). El enfoque debe estar atrapado dentro del panel mientras esté visible. Presionar Escape debe cerrar el panel y devolver el enfoque directamente al icono de Campana.
• Tabindex Móvil / Navegación de Lista: Si hay docenas de elementos de notificación, permita a los usuarios de teclado navegar entre las tarjetas usando las teclas FlechaArriba y FlechaAbajo, manteniendo una sola parada de tabulación (tabindex="0" para el elemento activo, tabindex="-1" para los demás). Esto evita obligar a los usuarios de teclado a tabular a través de 50 enlaces para llegar al final de la página.
• Anuncios del Lector de Pantalla: Use una región oculta aria-live="polite" para anunciar actualizaciones en el conteo de no leídos cuando ocurren dinámicamente (ej., "Nueva notificación de Sara").

---

Reglas de Decisión

Regla 1: Desplegable vs. Cajón Lateral vs. Página

Elija la estructura del contenedor usando esta cuadrícula de diseño:

• Elija Ventana Emergente Desplegable si: La aplicación tiene un promedio de menos de 10-15 notificaciones, contiene en su mayoría actualizaciones cortas y las acciones son simples (como un enlace directo o descarte rápido).
• Elija Cajón Lateral si: El panel de notificaciones incluye pestañas interactivas (ej., "Todo", "Menciones", "Archivo"), requiere resúmenes de tarjetas de varias líneas enriquecidas, o requiere campos de formulario complejos (como entrada de texto para responder directamente dentro de la notificación).
• Elija Página Dedicada si: El usuario está gestionando cargas de trabajo intensivas en notificaciones (ej., bandeja de entrada de revisión de PR de GitHub, tickets de soporte de Zendesk, alertas de tienda de Shopify) que requieren filtros de búsqueda robustos, selecciones múltiples con marca de verificación y flujos de trabajo de archivado masivo.

Regla 2: Indicadores de Avatar vs. Icono

• Use un Avatar de Usuario (imagen o iniciales) si la notificación es un evento social o de colaboración directa desencadenado por un humano específico (ej., "Sara compartió un archivo").
• Use un Icono del Sistema (con colores específicos de estado: rojo para alerta, amarillo para advertencia, azul para información) si el evento es generado por el sistema (ej., "Copia de seguridad de la base de datos completada").

Regla 3: Comportamiento de la Acción Marcar como Leído

• Hacer clic en la tarjeta de notificación debe tanto redirigir al usuario al enlace de destino profundo como marcar el elemento como leído.
• Proporcione un icono de marca de verificación "Marcar como leído" dedicado y visible en la tarjeta, permitiendo a los usuarios marcar elementos como leídos sin navegar fuera del panel.

---

Restricciones

1. Contraste y Tamaño (WCAG AA)

• Contraste del Texto: Asegúrese de que toda la copia de la notificación cumpla con la relación de contraste 4.5:1. Las marcas de tiempo y los extractos atenuados no deben caer por debajo de 4.5:1 (o 3:1 para texto grande).
• Objetivos Táctiles: Los objetivos táctiles para botones individuales (iconos de cierre, enlaces de aceptar/rechazar, marcas de verificación de marcar como leído) deben cumplir con el tamaño mínimo de destino SC 2.5.8 de WCAG 2.2 de 24x24px.
• Contraste del Teclado: Los anillos de enfoque deben tener una relación de contraste mínima de 3:1 contra el fondo de la tarjeta.

2. Capacidad de Respuesta

• Escritorio: Los paneles flotantes deben posicionarse de manera inteligente. Si el disparador está cerca del borde derecho de la pantalla, la ventana emergente debe alinearse a su lado derecho para evitar el recorte.
• Ventanas Gráficas Móviles (< 768px): Transforme la ventana emergente desplegable de escritorio en un Panel de Pantalla Completa o una Hoja Deslizante Alineada en la Parte Inferior para garantizar la accesibilidad con el alcance del pulgar y evitar contenedores de ventanas emergentes pequeños sin posibilidad de desplazamiento.

3. Apilamiento Dinámico

• Asegúrese de que el z-index de la ventana emergente o el cajón esté configurado por encima de los elementos de diseño estándar pero por debajo de los disparadores modales (ej., --z-index-popover: 1000, --z-index-modal: 2000).

---

Patrones de Falla Comunes

• La "Bandeja de Entrada Inescapable": Abrir una ventana emergente de notificaciones desplegable en el escritorio, pero no proporcionar un oyente de cierre con la tecla Escape. Los usuarios se ven obligados a encontrar y hacer clic en una pequeña "X" o hacer clic fuera para descartar.
• El Bucle de "Insignia Atascada": Una insignia de notificación que muestra 3 elementos no leídos, pero al abrir el panel no se resalta visualmente qué tarjetas no están leídas, ni se proporciona una forma clara de marcarlas como leídas. La insignia permanece atascada, causando fatiga al usuario y eventual ceguera al banner.
• El Feed "Revoltijo": Meter párrafos completos de correos electrónicos, registros de base de datos sin procesar y promociones de marketing en un pequeño panel desplegable, causando desbordamiento del diseño y aplastando la jerarquía visual.
• Cambio de Diseño al Desplazarse: Ventanas emergentes que están estilizadas con coordenadas de píxeles estáticas que no logran permanecer unidas al icono de campana del encabezado al desplazarse, flotando aleatoriamente sobre el contenido.
• Contornos de Enfoque Dobles: Estilo de enfoque de doble capa donde tanto la tarjeta contenedora externa como el botón de enlace profundo interno capturan el enfoque simultáneamente, lo que requiere que los usuarios de teclado tabulen dos veces por notificación.

---

Criterios de Validación

• Comportamiento del Conteo de la Insignia: Si el conteo de no leídos es 0, el punto rojo o el indicador numérico está completamente oculto de la vista.
• Contraste de Estado: Las tarjetas no leídas se distinguen claramente visualmente de las tarjetas leídas (usando fondos, peso del texto y puntos indicadores).
• Tamaños de Destino: Cada botón/enlace en el que se puede hacer clic dentro de la tarjeta cumple con el mínimo de destino táctil de 24x24px de WCAG 2.2.
• Transformación Responsiva: En ventanas gráficas móviles, el diseño del panel se transforma automáticamente de desplegable a pantalla completa u hoja inferior.