Os painéis modernos emprestaram muito dos painéis automotivos. Elementos interessantes também podem ser vistos nos centros de controle de vôo da NASA na década de 1960 e no início da era da automação. Hoje, qualquer situação bastante complicada, seja um lançamento de míssil ou uma luta com alienígenas no capacete de Tony Stark, inevitavelmente aparece na forma de algum tipo de painel.

Mas não estamos aqui para uma aula de história, mas para aprender a criar um bom painel. Nossa tarefa será estudar os tipos de painéis e gráficos usados ​​no monitoramento de sistemas modernos; no entanto, muitas lições são aplicáveis ​​em outros contextos.

Há tanta informação neste tópico que é difícil descobrir por onde começar! Mas eu vou te ajudar. No processo de estudar o design dos painéis, abordaremos os seguintes pontos:

1. Estrutura e esquema.
2. Apresentação e acessibilidade.
3. Escolha dos gráficos utilizados.
4. Melhorando o contexto.

Parte 1. Estrutura e esquema

Vamos parar primeiro e fazer duas perguntas: quem é nosso público-alvo e quais são seus objetivos?

Conhecer o seu público-alvo e suas tarefas é fundamental para o resto do trabalho. Se o seu público-alvo são gerentes de desenvolvimento que precisam conhecer informações de alto nível sobre o funcionamento do sistema, os dados necessários serão muito diferentes do que o engenheiro de entrada precisa.

Antes de começar a criar um painel, pegue um pedaço de papel e anote as perguntas que o usuário-alvo fará, classifique-as em ordem de prioridade e determine os dados ideais que precisam ser exibidos para responder à pergunta.


Observa que escrevi enquanto conduzia uma entrevista comigo para este post.

Pense no formulário

Cada elemento adicionado ao painel deve servir claramente as tarefas do público-alvo, e a localização do widget deve ser determinada por sua importância. Esta informação deve ser colocada em uma tela sem rolagem. Nossos usuários humanos podem armazenar apenas três ou quatro elementos de informações visuais em suas memórias de trabalho; portanto, você precisa armazenar todas as informações importantes em um único local (poucos, 79). Para ajudar o usuário, você pode garantir que ele possa visualizar todas as informações lançando um olhar ¹ , e ele não precisa se lembrar de nada.

Se você precisar visualizar informações adicionais, considere a criação de painéis separados projetados para cumprir a tarefa do usuário, por exemplo, estudar problemas com coleta de lixo ou travar dependências a jusante. No caso ideal, esses procedimentos de estudo devem poder ser reutilizados em diferentes sistemas.

É melhor usar o layout modular . As pessoas são especialmente bem orientadas nos pequenos campos descritos nos princípios de agrupamento . Isso é conveniente porque quase todos os sistemas modernos de painel funcionam de maneira semelhante.

Ao escrever uma lista de prioridades e criar módulos, podemos começar a adicionar elementos do painel. Você provavelmente já tem uma ideia intuitiva de que o elemento mais importante precisa ser colocado no canto superior esquerdo e de colocá-los da esquerda para a direita, de cima para baixo.


Provavelmente, você não precisa desta ilustração.

Esse é um padrão padrão para as pessoas que estão acostumadas a ler em idiomas ocidentais: seus olhos geralmente prestam atenção no canto superior esquerdo (Poucos, 107-108) ² . No entanto, é importante não esquecer o seu público-alvo: em alguns idiomas, é mais familiar trabalhar da direita para a esquerda ou de cima para baixo ³ .

Leve o seu tempo com a implementação!

Eu sei que você não pode esperar, mas antes de começar, crie um esboço:


Este é um esboço.

Olhe para ele. Discuta com o usuário. Pendure na geladeira e aproveite enquanto toma café. Compartilhe com a equipe. É útil esboçar e experimentar idéias. Por exemplo, depois de criar o esboço, decidi que, antes de prosseguir, a ordem precisa ser alterada. Meu usuário (eu) decidiu que saber a duração era mais importante do que erros.

Bem, vamos começar!

Após criar um esquema modular, os desenvolvedores geralmente começam a colocar gráficos e outros widgets do mesmo tamanho na grade, passando para a próxima linha quando o local acabar. Você não pode manter o mesmo tamanho, mas ajuste a largura dos elementos para enfatizar a importância ou aumentar a clareza. Os gráficos mais amplos não apenas se destacam mais fortemente, mas também têm outras propriedades úteis. Tufty diz que os gráficos mais amplos se assemelham ao horizonte, e “o olho humano se adaptou naturalmente para rastrear desvios na linha do horizonte” (186) ⁴ . Além disso, em gráficos amplos, é necessário transferir menos texto, o que enfatiza a relação causal de muitos gráficos. Isso é especialmente verdadeiro para gráficos de linhas usados ​​em muitos painéis. O efeito medido - por exemplo, memória ocupada ou atraso - será indicado no eixo Y e o tempo no eixo X. O espaço obtido pelo aumento da largura dos gráficos permite "uma especificação mais detalhada do valor primário" (187) ⁴ .


