Sistema de Línea de Tiempo de Actividad
Propósito
El Sistema de Línea de Tiempo de Actividad proporciona una metodología para diseñar secuencias cronológicas de eventos, registros históricos u hojas de ruta. Garantiza que los usuarios puedan rastrear el progreso, comprender relaciones temporales y escanear datos históricos de manera eficiente. Este sistema equilibra la densidad de información con el ritmo espacial, asegurando que la narrativa de "cuándo" y "qué" sea clara en todos los puntos de vista.
Casos de Uso
- Diseñar feeds de actividad para paneles SaaS (por ejemplo, historial de proyectos).
- Estructurar hojas de ruta de productos o notas de versión.
- Organizar la historia de la empresa o hitos de "Acerca de Nosotros".
- Implementar seguimiento de pedidos o historial de envíos para comercio electrónico.
- Gestionar visualizaciones de procesos de múltiples etapas (por ejemplo, estado de solicitud).
Cuándo NO Usar
- Progreso Lineal de Pasos: Para una secuencia simple de pasos que el usuario debe completar en tiempo real, use
step-progress-system. - Datos Puramente Tabulares: Si el objetivo principal es ordenar y filtrar por muchas columnas (por ejemplo, un registro de auditoría financiera completo), use
data-table-ui-system. - Navegación Global: Para la estructura de todo el sitio, use
site-navigation-system. - Feeds de Blog Simples: Donde las tarjetas estándar en una cuadrícula o lista son suficientes sin un "hilo" visual o marcadores temporales.
Entradas
- Inventario de Eventos: La lista de eventos, marcas de tiempo y metadatos asociados.
- Resolución Temporal: ¿Al usuario le importan segundos, días o años?
- Tipos de Eventos: Categorización de eventos (por ejemplo, Info, Éxito, Advertencia, Error, o Hito vs. Acción Menor).
- Restricciones Espaciales: ¿La línea de tiempo vivirá en una barra lateral, una vista de página completa o una tarjeta estrecha?
- Tokens de Marca: Colores, escalas tipográficas y tokens de espaciado.
Salidas
- Especificación de Anatomía de Línea de Tiempo: Definición del "Hilo" (la línea vertical/horizontal), los "Nodos" (los marcadores) y los "Bloques de Contenido".
- Estrategia de Agrupación: Reglas para agrupar eventos (por ejemplo, "Hoy", "Ayer", "Octubre 2023").
- Matriz de Estado y Situación: Tratamientos visuales para diferentes tipos de eventos y estados interactivos.
- Plano Responsivo: Cómo se adapta la línea de tiempo desde un diseño centrado o alternado a una vista de columna única en móvil.
Flujo de Trabajo
1. Definir el Hilo Temporal y la Orientación
Determine la dirección del tiempo:
- Vertical (Estándar): Mejor para longitudes de contenido variables e historias largas.
- Horizontal: Mejor para hojas de ruta de alto nivel o procesos cortos donde el espacio horizontal es abundante.
Establezca el "Hilo" (la línea que conecta los eventos) y asegúrese de que tenga un peso visual y color consistentes (generalmente un tono neutro apagado).
2. Establecer Nodos y Marcadores de Eventos
Diseñe los anclajes visuales para cada evento:
- Nodos Simples: Pequeños puntos o círculos para acciones menores.
- Nodos Icónicos: Iconos dentro de círculos para indicar tipos de eventos (por ejemplo, una marca de verificación para "Completado").
- Marcadores de Fecha: Etiquetas que flotan junto a o encima de los nodos.
3. Aplicar Ritmo Espacial y Agrupación
Evite el desorden visual agrupando eventos por períodos de tiempo:
- Agrupación Relativa: "Justo ahora", "Hace 2 horas".
- Agrupación Absoluta: "Lunes, 23 Oct", "Septiembre 2023".
Use el fluid-spacing-system para mantener espacios verticales consistentes entre eventos. Los hitos de alta prioridad deben tener más espacio en blanco que los elementos de actividad menores.
4. Organizar el Bloque de Contenido
Aplique el visual-hierarchy-system al contenido adyacente a cada nodo:
- Título: La acción central o el nombre del evento.
- Metadatos: Marca de tiempo, actor (avatar/nombre de usuario) y categoría.
- Cuerpo/Descripción: Detalles opcionales o contenido expandido.
- Acciones: Botones contextuales (por ejemplo, "Ver Detalles", "Deshacer").
5. Planificar la Adaptación Responsiva
- Diseño Alternado (Patrón Z): En escritorio, los eventos alternan izquierda y derecha del hilo. En móvil, colapsar a una columna única (Hilo a la izquierda, Contenido a la derecha).
- Diseño de Un Solo Lado: Estandarizar en "Hilo-Izquierda, Contenido-Derecha" para móvil para maximizar la legibilidad.
Reglas de Decisión
- La Regla del "Hilo": La línea nunca debe romperse a menos que haya un vacío lógico en el tiempo o una acción de "Cargar Más".
- Umbral de Agrupación: Si más de 5 eventos ocurren dentro del mismo día, agrúpelos bajo un solo encabezado de fecha para reducir texto redundante.
- La Jerarquía del "Nodo": Use nodos más grandes o colores de marca para "Hitos" y nodos más pequeños y neutros para "Actividades".
- Posición de la Marca de Tiempo: Para líneas de tiempo verticales, coloque las marcas de tiempo a la izquierda del hilo (escritorio) o inmediatamente debajo del título (móvil) para el escaneo más rápido.
Restricciones
- Accesibilidad: Las líneas de tiempo deben ser navegables como una lista (
<ul>o<ol>). Los nodos que contienen iconos deben teneraria-labelo texto oculto para lectores de pantalla. Envuelva las marcas de tiempo en un elemento<time datetime="...">para que las etiquetas relativas ("Hace 2 horas") sigan siendo legibles por máquina. Para feeds de actividad que se actualizan en vivo, agregue nuevas entradas dentro de una regiónaria-live="polite"(no toda la lista) para que los usuarios de lectores de pantalla escuchen nuevos eventos sin perder su lugar. - Responsividad: Las líneas de tiempo nunca deben desbordar el viewport. Las líneas de tiempo horizontales deben cambiar a verticales o usar un desplazamiento horizontal en móvil.
- Contraste Visual: El hilo y los nodos deben cumplir con una relación de contraste de 3:1 contra el fondo.
Patrones de Falla Comunes
- Hilos Rotos: La línea vertical comienza y termina arbitrariamente, dificultando seguir la secuencia.
- Sobrecarga de Información: Incluir demasiado texto del cuerpo en cada evento, convirtiendo la línea de tiempo en un muro de texto.
- Alineación Inconsistente: Mezclar texto centrado y alineado a la izquierda dentro de la misma línea de tiempo sin una lógica clara.
- Apretujamiento en Móvil: Intentar mantener un diseño alternado (izquierda/derecha) en móvil, dejando columnas diminutas para el texto.
Criterios de Validación
- Los eventos siguen un orden cronológico claro y consistente (Ascendente o Descendente).
- Los marcadores visuales (nodos) y el hilo de conexión están estilizados de manera consistente.
- La agrupación temporal (por ejemplo, "Hoy") se utiliza para reducir la carga cognitiva.
- El comportamiento responsivo (por ejemplo, colapsar a una columna única) está definido y es funcional.
- Accesibilidad: La línea de tiempo está marcada como una lista semántica, y las marcas de tiempo usan
<time datetime="...">. - Los feeds en tiempo real anuncian nuevas entradas a través de una región
aria-live="polite"con ámbito sin interrumpir el foco del lector de pantalla. - Los hitos principales son visualmente distintos de la actividad secundaria.