Interação Interação
Dashboard: Como Criar o Design De Dados e Informações?
Lista de conteúdos
Interação Interação

Dashboard: Como Criar o Design De Dados e Informações?

Imagem de capa: Dashboard

O dashboard é uma das maneiras de converter números grandes e complexos e conteúdo gráfico. Mas por que devemos nos preocupar com isso?

A evolução da tecnologia nos últimos anos e a globalização das informações criaram diversas novas possibilidades para as pessoas ao redor do mundo.

Quanto mais conectados e quanto maior for o número de aparelhos eletrônicos, aplicativos, softwares e programas que usamos, maior o crescimento da disponibilidade de dados no mundo.

A tendência é que em poucos anos — em 2025 — o número de dados do mundo chegue a 163 trilhões de Gigabytes.

No entanto, a capacidade humana de processamento de dados é inversamente proporcional a esse crescimento. É muito difícil compreendermos números muito grandes, como o citado acima: 163 trilhões.

O Design de Visualização de Dados é uma forma de melhor trabalhar os dados para que sejam de melhor compreensão para nós. O Designer, desse modo, tem a função de representar os dados de uma maneira mais amigável para o usuário.

O que é um Dashboard?

De uma maneira simples, dashboard é uma tela em que o usuário tem acesso à informações de forma rápida e organizada sobre um determinado aplicativo, software ou a evolução dos negócios, no caso de uma empresa.

É importante ter em mente que um dashboard precisa conter somente informações relevantes para o seu usuário, disponibilizadas de forma fácil de ser consumida.

Como exemplo, podemos citar as informações do painel de um carro. Ali, você encontra as informações mais importantes que permitem ao motorista continuar dirigindo:

  • Velocidade atual;
  • Quilometragem percorrida;
  • Revisão;
  • Nível do combustível;
  • Alerta se algo não está funcionando corretamente.
Exemplo de dashboard: painel de um carro

Com essas informações, o motorista consegue tomar as decisões que permitem com que continue dirigindo sem problemas.

Dessa forma, um dashboard deve levar informações ao usuário de forma simples e organizada — geralmente gráfica — para que ele seja capaz de tomar decisões importantes sobre qualquer assunto.

Portanto, um dos objetivos dos dashboards é reduzir a carga cognitiva de processamento de dados do usuário, entregando somente as informações mais relevantes, para que ele economize tempo e se torne mais eficiente em suas tarefas.

Dica de Leitura: Como a Psicologia é Essencial em Seus Projetos de UX Design?

Principais características de um Dashboard

Desenvolver um dashboard vai além de apenas resumir grandes informações para o usuário.

Dessa forma, existem algumas características básicas que precisam conter:

1) Dar suporte para os objetivos do usuário

O dashboard precisa estar alinhado com os objetivos do usuário e fornecer informações essenciais para suportar sua tomada de decisão.

Nesse sentido, o dashboard deve destacar as informações mais relevantes para o usuário, tomando sua atenção.

Além disso, são características essenciais dos dashboards: rapidez na disponibilização das informações; clareza e boa experiência de uso.

2) Mostrar os dados implícitos

Um dashboard também deve fornecer informações que levam a insights sobre o que está sendo analisado/ visualizado pelo usuário.

Dessa forma, é importante organizar os dados de forma gráfica e visual para que o usuário consiga entender o que está sendo apresentado.

É importante utilizar títulos, gráficos, agrupamentos, e qualquer recurso visual que auxilie o usuário a interpretar os dados e informações.

Além disso, é importante que o dashboard mostre as tendências futuras para certas informações, criando novas interpretações e insights para o usuário.

3) Mostrar resumos, mas permitir aprofundamento

É importante que o usuário tenha rápido acesso às informações mais relevantes de seu interesse assim que acessar o dashboard.

Nesse sentido, é crucial que as informações estejam resumidas e que se mostre apenas o que é imprescindível.

No entanto, é essencial que o usuário tenha a possibilidade de se aprofundar em qualquer ponto de interesse que tenha despertado a partir das informações resumidas.

Isso quer dizer que o dashboard deve possuir uma interface interativa que permita ao usuário partir de visões mais gerais para visões mais detalhadas — drill down.

4) Otimizar o espaço disponível

Geralmente, bons dashboards são criados para serem visualizados em apenas uma tela.

Assim, é importante otimizar todo o espaço disponível sobre o qual será criado o dashboard.

