Sistema de UI para Chat Conversacional

¿Qué hace Sistema de UI para Chat Conversacional?

Propósito

El Sistema de UI para Chat Conversacional proporciona una metodología sistemática para diseñar y estructurar widgets de chat persistentes en página, diálogos de soporte en vivo e interfaces de chatbot automatizadas. Las ventanas de chat son altamente interactivas, densas en contenido y espacialmente restringidas, lo que las hace propensas a fallos graves de accesibilidad y usabilidad.

Este sistema resuelve los desafíos de diseño visual y estructural de las superposiciones de mensajería asíncrona. Garantiza que los flujos de mensajes sean altamente legibles, que los desencadenantes interactivos (respuestas rápidas, tarjetas de acción) sean accesibles, que los usuarios de tecnología de asistencia sean notificados de nuevos mensajes sin interrupción del enfoque, y que las superposiciones móviles se adapten perfectamente a los teclados virtuales del sistema y las áreas seguras.

Casos de Uso

• Paneles de Soporte en Vivo: Widgets persistentes que permiten la comunicación directa con representantes humanos de atención al cliente.
• Chatbots Automatizados con IA: Asistentes automatizados integrados en la aplicación o el sitio web que guían a los usuarios en la incorporación, resolución de problemas o descubrimiento de productos.
• Formularios Conversacionales Transaccionales: Completado de formularios paso a paso diseñado como una conversación interactiva.
• Widgets Flotantes del Centro de Ayuda: Superposiciones ancladas al viewport que buscan en artículos de soporte y recurren a hilos de chat en vivo.

Cuándo NO Usar

• Aplicaciones Dedicadas de Correo Electrónico/Bandeja de Entrada: Paneles de comunicación a gran escala y pantalla completa (por ejemplo, Gmail, Slack, Zendesk Agent Workspace) que requieren diseños de múltiples paneles de alta densidad; use sistema-de-diseno-de-panel-de-control.
• Navegación Global de la Página: No reemplace los directorios persistentes del sitio con mapas del sitio basados en chat, a menos que sea como una opción asistiva secundaria; use sistema-de-navegacion-del-sitio.
• Comentarios Jerárquicos Complejos: Comentarios de blogs o artículos con respuestas en hilos anidados; use sistema-de-comentarios-y-discusion.

Entradas

1. Escenarios Conversacionales: Mapeo de los flujos principales (iniciado por el usuario vs. desencadenado por el sistema, transferencia de bot a agente).
2. Estilo Visual y Paleta: Tokens de diseño para superficies de fondo, burbujas entrantes vs. salientes, puntos de estado e indicadores de enfoque (de sistema-de-color-accesible y sistema-de-diseno-de-indicador-de-enfoque).
3. Escala Tipográfica: Reglas tipográficas fluidas y altamente legibles para diseños compactos (de sistema-de-tipografia-fluida).
4. Métricas de Disparo: Umbrales de desplazamiento y eventos que determinan cuándo se activa el botón de lanzamiento del chat o el mensaje de bienvenida automático.
5. Activos Multimedia Interactivos: Opciones de archivos adjuntos, plantillas de vista previa de imágenes y formatos personalizados de respuesta rápida.

Salidas

1. Especificación de Diseño del Widget de Chat: Límites precisos en píxeles/rem para lanzadores flotantes y paneles acoplados.
2. Anatomía del Hilo de Mensajes: Espaciado de componentes, pesos tipográficos y asignaciones de color que distinguen los tipos de remitente.
3. Plano de Diseño Responsivo Móvil: Reglas de transición que transforman paneles flotantes de escritorio en cajones de altura completa en móviles.
4. Matriz de Estados Interactivos: Mapas de retroalimentación visual para burbujas de mensaje, áreas de texto, chips de acción y estados de carga.
5. Plano de Hitos de Accesibilidad: Un mapa de roles ARIA (role="log", aria-live="polite", aria-busy) y rutas de tabulación del teclado.

---

Flujo de Trabajo

1. Posicionar el Lanzador Flotante (FAB)

El botón de activación flotante del chat es el punto de entrada principal y debe permanecer persistente sin bloquear elementos clave del cuerpo de la página.

