A maior rede de estudos do Brasil

Grátis
80 pág.
Aspectos Cognitivos em IHC

Pré-visualização | Página 1 de 4

Design de Interface 
Humano-Computador
03 – Aspectos Cognitivos
1
IFPA
Tecnologia em Análise e Desenvolvimento de Sistemas (TADS)
PROFESSOR: Claudio Roberto de Lima Martins
claudiomartins2000@gmail.com
Assuntos
✧O que é cognição?
✧Em que os usuários são bons e ruins?
✧Cognição aplicada ao design de interação
✧Modelos Mentais
✧Teorias e modelos da cognição
2
Por quê nós devemos compreender os usuários?
✧A interação com a tecnologia é cognitiva
✧Nós devemos considerar os processos cognitivos envolvidos 
e as limitações cognitivas dos usuários
✧É interessante ter o conhecimento sobre o que os usuários 
esperam ou não da interface
✧Identificar e explicar a natureza e causas dos problemas que 
os usuários encontram
✧Teorias de apoio, ferramentas de modelagem, guias e 
métodos podem conduzir o design para melhores produtos 
interativos
Principais aspectos cognitivos 
✧Atenção
✧Percepção e reconhecimento
✧Memória
✧Ler, falar e escutar
✧Solução de problemas, planejamento, raciocínio 
lógico, tomada de decisão, aprendizado
Atenção
▶Permite selecionar coisas que concentrem o foco a 
partir de estímulos que nos cercam
▶Permite que nos concentremos em informações 
relevantes para o que estamos fazendo
▶Envolve os sentidos audiovisuais
▶A atenção focada e dividida nos permite ser seletivos 
em termos da massa de estímulos concorrentes, mas 
limita nossa capacidade de acompanhar todos os eventos
▶As informações na interface devem ser estruturadas 
para captar a atenção dos usuários, por exemplo, usar 
limites perceptuais (janelas), cores, vídeo reverso, som 
e luzes piscando.
5
Atenção (outras dicas) 
✧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, o que deve 
ser aplicado especialmente ao uso de cores, sons e gráficos, 
o que acaba por distrair e incomodar o usuário
✧As interfaces simples são muito mais fáceis de se utilizar 
porque o usuário descobre facilmente como interagir com ela
Atenção: exemplo de sobrecarga de informação
Atenção: exemplo após o redesign
Estudo de caso em http://www.paymentsolutionpros.com/uncategorized/ecommerce-website-redesign-example/
Uso da técnica chamada “One-Page Layout” (ou Single Page Website).
Mais informação em https://webdevacademy.com.br/artigos/one-page-layout/
Atenção: exemplo de sobrecarga gráfica
http://www.virgula.com.br/
Depois do “redesign” (técnica “One-Page Layout”)
10
http://www.virgula.com.br/
Leia sobre “One-Page Layout” (Single Page Website) em 
https://webdevacademy.com.br/artigos/one-page-layout/
Bom exemplo de design visando a “atenção”
▶As interfaces simples são muito fáceis de utilizar.
▶Ex: Ferramenta de busca do Google: os usuários descobrem 
facilmente onde devem digitar na tela o que buscam.
11
Atividade (tela 1)
▶Encontre o preço para um quarto duplo no hotel “Quality
Inn”, na Pensilvânia 
12
Atividade (tela 2)
▶Encontre o preço de um quarto duplo no hotel “Holiday Inn”, 
em Columbia
13
Atividade (RESP)
▶Tullis (1987) descobriu que as duas telas produziam 
resultados bastante diferentes:
▪1ª tela - demorou uma média de 5,5 segundos para pesquisar
▪2ª tela - demorou 3,2 segundos para pesquisar
▶Por que resultados díspares, uma vez que ambos os monitores 
têm a mesma densidade de informação (31%)?
▶RESP: Organização do espaço das informações
▪Na primeira tela, as informações são agrupadas, dificultando a pesquisa
▪Na segunda tela, os caracteres são agrupados em categorias verticais 
de informação, facilitando a identificação dos elementos.
14
Multitarefa e atenção
▶É possível executar várias tarefas sem que uma ou mais delas 
sejam prejudicadas?
▶Ophir et al (2009) compararam multitarefas “pesadas” versus 
“leves”
▪As “pesadas” eram mais propensas a distrair o usuário do 
que aquelas que raramente tinham multitarefas
▪Multitarefas pesadas distraem facilmente a atenção dos 
usuários e são difícil em filtrar informações irrelevantes
15
Implicações de design quanto à atenção
▶Destaque a informação quando é preciso dar atenção a ela;
▶Use técnicas que fazem as coisas se destacarem como cor, 
ordem, espaçamento, sublinhado, sequenciamento e 
animação
▶Evite “bagunçar” a interface com muita informação
▶Mecanismos de pesquisa e preenchimentos de formulários 
que possuem interfaces simples e limpas são mais fáceis de 
usar
16
Percepção e reconhecimento
✧A percepção refere-se a como a 
informação é adquirida do ambiente 
pelos diferentes órgãos sensitivos 
(olhos, ouvidos, tato...) e transformada 
em experiências com objetos, eventos, 
sons e gostos.
✧A implicação óbvia é conceber representações que são 
facilmente perceptíveis, ex:
▪O texto deve ser legível
▪O som deve ser audível e facilmente associado ao objeto do evento
▪Os ícones devem ser fáceis de serem interpretados e encontrados
✧É um processo complexo que envolve outros processos 
cognitivos, como a memória, a atenção e a linguagem
O contraste de cores é bom? 
 