Remova informações desnecessárias como imagens, ícones e símbolos para que a atenção do usuário não se disperse e para que o seu dashboard seja mais otimizado e eficiente.

Dica de Leitura: Como Efetuar o Design Handoff de Forma Eficiente?

Tipos de Dashboard

Os 3 tipos mais comuns de dashboard são:

  1. Operacional;
  2. Analítico;
  3. Estratégico.

Cada um deles possui características específicas e objetivos diferentes. Vamos entender um pouco mais a fundo cada um deles.

Dashboards Operacionais

Dashboard Operacional
Dashboard Operacional para Monitoramento de Tráfico de Site | Fonte: Justinmind

Os dashboards operacionais são utilizados para informar ao usuário a situação atual de alguma ação.

Por exemplo, no caso de um site, um dashboard operacional irá informar o número de visitantes ativos, número de visualizações por minuto, compartilhamentos, etc.

Dessa forma, o usuário tem um status do que está acontecendo em tempo real.

Dashboards Analíticos

Dashboard Analáitico
Dashboard Analítico | Fonte: Justinmind

Os dashboards analíticos são utilizados para mostrar informações e comparações de perfomance em um determinado período.

Ao contrário do dashboard operacional, o analítico traz informações mais aprofundadas e as compara com os resultados do mês passado, por exemplo.

Esse tipo de dashboard é bastante encontrado em empresas que procuram monitorar seus ganhos ou prejuízos de forma evolutiva, mês a mês, trimestre a trimestre.

Um dos pontos centrais do dashboard analítico é fazer com que o usuário consiga identificar problemas e tendências.

Dashboards Estratégicos

Dashboard estratégico
Dashboard Estratégico | Fonte: Justinmind

Os dashboards estratégicos trazem uma visão de acompanhamento de indicadores (KPI’s), para efetuar o monitoramento das metas e objetivos do usuário.

Nesse sentido, o dashboard estratégico não traz as informações operacionais do dia a dia, ele é uma ferramenta mais simples onde somente é possível avaliar o alcance ou não das metas.

Dica de Leitura: Por Que é Importante Saber Sobre Negócios?

Como criar um Dashboard: dicas e boas práticas

O conceito de dashboard é relativamente simples: uma tela com informações sucintas e relevantes para o usuário tomar decisões.

No entanto, sabemos que, em muitos casos, aplicar a teoria na prática é algo bem mais complicado do que parece.

Separamos algumas dicas e boas práticas sobre como desenvolver um bom dashboard.

Vale lembrar que o treino e a prática são bastante importantes em qualquer desenvolvimento de interface. Portanto, pratique sempre que possível.

1) Defina o objetivo e propósito do dashboard

O dashboard é, como visto, uma ferramenta que deve conter informações sucintas e relevantes para seus usuários.

É importante definir e ter clareza de quais são os objetivos e qual o propósito desse dashboard.

Sabendo os motivos pelos quais esse dashboard será usado, fica mais fácil determinar quais informações, gráficos, insights e nível de detalhe serão necessários para desenvolvê-lo.

Além disso, entender qual seu propósito ajuda na escolha de qual tipo de dashboard será mais conveniente para o usuário – operacional, analítico, estratégico.

2) Faça pesquisa com os usuários

Um dashboard nada mais é do que um produto que procura atender as necessidades e objetivos de seus usuários.

Nesse sentido, é essencial entender quem são seus usuários e quais são as suas expectativas, desejos, vontades e objetivos.

No caso de uma empresa, por exemplo, é comum que diversas áreas usem o mesmo dashboard, analisando dados e informações diferentes umas das outras.

É importante saber diferenciar todos os usuários do dashboard, quais são as principais informações relevantes e quais dados são comuns a eles. Assim, é possível criar visões personalizadas de um mesmo dashboard para conseguir atender as necessidades diferentes dos diversos grupos de usuários possíveis.

Dica de Leitura: Por Que Definir Personas É Importante?

3) Escolha as melhores formas de representar os dados

O desenvolvimento de dashboards implica, necessariamente, no uso de representações gráficas dos dados para facilitar a interpretação e análise pelo usuário.

Sem gráficos ou elementos visuais você tem apenas um banco de dados e não um dashboard.

Portanto, é importante entender quais tipos de gráficos você deve usar para mostrar determinadas análises e informações para o usuário.

Dessa forma, é essencial que você já tenha entendido quem são seus usuários e o quais são seus objetivos.

