Esta apresentação fez parte do 11º Encontro de Design & UX promovido pela comunidade UX da Petrobras em Setembro de 2021. Data Viz tornou-se um tema muito relevante, não somente para quem trabalha com tecnologia mas também para qualquer pessoa que precisa mostrar resultados e obter insights através de dados. Esta apresentação aborda as etapas para realizar uma boa visualização de dados através de vários exemplos considerando aspectos como percepção visual, princípios de design e técnicas de narrativa e apresentação.

1. Visualização de Dados
11º Encontro UX & Design
— Setembro, 2021
Mestre em Design e Especialista em Arquitetura de Informação e Usabilidade pela PUC-Rio.
Atua nas áreas de Design, Marketing, Finanças, TI e EAD, desenvolvendo produtos e serviços
de interface digital em projetos nacionais e internacionais para empresas como Petrobras,
Vale, Oi, IBMEC, SulAmérica e ProfitPay (Fintech do Vale do Silício).
Lara Brito, MSc
UX Researcher | Designer | Data Lover
0101000000111000010101010
00010101010
001
1
Entendendo suas Etapas

2. Introdução
O que é e quando utilizar DataViz?
DataViz ou Visualização de dados é a representação visual do conjuntos de
dados projetados para realizar análises de forma eficaz.
Permite que resultados de análises sejam compreendidos de forma visual
através da identificação de padrões, comportamentos e tendências.
A visualização de dados é utilizada quando as pessoas não sabem como abordar
o problema. Há muitas perguntas possíveis a serem feitas - de dezenas a
milhares - e as pessoas não sabem quais dessas muitas perguntas são as
corretas para solução que buscam.

3. Introdução
Elementos para visualização de dados

4. Introdução
Etapas para o desenvolvimento de gráficos
?
Entender Refinar Apresentar
Criar

5. Conteúdo
01 02
Falando
a linguagem
dos dados
03
Fazendo
as melhores
escolhas
04
Como contar
uma boa
história?
Métodos
para criação
de gráficos

6. | Falando a Linguagem dos Dados

7. Fazendo as Melhores Escolhas
Etapas para o desenvolvimento de gráficos
?
Entender Refinar Apresentar
Criar

8. Falando a Linguagem dos Dados
Estamos cercados por linguagens visuais geradas por dados
40.000.000.000.000
Gigabytes de dados
(IDC - International Data Corporation)

9. Falando a Linguagem dos Dados
● Graças a coleta massiva e ao consumo diário, a visualização de dados
tornou-se essencial, surgindo como uma nova linguagem.
● Mesmo que acredite não dominar esta língua, conseguimos ouvi-la e
compreendê-la de forma silenciosa.
● A onipresença do dataviz impulsiona a demanda por gráficos intuitivos, que
possam ser interpretados de forma fácil e rápida.
● Dominar esta nova linguagem exige que adotemos lógica e percepção visual
adequadas. Afinal, não basta apenas construir gráficos e sim saber
comunicar informações (estratégicas) através deles.

10. Falando a Linguagem dos Dados
“Ao visualizar as informações, nós as transformamos em uma
paisagem que podemos explorar com os olhos. Uma espécie de
mapa de informações. E quando você está perdido em informações,
um mapa de informações é bastante útil.”
“Data is the new oil? No, data is the new soil.” – David McCandless

11. Falando a Linguagem dos Dados
O que é um bom gráfico?
Para desenvolver fluência no idioma dos dados, primeiro precisa reconhecer um
bom gráfico quando vê-lo. Como fazer isso?
● Para julgar o valor de um gráfico, é necessário considerar o tipo de gráfico,
cores, rótulos e eixos.
● O gráfico não é capaz de contar uma história na ausência de contexto. Sem
contexto, poderá influenciar erroneamente nas decisões de negócios.
● Os gráficos não devem citar dados fora do contexto.
Ao invés de questionar se o gráfico está certo ou errado, deve-se focar se ele é "BOM"
o suficiente para o contexto utilizado.

12. Falando a Linguagem dos Dados
Para reconhecer um bom gráfico, deve-se responder a estas perguntas:
1. O gráfico conta uma história de forma rápida e clara?
2. É eficaz?
3. Promove aprendizado?
4. Defende alguma hipótese?
5. Quem verá isso?
6. O que eles querem e precisam?
7. Que ideia eu quero transmitir?
8. O que posso mostrar?
9. Como e o que devo mostrar?