www.id-book.com
18
Encontre a palavra “Italian”
As bordas e o espaço em branco são melhores?
 
www.id-book.com
19
Encontre “French”
Comentários
▶Weller (2004) descobriu que as pessoas 
demoravam menos tempo para localizar itens para 
informações que foram agrupadas
▪usando uma borda (2ª tela) em comparação com o uso de 
contraste de cores (1ª tela)
▶Alguns argumentam que muito espaço em branco 
em páginas da web é prejudicial para a pesquisa
▪Torna difícil encontrar informações
▶Você concorda?
www.id-book.com
14
Qual dos botões abaixo é o mais fácil de ser lido e por quê?
What is the time?
What is the time?
What is the time?
What is the time?
What is the time?
Percepção: Implicações no design
▶Os ícones devem permitir que os usuários distingam 
prontamente seu significado
▶Borda e espaçamento são formas visuais eficazes de agrupar 
informações
▶Os sons devem ser audíveis e distinguíveis
▶A saída por “fala” deve permitir aos usuários distinguir entre 
o conjunto de palavras faladas
▶O texto deve ser legível e distinguível do fundo
▶O feedback tátil deve permitir que os usuários reconheçam e 
distingam diferentes significados
22
Memória
▶Envolve a codificação e a recuperação do conhecimento.
▪Implica em recordar vários tipos de conhecimentos que nos permitem 
agir adequadamente
▶Nós não conseguimos lembrar de tudo.
▪Envolve fazermos uma filtragem e processar as informações
▶O contexto é importante e afeta a nossa memória (i.e. Onde, 
Quando)
▶Nós reconhecemos coisas muito melhor do que lembramos 
delas
▪Interfaces gráficas são infinitamente melhores que interfaces baseadas 
em linhas de comando
▶É melhor lembrar imagens do que palavras
▪O uso de ícones é melhor do que o simples de um menu com palavras
23
Processamento na memória
▶Codificação é o primeiro estágio da 
memória
▪determina quais informações são atendidas 
no ambiente e como são interpretadas
24
▶Quanto mais atenção é dada a algo ...
▶Quanto mais é processado em termos de pensar sobre isso e 
compará-lo com outros conhecimentos ...
▶...Maior é a probabilidade de ser lembrado
▪Ex: Ao aprender sobre o tema IHC, é muito melhor refletir sobre ele, 
realizar exercícios, ter discussões com outros colegas sobre o tema, e 
escrever notas do que apenas ler um livro passivamente, ouvir uma 
palestra ou assistir