Basicamente, existem tipos de gráficos básicos que podem representar:

  • Relação entre dados e informações — gráficos de dispersão ou de bolha;
  • Comparação — gráficos de colunas, barras ou linhas;
  • Representatividade dentro de um todo — gráficos de pizza, mapa de calor, de área;
  • Distribuição dos dados — histogramas, gráficos de dispersão.
Qual melhor gráfico escolher?

Para ajudar na escolha do melhor elemento visual/ gráfico, você pode se basear em algumas questões, como:

  1. Quantas variáveis precisam ser contempladas em cada gráfico?
  2. Faz sentido mostrar a evolução dos dados ou sua distribuição?
  3. Os insights criados por esse gráfico ajudam o usuário?
  4. Este gráfico deixa as informações claras ou há algum viés que precisa ser esclarecido?

4) Mantenha a padronização e consistência

Os dashboards são interfaces como qualquer outra. Portanto, é importante lembrar de algumas regras de UI para desenvolver interfaces melhores.

Com relação a isso, lembre-se da padronização e consistência do seu dashboard.

Atente-se para os nomes, funcionalidades, cores e elementos visuais. Todos eles devem ter consistência e padronização por todo o dashboard para evitar confusões e falsas interpretações pelo usuário.

Portanto, crie frameworks e guias de estilo simplificados, por exemplo. Esses detalhes fazem toda a diferença no momento de interação do usuário.

Dica de Leitura: Padronização e Consistência em UI Design

5) Estabeleça a hierarquia dos elementos e das informações

Hierarquia da informação e dashboard

Os dashboards devem disponibilizar as informações mais relevantes de forma rápida e fácil para seus usuários.

Dessa forma, é essencial estabelecer qual a hierarquia dessas informações e dos elementos visuais do dashboard em desenvolvimento.

Hierarquia das informações, significa priorizar e disponibilizar as informações mais relevantes em primeiro plano e as demais, em segundo plano.

Além disso, é importante determinar um fluxo de informações para o usuário. Nesse sentido, você pode utilizar ferramentas como o Storytelling para disponibilizar as informações da melhor maneira para o entendimento do usuário.

Progressive Disclosure

Outra técnica que pode ser utilizada com o intuito de melhorar a hierarquia de informações do seu dashboard é a Progressive DisclousureDivulgação Progressiva, em tradução livre.

Essa técnica consiste em reduzir a desordem de muitas informações em um mesmo gráfico e prioriza a atenção do usuário para os dados mais relevantes.

Um exemplo de Progressive Disclosure é o pop-up de informações mais detalhadas quando pousamos o mouse em determinado ponto de um gráfico.

#DailyUI #016 Pop-Up/Overlay por @Art_John

Dessa forma, o usuário consegue obter um nível a mais de informação sobre determinado dado sem que o designer tenha que posicioná-las de forma amontoada em um mesmo ponto.

6) Utilize Grids

Mais uma dica baseada em conceitos básicos de UI Design.

Os dashboards são, basicamente, desenvolvidos a partir de blocos de conteúdos – assim como a maioria das interfaces.

Dessa forma, nada melhor para alinhar e planejar seu dashboard do que a utilização de Grids.

Grids e dashboards

Os Grids permitem que você consiga alinhar as informações e desenvolver uma interface visualmente mais confortável e eficiente para seus usuários.

Além disso, trabalhe com os espaços negativos — as áreas em branco entre os elementos do dashboard. Se os espaços negativos e as margens não estiverem bem trabalhadas, a leitura do conteúdo pode ficar cansativa e comprometida.

Dica de Leitura: Como Utilizar os Grids?

7) Cuidado com o número de informações e de interações

Um dos grandes desafios do desenvolvimento de dashboards é a priorização das informações.

Em um primeiro momento, pode parecer que todas as informações e dados são importantes e, dessa forma, acabamos cometendo o erro de criar um dashboard muito extenso.

O problema de um dashboard extenso é que ele não prende a atenção do usuário e pode tornar sua experiência bastante cansativa e ineficiente.

É importante entender muito bem quem são seus usuários e quais são suas necessidades, para compreender quais são as informações realmente importantes para ele.

No entanto, o contrário também pode ser prejudicial. Criar um dashboard muito sucinto, o qual depende de muita interação do usuário, também é inapropriado.

Lembre-se de que nós seres humanos, de maneira geral, temos dificuldade de trabalhar com muitas coisas ao mesmo tempo. Dessa forma, criar muitas interações para conseguir uma informação, pode fazer com que a experiência do usuário não seja a melhor possível.