13. Falando a Linguagem dos Dados
O que acham deste gráfico? É um bom gráfico?
https://policyviz.com/2018/02/15/remake-pie-in-a-donut-chart/
Destinations for U.S agricultural exports by share of value
8%
33%
22%
20%
9%
6%
1%
1995-1999 Average 2011-2015 Average
23%
20%
28%
11%
10%
5%
High income Asia and Pacific
North America
Europe and Central Asia
South America and Caribbean
Developing East Asia
Middle East and North Africa
Sub-Saharan Africa
South Asia
2%
1%
1%

14. Falando a Linguagem dos Dados
Ciência da visualização de dados
Cinco questões relevantes sobre a leitura de gráficos:
1. A leitura não respeita uma ordem específica;
2. Identificamos primeiro o que se destaca;
3. Identificamos alguns elementos visuais por vez;
4. Buscamos significado e fazemos conexões;
5. Seguimos convenções e metáforas.

15. Falando a Linguagem dos Dados
Ciência da visualização de dados
1. A leitura de um gráfico não respeita uma ordem específica
Normalmente a leitura de textos é feita sequencialmente e de forma uniforme
(da esquerda para direita). No caso dos gráficos, esta ordem nem sempre é respeitada.
Vamos aonde nossos olhos são estimulados a ir.
X 1
2
3
5
4
6
1
2
3

16. Falando a Linguagem dos Dados
Ciência da visualização de dados
2. Identificamos primeiro o que se destaca
● Reconhecemos padrões e diferenças - picos,
vales, interseções, cores, linhas de forma
quase instantânea.
● Apesar da posição, nem sempre os
títulos são a primeira coisa que um leitor
percebe, mas servem como dica para
um significado.

17. Falando a Linguagem dos Dados
Ciência da visualização de dados
3. Identificamos alguns elementos visuais por vez
● Quanto mais dados visualizados, mais
desafiadora se torna a leitura.
● Especialistas relatam que não podemos
distinguir mais do que oito cores por vez.
● Quando o gráfico possui mais de cinco a
dez variáveis e/ou elementos, o significado
individual desses elementos desaparece.
● A escolha do tipo de gráfico é crucial para
a análise desejada.

18. Falando a Linguagem dos Dados
Ciência da visualização de dados
4. Buscamos significado e fazemos conexões
● Parte do nosso processamento acontece
antes de sabermos que o fizemos - para que
possamos captar as informações visuais
com mais clareza e com menos esforço.
● A conexão da informação é feita a partir de
tudo que é apresentado e portanto o que se
destaca torna-se parte crucial da narrativa.

19. Falando a Linguagem dos Dados
Ciência da visualização de dados
5. Seguimos convenções e metáforas
● As convenções são uma forma de
expectativa, e nossos cérebros usam a
experiência e a expectativa como atalhos
cognitivos para que não tenhamos que
processar toda informação novamente.
● Com base em nossas experiências,
armazenamos mentalmente todos os
tipos de metáforas e convenções sobre o
que a informação significa: para cima é
bom, para baixo é ruim. O norte está em
cima, o sul está embaixo. 22%
19%
15%
44%
Not at all Minimally Moderately Extremely

20. | Métodos para Criação de Gráficos

21. Fazendo as Melhores Escolhas
Etapas para o desenvolvimento de gráficos
?
Entender Refinar Apresentar
Criar

22. Métodos para Criação de Gráficos
Uma boa maneira de começar a pensar visualmente é considerar duas questões
sobre a natureza e o propósito da visualização de dados:
1. A informação é conceitual ou data-driven?
2. Estou declarando ou explorando os dados?

23. Métodos para Criação de Gráficos
Conceitual ou data-driven?
● Qual tipo de informação está sendo
transmitida?
● Importante observar que a questão
é sobre a informação em si.

24. Métodos para Criação de Gráficos
Conceitual ou data-driven?
Conceitual

25. Métodos para Criação de Gráficos
Conceitual ou data-driven?
Data-driven: quando o dado mostrado representa valores quantitativos.

26. Métodos para Criação de Gráficos
Conceitual ou data-driven?
Às vezes, um gráfico data-driven assume uma forma conceitual e vice-versa.

27. Métodos para Criação de Gráficos
Declarativo ou exploratório?
Se a primeira pergunta (conceitual ou data-driven?) identifica o tipo de dado
mostrado, a segunda (declarativo ou exploratório?) revela o seu comportamento.
● Gráficos declarativos contém afirmações. A visualização declarativa não
deve impedir uma análise sobre a ideia apresentada, gerando discussões.
● Quando não se se tem certeza das informações que precisa, parte-se para
uma investigação exploratória sobre os dados, procurando identificar
padrões, tendências ou anomalias.

