Os dashboards de análise precisam apresentar informações complexas rapidamente. Esses padrões garantem consistência em nosso produto enquanto otimizam para compreensão rápida e tomada de decisão.

Cards de Métricas

Os cards de KPI são a principal forma como os usuários consomem métricas de alto nível:

Número primário: Tipografia grande e em negrito (32-48px) atrai o olhar imediatamente para o valor-chave.
Indicador de comparação: Seta verde para cima ou vermelha para baixo com variação percentual em relação ao período anterior.
Sparkline opcional: Pequeno gráfico inline mostrando tendência de 7 dias fornece contexto sem sobrecarregar.
Clareza do rótulo: Os nomes das métricas são curtos (máximo 2-3 palavras) com ícone de informação para explicação detalhada.

Seletores de Intervalo de Tempo

Controles de tempo consistentes em todas as visualizações do dashboard:

Opções predefinidas: Hoje, Ontem, Últimos 7 dias, Últimos 30 dias, Últimos 90 dias, Últimos 12 meses.
Intervalo personalizado: Seletor de data com calendário visual para seleção precisa.
Toggle de comparação: Ativação com um clique para sobrepor dados do período anterior nos gráficos.
Persistência na URL: O intervalo selecionado é armazenado nos parâmetros da URL para estados de dashboard compartilháveis.

Padrões de Filtro

Os filtros refinam os dados sem sair da visualização atual:

Barra de filtros: Linha horizontal de filtros dropdown para dimensões comuns (país, dispositivo, fonte).
Pills de filtro ativo: Os filtros selecionados aparecem como pills removíveis mostrando o estado atual.
Construtor de segmentos: Modo avançado para condições complexas com lógica AND/OR.
Segmentos salvos: Os usuários podem salvar e nomear combinações de filtros para reutilização rápida.

Indicadores em Tempo Real

Dados ao vivo precisam de sinais visuais claros:

Ponto pulsante: Ponto verde animado indica conexão ativa ao fluxo de dados em tempo real.
Última atualização: Timestamp mostrando "Atualizado há 3s" com atualização automática.
Destaque de novos dados: Destacar brevemente linhas ou métricas que acabaram de mudar (flash amarelo sutil).
Status de conexão: Notificação toast se a conexão em tempo real cair com tentativa de reconexão.

Estados Vazios

O que os usuários veem quando ainda não há dados:

Ilustração útil: Gráfico amigável que corresponde ao contexto (gráfico sem pontos de dados, lista vazia).
Explicação clara: Por que não há dados — "Sem visitantes neste intervalo de tempo" vs "Rastreamento ainda não instalado".
Prompt de ação: Botão ou link para resolver o estado vazio (instalar script, alterar intervalo de datas).
Opção de dados de exemplo: Para novos usuários, ofereça visualizar dados de demonstração para entender a interface.

Estados de Carregamento

O desempenho percebido importa tanto quanto a velocidade real:

Telas skeleton: Formas de espaço reservado cinzas que correspondem ao layout esperado reduzem o tempo de carregamento percebido.
Carregamento progressivo: Mostrar dados em cache imediatamente, atualizar com dados novos quando disponíveis.
Animação escalonada: Elementos skeleton animam em sequência para indicar atividade.
Tratamento de timeout: Após 10 segundos, mostrar opção de tentar novamente em vez de carregamento infinito.

Padrões de Tabela

Tabelas de dados para exploração detalhada:

Colunas classificáveis: Clique nos cabeçalhos para classificar, com indicadores claros de ascendente/descendente.
Cabeçalho fixo: Os cabeçalhos das colunas permanecem visíveis ao rolar tabelas longas.
Ações ao passar o mouse: Ações de linha (visualizar, editar, excluir) aparecem ao passar o mouse, ocultas por padrão.
Paginação vs infinito: Use paginação para exploração de dados, scroll infinito para feeds em tempo real.

Navegação de Drill-Down

Mover da visão geral para o detalhe:

Clicar para filtrar: Clicar em um segmento do gráfico filtra todo o dashboard para essa dimensão.
Trilha de breadcrumb: Mostra o caminho atual de drill-down com links para retornar a níveis superiores.
Painel lateral de detalhe: Clicar em uma linha abre um painel deslizante com detalhes completos sem perder o contexto.
Navegação para trás: O botão voltar do navegador funciona corretamente através dos estados de drill-down.

Padrões de Dashboard