8) Considere outros princípios de UX/UI Design

Dentro dessa lista de dicas, já enumeramos alguns princípios do UX/UI Design para você considerar no desenvolvimento de dashboards.

No entanto, lembre-se de que existem outros princípios que são tão importantes quanto.

Nesse sentido, os princípios de Gestalt podem ser bastante úteis para deixar seu dashboard mais fácil de ser interpretado:

  • Proximidade: elementos próximos uns aos outros parecem ter uma relação direta;
  • Similaridade: elementos parecidos tendem a parecer do mesmo grupo;
  • Fechamento: criar grupos de forma fechada para criar limites implícitos;
  • Continuidade: quando elementos estão alinhados ou organizados de qualquer forma criam a interpretação de estarem relacionados.
Princípio da proximidade
Princípio da Proximidade

Além deles, você pode também utilizar as Leis de UX, as quais são também princípios para desenvolver melhores interfaces baseadas no comportamento dos usuários.

9) Traga insights e não apenas jogue as informações

Um erro bastante comum no desenvolvimento de dashboards é criar uma forma bonita de visualizar os dados, mas não trazer insights relevantes para a análise.

É importante entender o impacto dos dados que estão sendo incorporados no dashboard e, a partir do alinhamento e pesquisa com os usuários, entender quais as conclusões ou direções que essas informações podem criar.

Um dashboard não deve ser apenas uma maneira bonita de ver os dados. Ele deve ser útil para que os usuários tomem decisões mais assertivas sobre o negócio ou para próximas ações.

Tenha em mente sempre duas perguntas que podem te ajudar a trazer insights a partir dos dados:

  1. Por que isso aconteceu?
  2. Como isso impacta o usuário?

10) Use as cores apropriadas

Se os gráficos são parte essencial de um dashboard, também é importante pensar nas melhores cores para eles.

O uso apropriado das cores não é apenas uma questão estética, mas uma ajuda na interpretação rápida das informações contidas nos gráficos do dashboard.

Utilize padrões de cores que sejam de fácil identificação e que facilitem a interação do usuário com a interface.

Evite esquema de cores não usuais ou, ainda, com cores muito próximas umas das outras no círculo cromático.

Dica de Leitura: Saiba Utilizar as Cores em UI Design

11) Pense na acessibilidade

Pegando o gancho das cores, é importante desenvolver seu dashboard pensando também na acessibilidade das pessoas com deficiência.

No caso do esquema de cores, leve em consideração as pessoas que possuem alguma deficiência, como o daltonismo. Nesse sentido, utilize cores que não sejam confundidas por eles, ou, crie uma versão específica para esse tipo de deficiência visual.

Acessibilidade nas cores de gráficos

Além disso, é importante pensar em outros tipos de acessibilidade para diversos tipos de deficiência:

  • Auditiva;
  • Motora;
  • Visual;
  • Cognitiva.

As interfaces devem ser inclusivas e pensar nessas condições e soluções é um exercício diário. Não podemos esquecer dessa questão tão importante e que impacta a vida de diversas pessoas.

12) Desenvolva o dashboard por último

Criar um dashboard é algo bastante empolgante porque traz diversos aspectos e elementos visuais.

No entanto, é importante segurar um pouco a ansiedade e desenvolver o dashboard por último, assim que você tiver todas as informações e pesquisas pertinentes para tal.

Dessa forma, evita-se retrabalhos durante o desenvolvimento. Caso você comece um projeto pelo dashboard, com certeza você terá que fazer ajustes ao longo do desenvolvimento das outras páginas e telas, do programa, site ou aplicativo.

Portanto, ser deixado por último não significa que o dashboard é menos importante do que qualquer outro recurso da sua interface. Mas deixá-lo para o final do processo facilita bastante seu desenvolvimento.

Se você gostou desse conteúdo não se esqueça de clicar em curtir e compartilhar! Esse pequeno gesto ajuda bastante no nosso trabalho! Fique à vontade para continuar navegando aqui e, caso queira receber nossos conteúdos por email, inscreva-se na nossa newsletter!


Programas

Nosso maior orgulho é todo mês ter pessoas da comunidade contratadas em grandes empresas, em países como
Brasil, EUA, UK, Irlanda, Alemanha, Holanda, Espanha, Portugal, Áustria, Rep. Tcheca, Nova Zelândia e Canadá.

Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro
Parceiro Parceiro