Baixe o app para aproveitar ainda mais
Prévia do material em texto
05/03/2020 1 Projeto de Interface com o Usuário Aula 5 Eliana Quiroga eliana.quiroga@docente.unip.br https://bit.ly/2Uv33UP Senha: Unip_ADS_01/2020 O que é cognição? • Existem muitos tipos de cognição, como pensar, lembrar, aprender, sonhar acordado, tomar decisão, ver, ler, escrever e falar. • Norman (1993) distingue dois modos mais gerais: • cognição experiencial: é um estado de espírito em que percebemos, agimos e reagimos a eventos ao nosso redor de forma eficaz e sem esforço. Exige alcançar certo nível de competência (expertise) e de engajamento. Ex: dirigir um carro, ler um livro, conversar, jogar vídeo game... • cognição reflexiva: envolve pensar, comparar e tomar decisões. Esse tipo de cognição é a que leva a novas ideias e à criatividade. Ex: projetar, aprender algo novo, escrever um livro... 1 2 05/03/2020 2 O que é cognição? (cont.) • A cognição também foi descrita em termos de tipos específicos de processos, que incluem: – Atenção – Percepção – Memória – Aprendizado – Leitura, fala e audição – Resolução de problemas, planejamento, raciocínio e tomada de decisões Cognição - Atenção • A atenção consiste no processo de selecionar coisas em que se concentrar, em certo momento, dentre uma variedade de possibilidades disponíveis. • A atenção envolve nossos sentidos auditivos e/ou visuais. • A atenção nos permite focar em informações que são relevantes para o que estamos fazendo. • O quanto esse processo é fácil ou difícil depende de: – se temos metas claras – se a informação de que precisamos está destacada no ambiente. 3 4 05/03/2020 3 Cognição – Atenção (cont.) Exercício • Olhe para a primeira figura: (i) encontre o preço de um quarto duplo (double) no hotel Quality Inn em Columbia e (ii) o número de telefone do hotel Days Inn em Charleston. Em seguida, olhe para a segunda figura: (i) encontre o preço de um quarto duplo no Holiday Inn em Bradley e (ii) o número de telefone do hotel Quality Inn em Bedford. Qual das duas tarefas demora mais para ser realizada? • 5 6 05/03/2020 4 Cognição – Atenção (cont.) • Implicação no Design: – Faça com que a informação fique saliente quando for necessária em um dado momento da realização de uma tarefa. – Utilize técnicas como gráficos animados, cores, sublinhado, ordenação de itens, sequenciamento de informações diferentes e espaçamento de itens. – Evite entulhar a interface com muita informação. Isso se aplica especialmente ao uso de cores, sons e gráficos. – Ferramentas de busca e formulários de preenchimento simples são muito mais fáceis de serem utilizados. Cognição – Percepção • Refere-se a como a informação é assimilada do ambiente pelos diferentes órgãos sensitivos – olhos, ouvidos, dedos – e transformada em experiências com objetos, eventos, sons e gostos (Roth, 1986). • É um processo complexo que envolve outros processos cognitivos, como a memória, a atenção e a linguagem. • A visão é o sentido mais dominante, seguido pela audição e pelo tato. • Com relação ao design de interação, é importante apresentar informações de maneira que possam ser facilmente percebidas na forma pretendida. 7 8 05/03/2020 5 Cognição – Percepção (cont.) Cognição – Percepção (cont.) • Implicação no Design: – Os ícones e as outras representações gráficas devem possibilitar que os usuários possam distinguir facilmente seu significado. – As bordas e os espaçamentos são formas visuais eficazes no agrupamento de informação, facilitando a percepção e localização de itens. – Os sons devem ser audíveis e distinguíveis para que os usuários entendam o que eles representam. – A saída de voz deve permitir que os usuários façam distinção entre o conjunto de palavras faladas e sejam capazes de compreender seu significado. – O texto deve ser legível e distinguível do fundo. 9 10 05/03/2020 6 Cognição – Memória • A memória envolve recordar vários tipos de conhecimentos que nos permitem agir adequadamente. • Não é possível que nos lembremos de tudo que vemos, ouvimos, experimentamos, cheiramos ou tocamos – nem gostaríamos, pois nosso cérebro ficaria completamente sobrecarregado. • Um processo de filtragem é utilizado para decidir que informações serão posteriormente processadas e memorizadas. • Quanto mais atenção se presta a alguma coisa e quanto mais isso é processado em pelo pensamento e em comparação com outros conhecimentos, maior a probabilidade de ser lembrado. • Contexto também afeta a memória. Exemplo: Vizinho do prédio no ônibus. Cognição – Memória - Exercícios • 1- Tente lembrar as datas de aniversário de todos os membros de sua família e de seus amigos mais próximos. De quantas datas você consegue se lembrar? Em seguida, tente descrever o que está na capa do último CD ou DVD que você comprou. O que é mais fácil e por quê? • 2- Que estratégias você utiliza para lembrar das coisas? 11 12 05/03/2020 7 Cognição – Memória (cont.) • Teoria de Miller (O problema do número mágico 7, mais ou menos 2) • Segundo a qual 7, com um desvio de 2 para mais ou para menos, porções de informações podem ser armazenadas de uma só vez na memória de curto prazo. • Exemplo: leia a primeira sequência de números abaixo, esconda- a e, em seguida, tente lembrar o maior número possível de itens. Repita esse procedimento com as outras sequências. – 3, 12, 6, 20, 9, 4, 0, 1, 19, 8, 97, 13, 84 – gato, casa, papel, sorriso, pessoa, vermelho, sim, número, sombra, vassoura, chuva, planta, lâmpada, chocolate, rádio, um, moeda, jato – t, k, s, y, r, q, x, p, a, z, l, b, m, e Cognição – Memória (cont.) • Implicação no Design: – Não sobrecarregue a memória dos usuários com procedimentos complicados para a realização de tarefas. – Projete interfaces que promovam o reconhecimento, em vez da recordação, utilizando menus, ícones e objetos posicionados de forma consistente. – Forneça aos usuários uma variedade de formas de codificação de informações digitais (p.ex., arquivos, e-mails, imagens) para ajudá-los a lembrar onde as armazenaram, por meio do uso de categorias, cores, sinalizações, registro de data/hora de armazenamento, ícones, etc. 13 14 05/03/2020 8 Cognição – Aprendizado • O aprendizado pode ser considerado em relação a – como usar uma aplicação baseada em computador ou – como usar uma aplicação baseada em computador para entender um determinado tópico. • As pessoas acham muito difícil aprender seguindo um conjunto de instruções em um manual. • Em vez disso, preferem “aprender fazendo”. • GUIs e interfaces de manipulação direta são bons ambientes para apoiar esse tipo de aprendizagem ativa, apoiando a interação exploratória. Cognição – Aprendizado (cont.) • Um dos principais benefícios das tecnologias interativas, como a aprendizagem baseada na web, multimídia e realidade virtual, é que elas oferecem formas alternativas de representar e interagir com informações que não são possíveis com as tecnologias tradicionais, por exemplo, livros e vídeos. 15 16 05/03/2020 9 Cognição – Aprendizado (cont.) • Implicação no Design: – Projete interfaces que incentivem a exploração. – Projete interfaces que restrinjam e guiem os usuários na seleção de ações apropriadas no início do aprendizado. – Faça uma ligação dinâmica de representações concretas e conceitos abstratos para facilitar a aprendizagem de material complexo. Cognição – Ler, ouvir e falar • São 3 formas de processamento de linguagem que têm tanto propriedades semelhantes quanto diferentes. • A linguagem escrita é permanente, enquanto ouvir a informação é transitório. • Ler pode ser uma atividade mais rápida do que falar ou ouvir, visto que o texto escrito pode ser rapidamente examinado, o que não é possível quando se ouve uma série de palavras faladas. • Ouvir exige menos esforço cognitivo do que ler ou falar. 17 18 05/03/2020 10 Cognição – Ler, ouvir e falar (cont.)• Muitas aplicações têm sido desenvolvidas para capitalizar as habilidades de leitura, escrita e audição das pessoas, ou para apoiá-las ou substituí-las quando essas habilidades não existem ou são difíceis: – Livros interativos e materiais baseados na web que ajudam as pessoas a ler ou a aprender línguas estrangeiras. – Sistemas de reconhecimento de voz que permitem aos usuários interagir com eles usando comandos falados. – Sistemas de saída de voz que utilizam a fala gerada artificialmente (p.ex., sistemas que traduzem o texto escrito para a voz, utilizados por pessoas com deficiência visual). – Dispositivos de entrada e saída customizados que permitem a pessoas com diferentes deficiências ou limitações terem acesso à web e utilizarem processadores de texto e outros pacotes de software. Cognição – Ler, ouvir e falar (cont.) • Implicação no Design: – As opções de menus e instruções falados devem ser mínimas. – Acentue a entonação das vozes geradas artificialmente, pois elas são mais difíceis de entender do que a voz humana. – Ofereça a possibilidade de ampliar o texto na tela sem alterar a formatação para as pessoas que tenham dificuldade em ler fontes pequenas. 19 20 05/03/2020 11 Cognição – Resolução de problemas, planejamento, raciocínio e tomada de decisão • Envolvem a cognição reflexiva. • Implicam em pensar sobre o que fazer, quais são as opções e quais as consequências de se realizar uma determinada ação. • Geralmente, envolvem processos conscientes (estar ciente do que alguém está pensando), a discussão com os outros (ou consigo mesmo) e o uso de vários tipos de artefatos (p.ex., mapas, livros, papel e caneta). • Ex: melhor maneira de chegar em algum lugar ou cidade que não conhecemos (antes do waze). Cognição – Resolução de problemas, planejamento, raciocínio e tomada de decisão • Implicação no Design: – Forneça informações adicionais que fiquem escondidas, mas que sejam fáceis de acessar para os que desejarem saber mais a respeito de como realizar uma atividade com mais eficiência (p.ex., pesquisar na web). – Utilize funções simples e fáceis de lembrar na interface para oferecer auxílio computacional destinado a apoiar a tomada de decisão rápida e o planejamento para usuários em trânsito. 21 22 05/03/2020 12 Gestalt • É uma teoria fundada pelo psicólogo Max Wertheimer como uma pesquisa de orientação, compreensão e interpretação da nossa visão e da forma como enxergamos as coisas. • Como nosso cérebro utiliza parâmetros de leitura visual, ao enxergarmos um composto de elementos. • A tendência é agrupar características que sejam semelhantes, de forma que sua interpretação seja a mais rápida possível. • Logo, quanto mais complexo for o item, menos os detalhes vão ser processados a princípio. Gestalt (cont.) • O que você vê aqui? 23 24 05/03/2020 13 Gestalt (cont.) • Segundo a Gestalt, ao observarmos um objeto, primeiro o compreendemos como um todo, antes de notar seus elementos separadamente. • Há 8 princípios da Gestalt que são essenciais na área da criação e que estão presentes no cotidiano. Princípio 1: Lei da Pregnância (ou boa forma) • Simplificação da Forma • Gestalt afirma que sempre compreendemos o todo de um composto visual, antes de aprofundar nos seus detalhes. • O nível de facilidade com que identificamos e compreendemos visualmente uma peça é mensurado através da pregnância. • A construção da forma deve possuir uma estrutura simples, equilibrada, homogênea e regular. • A forma deve apresentar harmonia, unificação, clareza e um mínimo de complicação visual em sua organização. 25 26 05/03/2020 14 Princípio 1: Lei da Pregnância (ou boa forma) – (cont.) Princípio 1: Lei da Pregnância (ou boa forma) – (cont.) • Exemplo: Anúncio Lego 27 28 05/03/2020 15 Princípio 2: Lei da Unidade • Afirma que a percepção de um elemento pode ser construído por uma ou até mesmo várias partes que constroem o todo. • Sendo assim, uma unidade é percebida como um elemento único. • A lei da unidade é essencial na criação, pois se faz presente na organização e disposição de elementos, permitindo composições originais e criativas a partir de unidades já existentes. • Essa lei se faz presente em diversas criações publicitárias famosas. Princípio 2: Lei da Unidade (cont.) • Exemplos: 29 30 05/03/2020 16 Princípio 3: Lei da Segregação • Dita que nosso cérebro tem a capacidade de diferenciar ou evidenciar objetos, ainda que sobrepostos. • Isso se deve à variação de forma e estética que um elemento tem em comparação com outro. • Desse modo, os estímulos visuais de cada unidade também são diferentes. • A segregação ocorre de várias maneiras: pontos, linhas, planos, volumes, sombras, brilhos, texturas, relevos, entre outras formas. • O contraste permite uma melhor leitura visual e entendimento do fluxo da mensagem pelo público. Princípio 3: Lei da Segregação (cont.) 31 32 05/03/2020 17 Princípio 3: Lei da Segregação (cont.) • Exemplo 1: Princípio 3: Lei da Segregação (cont.) • Exemplo 2: 33 34 05/03/2020 18 Princípio 4: Lei da Proximidade • De acordo com a Gestalt, elementos muito próximos uns dos outros, se encaixando harmoniosamente, são processados em nosso cérebro como elementos conjuntos, ou unidades. • Além disso, se tais elementos são semelhantes reforçam ainda mais nosso cérebro para a leitura de um só objeto. Princípio 4: Lei da Proximidade (cont.) • Exemplos: 35 36 05/03/2020 19 Princípio 5: Lei da Semelhança • Elementos semelhantes em cor ou forma tendem a ser agrupados pelo cérebro em uma só unidade. • Isso faz com que objetos aproximados, apenas com uma característica semelhante, se unam aos olhos do leitor. • A semelhança é também utilizada para criar formas a partir de outras formas. Princípio 5: Lei da Semelhança (cont.) • Exemplos: 37 38 05/03/2020 20 Princípio 6: Lei da Unificação • Um objeto formado por várias unidades pode ser harmoniosamente simétrico ou não. • Quando ocorre um peso igual de pregnância, proximidade, unidade e semelhança entre objetos de um mesmo composto, podemos dizer que há uma unificação perfeita. • Um exemplo de unificação perfeita são as mandalas, que utilizam na proporção balanceada dois princípios da Gestalt – semelhança e proximidade – para criar composições simétricas e agradáveis. Princípio 6: Lei da Unificação 39 40 05/03/2020 21 Princípio 7: Lei da Continuidade • Diz respeito à maneira como a percepção do fluxo e sequência dos elementos funciona em nosso cérebro. • Trata-se da tendência dos objetos em seguir uma linha de fluidez visual gradativa. • Isso é feito através de formas, linhas, cores, profundidade, planos, etc. • Elementos em uma composição de modo ininterrupto = boa continuidade. • A prioridade da continuidade é estabelecer sempre a melhor forma possível aos olhos. Princípio 7: Lei da Continuidade (cont.) • Exemplos: 41 42 05/03/2020 22 Princípio 8: Lei do Fechamento • Estabelece que o nosso cérebro tem a inclinação de fechar ou concluir formas que vemos inacabadas ou abertas. • Isso se deve a padrões sensoriais e de ordem espacial que temos em nossa mente. • Ou seja, ao se guiar pela continuidade de uma forma, prevemos toda a sua estrutura. • Exemplo: o famoso “ligue os pontos”. Princípio 8: Lei do Fechamento (cont.) • Exemplos: 43 44 05/03/2020 23 Princípio 8: Lei do Fechamento (cont.) • Exemplos: Qual o efeito dos princípios da Gestalt na área da criação? • Harmonia: A peça é tão simétrica, balanceada e agradável que estimula o público a admirá-la. • Desordem: Por ser fora do padrão de ordem criado pelo cérebro, uma peça desordenada também atrai a atenção de quem a observa. É sempre bom ressaltar que a desordem ainda assim pode ser harmônica e ter um significado diferente de caos. • Lembrança: Mesmo sem nunca ter visto a arte anteriormente, o observadorse familiariza com elementos que remetem a uma memória ou uma sensação. • Curiosidade pelo oculto: Ao enxergar um elemento que causa a sensação de falta ou omissão de algo, somos desafiados a completar ou imaginar o outro objeto que o completa. 45 46 05/03/2020 24 Psicologia Cognitiva Aplicada De acordo com Ware (2003), podemos considerar como adições recentes às leis de Gestalt as seguintes: • REGIÃO COMUM: objetos dentro de uma região espacial confinada são percebidos como um grupo (Palmer, 1992). Psicologia Cognitiva Aplicada • CONECTIVIDADE: objetos conectados por traços contínuos são percebidos como relacionados (Palmer e Rock, 1994). 47 48 05/03/2020 25 PSICOLOGIA COGNITIVA APLICADA • Proximidade: Os elementos presentes na interface que apresentam alguma relação entre si devem estar logicamente conectados. O agrupamento hierarquiza os elementos e os grupos, sugerindo uma leitura e facilitando o acesso à informação (RADFAHRER, 2003). • Alinhamento: Os alinhamentos permitem criar uma interface mais coesa, possibilitando aos leitores agrupar os elementos que estão relacionados. • Repetição: Essa propriedade determina que alguma característica do design deve se repetir ao longo do trabalho, a fim de apresentar unidade e organizar informações. Aplicando Gestalt em Interface PSICOLOGIA COGNITIVA APLICADA Os 4 princípios de GESTALT mais utilizados em interfaces são: 1) Proximidade: Como exemplo, pense em como o kerning adequado pode ajudar o olho a entender quais letras formam palavras individuais. Em alguns casos, espaços excessivos entre as letras podem causar confusão quando uma palavra termina e a próxima começa. No exemplo, enxergamos 3 colunas distintas. Você consegue ver como a proximidade dos elementos entre si causa automaticamente essa percepção em nosso cérebro? Aplicando Gestalt em Interface (cont.) 49 50 05/03/2020 26 PSICOLOGIA COGNITIVA APLICADA COMO APLICAR: Utilizar a proximidade para definir a hierarquia numa UI. Aplicando Gestalt em Interface (cont.) PSICOLOGIA COGNITIVA APLICADAAplicando Gestalt em Interface (cont.) 51 52 05/03/2020 27 PSICOLOGIA COGNITIVA APLICADA 2) Semelhança: Pode-se aplicar o princípio da semelhança usando cor, tamanho, orientação, textura e até mesmo fontes. Na imagem podemos observar que a semelhança foi usada para diferenciar os títulos e links do menu. Aplicando Gestalt em Interface (cont.) PSICOLOGIA COGNITIVA APLICADAAplicando Gestalt em Interface (cont.) 53 54 05/03/2020 28 PSICOLOGIA COGNITIVA APLICADA Como aplicar: Pode-se definir cores para os links de menus e subtítulos ou definir uma combinação de fontes para os títulos e textos. Aplicando Gestalt em Interface (cont.) PSICOLOGIA COGNITIVA APLICADA 3) Continuidade: Acontece quando elementos estão próximos e alinhados entre si dando a sensação de seguir uma direção. Aplicando Gestalt em Interface (cont.) 55 56 05/03/2020 29 PSICOLOGIA COGNITIVA APLICADA Como aplicar: mantenha os elementos de forma alinhada na página. Lembrando que a distância utilizada entre cada elemento também contribui para dar a sensação de continuidade. Aplicando Gestalt em Interface (cont.) PSICOLOGIA COGNITIVA APLICADA 4) Fechamento: O princípio do fechamento se aplica quando nosso cérebro completa informações que estão faltando. Nossas mentes reagem a padrões que são familiares, embora muitas vezes recebamos informações incompletas. Aplicando Gestalt em Interface (cont.) 57 58 05/03/2020 30 PSICOLOGIA COGNITIVA APLICADA Como aplicar: Agrupe informações em blocos. Aplicando Gestalt em Interface (cont.) Engenharia Cognitiva • Foi concebida por Donald Norman em 1986 como uma tentativa de aplicar conhecimentos de ciência cognitiva, psicologia cognitiva e fatores humanos ao design e construção de sistemas computacionais. 59 60 05/03/2020 31 Engenharia Cognitiva (cont.) • Os principais objetivos eram: – entender os princípios fundamentais da ação e desempenho humano relevantes para o desenvolvimento de princípios de design; – elaborar sistemas que sejam agradáveis de usar e que engajem os usuários até de forma prazerosa. Engenharia Cognitiva (cont.) • A Engenharia Cognitiva está centrada na relação entre usuário e sistema, na interação do usuário com um sistema concebido, não sendo seu foco o projetista de sistema ou o processo de design do sistema (Netto, 2010). 61 62 05/03/2020 32 Engenharia Cognitiva (cont.) • Foca os processos psicológicos dos usuários e os fenômenos envolvidos durante a interação com o sistema (Souza et alii ,1999; Baranauskas & Rocha, 2003; Silva & Barbosa, 2010). • Com o propósito de entender como os usuários interagem com as interfaces do sistema, Norman & Draper (1986) propõem a Teoria da Ação (Baranauskas & Rocha, 2003). Teoria da Ação • A abordagem de projeto centrado no usuário estuda os fenômenos que ocorrem durante a interação de um usuário com um artefato cognitivo (Norman, 1991). • Artefato cognitivo é um dispositivo artificial projetado para manter, apresentar ou manipular informação. • Norman representa uma discrepância entre variáveis psicológicas e controles e variáveis físicas através de dois golfos que precisam ser superados. 63 64 05/03/2020 33 Os Golfos • Golfo de execução: se refere a dificuldade de atuar sobre o ambiente e ao grau de sucesso com que o artefato apoia essas ações. • Golfo de avaliação: se refere a dificuldade de avaliar o estado do ambiente e ao grau de sucesso com que o artefato apoia a detecção e interpretação desse estado. Teoria da Ação (cont.) • A interação entre usuário e sistema é realizada num ciclo de ação que envolve: – sete etapas e – dois alvos a serem atingidos. • Norman (1986) define esses dois alvos como “golfos” a serem atravessados: – Golfo da Execução: envolve o esforço mental do usuário para planejar sua ação diante dos comandos e funções percebidos no sistema. – Golfo de Avaliação: envolve o momento em que o usuário coloca o planejamento da sua ação em prática. 65 66 05/03/2020 34 Teoria da Ação (cont.) Teoria da Ação - Exemplo 67 68 05/03/2020 35 Engenharia Cognitiva (cont.) • Foca o usuário e sua interação com o sistema • O usuário lida com um sistema projetado de acordo com o modelo mental do designer, com a visão do projetista do que seria a melhor solução para as necessidades dos usuários. • Porém, cada usuário cria seu próprio modelo mental ao interagir com o sistema e seus comandos e funções. • Nesse sentido, o modelo mental do designer é diferente do modelo de cada usuário, assim, cabe ao projetista criar um modelo mais próximo às expectativas do usuário. Engenharia Cognitiva (cont.) • Portanto, entender a Engenharia Cognitiva e o processo de interação usuário-sistema, assim como a Teoria da Ação, possibilitam ao designer criar um modelo mental adequado ao sistema. • Porém, o processo de desenvolvimento e design não é estudado pela Engenharia Cognitiva e sim pela Engenharia Semiótica, que foca o processo de design e o projetista de sistema (Netto, 2010). 69 70 05/03/2020 36 Modelos da Engenharia Cognitiva • Modelo de design: é o modelo conceitual do sistema tal como concebido pelo designer. • Ele descreve a lógica de funcionamento do sistema que será construído. Modelos da Engenharia Cognitiva (cont.) • A imagem do sistema: corresponde ao sistema executável, isto e, o modelo físico construído com base no modelo conceitual de design, e a partir do qual os usuários elaboram seus modelos conceituais (modelo do usuário). 71 72 05/03/2020 37 Modelos da Engenharia Cognitiva (cont.) • Modelo do usuário: o modelo conceitual construído por ele durante sua interação com o sistema, resultando assim da sua interpretação da imagem do sistema. Exercício Escolha um modelo de aparelho de telefone celular e descreva os passos dos golfos de execução e avaliação percorridos por um usuário idoso e um adolescente com o objetivode inserir um novo numero de telefone na agenda do aparelho. Tarefas: 1 – Analise o caminho (passos), seguido por cada um 2 – Tempo de inicio até o fim da tarefa. 3 – Descreva as dificuldades encontradas por cada um 73 74
Compartilhar