• Posicionamiento Estándar: Anclar el lanzador en la esquina inferior derecha del viewport (esquina inferior izquierda para diseños RTL).
• Desplazamientos de Cuadrícula de Escritorio: Desplazar el lanzador 24px desde los límites inferior y lateral del viewport.
• Desplazamientos de Cuadrícula Móvil: Desplazar 16px desde los límites para preservar el área de contenido.
• Mitigación de Colisiones: Si hay un botón "Volver Arriba" o un banner de cookies persistente, colóquelos verticalmente opuestos o apílelos con un mínimo de 16px de separación para evitar superposición visual.

2. Estructurar el Contenedor de la Ventana de Chat

El contenedor de la ventana de chat alberga todo el marco de interacción. Se encuentra por encima de la página base y debe seguir una jerarquía estructural estándar:

• Encabezado (El Ancla del Marco): Banner persistente que contiene el avatar/identidad del interlocutor (agente/bot), estado operativo (indicador en línea, horario activo) y controles rápidos (Minimizar _, Pantalla completa/Expandir y Cerrar X).
• Área de Registro de Mensajes (El viewport del hilo): El cuerpo desplazable que muestra la conversación. Debe manejar el desplazamiento vertical infinito con una barra de desplazamiento siempre visible durante las acciones de desplazamiento.
• Plataforma de Respuestas Rápidas (El Puente): Un bloque horizontal/envolvente de chips interactivos que se sitúa directamente encima de la barra de entrada para ofrecer respuestas rápidas de un solo toque.
• Barra de Entrada (La Utilidad Anclada en la Parte Inferior): Un contenedor de formulario persistente que comprende el área de entrada de texto, disparadores de utilidad secundarios (emojis, archivos adjuntos con clip) y el botón principal "Enviar".

3. Diseñar la Anatomía y el Ritmo de las Burbujas de Mensaje

Para garantizar una escaneabilidad rápida, distinga los mensajes mediante dirección visual y física:

• Mensajes Salientes (del Usuario):
  • Alineación: Alineados a la derecha (alineados a la izquierda en RTL).
  • Color: Fondo de marca primario o alto contraste oscuro con texto blanco/claro.
  • Radios de Borde: Redondeados en todas las esquinas excepto la inferior derecha (inferior izquierda en RTL) para crear un ancla visual de "burbuja de diálogo".
• Mensajes Entrantes (del Agente/Bot):
  • Alineación: Alineados a la izquierda (alineados a la derecha en RTL).
  • Color: Fondo neutro gris claro o tinte de marca secundario con texto de alto contraste.
  • Radios de Borde: Redondeados en todas las esquinas excepto la inferior izquierda (inferior derecha en RTL).
• Mensajes Agrupados: Si el mismo remitente envía varios mensajes de forma secuencial, apílelos con poca separación (4px de espacio) y solo muestre el nombre del remitente, avatar y marca de tiempo en la burbuja final o en el encabezado del grupo. Use 16px de espacio entre diferentes remitentes.
• Mensajes del Sistema/Acción: Centrados dentro del hilo, pequeños, atenuados y con estilo de texto plano sin bordes para indicar meta-eventos (por ejemplo, "El agente entró al chat", "Transcripción del chat enviada por correo electrónico").

4. Crear el Área de Entrada Interactiva

El área de entrada de texto es donde ocurre la mayor fricción. Diseñe para maximizar la usabilidad:

• Entrada de Expansión Automática: Use un <textarea> que comience en una sola línea (altura mínima 44px) y se expanda verticalmente a medida que el usuario escribe (con un máximo de 4–5 líneas y desplazamiento vertical activado internamente) para que los mensajes largos permanezcan completamente visibles.
• Borde de Entrada y Estados de Hover: Dé al textarea un borde distintivo (mínimo 1px, alto contraste 3:1 contra la caja de chat blanca). Al pasar el ratón, se debe aumentar el contraste del borde, y el enfoque activo debe activar un anillo de enfoque de alto contraste (mínimo 2px).
• Facilidad del Botón de Enviar: El botón de enviar debe permanecer visualmente inactivo (opacidad deshabilitada y atenuada) cuando el textarea está vacío. Una vez que se escriben caracteres, el botón debe realizar la transición a su color de estado activo primario para indicar preparación para la entrada.

