Visualização de Informação Aspectos Humanos

Transcrição

1 Visualização de Informação Aspectos Humanos José Gustavo de Souza Paiva Introdução Aspectos Humanos Capacidades físicas e cognitivas do ser humano Influência no design de Interfaces de sistemas computacionais Sistemas de análise visual 2 1

2 Ser Humano Personagem central em qualquer sistema interativo Objetivo: entender suas capacidades e limitações Percepção do mundo Capacidade física de manipulação de objetos Processo de armazenamento e processamento de informações Processo de solução de problemas Psicologia Cognitiva 3 Psicologia Cognitiva Estudo científico do comportamento humano e processos mentais subjacentes Processador de Informação Humano Compreensão e análise do uso de interfaces em relação ao processamento motor, visomotor, perceptual e cognitivo do sistema humano 4 2

3 Psicologia Cognitiva Modelo do Processador de Informação Humano (MPIH) Descrição aproximada daquela feita por um engenheiro de computação Memórias, processadores Parâmetros e interconexões Ajuda a prever a interação usuáriocomputador em termos de comportamento 5 Modelo do Processador de Informação Humano (MPIH) Sistema Perceptual Sistema Motor Sistema Cognitivo 6 3

4 Modelo do Processador de Informação Humano (MPIH) MLD: Memória de Longa Duração MCD/MT: Memória de Curta duração / Memória de Trabalho MIV: Memória da Imagem Visual MIA: Memória da Imagem Auditiva PP: Processador Perceptual PC: Processador Cognitivo PM: Processador Motor 7 Sistema Perceptual Transporta sensações do mundo físico e transforma em representações internas Mundo físico: detecção por sistemas sensoriais Sentidos Humanos Visão Audição Tato 8 4

5 Exemplo: Sistema Visual Retina: captação da luz Intensidade Comprimento de onda Distribuição Espacial Detalhes da cena: fóvea Restante: visão periférica Movimentação Sacada: viagem + fixação (70 a 700ms) Média: 230ms Variação pela complexidade e habilidade do observador 9 Exemplo: Sistema Visual Habilidade de leitura e distinção é inversamente proporcional à distância do ponto de foco (fóvea) 10 5

6 Exemplo: Sistema Visual Movimentos do olho podem dominar tempo requerido para uma tarefa Leitura de um texto: Captação em cada fixação Habilidade do leitor Dificuldade da tarefa Considerando o tempo de sacada de 230ms 1 letra por sacada: 52 palavras por minuto (média de 5 letras por palavra) 1 palavra por sacada: 261 palavras/min 1 frase por sacada: 652 palavras/min (média de 2.5 palavras por frase) 11 Exemplo: Sistema Visual Apresentação do estímulo visual/auditivo representação na MIV/MIA Informação codificada fisicamente: análogo não simbólico ao estímulo externo: representação interna Código afetado pelas propriedades físicas do estímulo Exemplo: número 2 Tempo de desbotamento: tempo depois do qual a probabilidade de recuperação da informação é menor do que 50% dmiv = 200ms dmia = 1500ms 12 6

7 Exemplo: Sistema Visual Capacidade: quantidade de informação possível de se armazenar cmiv = 17 letras cmia = 5 letras Tempo de ciclo: tempo decorrido desde o fornecimento do estímulo e disponibilidade na MIV Varia de acordo com o estímulo 13 Exemplo: Sistema Visual Princípio nº 1: O tempo do ciclo do Processador Perceptual varia inversamente com a intensidade do estímulo Mais de um estímulo por ciclo: combinação (se suficientemente similares) Ex: duas luzes ocorrendo em posições distintas em um único ciclo: percepção de movimento 14 7

8 Características da Percepção Percepção de Profundidade Sobreposição auxilia percepção 16 8

9 Percepção de Detalhes Habilidade limitada de percepção de detalhes 17 Deficiências da Visão deuteranopia (deficiência verde) [4] Tipos de Deficiência [Wikipedia] 18 9

10 Implicações na Visualização Cores devem ser sempre utilizadas como pistas redundantes Inserir formas alternativas para a mesma informação Texto e backrgound devem ser distintos, baseados em contraste e cor Em condições de iluminação pobres, discriminação de cores é mais fraca 19 Sistema Motor Tradução dos estímulos armazenados em ação Ativação de padrões de músculos voluntários disparados em sequência Usuários de computador Braço-mão-dedo Cabeça-olho Série de micro-movimentos discretos que requerem um ciclo do processador motor definido no MPIH 20 10

