Ir para conteúdo

Transformação Visual de um Dashboard usando as 9 Recomendações de Storytelling do @LeoKarpa


Sayuri

1.208 visualizações

Hey, tudo jóia com você?!

Decidi postar a solução que dei para um Dashboard feio escondido no fundo da gaveta utilizando as 9 recomendações do nosso mestre - o Leonardo Karpinski.
Vamos ver se deu certo?!

 

Antes:

image.thumb.png.c2ab2e2466471549ef569f5010366b95.png


Identificando os pontos de melhorias:

image.thumb.png.e16e1b47cefa483de6b1eb3632572637.png


1. Grupos de elementos sem padrão de espaçamento entre eles. Espaçamento entre ícone e cartão distintos entre os grupos de elementos. 

2. Seria melhor utilizar texto alinhado a esquerda. Toda leitura ocidental começa da esquerda para a direita. 

3. Não precisa de divisória para separar os grupos de elementos. Eles são visualmente distintos e já estão segregados.

4. Falta de espaço "em branco" distanciando os visuais. Todo dashboard precisa de uma "área de respiro". Bordas desnecessárias. 

5. Título descreve o visual e não mostra o que ele representa. Esse texto ficou redundante em relação ao que já está sendo mostrado.

6. Bordas desnecessária e com padrão redondo (diferente de todas as demais).

7. Raio da borda diferente dos demais. Sem padrão aqui, baby!

8. Visual desordenado - poderíamos ordenar da maior receita para a menor. Mesmo que fosse importante a ordem alfabética dos valores, o título não descreve a importância de visualizar dessa forma. 

9. Poluição visual. Escolha apenas 1: rótulo ou eixo. 

10. Cor igual ao gráfico ao lado que dá uma falsa impressão de mostrar as mesmas métricas e pode confundir o usuário.

11. Muitas cores. Gráficos empilhados devem ter no máximo 4 categorias. Veja que a legenda não cabe no visual, necessitando que usuário clique para ver o restante. 

12. Gráficos de evolução no tempo geralmente usam o tempo no eixo x, além disso há um scroll na vertical porque não coube tudo. Esse gráfico da forma que está de nada ajuda a identificar padrões, sazonalidades, tendências. 

13. Gráfico desalinhado em relação aos demais. Falta de padrão de espaçamentos e alinhamentos.


14. Não deixe seu usuário com torcicolo. Deixe os valores do texto do eixo da forma que você lê, na horizontal bem bonitinho! No Power BI o bisu é desativar a configuração "concatenar rótulos":

image.png.50d3c9e53c63ea5fff608279cb9d7106.png

15. Rolagem do gráfico na horizontal: never! Evite ao máximo. 

16. Observe a distância entre a fonte e as extremidades do retângulo que ela está. Está espremida ali né?! É essa sensação que seu usuário vai ter.

17. Padronize a escolha e tamanho das fontes de acordo com a hierarquia visual. Já viu aquelas blusas engraçadas tipo essa daqui? É essa magia que ocorre quando pensamos na hierarquia visual!
fpwKa5v.png

 

Solução final: buscando referências, adicionando umas coisas e aplicando as melhores práticas, eis o  tchan tchan tchan tchan: 

DpaiFOf.png

É fazendo errado que se aprende, né?!
A versão feia foi feita por mim há 2 anos. Todo mundo começa errando.
Cabe a nós termos a humildade de identificar os pontos de melhoria e corrermos atrás pra estarmos 1 passo melhor todos os dias!

Ah, não esquece de se inscrever no Workshop!
O Leo dará muuuitas dicas valiosas sobre DataViz que vai transformar seu modo de criar Dashboards!
Bjs, 
Say.

image.png

  • Gostei 7

5 Comentários


Comentários Recomendados

  • Membros

Comentei no LinkedIn...

Mas repito aqui, até pensei em compartilhar o meu primeiro e o meu último, mas para um feedback mesmo, mas fiquei com medo. kkkk

Você manda muito bem.

  • Gostei 1
Link para o comentário
  • Membros

Oi Sayuri,

Posso me arriscar a fazer algumas observações?

Se eu não entendi a proposta, pode me dar uns croques merecidos.

Acho que uma tendência clean ajuda, mas ao optar por ser mais direta, houve perda de informação.

Por exemplo, das barras verticais que mostram a participação de cada convênio na receita do hospital ao longo do tempo.  Agora, eu continuo vendo a participação com gráficos de barras, mas para qual período?

Outra coisa é o tamanho da fonte dos números nos cartões: ao reduzir o tamanho da fonte, ficaram menos legíveis, perdendo destaque para os ícones ao lado e o título acima.

Os gráficos de linha ficaram mais legíveis, mas você alterou os períodos, de trimestres para meses, considerando apenas 2019. 

Mas e se o leitor se interessar em observar a tendência da série inteira? Para evitar a barra de rolagem, é possível criar uma coluna na tabela calendário específica para usar no eixo X (descobri isso com o Marco Russo, pois trabalhando com séries temporais, eu tinha uma angústia danada com esse problema)

Bem, já adianto mil desculpas se fiz observações inadequadas ou impertinentes. Acompanho os seus posts, todos, porque você é uma usina de idéias que me ajudam muito a melhorar o meu trabalho.

E vou aproveitar o espaço aqui para agradecer - thanks!!!!!

 


 

Link para o comentário
Em 01/09/2021 em 20:07, Vagner Bessa disse:


Oi Sayuri,

Posso me arriscar a fazer algumas observações? [ Claro! Sempre! ]

Se eu não entendi a proposta, pode me dar uns croques merecidos. 

Acho que uma tendência clean ajuda, mas ao optar por ser mais direta, houve perda de informação.

Por exemplo, das barras verticais que mostram a participação de cada convênio na receita do hospital ao longo do tempo.  Agora, eu continuo vendo a participação com gráficos de barras, mas para qual período?
[ Tem 2 opções pra ver esse % de participação, via tooltip e via Árvore Hierárquica ]

Outra coisa é o tamanho da fonte dos números nos cartões: ao reduzir o tamanho da fonte, ficaram menos legíveis, perdendo destaque para os ícones ao lado e o título acima. [ O foco realmente era dar destaque para os ícones mas concordo que a cor da fonte e espessura poderiam ser melhoradas para aumentar a legibilidade. Valeu 🚀]

Os gráficos de linha ficaram mais legíveis, mas você alterou os períodos, de trimestres para meses, considerando apenas 2019. 

Mas e se o leitor se interessar em observar a tendência da série inteira? Para evitar a barra de rolagem, é possível criar uma coluna na tabela calendário específica para usar no eixo X (descobri isso com o Marco Russo, pois trabalhando com séries temporais, eu tinha uma angústia danada com esse problema) [ Excelente dica! Obrigada! Nesse caso, como é um case de healthcare e os dados são sobre receitas de convênios de plano de saúde, os dados tem apenas granularidade mensal então nesse caso fez mais sentido ter a visão mensal de cada ano separadamente. ]

Bem, já adianto mil desculpas se fiz observações inadequadas ou impertinentes. Acompanho os seus posts, todos, porque você é uma usina de idéias que me ajudam muito a melhorar o meu trabalho.
[ Nada de pedir desculpas, estamos aqui para aprendermos uns com os outros ]

E vou aproveitar o espaço aqui para agradecer - thanks!!!!! [ Eu que agradeço pelas suas contribuições! Tmj!😊]

 

 


 

 

Link para o comentário

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
×
×
  • Criar Novo...