5. Establecer la Adaptación del Viewport Móvil (El Cambio de Cajón)

Las cajas de chat de escritorio son superposiciones pequeñas (generalmente de 360px a 400px de ancho, de 500px a 650px de alto). En dispositivos móviles, estas proporciones no son utilizables y entran en conflicto con los teclados virtuales.

• Toma de Control de Pantalla Completa: Por debajo del punto de interrupción 576px, transición del contenedor de chat de un panel flotante a un cajón de pantalla completa (width: 100%; height: 100%; top: 0; left: 0; border-radius: 0;).
• Área Segura del Teclado Virtual: Asegúrese de que la Barra de Entrada use position: sticky; bottom: 0; y se ancle a la parte inferior del viewport visible, teniendo en cuenta la barra de direcciones inferior del navegador móvil y el teclado virtual.
• Prevenir Fugas de Desplazamiento: Bloquee el desplazamiento del cuerpo de fondo usando body { overflow: hidden; } o clases estándar de intercepción táctil cada vez que el cajón de chat de pantalla completa móvil esté activo.

---

Reglas de Decisión

• Tamaño del Botón de Activación: El botón lanzador flotante debe tener un diámetro visual de al menos 56px en escritorio y móvil, con un área táctil interactiva de 64x64px para garantizar una activación sin esfuerzo con el pulgar.
• Prioridad de la "Insignia de No Leídos": Cuando llegue un mensaje no leído mientras el panel está minimizado, muestre una insignia numérica roja/del color de la marca sobre el lanzador. Si un mensaje es altamente crítico, muestre una burbuja de vista previa de texto temporal y autodescartable junto al lanzador durante 5 segundos antes de colapsar a la insignia.
• Visualización del Indicador de Escritura: Cuando el agente/bot está escribiendo, muestre una burbuja persistente que contenga una animación de rebote de tres puntos. Posicione este indicador como el mensaje entrante más reciente, pero elimínelo instantáneamente cuando llegue el bloque de mensaje real.
• Tiempo de Notificación y Señales de Audio: Habilite alertas de audio sutiles y de tono alto para mensajes entrantes solo si la pestaña está en segundo plano. Proporcione un interruptor persistente y claro en el encabezado del chat para silenciar por completo las notificaciones de sonido.
• Anclaje de Desplazamiento Dinámico: Cuando el usuario está al final del registro de chat, desplace automáticamente el contenedor del hilo hacia abajo para revelar nuevos mensajes a medida que llegan. Sin embargo, si el usuario se ha desplazado hacia arriba para leer el historial pasado, bloquee la posición de desplazamiento para evitar saltos bruscos y muestre un botón flotante "Nuevos mensajes ↓" en la parte inferior del viewport.

---

Restricciones

1. Accesibilidad (Cumplimiento WCAG AA)

• Hitos y Roles ARIA:
  • Envuelva el widget de chat principal en un contenedor de hito: <section aria-label="Chat de Cliente"> o <div role="region" aria-label="Chat de Soporte">.
  • El área de registro de mensajes desplazable debe usar role="log" y aria-live="polite". Esto le indica a los lectores de pantalla que anuncien nuevos mensajes a medida que se agregan, sin interrumpir la navegación activa del teclado o la entrada de texto del usuario.
  • La burbuja del indicador de escritura debe establecer aria-busy="true" e incluir una alternativa de texto oculta (por ejemplo, <span class="sr-only">El agente de soporte está escribiendo...</span>).
• Acceso por Teclado y Trampa de Foco:
  • La navegación estándar con Tab debe moverse a través de los controles del encabezado, el flujo de mensajes desplazable, los chips de respuesta rápida y los campos de entrada en secuencia lógica.
  • Cuando el cajón de chat de pantalla completa móvil esté abierto, atrape el foco del teclado dentro del cajón. Al presionar Escape, se debe minimizar o cerrar instantáneamente el panel de chat y devolver el foco al botón lanzador flotante.
