Sistema de Métricas e Estatísticas

O que Sistema de Métricas e Estatísticas faz?

Propósito

O Sistema de Métricas e Estatísticas fornece uma metodologia para visualizar dados quantitativos de forma que sejam instantaneamente compreensíveis e contextualmente relevantes. Ele vai além de simplesmente "exibir um número" ao estabelecer regras para hierarquia numérica, visualização de tendências e coloração semântica, garantindo que os usuários possam compreender o significado de um valor (por exemplo, "42% é bom ou ruim?") sem análise profunda.

Casos de Uso

• Painéis SaaS: Exibindo indicadores-chave de desempenho (KPIs) como MRR, Churn ou Usuários Ativos.
• Prova Social de Marketing: Apresentando seções "Em Números" (ex.: "Mais de 10 mil Clientes", "99,9% de Disponibilidade").
• Saúde e Monitoramento: Visualizando desempenho do sistema, taxas de erro ou uso de recursos.
• Analytics Pessoais: Mostrando progresso em direção a metas em aplicativos de fitness, finanças ou produtividade.
• E-commerce: Exibindo contagens de avaliações, níveis de estoque ou "itens vendidos nas últimas 24 horas".

Quando NÃO Usar

• Conjuntos de Dados Brutos: Se o usuário precisar classificar, filtrar ou comparar mais de 10 linhas de dados com múltiplos atributos, use sistema-de-tabela-de-dados.
• Relacionamentos Complexos: Se o objetivo principal for mostrar a relação entre variáveis ao longo do tempo, use uma biblioteca completa de Gráficos (não coberta por este sistema atômico).
• Conteúdo Narrativo: Números embutidos em frases devem seguir a tipografia padrão; este sistema é para métricas de "Exibição".
• Metadados de Baixo Valor: Pequenas contagens (como notificações) devem usar sistema-de-emblemas-e-etiquetas.

Entradas

1. O Valor: O número ou porcentagem principal a ser exibido.
2. O Rótulo: Uma descrição clara e concisa do que o valor representa.
3. Contexto/Tendência: Dados comparativos (ex.: em relação ao mês anterior, em relação à meta).
4. Unidade/Formato: Símbolos de moeda, porcentagens ou unidades (ex.: "ms", "GB").
5. Prioridade Hierárquica: Este é um "KPI Principal" ou uma "Estatística de Suporte"?

Saídas

1. Especificação do Cartão de Estatística: A disposição espacial do valor, rótulo e tendência dentro de um contêiner.
2. Escala Tipográfica: Tamanhos definidos para números de "Exibição" versus rótulos.
3. Lógica de Tendência: Regras visuais para estados de Subida, Descida e Neutro (Cor + Ícones).
4. Estratégia Responsiva: Como as grades de métricas recolhem ou escalam em dispositivos móveis.

Fluxo de Trabalho

1. Categorize o Tipo de Métrica

Determine a "gravidade" visual necessária:

• Nível 1: Métrica Hero. Grande, centralizada, geralmente sem borda. Usada para prova social de alto nível em landing pages.
• Nível 2: Cartão de KPI. Contido dentro de um cartão, geralmente em uma grade. Usado para resumos de painéis.
• Nível 3: Estatística Embutida. Exibição pequena e de alta densidade. Usada em cabeçalhos ou barras laterais.

2. Estabeleça a Hierarquia Numérica

Aplique as regras de "Tipografia de Exibição":

• O Valor: Deve ser o maior elemento (geralmente 200–400% do tamanho do corpo).
• O Rótulo: Colocado diretamente acima ou abaixo do valor. Use uma cor suave ou peso menor para garantir que não concorra.
• A Unidade: Símbolos (%, $) devem ser ligeiramente menores que o número para evitar que "quebrem" o foco visual no valor.

3. Forneça Contexto de Tendência e Comparação

Um número sem contexto geralmente não tem significado. Adicione uma "Camada de Comparação":

