Design de Dashboard de Desempenho de Conteúdo

Da visão geral de publicação à análise

Este exemplo oficial do OpenDesign é um workspace escuro de desempenho de conteúdo para a identidade de amostra Jerrod Lew. A abertura combina uma barra de ferramentas compacta de tema e período com uma grande manchete de publicação com serifa. No estado capturado do X, o resumo diz que quatorze publicações foram enviadas naquela semana. Quatro cartões de redes estabelecem o contexto mais amplo da audiência antes que uma linha separada de KPIs apresente a rede de amostra ativa.

A linha de KPIs do X mostra 184.3K seguidores, 4.8% de engajamento, 12.8K curtidas e 3.1K republicações. O primeiro par analítico então dá mais largura à curva de seguidores do que ao cartão da publicação em destaque, usando uma proporção de colunas de dois para 1.2. Essa assimetria privilegia a tendência, mantendo ao lado um exemplo de publicação. A miniatura com gradiente é uma superfície CSS criada pelo autor, não uma fotografia nem uma prova de uma campanha real.

Várias janelas de relatório coexistem: a barra de ferramentas destaca 30D, a manchete diz esta semana, curtidas e republicações indicam 7D, e o cartão de seguidores indica 30D. Os botões de período não têm um manipulador de filtragem. Portanto, o leitor deve tratá-los como visões de amostra rotuladas de formas diferentes, sem inferir que uma seleção na barra de ferramentas recalcula todos os painéis.

Separe as perguntas de audiência, planejamento e conversão

O workspace não para no alcance. Upcoming + Drafts distingue duas entradas Scheduled, uma Draft e uma Idea; a tabela de concorrentes adjacente apresenta quatro linhas de amostra nomeadas. Esses estados de planejamento ficam ao lado de uma divisão semanal de engajamento de 64% de curtidas, 19% de comentários, 12% de republicações e 5% de salvamentos. O último totaliza 100%, mas sua regra de medição não é fornecida.

Os painéis posteriores restringem ainda mais as perguntas. Uma linha horária usa doze posições de duas horas, de 00 a 22, em UTC+8; um anel de sentimento divide Positive, Neutral e Negative em 58%, 28% e 14%. O mapa de calor adjacente cria 72 células com intensidade de cor escolhida aleatoriamente. Sua cor é uma variação decorativa de amostra, não uma explicação medida de quando uma audiência está disponível.

O painel de conversão rotula impressões em 4.2M, visitas ao perfil em 428K, assinaturas em 49K e leads pagos em 8.2K. As larguras de barra criadas para ele são 100%, 41%, 24% e 11%, e não proporções derivadas dessas contagens. Manter rótulos de contagem e barras juntos torna o funil proposto legível, mas essas larguras não devem ser interpretadas como taxas de conversão reais.

Inspecione um ponto, depois compare um intervalo

Uma faixa fixa de inspeção mantém quatro funções distintas: foco atual, ponto fixado, intervalo ativo e comparação A/B. Isso transforma o movimento do ponteiro em contexto visível, em vez de deixar cada tooltip de gráfico isolado. Nas linhas horária, de resposta, de proporção e de coorte, passar o cursor identifica um ponto de amostra próximo; clicar o fixa. As teclas de seta também movem a fixação em um canvas focado, enquanto Escape limpa essa seleção local.

Arrastar uma linha seleciona um intervalo e calcula sua média, pico e menor valor. Shift-drag armazena até quatro intervalos, e o rótulo A/B compara os dois últimos usando diferenças de média e volatilidade. Esta é uma comparação numérica local de valores de amostra selecionados, não uma atribuição experimental, um teste de significância ou um ganho causal medido. Os manipuladores de toque permitem fixar pontos e inspecionar intervalos ativos, mas não implementam o caminho de intervalo salvo com Shift-drag do mouse.

O painel inferior Revenue vs Content Cost é uma única série de proporção rotulada em x, de 1.2 a 2.4 ao longo de W1–W7; não são linhas separadas de receita e custo nem totais monetários. Cohort Retention usa rótulos C1–C7 em vez de datas explícitas. Ambos podem ilustrar uma relação analítica proposta, mas suas definições precisam de dados reais antes que alguém possa usá-los para avaliar rentabilidade ou retenção.

1. Localize o contexto da amostra

   Leia a manchete da rede ativa e a linha de KPIs antes de interpretar um painel mais aprofundado. O resumo das quatro redes permanece separado da visão ativa.

2. Inspecione um valor específico

   Passe o cursor sobre um ponto local do gráfico de linhas ou fixe-o e acompanhe seu rótulo até a faixa persistente de insights; a interação não busca dados externos.

3. Compare intervalos selecionados

   Use intervalos com Shift-drag no desktop para comparar médias e volatilidade locais, mantendo a comparação de intervalos separada de evidências experimentais.

Comportamento do protótipo local e limites dos dados

A fonte implementa a troca de tema, a inspeção do canvas e a rotação automática da rede de amostra a cada 3.6 segundos. A rotação atualiza a manchete, os cartões de KPIs, o total de seguidores e a publicação em destaque; os arrays fixos mais profundos, os rascunhos, o benchmark e o funil não se tornam conjuntos de dados específicos de cada plataforma. A interpolação dos números exibe brevemente valores intermediários. Nem a animação nem o rótulo Live overview estabelecem um feed ao vivo, uma conexão de conta armazenada ou uma medição multiplataforma verificada.

Export report, Auto-summary, New post e os botões de intervalo de datas estão visíveis sem manipuladores de ação; a faixa semelhante a uma consulta é uma div, não uma entrada funcional. A fonte não contém API de plataforma, serviço de publicação ou backend de relatórios. Sua comparação de referência ao passar o cursor usa a média da série atual, portanto seu rótulo não estabelece uma comparação de coorte ano a ano. A licença do pacote oficial também não verifica os direitos sobre cada nome ou alegação representados.