• Contraste de Texto y Componentes:
  • Todo el texto dentro de las burbujas de mensaje (tanto entrantes como salientes) debe cumplir con una relación de contraste mínima de 4.5:1 contra sus respectivos fondos de burbuja.
  • Los iconos interactivos (clip de archivo adjunto, flecha de enviar, cerrar X) y los límites del formulario deben cumplir con una relación de contraste mínima de 3:1 contra las superficies de fondo adyacentes.

2. Capacidad de Respuesta y Preservación del Diseño

• Estabilidad de la Relación de Aspecto:
  • Los hilos de mensajes deben usar porcentajes flexibles o modelos de flex-grow para llenar la altura del contenedor, evitando el desbordamiento de texto o el colapso del contenedor.
  • Las imágenes o tarjetas enviadas dentro de las burbujas de chat deben tener relaciones de aspecto fijas o límites de ancho máximo (max-width: 80% del ancho de la burbuja) para evitar el soplado visual del diseño del chat.
• Prevención de Cambios de Diseño:
  • Al cargar mensajes históricos (por ejemplo, desplazamiento infinito hacia arriba), use técnicas de anclaje de desplazamiento para evitar que la posición de desplazamiento activa salte hacia abajo, manteniendo el viewport del usuario perfectamente bloqueado en el mensaje que estaba leyendo.

---

Patrones de Falla Comunes

• La Trampa "Secuestro de Foco": Abrir automáticamente el widget de chat al cargar la página y atrapar instantáneamente el foco del teclado dentro del textarea del chat. Esto bloquea completamente a los usuarios de teclado y lectores de pantalla para leer el contenido principal de la página.
• El "Cubrimiento del Teclado": En dispositivos móviles, posicionar la barra de entrada con coordenadas absolute, lo que hace que el teclado virtual del dispositivo superponga y oculte el textarea y el botón de enviar durante la escritura activa.
• El "Flujo No Anunciado": Agregar nuevos mensajes al hilo puramente visualmente sin role="log" o aria-live, dejando a los usuarios ciegos y con baja visión completamente inconscientes de que el agente ha respondido.
• El Error "Desplazamiento Saltarín": Forzar que el viewport de desplazamiento salte hacia abajo al fondo absoluto en cada mensaje entrante, interrumpiendo a un usuario que intenta leer instrucciones históricas más arriba en el hilo.
• La Tendencia "Desvanecimiento de Contraste": Estilizar las burbujas entrantes con un fondo gris ultra claro y texto blanco fino, violando las relaciones de contraste y haciendo que el texto sea ilegible bajo iluminación ambiental normal.

---

Criterios de Validación

• Verificación de Hito de Accesibilidad: El widget de chat está envuelto en un <section> o role="region" con un aria-label descriptivo.
• Verificación de Anuncio del Lector de Pantalla: El hilo de mensajes usa role="log" con aria-live="polite" y se ha verificado que anuncia texto entrante dinámicamente.
• Verificación de Contraste: Las burbujas salientes y entrantes cumplen con el estándar de contraste texto-fondo de 4.5:1, y los bordes del formulario cumplen con el estándar de 3:1.
• Verificación de Ruta de Teclado: Las trampas de foco funcionan correctamente en viewports móviles, y al presionar la tecla Escape, se cierra el widget y se devuelve el foco al lanzador.
• Adaptación del Cajón Móvil: El panel ocupa el 100% de la altura y anchura del viewport por debajo de 576px sin fuga de desplazamiento en el cuerpo de la página de fondo.
• Objetivos Táctiles Mínimos: El activador del lanzador, los botones de cierre, los controles de envío y los chips de respuesta rápida tienen áreas táctiles interactivas de al menos 44x44px.
• Ritmo de Burbujas de Mensaje: Los mensajes consecutivos del mismo remitente se agrupan con un relleno ajustado de 4px, mientras que los cambios de remitente usan espacios generosos de 16px.
• Protección de Estado Vacío: El botón de enviar está deshabilitado y visualmente atenuado cuando el textarea de entrada contiene solo espacios en blanco.