11 Sistema Cognitivo Concepção simples: conectar entradas do Sistema Perceptual para saídas corretas do Sistema Motor Tarefas complexas Aprendizado Experiências passadas Duas memórias associadas Memória de curta duração: informação sob consideração no momento de determinada atividade Memória de longa duração: informação a ser acessada em longo prazo 21 Memória de Curta Duração Armazena produtos intermediários do pensamento 1. Representações produzidas pelo Sistema Perceptual 2. Subconjunto de elementos ativados da Memória de Longa Duração: chunks Dependente do usuário da tarefa Exemplo: C F B U I S M O F U A U F U F A C O M B S I Chunks podem ser associados, criando uma rede semântica 22 11

12 Memória de Longa Duração Armazena a massa de conhecimento do usuário Fatos Procedimentos História Conceitualmente pode ser entendida no modelo como uma rede de chunks acessados de forma associativa (conectada) a partir da MCD Desbotamento teoricamente infinito Busca de informação pode falhar por conta da associação 23 Memória de Longa Duração Codificação semântica Criação de "pistas" para recuperação rápida Exemplo: criação de arquivos de imagem com nomes antagônicos Princípio nº 2: Especificidade da codificação Operações de codificação específicas realizadas sobre o que é percebido determinam o que é armazenado O que é armazenado determina que pistas de recuperação são efetivas em prover acesso ao que é armazenado Princípio nº 3: Princípio da Discriminação A dificuldade da recuperação da memória é determinada pelos candidatos que existem na memória relativos às pistas para recuperação 24 12

13 Memória de Longa Duração Consequência: quanto mais associações um item tiver, maior será a probabilidade de ser recuperado É possível utilizar diversas estratégias para buscar informações na MLD Distribuição espacial Sequências Modelo: rede semântica Hierarquia 25 Rede Semântica 26 13

14 Generalização Lassie tem 4 patas e um rabo porque é um cachorro É mais dificil relacionar informação, quanto maior for o grau de separação entre ela 27 Impactos na Visualização Reconhecimento X Recordação Recordação: informação reproduzida da memória Pode ser auxiliada por pistas, categorias, etc Reconhecimento: informação gera conhecimento de que "isso já foi visto antes" A informação é a própria pista mais fácil do que recordação 28 14

15 Percepção Humana Falhas na interpretação [3] 29 Percepção Humana Ambiguidade: falta ou excesso de informação Dificuldade em enxergar/ouvir múltiplas coisas simultaneamente Nossa habilidade em ver coisas em profundidade não depende da familiaridade que temos com os objetos representados Resultado: ilusões [3] 30 15

16 Ilusões the Ponzo illusion the Muller Lyer illusion Percepção nem sempre é confiável 31 Imagens "impossíveis" 32 16

17 Imagens "impossíveis" Conflitos entre partes individuais na interpretação global Seres humanos não analisam coisas de forma isolada 33 Leitura Acordnicg to rsceearch at Cmabrigde Uinervtisy, it deosn t mttaer in waht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the frist and lsat ltteer are in the rghit pcela. The rset can be a toatl mses and you can sitll raed it wouthit pobelrm. Tihs is buseace the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. É vrdedae que pdoeoms ler uma fasre ebmarahadla

18 II Workshop de Engenharia de Software UNESP Bauru 35 Percepção Humana Perceber é muito mais do que ver Conhecimento sobre fenômenos da percepção humana é necessário ao design de interfaces e layouts 36 18

19 Modelos Mentais Representações analógicas, ou combinações de representações analógicas e proposicionais, de coisas ou acontecimentos do dia a dia Geralmente relacionadas a imagens Representação dinâmica sobre qualquer sistema ou objeto Evolui naturalmente na mente de uma pessoa Acionados quando precisamos fazer inferências ou previsões a respeito de determinado assunto Ex: quantas janelas existem na nossa casa? 37 Modelos Mentais São formados através da interação com o meio ambiente Modelos mentais são: Incompletos: execução limitada pelos mecanismos perceptual e cognitivo Instáveis: pessoas esquecem detalhes do sistema que estão usando Artefatos e operações similares são confundidos Não científicos : comportamento supersticioso, e operações físicas extras em vez de planejamento mental 38 19

20 Modelo Mental Estrutural Internalização da estrutura de como determinado artefato funciona Descrição da mecânica interna de uma máquina ou sistema em termos de suas partes componentes Previsão de ações em caso de falhas Exemplos: utilização do carro, TV, telefone, etc. 39 Modelo Mental Estrutural Exemplo: 20

21 Modelo Mental Funcional Internalização do conhecimento procedimental sobre como usar a máquina ou sistema Sem um manual "Eu faço porque simplesmente sei fazer" Exemplos: andar de bicicleta, falar, etc. 41 Modelo Mental Motivações Entendimento das estruturas incompletas, indistintas e confusas que as pessoas têm a respeito dos artefatos tecnológicos Desenvolvimento de sistemas para o usuário final que o ajude a construir modelos mentais adequados à sua interação com o sistema Operação de artefatos é mais simples se usuario tiver um bom modelo conceitual 42 21