• Indicador de Tendência: Use uma seta (↑/↓) emparelhada com uma porcentagem ou variação de valor.
• Rótulo de Período: Sempre especifique o período de comparação (ex.: "em relação aos últimos 30 dias").
• Coloração Semântica: Aplique cor à tendência, não necessariamente ao valor.
  • Tendência Positiva: Verde (geralmente).
  • Tendência Negativa: Vermelho (geralmente).
  • Neutra: Cinza.

4. Aplique Ritmo Espacial (A Grade)

Métricas raramente são mostradas isoladamente. Agrupe-as usando sistema-de-grade-responsiva:

• Layout de Grade: 3 ou 4 colunas no desktop; 1 ou 2 no mobile.
• Preenchimento Interno: Garanta espaços em branco generosos (--space-l ou --space-xl) ao redor do valor para fazê-lo "destacar".

5. Projete para Estados de Carregamento e Vazio

• Esqueleto: Use sistema-de-estado-esqueleto para o valor e a tendência enquanto os dados estão sendo carregados.
• Estados Zero: Se uma métrica for 0, decida se deve ser exibida como "0" ou um travessão (—).

Regras de Decisão

• A Regra do "Bom/Ruim": Nunca use Verde/Vermelho para tendências se a métrica não for inerentemente positiva/negativa (ex.: "Temperatura" não deve ficar verde só porque subiu). Use Neutro (Cinza/Azul) para mudanças não valoradas.
• Lógica de Arredondamento: Para estatísticas de marketing, arredonde para o "K" ou "M" mais próximo para leitura instantânea (ex.: "12,4K" vs "12.432"). Para painéis, use a precisão necessária para a tarefa.
• Uso de Ícones: Use ícones apenas se eles ajudarem a distinguir entre categorias diferentes de métricas (ex.: um ícone de "Usuários" vs um ícone de "Receita"). Não use ícones apenas para decoração.
• Posicionamento do Rótulo: Rótulos alinhados ao topo são melhores para escanear uma grade de métricas semelhantes; rótulos alinhados à base são melhores para estatísticas "Hero" onde o número é a principal atração.

Restrições

• Acessibilidade: Use aria-label para fornecer o contexto completo (ex.: "Receita: 12.000 dólares, aumento de 5% em relação ao mês passado"). Garanta que o contraste de cores para indicadores de tendência atenda ao WCAG AA (4,5:1).
• Responsividade: Os valores das métricas nunca devem transbordar seus contêineres. Use tipografia fluida (clamp() em CSS) ou lógica de "encaixe por redução" para números muito grandes.
• Consistência: Todas as métricas em um único grupo devem usar o mesmo arredondamento, alinhamento e estilo de tendência.

Padrões Comuns de Falha

• O "Número Nu": Exibir um valor sem rótulo ou contexto, deixando o usuário adivinhando o que significa.
• Dependência Excessiva de Cor: Usar apenas Vermelho/Verde para indicar tendência sem ícones (↑/↓), tornando-o inacessível para usuários daltônicos.
• Inversão de Hierarquia: Tornar o rótulo maior ou mais negrito que o valor, atrasando o processo de "escaneamento e compreensão".
• Agrupamento Excessivo de Métricas: Colocar muitas métricas em uma única linha, fazendo com que os números se misturem.
• Excesso de Precisão: Mostrar 4 casas decimais em uma landing page de marketing, criando carga cognitiva desnecessária.

Critérios de Validação

• Toda métrica tem um rótulo claro e visível.
• Os valores usam um tamanho de tipografia de "Exibição" distinto (maior que o texto do corpo).
• As tendências (Subida/Descida) são indicadas por COR e um ícone/símbolo.
• O contexto de comparação (ex.: período) é declarado explicitamente.
• Cores semânticas (Verde/Vermelho) são usadas apenas para mudanças valoradas.
• O layout da grade mantém a legibilidade no celular (sem transbordamentos).
• Acessibilidade: contexto completo está disponível para leitores de tela via ARIA.