Expandimos o cronograma para enfatizar a importância da taxa de sucesso.

Observe que mesmo os gráficos "regulares" neste painel são mais largos que altos. Isso é bom pelas razões mencionadas acima e, além disso, é bom procurar por causa do princípio da proporção áurea .

Resumir

Parabéns! Você começou a criar um painel sob a orientação das melhores mentes no desenvolvimento de painéis. Essa será uma excelente base para o desenvolvimento do seu painel.


Ótimo começo.

Breve repetição

Vamos repetir o que aprendemos aqui:

• Aja conscientemente, estude seu usuário e as perguntas que ele faz
• Mantenha a simplicidade, não force os usuários a rolar e lembrar
• Crie painéis relacionados adicionais, conforme necessário
• Poste informações importantes em lugares importantes para a consciência
• Use um layout modular e dê preferência a gráficos amplos em vez de estreitos.

Fontes e notas

1. As pessoas geralmente têm apenas um par de olhos.
2. Stephen Few (poucos, Stephen). Design do painel de informações . Analytics Press, 2013.
3. Se o seu painel for para alienígenas ou robôs, leia os guias de design apropriados.
4. Edward R. Tufte (Tufte, Edward R). A exibição visual de informações quantitativas . Graphics Press, 1998.

Parte 2. Apresentação e acessibilidade

Portanto, temos uma grade bonita e o peso visual necessário é selecionado para cada elemento dessa grade. Agora precisamos pensar em exibir dados para o usuário. E aqui tudo pode dar errado, então você precisa manter a clareza e a constância do design.

O princípio orientador deve ser as tarefas do usuário e a integridade dos dados exibidos. Como esses parâmetros podem variar bastante - o número de usuários, o tempo gasto na coleta de lixo e a quantidade imprevisível de erros, precisamos criar algum tipo de estrutura que possa ser usada para selecionar soluções.

Vamos estudar para isso o que consiste na visualização de alta qualidade das métricas do sistema.

Seleção de dados

Você provavelmente espera que nesta seção direi quais dados específicos devem ser colocados no painel. De fato, depende principalmente de você, leitor! Lembre-se dos usuários e seus objetivos. Use sua lista e decida o que é melhor para o que poucos chamaram de quatro estágios do monitoramento de informações (32) ¹ :

1. Atualizando dados da situação em um nível alto.
2. Identificação de elementos específicos que requerem atenção e foco neles.
   
   1. Atualizando informações sobre este item com mais detalhes
   2. Determinando a necessidade de ação
3. Se uma ação for necessária, informações adicionais deverão ser acessadas para determinar as informações necessárias.
4. A resposta.

Em geral, a melhor sinalização da operação e conscientização do sistema de alto nível é fornecida pelo método RED e / ou pelo método USE . No caso ideal, o painel deve conter apenas os principais indicadores de desempenho (KPIs) necessários para se familiarizar com a situação e não para estudar os dados (Poucos, 30-31) ¹ . No entanto, existem muitos casos em que, além dos KPIs padrão, são necessárias informações mais específicas. Se você não tiver certeza de qual, verifique os objetivos do usuário. Cada um dos elementos em consideração é necessário para executar tarefas do usuário?

Também é importante lembrar que esses painéis geralmente acompanham sistemas, cujas leituras geralmente mudam. Você precisará adicionar gráficos de unidades separados ou widgets de tempo para rastrear KPIs novos e interessantes, ou apenas dados importantes para as tarefas atuais. À medida que sua organização cresce, ela deve examinar criticamente os painéis e descartar todos os artefatos que não são mais úteis. Observe a tabela que você adicionou quando houve um problema de vazamento do descritor de arquivo e pergunte-se: você precisa dele hoje? Você sabe qual tabela eu tenho em mente.

Desempenho de visualização

Na paleta de widgets do seu painel, provavelmente haverá muitas opções para você escolher. E puxa para usar o mais bonito! Mas nem todos são iguais - as pessoas percebem diferentes tipos de informações visuais. Como o usuário deseja navegar rapidamente, nossa tarefa é apresentar os dados da maneira mais eficiente.


Tarefas de percepção em ordem de precisão.