28. Métodos para Criação de Gráficos
Quatro tipos de gráficos
CONCEITUAL
DATADRIVEN
EXPLORATÓRIO
DECLARATIVO
As questões se combinam em uma matriz para criar quatro tipos de visualizações:
GERAÇÃO DE IDEIAS EXPLORAÇÃO VISUAL
DATAVIZ COTIDIANO
Tipo de informação: processo, framework
Tipo de visualização: simples, figurativas
Recursos de visualização: convenções, metáforas
Cenário típico: apresentação, instrução
Habilidades: design, edição
Objetivos: aprendizado, simplificação
ILUSTRAÇÃO DE IDEIAS

29. Métodos para Criação de Gráficos
Quatro tipos de gráficos
CONCEITUAL
DATADRIVEN
EXPLORATÓRIO
DECLARATIVO
As questões se combinam em uma matriz para criar quatro tipos de visualizações:
GERAÇÃO DE IDEIAS EXPLORAÇÃO VISUAL
Tipo de informação: processo, framework
Tipo de visualização: simples, figurativas
Recursos de visualização: convenções, metáforas
Cenário típico: apresentação, instrução
Habilidades: design, edição
Objetivos: aprendizado, simplificação
ILUSTRAÇÃO DE IDEIAS DATAVIZ COTIDIANO
Tipo de informação: simples, baixo volume
Tipo de visualização: convencional, estatística
Recursos de visualização: claros, narrativa simples
Cenário típico: apresentação formal
Habilidades: design, storytelling
Objetivos: afirmar, definir contexto

30. Métodos para Criação de Gráficos
Quatro tipos de gráficos
CONCEITUAL
DATADRIVEN
EXPLORATÓRIO
DECLARATIVO
As questões se combinam em uma matriz para criar quatro tipos de visualizações:
GERAÇÃO DE IDEIAS EXPLORAÇÃO VISUAL
Tipo de informação: processo, framework
Tipo de visualização: simples, figurativas
Recursos de visualização: convenções, metáforas
Cenário típico: apresentação, instrução
Habilidades: design, edição
Objetivos: aprendizado, simplificação
ILUSTRAÇÃO DE IDEIAS DATAVIZ COTIDIANO
Tipo de informação: simples, baixo volume
Tipo de visualização: convencional, estatística
Recursos de visualização: claros, narrativa simples
Cenário típico: apresentação formal
Habilidades: design, storytelling
Objetivos: afirmar, definir contexto
Tipo de informação: Big data,complexa, dinâmica
Tipo de visualização: avançada, original
Recursos de visualização: interativo, auto dinâmico
Cenário típico: workshops, avaliações, análises
Habilidades: Business Intelligence (BI), programação
Objetivos: detectar tendências, análise profunda

31. Métodos para Criação de Gráficos
Quatro tipos de gráficos
CONCEITUAL
DATADRIVEN
EXPLORATÓRIO
DECLARATIVO
As questões se combinam em uma matriz para criar quatro tipos de visualizações:
GERAÇÃO DE IDEIAS EXPLORAÇÃO VISUAL
Tipo de informação: processo, framework
Tipo de visualização: simples, figurativas
Recursos de visualização: convenções, metáforas
Cenário típico: apresentação, instrução
Habilidades: design, edição
Objetivos: aprendizado, simplificação
ILUSTRAÇÃO DE IDEIAS DATAVIZ COTIDIANO
Tipo de informação: simples, baixo volume
Tipo de visualização: convencional, estatística
Recursos de visualização: claros, narrativa simples
Cenário típico: apresentação formal
Habilidades: design, storytelling
Objetivos: afirmar, definir contexto
Tipo de informação: Big data,complexa, dinâmica
Tipo de visualização: avançada, original
Recursos de visualização: interativo, auto dinâmico
Cenário típico: workshops, avaliações, análises
Habilidades: Business Intelligence (BI), programação
Objetivos: detectar tendências, análise profunda
Tipo de informação: não definida
Tipo de visualização: figurativa, criativa
Recursos de visualização: convenções, metáforas
Cenário típico: workshops, brainstorming
Habilidades: design, protótipo
Objetivos: descobertas, aprendizados

32. Métodos para Criação de Gráficos
Quatro tipos de gráficos
CONCEITUAL
DATADRIVEN
EXPLORATÓRIO
DECLARATIVO
As questões se combinam em uma matriz para criar quatro tipos de visualizações:
GERAÇÃO DE IDEIAS
ILUSTRAÇÃO DE IDEIAS
EXPLORAÇÃO VISUAL
DATAVIZ COTIDIANO
Criar bons recursos visuais para interpretar dados
e orientar tomadas de decisão
Criar rascunhos ou representações de dados que
gerem ideias e promovam aprendizado

