Sistema de Atividades em Linha do Tempo
Propósito
O Sistema de Atividades em Linha do Tempo fornece uma metodologia para projetar sequências cronológicas de eventos, logs de histórico ou roadmaps. Ele garante que os usuários possam acompanhar o progresso, entender relações temporais e digitalizar dados históricos de forma eficiente. Este sistema equilibra densidade de informação com ritmo espacial, garantindo que a narrativa de "quando" e "o que" seja clara em todas as viewports.
Casos de Uso
- Projetar feeds de atividade para painéis SaaS (ex.: histórico de projetos).
- Estruturar roadmaps de produtos ou notas de versão.
- Organizar histórico empresarial ou marcos "Sobre Nós".
- Implementar rastreamento de pedidos ou histórico de envios para e-commerce.
- Gerenciar visualizações de processos de múltiplos estágios (ex.: status de inscrição).
Quando NÃO Usar
- Progresso Linear de Etapas: Para uma sequência simples de etapas que o usuário deve concluir em tempo real, use
step-progress-system. - Dados Puramente Tabulares: Se o objetivo principal for classificar e filtrar por muitas colunas (ex.: um log de auditoria financeira completo), use
data-table-ui-system. - Navegação Global: Para estrutura em todo o site, use
site-navigation-system. - Feeds de Blog Simples: Onde cartões padrão em uma grade ou lista são suficientes sem um "fio" visual ou marcadores temporais.
Entradas
- Inventário de Eventos: A lista de eventos, carimbos de data/hora e metadados associados.
- Resolução Temporal: O usuário se importa com segundos, dias ou anos?
- Tipos de Eventos: Categorização de eventos (ex.: Informação, Sucesso, Aviso, Erro, ou Marco vs. Ação Menor).
- Restrições Espaciais: A linha do tempo ficará em uma barra lateral, uma visualização de página inteira ou um cartão estreito?
- Tokens de Marca: Cores, escalas tipográficas e tokens de espaçamento.
Saídas
- Especificação de Anatomia da Linha do Tempo: Definição do "Fio" (a linha vertical/horizontal), "Nós" (os marcadores) e "Blocos de Conteúdo".
- Estratégia de Agrupamento: Regras para agrupar eventos (ex.: "Hoje", "Ontem", "Outubro de 2023").
- Matriz de Estado e Status: Tratamentos visuais para diferentes tipos de evento e estados interativos.
- Planta Responsiva: Como a linha do tempo se adapta de uma disposição centrada ou alternada para uma visualização de coluna única em dispositivos móveis.
Fluxo de Trabalho
1. Definir o Fio Temporal e Orientação
Determinar a direção do tempo:
- Vertical (Padrão): Melhor para comprimentos de conteúdo variáveis e históricos longos.
- Horizontal: Melhor para roadmaps de alto nível ou processos curtos onde o espaço horizontal é abundante.
Estabelecer o "Fio" (a linha que conecta eventos) e garantir que ele tenha peso visual e cor consistentes (geralmente um tom neutro suave).
2. Estabelecer Nós de Evento e Marcadores
Projetar as âncoras visuais para cada evento:
- Nós Simples: Pequenos pontos ou círculos para ações menores.
- Nós Icônicos: Ícones dentro de círculos para indicar tipos de evento (ex.: uma marca de seleção para "Concluído").
- Marcadores de Data: Rótulos que flutuam ao lado ou acima dos nós.
3. Aplicar Ritmo Espacial e Agrupamento
Evitar poluição visual agrupando eventos por períodos de tempo:
- Agrupamento Relativo: "Agora mesmo", "Há 2 horas".
- Agrupamento Absoluto: "Segunda-feira, 23 de Outubro", "Setembro de 2023".
Use o fluid-spacing-system para manter lacunas verticais consistentes entre eventos. Marcos de alta prioridade devem ter mais espaço em branco do que itens de atividade menores.
4. Organizar o Bloco de Conteúdo
Aplicar o visual-hierarchy-system ao conteúdo adjacente a cada nó:
- Título: A ação central ou nome do evento.
- Metadados: Carimbo de data/hora, ator (avatar/nome do usuário) e categoria.
- Corpo/Descrição: Detalhes opcionais ou conteúdo expandido.
- Ações: Botões contextuais (ex.: "Ver Detalhes", "Desfazer").
5. Planejar Adaptação Responsiva
- Disposição Alternada (Padrão Z): No desktop, os eventos alternam à esquerda e à direita do fio. No celular, colapsa para uma coluna única (Fio à esquerda, Conteúdo à direita).
- Disposição de Um Lado: Padronizar para "Fio-à-Esquerda, Conteúdo-à-Direita" no celular para maximizar a legibilidade.
Regras de Decisão
- A Regra do "Fio": A linha nunca deve ser quebrada, a menos que haja uma lacuna lógica no tempo ou uma ação "Carregar Mais".
- Limite de Agrupamento: Se mais de 5 eventos ocorrerem no mesmo dia, agrupe-os sob um único cabeçalho de data para reduzir texto redundante.
- A Hierarquia de "Nós": Use nós maiores ou cores da marca para "Marcos" e nós menores e neutros para "Atividades".
- Posição do Carimbo de Data/Hora: Para linhas do tempo verticais, coloque carimbos de data/hora à esquerda do fio (desktop) ou imediatamente abaixo do título (celular) para a digitalização mais rápida.
Restrições
- Acessibilidade: Linhas do tempo devem ser navegáveis como uma lista (
<ul>ou<ol>). Nós contendo ícones devem teraria-labelou texto oculto para leitores de tela. Envolva carimbos de data/hora em um elemento<time datetime="...">para que rótulos relativos ("Há 2 horas") permaneçam legíveis por máquina. Para feeds de atividade com atualização em tempo real, adicione novas entradas dentro de uma regiãoaria-live="polite"(não a lista inteira) para que usuários de leitor de tela ouçam novos eventos sem perder seu lugar. - Responsividade: Linhas do tempo nunca devem transbordar a viewport. Linhas do tempo horizontais devem mudar para verticais ou usar uma rolagem horizontal no celular.
- Contraste Visual: O fio e os nós devem atender a uma taxa de contraste de 3:1 em relação ao fundo.
Padrões Comuns de Falha
- Fios Quebrados: A linha vertical começa e termina arbitrariamente, dificultando o acompanhamento da sequência.
- Sobrecarga de Informação: Incluir muito texto do corpo em cada evento, transformando a linha do tempo em uma parede de texto.
- Alinhamento Inconsistente: Misturar texto centralizado e alinhado à esquerda dentro da mesma linha do tempo sem uma lógica clara.
- Aglomeração em Celular: Tentar manter uma disposição alternada (esquerda/direita) no celular, deixando colunas minúsculas para texto.
Critérios de Validação
- Os eventos seguem uma ordem cronológica clara e consistente (Ascendente ou Descendente).
- Os marcadores visuais (nós) e o fio de conexão são estilizados de forma consistente.
- O agrupamento temporal (ex.: "Hoje") é usado para reduzir a carga cognitiva.
- O comportamento responsivo (ex.: colapsar para uma coluna única) é definido e funcional.
- Acessibilidade: A linha do tempo é marcada como uma lista semântica e os carimbos de data/hora usam
<time datetime="...">. - Feeds em tempo real anunciam novas entradas através de uma região
aria-live="polite"com escopo definido, sem interromper o foco do leitor de tela. - Marcos primários são visualmente distintos da atividade secundária.