Acima estão indicadores numéricos das tarefas de percepção das pessoas (Mackinley, 125) ² , que facilitam a compreensão de quão simples será a visualização no cérebro do usuário. De fato, alguns componentes visuais são processados subconscientemente , usando a percepção no nível da atenção sublimiar . O uso adequado da cor, forma, posição e movimento pode facilitar e acelerar muito a percepção de informações importantes em um painel (Poucos, 80) ¹ .


Exemplos de atributos no nível de atenção do sublimiar. Você pode notá-los sem sequer pensar neles!

Escala e unidades

Tendo aprofundado um pouco mais o estudo da forma, Cleveland e McGill (830) ³ classificaram as tarefas com precisão e descobriram que a posição na escala geral é mais precisa do que em diferentes escalas. Poucos (40-41) complementaram isso aconselhando o uso de unidades de medida e os detalhes necessários para que o usuário não precisasse realizar cálculos desnecessários. Portanto, se possível, a mesma escala, eixos e unidades de medida devem ser usados.


Três gráficos dos mesmos dados: sem unidades, com unidades e com uma escala ampliada. 250 porque ?! Os gráficos da esquerda e do meio são mais fáceis de comparar e o do meio é mais fácil de entender. Alinhamento e unidades são importantes!

Graças a essas informações, você pode escolher com mais eficácia as opções de visualização, selecionando aquelas que permitem ao leitor perceber rapidamente os dados.

Tempo

Utilizamos ativamente gráficos de seqüências de tempo , portanto, precisamos considerar cuidadosamente a exibição do tempo. Os gráficos devem usar a mesma janela de tempo. Se o primeiro gráfico mostrar uma fatia em uma hora e estiver vinculado ao momento atual, o mesmo deverá estar em todos os outros gráficos. Isso é especialmente verdadeiro se um seletor de hora ou outro controle "global" for usado.

Muitos painéis têm um "cursor" útil: quando você passa o mouse sobre um gráfico, outros gráficos também indicam o mesmo ponto no tempo. Isso ajuda o usuário a entender o tempo e também torna óbvios todos os desvios na relação de tempo e espaço, como pode ser visto no exemplo abaixo, onde um gráfico é mais amplo que os outros:


O gráfico inferior é mais largo que os dois superiores, mas a barra vertical do “cursor” permite alinhá-los.

Os mesmos princípios se aplicam ao layout horizontal. Widgets ou gráficos que não mantêm a mesma relação entre tempo e espaço devem transmitir isso claramente com diferenças visuais (por exemplo, um widget com um "valor único") ou uma indicação clara.

Agregação oculta

Lembre-se de que em muitas visualizações precisamos lidar com a agregação de dados, que é realizada automaticamente .

Para que os sistemas funcionem, os painéis devem suportar janelas de tempo que variam em uma ampla faixa de valores. Por padrão, os painéis da maioria dos sistemas usam a visualização "atual", mostrando valores no intervalo de uma hora aos últimos quinze minutos. Supondo que os dados sejam capturados em intervalos de dez segundos, cada hora deve conter 360 pontos de dados! Como cada gráfico individual contém muito poucos pixels informativos, as ferramentas do painel devem decidir como ajustar todos esses pontos em campos de tamanho pequeno.


O gráfico superior mostra os dados por 15 minutos e o gráfico inferior mostra uma semana. Observe que perdemos completamente informações sobre o aumento periódico da latência devido à agregação padrão de dados médios. A resolução do widget é mostrada à direita do título do gráfico.

Geralmente, isso é implementado usando agregação de dados: os gráficos mostram a média, quantidade ou algo semelhante. A seleção padrão pode afetar bastante a exibição. Vejamos o gráfico anterior; somente em vez da média, os valores máximos são agregados:


Ao agregar os valores máximos de dados por uma semana, o atraso se torna cerca de 30% maior.

Você pode descobrir como isso funciona na documentação da sua ferramenta de criação de painel. Consideraremos esse tópico quando falarmos sobre diferentes tipos de gráficos.

Adição: índices e montantes

Na minha experiência, esse é um dos problemas mais comuns nos painéis do sistema. Ao exibir o contador como uma proporção ou como uma soma, podemos influenciar bastante a compreensão dos dados pelo usuário. Se exibirmos o número de erros como uma proporção, cada ponto no gráfico será a soma dos erros divididos pelo tempo decorrido. Se exibirmos a soma, naturalmente veremos a soma. Isso significa que o formulário de dados será o mesmo, apenas a escala é diferente.

É recomendável que você indique claramente no título do gráfico o tipo de dados exibido: proporção ou quantidade. Ao escolher entre as duas opções, discuta esse problema com o usuário e selecione o formulário que melhor se adapte às suas necessidades. O que ele espera ver no gráfico?

