Para ser eficaz, uma visualização de dados deve informar de forma visual, simples e rápida. A renderização de dados em forma gráfica visa oferecer uma leitura simplificada que permitirá uma melhor compreensão e tomada de decisão de forma serena, rápida e simples.

Tecnologias disponíveis

A visualização de dados é uma disciplina particularmente adequada para tecnologias da Web e subconjuntos HTML5. Hoje, existem duas famílias principais entre as tecnologias mais utilizadas: representações gráficas baseadas na tecnologia SVG e aquelas que utilizam a tecnologia CANVAS. Se ambos apresentam possibilidades interativas, essas duas abordagens são baseadas em filosofias diferentes que devem ser estudadas a montante.

     

A escolha certa depende muito da sua necessidade em si, da cobertura desejada, do parque e do público em questão. Os frameworks SVG oferecem as chamadas renderizações vetoriais, ou seja, são construídas a partir de elementos gráficos desenhados entre pontos identificados. O arquivo de imagem do tipo .svg é na verdade um arquivo contendo código que descreve os pontos de junção e como eles serão unidos para desenhar uma imagem idêntica em proporção qualquer que seja seu tamanho. Frameworks baseados na tecnologia CANVAS manipulam pixels.

A construção de um dashboard eficaz e adaptado

Construir um bom painel requer uma reflexão significativa antes do desenvolvimento. A quem se destinam os dados? Quais são as motivações para disponibilizar essas informações? Quais são as mensagens a transmitir? O que é importante? Os dados em si? Seu volume? Sua evolução? Seu valor hoje ou sua média em um determinado período? Sua representação precisa ser em escala? Às vezes, distorcer o espaço e suas proporções chamará a atenção do visitante para a parte do gráfico a ser destacada.

A importância da escolha da cor

O significado a atribuir aos dados apresentados baseia-se no volume que representam mas também na cor utilizada para transmitir a mensagem. Por exemplo, em um gráfico de pizza representando o volume de vendas de vários produtos, é óbvio que a maior parcela será, sem dúvida, a de melhor desempenho e provavelmente será ilustrada em uma cor positiva, como o verde. Também podemos usar imagens metafóricas para aumentar ainda mais a clareza, por exemplo as barras de um gráfico por carros pequenos para ficar no exemplo anterior. Quanto maiores as vendas, mais carros pequenos existem.
Por outro lado, se um gráfico de pizza representa o número de faltas dos funcionários de uma empresa, a parte mais importante também será a mais preocupante e, de fato, motivará o uso de uma cor que tenha essa conotação como vermelho ou laranja para exemplo.

De qualquer forma, um painel eficaz é um painel claro. Os dados ilustrados nas representações gráficas devem ser claramente legendados e cada representação deve incluir um título que permita ao usuário entender o que está vendo. A representação deve ser o elemento proposto. Se muito texto ilustrar o porquê do gráfico, o usuário tenderá a prestar muito mais atenção nas explicações do que na mensagem transmitida pelos dados e sua representação. Da mesma forma, o uso de pictogramas pode fornecer uma camada adicional de informações, permitindo que os usuários compreendam rapidamente o material exposto.

O alvo do painel

Os dados a serem exibidos estão, portanto, diretamente relacionados à mensagem a ser transmitida, que também está diretamente relacionada ao público-alvo. Geralmente não tentamos dizer a mesma coisa da mesma forma quando nos dirigimos à administração geral de uma empresa, seus acionistas ou seus funcionários.

Interatividade

Outra vantagem muito importante das representações gráficas versus tabelas de dados é certamente a possibilidade de simplesmente adicionar interatividade. Poder fazer desaparecer um dado e reiniciar o cálculo da proporção de cada um dos restantes pode permitir uma comparação fina e uma análise simples. Além disso, pode-se até considerar permitir que o usuário especifique o tipo de representação gráfica que deseja usar para tal ou tal tipo de dados. Em outras palavras, oferecer ao usuário que modifique um pouco seu painel para adaptá-lo perfeitamente ao seu uso também é um recurso rico!

Além disso, várias representações gráficas podem trabalhar juntas e interoperar, ou seja, uma mudança de estado e proporção de uma primeira representação modificará uma segunda que será atualizada automaticamente. Por esse método, entenderemos o impacto de um dado sobre outro que não está ou não parece estar necessariamente vinculado ao primeiro.

Representam um conjunto de dados dominado. Quanto mais dados existem, menos bem eles são compreendidos.

Mesmo que um gráfico possa apresentar um grande número de itens, é preferível dividir o todo em várias telas, ou melhor, vários relatórios. Por exemplo, se representarmos vendas de carros em todo o mundo, a maioria dos usuários estará interessada nas 5 ou 10 principais paradas. Provavelmente muito menos por marcas mais locais e, portanto, menos difundidas. Escolheremos aqui para representar um primeiro gráfico de pizza com as 9 melhores pontuações, depois uma 10ª fatia que combinará todos os resultados restantes em relação à massa total.
No entanto, se o usuário estiver interessado em uma granularidade maior, será oferecido a ele clicar na “outra” fatia (a 10ª fatia) e esse clique terá o efeito de permitir que o usuário “entre” no gráfico, ou seja, o a representação será redesenhada, mas desta vez todo o gráfico de pizza representará apenas o volume inicialmente contido na 10ª fatia. O utilizador verá assim aparecer o segundo nível do gráfico, ou seja, as partilhas de 10 a 19 e o 20º voltará a representar o volume acumulado de dados restantes.
Como você já deve ter entendido, construir um dashboard eficaz é baseado em muito bom senso. Este tipo de interface também se baseia nas mesmas regras de uma interface mais clássica.
Alguns frameworks recomendados:
D3.js (código aberto), HighCharts (pago), ElyCharts (código aberto), iCharts etc.
Por Yann Cadoret
Parceiro @UXRepublic
[actionbox color=”default” title=”” description=”UX-REPUBLIC é uma agência especializada em design centrado no usuário. Também somos um centro de treinamento aprovado. Encontre todos os nossos cursos de treinamento em UX-DESIGN e Front Development (HTML/CSS/JS) em nosso site training.ux-republic.com” btn_label=”Nossos cursos de treinamento” btn_link=”http://training.ux-republic. com ” btn_color=”primary” btn_size=”grande” btn_icon=”estrela” btn_external=”1″]