Psicologia de Design - Atributos pré-atentivos - Parte B

Prévia do material em texto

Visualização de dados
Unidade II
Cristiane Neri Nobre
Psicologia do Design
Atributos Pré-atentivos
Atributos pré-atentivos
3
Quantos números ‘3’ têm nesta imagem?
Fonte: Ware, Colin. (2020). Information Visualization: Perception for Design: 
Fourth Edition.
Atributos pré-atentivos
4
O que os seus olhos veem primeiro?
Fonte: https://www.youtube.com/watch?v=8EMW7io4rSI
Atributos pré-atentivos
5
O que os seus olhos veem primeiro?
Fonte: https://www.youtube.com/watch?v=8EMW7io4rSI
Atributos pré-atentivos
6
O que os seus olhos veem primeiro?
Fonte: https://www.idashboards.com/blog/2017/07/26/data-
visualization-and-the-9-fundamental-design-principles/
Atributos pré-atentivos
7
O processamento pré-atentivo é o acúmulo inconsciente de informações do 
ambiente. Seus olhos e cérebro absorvem grandes quantidades de 
informações e, em seguida, filtram e processam o que é importante. 
As informações que se destacam por causa de certos estímulos ou porque são 
relevantes para o que você está pensando são selecionadas para um 
processamento mais atento (consciente).
Atributos pré-atentivos
8Os atributos pré-atentivos são elementos básicos de construção da 
visualização porque aproveitam esse processo, fornecendo estímulos para 
você reconhecer rapidamente. 
• Distinguir entre os objetos alvo e os seus distratores
Esses estímulos podem estar relacionados à forma, cor e posição espacial, 
dentre outros recursos.
Atributos pré-atentivos
9
Relação entre o número de distratores e o tempo de resposta
Fonte: (Ware, Coli, 2013)
Atributos pré-atentivos
1
0São atributos percebidos anteriormente à atenção consciente
• Estes atributos são usados com diferentes propósitos em
visualizações
• Muitas vezes são usados para diferenciar conjuntos de
objetos visuais para diferentes grupos categóricos 
Atributos pré-atentivos
1
1(Ware, Coli, 2013) define quatro categorias de atributos pré-atentivos:
1. Forma
2. Cor
3. Posição Espacial
4. Movimento
Atributos pré-atentivos
1
2Atributo de Forma:
Fonte: Adaptado de (Ware, Coli, 2013)
Atributos pré-atentivos
1
3Atributo de Cor:
Fonte: Adaptado de (Ware, Coli, 2013)
Atributos pré-atentivos
1
4Atributo de Posição espacial :
Fonte: Adaptado de (Ware, Coli, 2013)
Atributos pré-atentivos
1
5Atributo de Movimento:
Fonte: Adaptado de (Ware, Coli, 2013)
Atributos pré-atentivos
1
6
Como usamos atributos pré-atentivos na visualização de 
dados?
• Atributos pré-atentivos podem ajudar você a decidir 
qual o tipo de gráfico usar em seus dados
Atributos pré-atentivos
Exemplo 1
1
7
Fonte: Ware, Colin. (2020). Information Visualization: Perception for Design: Fourth Edition.
Atributos pré-atentivos
Exemplo 2 
1
8
Fonte: https://www.slideshare.net/AmandaMakulec/session103-design-final
Atributos pré-atentivos
Exemplo 3
1
9
Dados tabulares com uma cor para 
valores negativos
Fonte: https://help.tableau.com/current/blueprint/en-us/bp_why_visual_analytics.htm 
2
0
Dados tabulares com vendas e lucratividade por gradientes de cor
Atributos pré-atentivos
Exemplo 3
Fonte: Extraído de https://help.tableau.com/current/blueprint/en-us/bp_why_visual_analytics.htm
2
1
Dados visuais com vendas por comprimento de barra, lucratividade por cor
Fonte: Extraído de https://help.tableau.com/current/blueprint/en-us/bp_why_visual_analytics.htm
Atributos pré-atentivos
Exemplo 3
2
2
Atributos pré-atentivos
Exemplo 4
Uso do atributo comprimento
Uso do atributo Cor
2
3
Atributos pré-atentivos
Exemplo 5
Fonte: (Knaflic, 2015)
2
4
Atributos pré-atentivos
Exemplo 6
Fonte: (Knaflic, 2015)
2
5
Atributos pré-atentivos para dados quantitativos
Em gráficos que você queira representar quantidade, quais os melhores 
atributos pré-atentivos você poderia escolher?
Ou seja, quais são mais precisos?
2
6
Atributos pré-atentivos para dados quantitativos
Fonte: Do autor
Atributos pré-atentivos para dados quantitativos
Fonte: Do autor
2
8
Fonte: Adaptado de (Mazza, 2009)
Atributos pré-atentivos para dados quantitativos
2
9
Em gráficos que você queira representar categorias, quais os 
melhores atributos pré-atentivos você escolheria?
Atributos pré-atentivos para dados categóricos
Atributos pré-atentivos para dados categóricos
Fonte: Do autor
Atributos pré-atentivos para dados categóricos
Fonte: Do autor
3
2
Em gráficos que você queira representar ordinais, quais os melhores 
atributos pré-atentivos você escolheria?
Atributos pré-atentivos para dados ordinais
Atributos pré-atentivos para dados ordinais
Fonte: Do autor
Atributos pré-atentivos para dados ordinais
Fonte: Do autor
Atributos pré-atentivos
Quando desejamos usar cores para diferenciar diferentes categorias, devemos 
escolher valores dos atributos que variam significativamente
Atributos pré-atentivos
A utilização da rodas de cores ajuda
Atributos pré-atentivos
E lembre-se:
A percepção visual captura diferenças e não valores absolutos, ou seja, é dependente 
do contexto
Bibliografia recomendada
Exemplos extraídos de:
https://homepages.dcc.ufmg.br/~raquelcm/index.php?alias=visualizacao2011
https://www.slideshare.net/AmandaMakulec/session103-design-final
https://help.tableau.com/current/blueprint/en-us/bp_why_visual_analytics.htm
Ware C. - Information 
Visualization. 
Perception for Design. 
Third Edition.
Elsevier, 1999
Ware C. - Information 
Visualization. Perception for 
Design. Forth Edition.
Elsevier, 2020
Mazza, R. Introduction to
Information Visualization, 
2009.