Nota : ao trabalhar com agregação, considere o uso de proporções e somas!

Atenção: no data

Se houver algum problema durante as medições, alguns pontos de dados podem estar ausentes. Se o usuário espera exibir regularmente os pontos de dados, isso pode ser um problema. Se isso acontecer, considere o uso de interpolação. Normalmente, os painéis do sistema usam interpolação linear para conectar dados ausentes. Às vezes, eles nem sabem que estão faltando dados. Às vezes, a resolução dos dados muda.


A linha azul preenche os dados ausentes com zeros. A linha vermelha usa interpolação linear.

Em um ataque de pediatria, entrei em contato com Stephen Few e fiz uma pergunta sobre esse problema. Estou interessado nesta tarefa há muito tempo e fiquei curioso em saber como ele sugere trabalhar com dados que desaparecem em intervalos irregulares e variáveis:

Se você exibir valores em uma linha do tempo, os intervalos nessa linha do tempo geralmente são constantes. Ou seja, eles estão a uma distância igual um do outro. Se o intervalo for alterado, a distância entre os intervalos também deverá ser alterada para indicar visualmente essa alteração e permanecer constante, a menos que o tamanho do intervalo seja alterado novamente, após o qual a distância também deverá ser alterada. Os valores associados a intervalos de tempo consecutivos devem ser conectados por uma linha, mas se por algum motivo não houver valores nos intervalos, a linha nesses intervalos não deve continuar. Se os valores forem lidos apenas de tempos em tempos (por exemplo, quando alguns eventos ocorrerem) e não em intervalos iguais, eles não deverão ser conectados por uma linha. Nesses casos, você precisa usar um ponto ou coluna de dados separados para codificar valores. Boa sorte para encontrar uma ferramenta que implementa isso.

Que interessante! Eu não tinha certeza de como isso poderia ser implementado programaticamente; portanto, para resolver o problema, esboçei um esboço.


A parte do meio são intervalos mais rápidos. Não há dados em nenhum dos lados. Dados ausentes não estão conectados. O destaque rosa é para fins informativos e não é exibido no gráfico que o usuário vê.

Você pode se perguntar: por que um único pacote de criação de painel não implementa essa funcionalidade? Principalmente porque os desenvolvedores não sabem se os dados são perdidos ou não. Normalmente, intervimos no intervalo em que as métricas chegam e, no mundo moderno dos contêineres abstratos, essas métricas podem aparecer e desaparecer em uma fração de segundo. Sim, este é um problema complexo que o inspira a encontrar uma solução.

Recomendações gerais

Algumas dicas mais úteis:

• . , . .
• . , . .
• , , 3D-, .

O usuário pode ter dificuldade em interpretar os painéis se não atender ao princípio de acessibilidade para pessoas com deficiência. Para maior comodidade do usuário, siga as diretrizes de acessibilidade do W3C . Alguns podem ser mais fáceis de implementar do que outros (depende da ferramenta específica), mas de qualquer maneira vale a pena considerar.

• O daltonismo é muito comum: 1/12 dos homens e 1/200 das mulheres no mundo têm a indistinguibilidade do vermelho e do verde . Isso é especialmente importante para os painéis, porque as cores verde e vermelho geralmente indicam os estados "bom" e "ruim". Use várias técnicas para sinais (consulte a seção "Eficiência"): tamanho, cor, texto e ícones.
• : W3C 4.5:1 . . Consumer Finance Protection Bureau .
• , (). . , CSV , .
• Use os recursos de navegação e mineração de dados disponíveis para aproveitar os recursos auxiliares do navegador com ferramentas como WAI-ARIA .
• Qual será a exibição do usuário? O painel de uma TV grande provavelmente deve ser diferente daquele usado na tela de 13 polegadas do laptop de um engenheiro visitante. Lembre-se disso ao criar um painel para o seu dispositivo.

Resumir

Os usuários de mapeamento de dados precisam pensar com cuidado. Muitos aspectos devem ser levados em consideração e, nesta parte do artigo, expliquei em detalhes o que designers e desenvolvedores que criam ferramentas de monitoramento de sistema devem levar em consideração.

Breve repetição

• Use KPIs como RED e USE. Métricas adicionais são determinadas com base nas tarefas do usuário.
• , , CASE , !
• , , , . , !
• .
• , . .
• , . .
• . , .

1. (Few, Stephen). Information Dashboard Design . Analytics Press, 2013.
2. . (Mackinlay, Jock D.) Automating the Design of Graphical Presentations of Relational Information. ACM Transactions on Graphics, Vol. 5, 1986
3. . , (Cleveland, William S., McGill, Robert). Graphical Perception and Graphical Methods for Analyzing Scientific Data. American Association for the Advancement of Science, 1985.

