Sistema de Comentarios y Discusión

¿Qué hace Sistema de Comentarios y Discusión?

Propósito

El Sistema de Comentarios y Discusión proporciona una metodología para diseñar capas de conversación interactivas. Asegura que los diálogos complejos con múltiples usuarios sigan siendo legibles, navegables y organizados. Al definir reglas para el encadenamiento (threading), límites de anidamiento, prioridad de acciones y señalización de contribuyentes, este sistema evita la "maraña de información" y ayuda a los usuarios a encontrar las contribuciones más valiosas en entornos de alto volumen.

Casos de Uso

• Foros Comunitarios: Diseño de discusiones encadenadas para comunidades de nicho.
• Comentarios en Artículos/Blogs: Permitir la retroalimentación de lectores en contenido extenso.
• Colaboración SaaS: Estructurar discusiones internas dentro de tareas de proyecto, documentos o pull requests.
• Soporte Preguntas y Respuestas: Organizar preguntas de clientes y respuestas del personal.
• Feeds Sociales: Gestionar interacciones en publicaciones o medios compartidos.

Cuándo NO Usarlo

• Mensajería Directa (Chat): Para mensajería en tiempo real 1 a 1 o en grupos pequeños, use un diseño optimizado para "burbujas de mensaje" y entrega instantánea.
• Feeds Solo de Anuncios: Donde los usuarios no pueden responder o interactuar; una lista simple de notificaciones es suficiente.
• Páginas de Baja Interacción: Si una página espera menos de 3 comentarios en total, una lista plana sin encadenamiento es más eficiente.
• Registros Transaccionales: Para registros de auditoría automatizados del sistema, use timeline-activity-system.

Entradas

1. Modelo de Jerarquía: ¿Qué tan profundos pueden llegar los hilos? (Plano, anidado o híbrido).
2. Datos de Identidad del Usuario: Avatares, nombres para mostrar y roles (por ejemplo, Moderador, Autor, Personal).
3. Métricas de Participación: Conteo de votos (Arriba/Abajo), conteo de respuestas y marcas de tiempo.
4. Metadatos Contextuales: Insignias de "Compra Verificada", "Mejor Contribuyente" o "Autor".

Salidas

1. Especificación de Anatomía del Comentario: Definición visual de un "Nodo" de comentario individual (Avatar, Metadatos, Cuerpo, Acciones).
2. Plano de Encadenamiento: Reglas espaciales para el anidamiento, incluidos incrementos de sangría y "Líneas de Hilo" verticales.
3. Mapa de Jerarquía de Acciones: Clasificación de prioridad para "Responder", "Votar", "Editar" y "Reportar".
4. Estrategia de Adaptación Responsiva: Reglas para colapsar hilos o aplanar diseños en dispositivos móviles.

Flujo de Trabajo

1. Definir la Anatomía del Comentario

Establecer una estructura de "Nodo" consistente:

• El Encabezado: Avatar del usuario (tamaño según el nivel de anidamiento), nombre para mostrar, insignias de rol y marca de tiempo relativa (por ejemplo, "hace 2h").
• El Cuerpo: El contenido de texto, que admite markdown o texto enriquecido cuando corresponda.
• La Barra de Acciones: Acciones primarias (Responder, Votar) y secundarias (Compartir, Reportar, Editar).

2. Establecer Reglas de Encadenamiento y Anidamiento

Gestionar la relación espacial entre las respuestas:

• Sangría: Usar un incremento consistente (por ejemplo, 24px o 1.5rem) para respuestas anidadas.
• Líneas de Hilo: Usar líneas verticales sutiles (ancho de 1px) para enlazar visualmente una respuesta con su padre.
• Límite de Anidamiento: Establecer una profundidad máxima (generalmente 3 a 5 niveles) antes de aplanar el hilo o requerir un enlace "Continuar este hilo" a una nueva vista.

3. Clasificar la Prioridad de Acción

No todas las acciones son iguales; usar peso visual para guiar al usuario:

• Primarias: "Responder" y "Votar" deben ser inmediatamente visibles.
• Secundarias: "Compartir" o "Enlazar" pueden ser solo texto o solo icono.
• Desbordamiento: Colocar "Editar", "Eliminar" y "Reportar" dentro de un menú "Más" (puntos suspensivos) para reducir el desorden.

4. Implementar Señalización y Confianza

Usar señales visuales para proporcionar contexto:

• Resaltado de Autor/Personal: Usar un color de fondo distintivo o una insignia prominente para el autor original o el personal oficial.
• Comentarios Nuevos/Resaltados: Usar un desvanecimiento sutil de fondo o un acento en el borde izquierdo para señalar comentarios no leídos o recién publicados.
• Visualización de Votos: Usar color (por ejemplo, Naranja para votos positivos, Azul para votos negativos) solo cuando esté activo.

5. Planificar Adaptaciones Responsivas

Los hilos consumen espacio horizontal rápidamente; adaptarse para viewports estrechos:

• Aplanamiento Móvil: Reducir los incrementos de sangría en móvil (por ejemplo, de 24px a 8px) o limitar el anidamiento a 2 niveles antes de pasar a plano.
• El Giro de "Pantalla Completa": Para hilos profundos, permitir tocar una respuesta para abrirla a ella y a sus hijos en un modo de "enfoque" dedicado y de ancho completo.

Reglas de Decisión

• Sangría vs. Plano: Usar sangría para "Descubrimiento" (donde el contexto del padre es crítico). Usar listas planas con referencias "@mención" para entornos de "Tarea" (donde la información más reciente es prioridad).
• Visualización de Votos: Mostrar votos negativos solo si la comunidad requiere "Autovigilancia". Para la mayoría de los entornos de crecimiento positivo, mostrar solo votos positivos.
• Ordenamiento Predeterminado: Por defecto "Mejores" (puntuación ponderada) para comunidades, pero "Más recientes" para herramientas de colaboración sensibles al tiempo.
• Regla de Truncamiento: Truncar comentarios extremadamente largos (>500 palabras) con un botón "Leer más" para preservar el ritmo vertical del hilo.

Restricciones

• Accesibilidad: Los comentarios deben ser navegables mediante teclado (Tab a través de las acciones). Usar HTML semántico (<article> para comentarios, <ul>/<li> para anidamiento). Cada acción debe tener una etiqueta clara. Las "líneas de hilo" deben ser puramente decorativas (ocultas de ARIA) o usar aria-hidden="true".
• Responsividad: La sangría no debe empujar el contenido fuera del borde de la pantalla. Usar padding-left o margin-left en los contenedores, nunca anchos fijos para bloques anidados.
• Rendimiento: Para hilos de alto volumen (>100 comentarios), usar "Carga Perezosa" o paginación "Cargar más" para evitar tiempos de renderizado inicial largos.

Patrones Comunes de Falla

• Muerte por Sangría: Permitir anidamiento infinito hasta que el texto tenga 1 carácter de ancho en el lado derecho de la pantalla.
• Sobrecarga de Acciones: Mostrar 10+ botones debajo de cada comentario, creando un "mar de iconos".
• Jerarquía Invisible: No distinguir entre el "Autor" y un comentarista regular, dificultando encontrar respuestas oficiales.
• El "Padre Perdido": Hilos profundos sin líneas de hilo, dificultando rastrear qué respuesta pertenece a qué padre.
• Estado Faltante: No mostrar un estado "Pendiente" o "Enviando" cuando un usuario envía un comentario.

Criterios de Validación

• La profundidad de anidamiento está limitada y se transiciona a una vista plana o de "enfoque".
• La jerarquía visual distingue entre Autor, Personal y usuarios regulares.
• Las líneas de hilo conectan claramente las respuestas con sus comentarios padre.
• Las acciones primarias (Responder/Votar) son visualmente prominentes sobre las secundarias.
• La sangría se adapta para viewports móviles para evitar desbordamiento horizontal.
• Los comentarios están marcados semánticamente como una lista anidada o artículos.
• Los botones de acción tienen un objetivo táctil mínimo de 44x44px.