Ferramentas de Dashboard

Prof. M.Sc. Marcelo Tomio Hama

1
 Ferramentas de
Dashboard

AULA 4

Design de Interações e
Visualização Analítica

2
Introdução

3
Introdução

Quantos produtos você usa em seu cotidiano?

4
Introdução

Quantos produtos você usa de forma fácil em seu cotidiano?

Em nosso cotidiano, usamos

diferentes produtos, cada qual
com suas características de
uso.

O Design de Interações tem

como preocupação o estudo
dos meios de se facilitar o uso
de determinado produto.

Design de Interações também

se aplica às Visualizações.

5
Boa Interação VS Má Interação

Uma boa interação é aquela na qual:

- É fácil aprender a usar;
- Há eficácia no uso;
- O uso é agradável.

Más interações são aquelas nas quais um ou mais dos itens

anteriores são impactados (irritante, confuso, ineficiente, difícil
usar ou observar, não é intuitivo).

Exemplos de tipos não recomendados.

6
Boa Interação VS Má Interação

Como vimos em aula anterior, não há uma regra fixa, mas temos
algumas práticas que podem ajudar a tornar um design bom:
1. Definir o propósito: analítico ou operacional?
2. Escolha correta do mapeamento dependendo da aplicação
(comparação, relação, parte/todo, distribuições, etc);
3. Seguir regras bem definidas de nomenclatura e formatação de
datas, bem como truncamento de valores grandes;
4. Criar áreas e grids para o layout, de modo a separar informações
relacionadas ou de mesma contexto, cada qual de forma
consistente e bem estruturada;
5. Usar margens internas e externas para separar as visões;
6. Não omitir informações importantes nem usar demais as
interações e animações;
7. Personalize ao invés de customizar.
Referências: https://uxplanet.org/10-rules-for-better-dashboard-design-ef68189d734c

7
Interação com Dados

Um critério para avaliar se um sistema é fácil de entender

consiste em aplicar a “regra dos dez minutos” (Nelson, 1980).
Segundo esse critério, os usuários inexperientes deverão
conseguir utilizar um sistema em menos de dez minutos; do
contrário, esse sistema apresenta falhas. Como apontado por
Rubinstein e Hersh (1984), muitos sistemas computacionais não
atingem esse requisito. Para tornar os sistemas mais fáceis de
ser aprendidos, eles sugerem que os designers tirem proveito do
conhecimento das pessoas: “Não se espera que um sistema
computacional para arquitetos ensine arquitetura. Muito pelo
contrário: a regra dos dez minutos exige que aquilo que um
arquiteto já saiba seja útil no aprendizado do sistema”.

Fonte: http://www.univasf.edu.br/~jorge.cavalcanti/cap_01_design_interacao.pdf

8
Interação com Dados

Metas de Usabilidade. Fonte:

http://www.univasf.edu.br/~jorge.cavalcanti/cap_01_design_interacao.pdf

9
Interação com Dados

Exploração de Dados. Fonte: http://visual-analytics.eu

10
Técnicas de Scrolling/Zoom

Propósito: visualizar apenas uma porção dos dados.

Em geral, usuários possuem interesse apenas em uma parte da

informação precisando assim eliminar visualizações que causem
perda de foco indevido. Em geral, usa-se scroll e pan para
controlar a área visível.

O zoom possui diferentes escalas, permitindo controlar o nível

de detalhamento da visualização, além de preservar o senso de
posicionamento (smooth zoom). Uma forma bastante usada de
aplicar o zoom é induzir o visualizador a clicar em um ponto, e
criar o zoom a partir deste.

Exemplo: https://observablehq.com/@d3/zoomable-circle-packing

11
Técnicas de Overview/Detalhamento

Propósito: obter um overview de toda a coleção de dados.

A estratégia inclui visualização em zoom-out para capturar

detalhes do todo e de dados adjacentes.
Exemplo: https://observablehq.com/@d3/zoom-to-bounding-box

Uma outra abordagem de overview é o fisheye:

Fontes:
ResearchGate
Pinterest

12
Técnicas de Filtragens

Propósito: filtrar dados a serem visualizados.

Uma possível abordagem é utilizar queries dinâmicas para

buscar/re-processar itens a serem visualizados.

É possível implementar a filtragem através de campos de

valores, botões, sliders, ou checkboxes. Idealmente, a
visualização deve ser atualizada em menos de 100ms, mesmo
que tenhamos milhares de itens a serem mostrados.

Exemplo: https://observablehq.com/@d3/streamgraph-transitions

13
Hora do Desafio!

https://kahoot.it/

Prêmios aos Vencedores

- 1o colocado: +1pt na N1
- 2o e 3o colocados: +0.5pt na N1

14
Exercícios para Casa

1. Qual a relação entre as técnicas de Zoom e Scrolling?

2. Em quais situações o uso da técnica de Overview é

recomendada? E em quais situações ela não é?

3. Em quais situações o uso da técnica de Filtragem é

recomendada? E em quais situações ela não é?

15
Bônus: Micro-Workshop Excel

16
Dúvidas?
marcelo.hama@fmu.br

17