3. ?

Espere, mas as tabelas são realmente visualizações? Sim, e mais um pouco! Poucos ¹ nos lembram que, se exibirmos valores unitários, não há razão para usar (114) ¹ gráficos . Se houver apenas alguns valores, é bastante eficaz usar a tabela.


Boa mesa velha.

As tabelas são visualizações comuns e bem compreendidas para encontrar significado. A tabela acima facilita a localização do valor e dos parâmetros associados. Essa versão pode estar sobrecarregada demais para o painel do sistema, mas podemos convertê-la em um "valor único" como este:


A tabela é compactada em um volume adequado para o widget.

Se o usuário precisar conhecer um valor, por exemplo, a soma, valor médio ou instantâneo, o uso de números ou tabelas individuais é ideal.

Gráficos de linha

Os gráficos de linha são adequados para a maioria dos dados exibidos. Um gráfico de linhas são pontos conectados por segmentos de linhas retas. Também é importante notar que, no gráfico de sequência temporal, essa interpolação de dados fornece ao usuário uma sensação da conexão entre forma e tempo . Muitas vezes, você ouve pessoas assistindo ao gráfico atualizarem que a métrica sobe ou desce.


O formulário é visual. Algo está acontecendo com atrasos!

Os gráficos de linha são visualizações populares porque incorporam muitos atributos no nível de atenção do sublimiar com um número mínimo de pixels. As linhas têm uma inclinação e ângulo, posição e cor, o que permite extrair muitas informações sem hesitação. Você pode complicar um pouco a exibição e usar a espessura e o brilho das linhas para atrair a atenção:


Obviamente, a linha marrom é a mais importante aqui.

Nem tudo é limitado a gráficos de linhas.

Antes de fechar a guia com o artigo e transformar todos os widgets em gráficos de linha, falarei sobre alguns aspectos com os quais você precisa ter cuidado. Muitas linhas em um gráfico podem ocultar sua forma, desfocar a cor, aumentar o atraso na percepção e torná-la inútil (em um gráfico, você só pode analisar valores extremos). Nesse caso, os mapas de calor nos ajudarão (veja abaixo).


As linhas são tão próximas umas das outras que são difíceis de distinguir.

Os gráficos de linhas interpolam dados entre dois pontos usando uma linha. Na maioria dos casos, isso é desejável porque a forma criada pelas linhas ajuda na percepção. Infelizmente, a interpolação também pode ocultar informações ausentes ou até prejudicar: faça-nos pensar que temos dados que na verdade não temos. Tomemos, por exemplo, o gráfico de linhas acima, adicionando pontos para cada leitura:


Os pontos nos dizem que só temos uma leitura para cada alteração de atraso.

O comprimento da linha pode induzir em erro que existem mais medidas do que realmente existem, por exemplo, alterações como no gráfico acima.

Gráficos de área

Primeiro, não use gráficos com áreas que não se sobrepõem . Sobrepor um gráfico a outro apenas oculta os dados e é confuso.


O que é isso tudo? Além do verde, nada é visível.

Os gráficos de área são mais utilizados quando todos os totais são importantes . Eles têm muito em comum com os gráficos de linhas, pois mostram a forma. Infelizmente, essa forma também é sua desvantagem: quando uma das regiões inferiores é alterada, o mesmo acontece com todas as regiões acima dela. O usuário pode não entender o que causou as alterações. Encontrar mudanças reais pode ser desafiador em tal situação.


O atraso varia em torno de 4 segundos, mas não podemos determinar o que afeta as alterações. Os valores de todas as linhas mudam?

Em vez de um gráfico de região, poucos sugerem o uso de um gráfico de linhas com uma soma e um gráfico adicional mostrando a contribuição de valores individuais (Poucos, 146) ¹ . Isso facilita muito o rastreamento das alterações.


Os mesmos dados são apresentados aqui como no gráfico de áreas acima. O gráfico da esquerda mostra a soma dos atrasos e o gráfico da direita mostra cada elemento que afeta o atraso. Os valores que afetam o atraso são bem compreendidos e, ao mesmo tempo , podemos ver a soma!

Gráficos de barra

Os gráficos de linhas mostram formas, os gráficos de barras mostram valores "precisos". A maioria das métricas do sistema é melhor usando um gráfico de linhas. Uma exceção pode ser um gráfico que compara várias métricas:


Podemos comparar facilmente essas duas seqüências de tempo usando colunas. Se houver mais valores, será mais difícil.

O gráfico de barras ajuda a comparar os valores em cada intervalo devido à clara relação entre os intervalos e à facilidade de comparar comprimentos. Se você escolher um gráfico de barras, significa que o mais importante para o usuário é comparar um pequeno número de valores.