33. Métodos para Criação de Gráficos
Antes de desenhar um gráfico...
Após reconhecer a natureza e o propósito do gráfico (através da matriz):
● Pense no conteúdo e ideia que deseja transmitir.
● Compartilhe suas ideias (stakeholders e equipe).
● Faça um protótipo antes de gerar o gráfico em uma ferramenta.
● Estude como representar o dado através do gráfico mais adequado.

34. Métodos para Criação de Gráficos
Escolhendo o tipo de gráfico
https://br.pinterest.com/pin/336081190928237608/ Andrew Abela´s

35. | Fazendo as Melhores Escolhas

36. Fazendo as Melhores Escolhas
Etapas para o desenvolvimento de gráficos
?
Entender Refinar Apresentar
Criar

37. Fazendo as Melhores Escolhas
Princípios de Design
O objetivo de um bom gráfico não é tornar as visualizações mais atraentes e sim
torná-los mais eficazes e fáceis de entender. Embora saibamos identificar um bom
design ao vê-lo, nem sempre sabemos o por quê.
Um bom gráfico deve ajudar-nos a gerar ideias e análises. Por isso, ele precisa ser
aprimorado e/ou refinado através dos princípios de design.

38. Fazendo as Melhores Escolhas
Princípios de Design - Estrutura e hierarquia
Para fazer gráficos claros e organizados, utilize o princípio de estrutura e hierarquia:
1. Inclua título, subtítulo, campo visual e fonte. Dentro do campo visual, inclua
eixos, rótulos e legendas (se necessário).

39. Fazendo as Melhores Escolhas
Princípios de Design - Estrutura e hierarquia
2. Dê a cada elemento um peso consistente: título (cerca de 12% da sua
visualização); legenda (8%); campo visual (75%); Fonte do gráfico (5%).

40. Fazendo as Melhores Escolhas
Princípios de Design - Estrutura e hierarquia
3. Alinhar elementos: coloque-os ao longo do menor número possível de linhas
horizontais e verticais.

41. Fazendo as Melhores Escolhas
Princípios de Design - Clareza
Para gráficos que fazem sentido e são rapidamente compreendidos, utilize clareza:
1. Remova os elementos estranhos e mantenha o significado do gráfico.
Wall Street Journal
New England Journal of Medicine

42. Fazendo as Melhores Escolhas
Princípios de Design - Clareza
2. Faça com que todos os elementos sejam apoio visual. Use-os para destacar a
ideia e não como simples estrutura de gráfico.

43. Fazendo as Melhores Escolhas
Princípios de Design - Clareza
3. Remova a ambigüidade. Certifique-se de que cada elemento tenha um propósito
para não ser mal interpretado.

44. Fazendo as Melhores Escolhas
Princípios de Design - Clareza
4. Use convenções e metáforas. Aproveite ideias que não precisamos pensar para
entender, como vermelho é "quente" e azul é "frio".

45. Fazendo as Melhores Escolhas
Princípios de Design - Simplicidade
Para fazer gráficos esteticamente bonitos e elegantes, concentre-se na simplicidade.
1. Mostre apenas o que é necessário. Cada elemento deve ser necessário, exclusivo
e renderizado da forma mais simples possível.

46. Fazendo as Melhores Escolhas
Princípios de Design - Simplicidade
2. Evite usar elementos desnecessários. Um destaque por elemento é o suficiente.

47. Fazendo as Melhores Escolhas
Princípios de Design - Simplicidade
3. Minimize o número de cores. O uso de muitas cores prejudica a análise do gráfico,
principalmente em casos onde há muitas categorias a serem comparadas.

48. Fazendo as Melhores Escolhas
Princípios de Design - Simplicidade
4. Limite o movimento dos olhos. Coloque rótulos e legendas bem próximos.

49. | Como Contar uma Boa História?

50. Fazendo as Melhores Escolhas
Etapas para o desenvolvimento de gráficos
?
Entender Refinar Apresentar
Criar

51. Como Contar uma Boa História
Apresente para persuadir
É possível tornar as visualizações de dados mais eficazes, através de boas
apresentações.
O grande desafio é ajudar a audiência quando visualizar os dados pela primeira
vez - ajudá-la a processá-lo: fazer com que se envolvam e engajem na
visualização e análise dos dados.

52. Como Contar uma Boa História
Apresente para persuadir
● Mostre o gráfico e pare de falar. Um bom gráfico falará por si. Deixe os
sistemas visuais dos espectadores funcionarem sem distrações.
● Não leia a imagem. Fale sobre as ideias no gráfico, e não sobre a estrutura.
● No caso de formas visuais incomuns, oriente o público. Não leia a imagem,
mas forneça uma breve explicação de como funciona.

