É muito comum encontrar empresas onde dashboards* são utilizados para as mais diversas finalidades. É sempre necessário acompanhar métricas, indicadores, objetivos de negócio, projetos, entre outras coisas, e estes painéis surgem como soluções inequívocas para facilitar estas tarefas; um dashboard mal projetado, contudo, pode e irá prejudicar o seu potencial de fomentar análises úteis e eficazes, ao apresentar uma navegação complexa, nomenclaturas confusas e dados que pouco têm a oferecer aos usuários.
O papel da hierarquia de informações
No intuito de elevar a qualidade destes painéis, tornando o investimento neles mais rentável e o seu uso mais efetivo, é importante considerar formas de organizar a hierarquia dos dados dentro de suas telas. Com um planejamento de design do dashboard orientado à sua hierarquia interna, é possível compreender o grau de importância de cada dado, cada informação e cada insight disponibilizado, e como todos estes elementos conversarão entre si; além disso, essa análise hierárquica também favorece a construção de um layout que inclua estes elementos a fim de oferecer uma navegação fluida, intuitiva, e esteticamente agradável.
Com isso em mente, traremos hoje 12 princípios de planejamento da hierarquia de informações a serem considerados na construção de um dashboard:
1. Entenda os objetivos e os usuários do dashboard
O design de um dashboard não se restringe à etapa de produção das telas; é fundamental que os usuários sejam envolvidos no processo antes de iniciar essa produção, e, se possível, também após a mesma, visando coletar insights de uso para promover melhorias posteriores.
Para tanto, procure conversar com os principais usuários para identificar o que eles querem alcançar com o uso do dashboard. A partir disso, será possível definir a hierarquia de informações, dados e insights a serem incluídos no projeto. Todo o resto do processo, ao envolver a construção da tela, é derivado deste racional inicial.
2. Para dashboards operacionais, priorize informações acionáveis
Este tipo de dashboard deve ajudar os usuários a acompanharem situações e intervirem em tempo real, portanto, sempre priorize a ênfase e o posicionamento prioritário à informações concernentes à situações de risco ou emergenciais.
Informações que pouco contribuem para a tomada de decisões em tempo real devem ser consideradas secundárias dentro do layout (entretanto, sempre faça um estudo detalhado disso, para entender o contexto de uso, como recomendamos no ponto 1).
3. Para dashboard analíticos, priorize o caráter exploratório
Se o dashboard for mais analítico, sendo necessário permitir uma inspeção mais detalhada de informações específicas quando necessário, é importante que o usuário chegue à estas camadas de informações de forma gradativa, se aprofundando quando necessário, sem exibir todos os graus de detalhamento simultaneamente.
Chamamos esse princípio de “descoberta progressiva”, pois permite que o usuário explore diferentes níveis de profundidade dos dados de maneira confortável e ajustada aos seus interesses no momento.
Implemente a ótica da descoberta progressiva por meio de filtros específicos e ferramentas de drill-down localizadas estrategicamente, que permitam afunilar a granularidade dos dados de um conjunto de dados ou gráfico específicos.
4. Faça agrupamentos de dados de maneira temática
Procure agrupar as informações de acordo com o tema tratado, e em subgrupos que sejam claramente discerníveis. Se estiver tratando de dados demográficos, por exemplo, pode configurar subgrupos de análise de informações referentes à gênero, idade e faixa de renda.
Transformar estes subgrupos em seções específicas, com títulos separados, também pode ajudar, a depender do caso.
5. Priorize o storytelling
Procure estruturar os dados de modo a contar uma história, uma narrativa. Foque nos insights que o usuário precisa obter, levantados no início do projeto, sem divergir para muitas outras vertentes, ajudando a trazer foco para a análise. Não esqueça de apresentar o contexto no qual a narrativa está situada.
Estruture os dados de modo a formar uma progressão natural narrativa. Apresente o cenário, os problemas, as circunstâncias analisadas, e prossiga para informações e insights mais orientados à tomada de decisão em resposta ao que foi apresentado até o momento.
Também é possível contar essa história partindo de uma ótica mais ampla, e caminhando progressivamente para uma ótica mais detalhada e específica. Essa seria outra forma de apresentar a granularidade de um contexto de dados específicos, quando o usuário precisa ter visibilidade do macro ao micro de uma só vez, sem depender de interações e filtragens no meio do caminho.
6. Considere o padrão de leitura de tela mais usual
Procure concentrar as informações mais importantes no canto superior esquerdo da tela, e daí em diante vá incluindo os dados em ordem de importância, sempre indo da esquerda para a direita, de cima para baixo – numa espécie de movimento em formato de “Z”.
Este padrão de movimento funciona por conta do padrão de leitura que nós, no ocidente, adotamos. Assim, seus usuários provavelmente seguirão esse mesmo padrão ao analisar o dashboard.
Uma observação importante: esse padrão de leitura pode variar dependendo da cultura do país. No oriente, por exemplo, é comum encontrar padrões de leitura que partem da direita, ao invés da esquerda.
7. Ofereça consistência visual
Cores, fontes tipográficas, efeitos de interação, espaçamentos, formato dos componentes utilizados… estes elementos devem ser consistentes por todo o dashboard.
Tomando este cuidado, seus usuários inconscientemente terão mais segurança ao interpretar os dados, prevendo os padrões de leitura e os elementos visuais utilizados, e serão capazes de interpretar as informações mais rapidamente e com mais confiança.
8. Utilize cores estrategicamente
Utilize cores adequadas para cada tipo de dado, com cores de maior contraste e chamativas pertencendo aos dados mais prioritários.
Não esqueça que cores muito enraizadas em contextos específicos, de modo cultural, devem ser utilizadas com cuidado. Verde, amarelo e vermelho, por exemplo, são cores que costumam ser usadas para informar status de diversos tipos, e portanto pertencem melhor a este contexto de uso. Sempre analise bem o significado que uma cor pode ter para seus usuários, para utilizá-la de maneira sábia.
Aqui vale reforçar: use as cores com consistência através das páginas. Esse tipo de “color coding” reforça padrões para seus usuários e torna a análise mais ágil e até mais memorável.
9. Deixe o dashboard respirar
Sim, você leu certo – dashboards precisam “respirar”. Neste caso, estamos nos referindo ao uso do “whitespace”, um espaçamento estratégico incluso entre os diferentes dados e gráficos, de modo a trazer mais leveza para a tela.
Isso é extremamente importante, pois dashboards povoados com uma quantidade extrema de informações podem gerar algumas dificuldades na leitura e intimidar o usuário, como veremos no ponto a seguir.
10. Evite a sobrecarga cognitiva
Quando o usuário é confrontado com uma quantidade muito grande de informações simultaneamente, a tendência é que ele tenha dificuldades em tomar decisões, ficando paralizado. Observe a sensação que aplicativos comuns do dia-a-dia geram em você, como apps de delivery ou de e-commerce, por exemplo.
Além disso, estudos apontam que normalmente as pessoas não conseguem reter mais do que 7 ou 8 informações diferentes na memória imediata (aquela que você utiliza de forma prática no dia-a-dia, como lembrar um número de telefone para anotar no celular, ou recordar o nome de uma pessoa que acabou de conhecer em uma conversa). Portanto, apresentar mais do que isso também pode comprometer a capacidade que o usuário tem de tomar decisões.
11. Tome cuidado com os filtros
Deixe claro para o usuário como os filtros afetam o painel. Dependendo da configuração do layout, pode ser que filtros afetem os dados de maneiras diferentes, ou determinados conjuntos de dados não sejam afetados em um cenário específico. Também pode acontecer de filtros mudarem entre uma página e outra.
Você pode incluir filtros tanto na navegação global da página (ou seja, normalmente na barra superior de navegação ou na sidebar), quanto em pontos estratégicos da navegação contextual, junto a gráficos ou blocos de conteúdo específicos. Este tipo de posicionamento em particular pode contribuir para reforçar uma estrutura hierárquica dos dados e/ou isolar determinados tipos de análises, portanto, faça uso disso com cautela.
12. Não negligencie o formato mobile
É muito comum que, numa plataforma responsiva, o dashboard precise mudar a composição do seu layout na transição do ambiente desktop para o ambiente mobile.
Nesse cenário, o usuário precisará, quase sempre, visualizar um bloco de dados por vez, pois a tendência é que diferentes gráficos e displays de informação fiquem empilhados na tela mobile, que é menor e mais estreita.
Considere se o projeto necessita uma abordagem mobile-first (quando seu principal contexto de uso é no ambiente mobile), e ainda que não necessite, não esqueça de avaliar a organização dos blocos de conteúdo em diferentes resoluções para evitar problemas de leitura, navegação e análise.
Por hoje é só! Esperamos que estas dicas os ajudem a criar dashboards mais eficazes, fáceis de entender e efetivos na geração de insights e análises inteligentes.
* Para fins didáticos, estamos chamando de “Dashboard” qualquer painel de análise de dados ou de BI (Business Intelligence), porém é importante ressaltar que o conceito correto de Dashboard faz menção a uma tela em específico, em que somente os indicadores mais relevantes estejam visíveis, sem que haja necessidade de filtros ou interações complexas. Essa tela (Dashboard) não deve ter rolagem e deve apresentar mais características, que trataremos em outro post.
Texto por: Isaac Duarte – Product Designer na Cluster
Fontes:
https://medium.com/@designmatch/exploring-the-best-dashboards-design-a-practical-guide-0995ded5f77b
https://figr.design/blog/dashboard-design-best-practices
https://www.gooddata.com/blog/six-principles-of-dashboard-information-architecture/