Tenha cuidado e tente evitar moiré . Isso pode ocorrer se as colunas forem pequenas e igualmente espaçadas. Adicione um pequeno espaço entre as colunas para separá-las visualmente, como é feito na figura acima.

Sobrepor colunas

Veja tudo o que está escrito sobre a sobreposição de diagramas com áreas. As colunas de sobreposição geralmente são raramente usadas; elas são necessárias apenas se o valor como um todo for importante. Os usuários têm dificuldade em comparar colunas empilhadas.

Heatmaps

Use mapas de calor se você tiver um gráfico de linhas com muitas linhas. Os mapas de calor usam uma alteração no brilho da cor, para que uma quantidade muito grande de dados possa ser compactada em um espaço pequeno. Onde nos gráficos de linhas a sobreposição de linhas interfere na percepção, os mapas de calor, no caso de sobreposição, aprimoram a cor. Isso tem um bom efeito colateral: os mapas de calor mostram faixas nas sobreposições, o que ajuda a reconhecer padrões e valores extremos.


Os gráficos de linha são terríveis em tudo, exceto na detecção de valores extremos. Os mapas de calor mostram onde a matriz de dados principal está agrupada.

Essa capacidade de exibir mais dados e reconhecimento de padrões tem um preço. Nos mapas de calor, a precisão diminui porque as pessoas não conseguem distinguir facilmente entre muitos brilhos de cores. Poucos afirmam que o limite de capacidade de distinguir é de 5 gradações de brilho (Poucos, 86) ¹ . Isso significa que os mapas de calor são melhor utilizados em situações em que a precisão é menos importante que a forma geral de visualização.

Balanças, marcadores, intervalos, etc.

Use restrições nas visualizações apenas quando os dados realmente tiverem essas restrições. Por exemplo, exibir o número de solicitações por segundo na forma de uma escala é confuso, porque esse indicador não tem um máximo!

Se você precisar mostrar um limite, como uma porcentagem ou uma fila com profundidade máxima, usar essas visualizações pode ser incrivelmente útil. Eles nos permitem relatar o valor do limite e também deixam claro o quão próximo o valor está desse limite. Use esses tipos de visualização quando a métrica tiver uma base de comparação!


Este é um exemplo aceitável do uso de um intervalo, pois possui limites e ajuda o usuário a navegar.

Ao adicionar cores a esta visualização, permitiremos que o usuário entenda rapidamente o valor atual, os limites superior e inferior, bem como a urgência do valor atual.

Infelizmente, não conheço nenhuma ferramenta que permita o uso completo da escala do gráfico . Na melhor das hipóteses, as ferramentas do painel usam apenas um marcador.

Outros gráficos

Outros gráficos que não merecem uma seção inteira.

• Gráficos de pizza: não os use. As pessoas geralmente não podem estimar a área setorial de um gráfico. Use colunas em seu lugar.
• Gráficos de rosca: geralmente é uma maneira bonita de mostrar um único significado. Ou apenas um gráfico de pizza com um furo dentro.
• Gráficos de linhas sobrepostas: semelhantes aos diagramas com regiões, mas piores que eles, porque a falta de preenchimento nas regiões os torna inesperados. Evite-os.
• Gráficos de chama: ótimo para alguns casos de uso, mas geralmente não para painéis do sistema, mas mais para criadores de perfil.
• Sparklines: ótimos para exibir valores únicos, mas sem os elementos familiares do gráfico de linhas, eles geralmente não têm contexto. Poucos gráficos sugeridos, que ele chamou de tira de brilho - eles adicionaram faixas de cores ou tons para ajudar o usuário a navegar. Infelizmente, não conheço nenhuma ferramenta que tenha esses gráficos.
• Diagramas de blocos: raros em nossas ferramentas
• Gráficos de dispersão: use gráficos de barras. Talvez eles possam ser úteis se dados raros chegarem por um longo período de tempo?
• Gráficos de dispersão: ótimos para encontrar correlações, mas esse é um aplicativo especializado, portanto, não os vemos aqui.
• Discos e escalas: se seus dados realmente não têm limites inferior e superior, exibi-los na forma de indicadores de disco é confuso. Além disso, eles ocupam muito espaço em vão.

Resumir

Antes de começar a me criticar por não mencionar algumas das raras visualizações que sua ferramenta possui, deixe-me lembrá-lo de que se um usuário entender um painel, gráfico ou visualização, elas serão boas . Se você expandir seus cenários de uso e base de usuários, retorne ao guia de seleção de visualização na Parte 2.


Muito provavelmente, a linha é o que você precisa. Talvez algo mais seja útil. Lagosta não é uma linha do tempo.