53. Como Contar uma Boa História
Apresente para persuadir
● Use gráficos de referência. Imagens complementares que mostram casos
"ideais" podem adicionar contexto e tornar seu gráfico mais fácil de
ser compreendido.
● Quando tiver algo importante a dizer, desligue o gráfico. Enquanto algo
visual for exibido, os espectadores olham mais do que ouvem. Se quiser que
o ouçam, desligue a tela por um momento para focaliza-los novamente.
● Apresente a informação de forma simples. Crie versões com conteúdo mais
detalhado para que a audiência possa consultar depois por conta própria.

54. Como Contar uma Boa História
Práticas de storytelling
● Crie tensão. Antes de revelar completamente a informação, mostre-a em
partes e peça ao público para especular sobre o que será mostrado.
● Use o tempo a seu favor. Para fazer com que o público compreenda grandes
valores, revele-os gradualmente.
● Aumente ou diminua o zoom. Para dar aos espectadores uma noção de
escala, comece com um valor relacionável e aumente ou diminua a escala
passo a passo para mostrar o valor que você deseja que eles compreendam.

55. Como Contar uma Boa História
Práticas de storytelling
● Use uma isca. Atraia os espectadores através de um cenário e depois mostre
a versão real, que contradiz as expectativas.
● Desconstrua e reconstrua. Divida uma visualização em vários gráficos
simples e, em seguida, monte-a novamente para o público.
● Conte histórias. Use uma estrutura dramática de cenário, conflito e
resolução para fazer um gráfico ou vários gráficos contarem uma história
mais curta.

56. | Conclusão

57. Considerações Finais
● Não existe uma forma única de representação de dados e sim a escolha
do melhor formato que ajuda a interpretar os dados com eficácia.
● Evite a tentação de criar gráficos diretamente nas ferramentas antes de
analisar a natureza e propósito dos dados que deseja representar.
● Saiba diferenciar um bom gráfico através do contexto.
● Apresentações que prendem a atenção do público não dependem de gráficos
chamativos e sim da habilidade para criar insights através de boas histórias.

58. Dicas de Livros & Artigos
Good Charts: The HBR Guide to Making Smarter, More Persuasive Data Visualizations
Scott Berinato
Harvard Business Review Press
Visualization Analysis and Design (AK Peters Visualization Series)
Tamara Munzner
A K Peters/CRC Press
Good Charts Workbook: Tips, Tools, and Exercises for Making Better Data Visualizations
Scott Berinato
Harvard Business Review Press
Information Dashboard Design: Effective Visual Communication of Data
Stephen Few
O′Reilly

59. Dicas de Livros & Artigos
Data Visualization for Human Perception
interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/data-visualization
-for-human-perception
Design Principles
interaction-design.org/literature/topics/design-principles
Advices by Edward Tufte: Importance of Context for Charts
https://anychart.medium.com/advices-by-edward-tufte-importance-of-context-for-charts-819396300255
10 rules for better dashboard design
https://uxplanet.org/10-rules-for-better-dashboard-design-ef68189d734c
By 2020, there will be 5,200 GB of data for every person on Earth
computerworld.com/article/2493701/by-2020--there-will-be-5-200-gb-of-data-for-every-person-on-earth.html
Dados Finos
dadosfinos.info/2014/03/que-tipo-de-grafico-usar.html
Data Viz Color Palette Generator - Learn UI Design
https://learnui.design/tools/data-color-picker.html

60. Dicas de Livros & Artigos
Mastering Data Storytelling: 5 Steps to Creating Persuasive Charts and Graphs
crazyegg.com/blog/data-storytelling-5-steps-charts
Top Data Visualization Examples and Dashboard Designs
toptal.com/designers/dashboard-design/top-data-visualization-dashboard-examples
Make Great Data Visualizations For Your Next Presentation
udacity.com/blog/2021/09/make-great-data-visualizations-for-your-next-presentation.html
Why Data Visualization??
https://medium.com/science-and-philosophy/why-data-visualization-8c2a2d27fb16
Information is Beautiful
informationisbeautiful.net/
Guidelines for Good Visual Information Representations
interaction-design.org/literature/article/guidelines-for-good-visual-information-representations
Gerador de paleta de cores acessível
https://color.adobe.com/pt/create/color-accessibility

61. 0101000000111000010101010
00010101010
001
1
Perguntas?
Lara Brito, MSc
UX Researcher | Designer | Data Lover
Obrigada!
larbrit@gmail.com linkedin.com/in/larbrito behance.net/larbrito/resume