22 Percepção na Visualização [16] Processamento pré-atentivo Informações básicas que saltam aos olhos Processamento paralelo que ocorre antes da atenção consciente Processamento Pré-atentivo [16] Importante na definição de visualizações efetivas Quais características podem ser rapidamente percebidas? Quais propriedades representam bons discriminantes? O que pode desviar a atenção do usuário? 22

23 Processamento Pré-atentivo 45 Processamento Pré-atentivo 46 23

24 Processamento Pré-atentivo [16] Como saber se um atributo visual é préatentivo: medir tempo de resposta em tarefas Detecção de objetos dentre distrações Definição de bordas e limites Contagem de elementos Detecção de objetos dentre distrações [16] Exemplo: existe um círculo vermelho na imagem abaixo? 24

25 Detecção de objetos dentre distrações [16] Exemplo: existe um círculo vermelho na imagem abaixo? Detecção de objetos dentre distrações [16] Exemplo: existe um círculo vermelho na imagem abaixo? 25

26 Definição de bordas e limites [16] Exemplo: Existem limites na figura abaixo? Se existem, baseado em que atributos? Propriedades Pré-atentivas Comuns [16] Orientação da linha Tonalidade Espessura da linha Intensidade Tamanho da linha Movimento Tamanho Flickering Curvatura Direção de movimento Forma Posição espacial Agrupamento espacial Posição 2D Profundidade estereoscópica Convexidade/Concavidade 26

27 Propriedades Pré-atentivas [18] Leis de Gestalt [7] Gestalt: teoria de estudo de como os seres humanos percebem as coisas Percepção: visão de TODO, e não de PONTOS ISOLADOS Relações, dependência entre partes Conhecimento das partes através do todo, e não o contrário Princípios de Gestalt Leis que regem a percepção humana Conclusões sobre o comportamento natural do cérebro no processo de percepção 27

28 Motivação Algumas formas agradam mais que outras Objetivo da mente: organizar o caos Percepção Humana 28

29 Boa Continuidade Traços contínuos são percebidos mais rapidamente do que contornos com mudança rápida de direção Impressão visual de como as partes se sucedem através da organização perceptiva da forma de modo coerente [11] Boa Continuidade Retirado de [17] 29

30 Similaridade Objetos semelhantes são percebidos como grupos Similaridade Retirado de [17] 30

31 Similaridade Retirado de [17] Proximidade Entidades visuais próximas são percebidas como grupos, como unidades [11] 31

32 Proximidade [8] Proximidade Retirado de [17] 32

33 Proximidade Retirado de [17] Simetria Objetos simétricos são mais prontamente percebidos Simetria: aspectos positivos Estabilidade, consistência e estrutura Assimetria: aspectos negativos Algo está errado, faltando, fora de equilíbrio [11] 33

34 Simetria Retirado de [16] Simetria Retirado de [16] 34

35 Destino comum Objetos com mesma direção de movimento são percebidos como grupo [11] Destino comum Retirado de [17] 35

36 Detalhamento Destino comum Drag and Drop Destino comum 36

37 Fecho Contornos são fechados para completar figuras regulares eliminando falhas e aumentando a regularidade Experiências passadas e conhecimento prévio sobre formas e figuras possíveis [11] Fecho 37

38 Fecho [11] Região Comum Objetos dentro de uma região especial confinada são percebidos como um grupo [11] 38

39 Objeto-fundo Imagens são percebidas como combinação entre objetos e o fundo Contraste facilita identificação de objetos [16] Conectividade Objetos conectados são melhor percebidos como grupos ou relacionados 39

40 Resumindo [18] Resumindo [18] 40

41 Exemplo [18] Exemplo Recorded Future: previsão comparativa entre menções da Apple, Google e Microsoft na Internet Como as leis de Gestalt são ilustradas aqui? Quais padrões são visíveis? 41

42 Exercício Para cada layout abaixo, identificar: Princípios de Gestalt envolvidos Padrões pré-atentivos utilizados Padrões e informações relevantes encontrados: e5-9ec a14800c/public_map flict_relationships_explained.html Referências ROCHA, H. V. ; BARANAUSKAS, M. C. C.. Design e Avaliação de Interfaces Humano-Computador. 1. ed. Campinas: Emopi Editora e Gráfica, v p Raquel Prates, Interação Humano-Computador - Teorias de IHC - Engenharia Cognitiva - Notas de Aula disponíveis em 6. Jair Leite, Fundamentos de Web Design - Usabilidade, Interatividade e Comunicabilidade na Web - Notas de Aula disponíveis em

43 Referências 7. Samuel Ribeiro, Interface Homem-Máquina, Notas de aula disponíveis em %20Psychology%20and%20Design/designing%20with%20the%20mind%2 0in%20mind/science-01.pdf Referências 16. Visual Perception: Optimizing Information Visualization regarding the human visual system, Notas de aula disponíveis em