Use gráficos de linha, eles são ótimos! Valores individuais ou gráficos tabulares são excelentes para exibir valores instantâneos / únicos. As colunas são adequadas para comparar um pequeno número de conjuntos de dados, e os mapas de calor também têm seu próprio campo de aplicação.

Fontes

1. Stephen Few (poucos, Stephen). Design do painel de informações . Analytics Press, 2013.

Parte 4. Melhorando o Contexto.

Noções básicas: texto

As pessoas leem muito bem. Os desenvolvedores de painéis geralmente são propensos à brevidade. Na parte 2, analisamos escala e unidades. Marcando dados e pensando na forma desses rótulos, podemos aumentar a percepção dos dados.

Mas não vá mais fundo: apenas melhore a assinatura nas paradas. Não mude as letras! Imagine que você é um novo operador e viu um painel pela primeira vez. O que você precisa saber?


Os criadores do gráfico esquerdo não fizeram muito esforço. À direita, existem assinaturas lógicas que ajudam o usuário a entender o contexto da visualização.

Noções básicas: próximas etapas

Se o usuário quiser saber mais sobre uma visualização específica, como ele pode fazer isso? Geralmente, basta clicar no título, após o qual uma versão em tela cheia será aberta, permitindo que você estude mais profundamente a visualização. Este é um local conveniente para colocar tabelas de dados e outras informações úteis:


Quando você abre o gráfico em tela cheia, novas ferramentas aparecem porque o usuário demonstrou interesse em um estudo mais aprofundado.

Se o usuário vir leituras ruins no gráfico, ele poderá precisar usar outra ferramenta ou notificar os colegas. Por que não incorporar esses recursos no menu de gráficos?


O menu pode nos levar à função de rastrear exceções, transferir informações para o Slack ou iniciar o processo de registrar um incidente.

Ações humanas, dados gerenciais

Na seção "Gráficos lineares" da parte 3, falamos sobre a importância do fato de o tempo nos gráficos de execução ser exibido no eixo X. Isso é incrivelmente útil para os usuários, pois mostra mudanças no tempo, mas a passagem do tempo não é um fator causal para nossos dados. Para isso, precisamos de mais contexto.


Muitas razões podem levar a mudanças.

Tufty propôs melhorar a exibição “inserindo variáveis ​​adicionais no design gráfico” (38), a fim de aumentar a compreensibilidade das relações de causa-efeito ² . Isso funciona bem para os painéis do sistema, porque as alterações feitas por pessoas ou sistemas automatizados geralmente são fontes de efeitos no sistema. O rastreamento e a visualização de tais eventos fornecem ao usuário informações importantes sobre eventos que podem se correlacionar com o comportamento do sistema.


O losango azul indica que o momento de implantação está altamente correlacionado com uma diminuição na latência. Ótimo!

Esses dados de nível de controle têm uma frequência muito menor do que os sinais medidos em nossos sistemas. É necessário dar alta prioridade para que essas alterações sejam registradas e exibidas em um só lugar com painéis. Isso melhora muito a velocidade dos usuários concluindo tarefas.

Implementação: Marcando Eventos

Infelizmente, a maioria das ferramentas para criar painéis do sistema tem suporte parcial para esses dados, geralmente chamados de "anotações". Os eventos geralmente são difíceis de reutilizar, não são digitados e geralmente são considerados instantâneos . Alguns pacotes têm suporte para eventos com registro de data e hora do início e do fim para executar implantações e outras alterações "etapas".

Além disso, para transferir anotações para painéis, você geralmente precisa configurar manualmente dezenas de sistemas divididos. Então você precisa procurar maneiras de conectar todos os eventos relevantes aos painéis. Muito desconfortável!

Aqui estão algumas dicas para implementar corretamente esse comportamento:

• Use saída comum, como CloudTrail Events e sistemas de CI / CD.
• Esforce-se para reutilizar eventos para que os usuários não precisem criar seus próprios, trabalhando apenas em seus painéis.
• Evite o caos: muitos eventos são tão ruins quanto a sua ausência!
• Verifique se há um link no evento para que o usuário possa clicar nele e descobrir mais informações. Isso fornece ao usuário um contexto, mas permite que o painel não se transforme em uma interface de administração. É melhor quando os usuários podem simplesmente clicar nos links.

Normas, tarefas e acordos

Alguns KPIs possuem intervalos aceitáveis, metas internas ou até obrigações contratuais. Adicionar essas informações aos gráficos apropriados pode fazer parte da visualização (consulte a seção “Escalas, marcadores, intervalos etc.” da parte 3) ou ser um contexto dentro do widget. Esse contexto permite que os usuários evitem os requisitos de como o gráfico deve "parecer" ou como o valor atual pode afetar as partes interessadas.

Muitas ferramentas suportam um recurso semelhante de linha d'água. Adicioná-los fornece ao usuário um contexto adicional de que a sequência de tempo não é um valor arbitrário, mas uma comparação com nossas expectativas.


O SLO do nosso serviço é adicionado ao gráfico na forma de uma "linha de água".

Podemos estender essa funcionalidade adicionando mudanças de tempo, tendência média ou vários tipos de detecção de anomalias para demonstrar os valores esperados:


É assim que as leituras normais se parecem. Esse padrão de loop parece correto!

Como conhecemos esses valores limite e esperados, podemos dar outro passo à frente e processar as informações para o usuário com antecedência. Nos casos em que a norma ou expectativa é violada, podemos apontar proativamente essa violação. Então o usuário prestará atenção às informações mais importantes (Poucos, 54) ¹ .


Parece que estamos quebrando o SLO neste gráfico atual!

Deixamos a linha anônima no gráfico para uma situação com uma grande quantidade de contexto e uma indicação clara do estado do sistema. Vemos claramente o excesso de SLO!

Sinais de perigo ou outras doenças

Normalmente, os painéis do sistema são usados ​​para diagnosticar falhas, especialmente em resposta a sinais de perigo. O contexto da velocidade de controle mostrado acima pode ser complementado com dados de sinais de perigo. Quando e como eles devem funcionar?


Etiquetas da linha do tempo para sinais de perigo, violações destacadas e valores de cores que excedem os limites.

Essas informações permitem ao usuário entender o que causou o alarme, ajudando-o a navegar pelo problema. Outros gráficos podem fornecer contexto adicional ou os menus adicionados por nós ajudarão com outras ações.

Projeções e outros dados sintéticos

O volume principal dos dados exibidos são medições diretas das leituras dos sistemas. Portanto, você precisa ter cuidado com a exibição de dados projetados, previstos ou sintetizados de outra forma, para que o usuário entenda no que ele deve confiar. O Consumer Financial Protection Bureau tem orientações sobre como minimizar esses dados .

Um exemplo desse problema seria um gráfico de fãs temporário.


O valor estimado e a faixa de possíveis valores futuros permitem ao usuário ver o que pode acontecer.

Breve repetição

• Pense cuidadosamente nas assinaturas nos gráficos, adicione títulos, subtítulos e todas as outras informações necessárias sobre eles.
• Nosso trabalho não termina com uma sequência temporal. Os usuários precisam de contexto para entender o que mais está acontecendo. Esse contexto deve ser retirado de vários departamentos da organização / empresa.
• A exibição de dados de eventos em seqüências de tempo ajuda os usuários a entender o que pode ter sido alterado. Tais eventos são dados observacionais e têm maiores relações sinal-ruído.
• Os dados nos gráficos podem ser aprimorados adicionando valores normais, esperados ou de destino, permitindo que o usuário navegue melhor.
• A adição de informações de perigo ajuda a acelerar os tempos de resposta a incidentes.
• O uso de qualquer tipo de projeção requer visualização cuidadosamente pensada.

Resumir

Graças à ajuda de meus usuários, aprendi muito sobre como criar bons painéis. Muitas das lições contradizem minhas opiniões e conselhos anteriores. Muitas dessas recomendações mostram quanto precisamos melhorar nossas ferramentas, especialmente em termos de contexto.

Tudo isso é muito importante . Muitas organizações usam esses painéis como sua principal fonte de informações sobre o status, desempenho e disponibilidade de serviços de missão crítica. Eles também são fontes de troca de informações para organizações de design. Em muitos casos, os painéis são comerciais porque a empresa não pode ver a linha de pessoas que usam o site. Nosso único método de observação são os dados que coletamos e exibimos.

Painéis e gráficos são recursos que podem aumentar muito o retorno dos esforços de seus desenvolvedores. Alguns dias de desenvolvimento cuidadoso do projeto serão recompensados ​​com milhares de horas economizadas por engenheiros, gerentes e / ou usuários. Em muitos casos, eles podem levar a respostas mais rápidas aos problemas.

Vale a pena o seu tempo, certo?

Espero que você também tenha gostado de ler este artigo, enquanto estudo e escrevo as informações. Eu recomendo que você estude as fontes indicadas no final de cada parte para estudar esse tópico mais profundamente.

Fontes

1. Stephen Few (poucos, Stephen). Design do painel de informações . Analytics Press, 2013.
2. Edward R. Tufte (Tufte, Edward R.). A exibição visual de informações quantitativas. Graphics Press, 1998.