Aspectos Cognitivos em IHC

Prévia do material em texto

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 assistira um vídeo sobre isso.
Aprendizagem e Memória
25
https://www.scienceabc.com/humans/how-are-memory-stored-retrieved-forget-encode-retrieve-hippocampus-long-term-memory-short-term-
memory.html
1. Sensores entram com 
informações na sua 
memória sensorial, mas 
duram menos que um 
segundo. Se você não 
agir sobre a informação, 
a memória se perde.
2. Agir sobre a 
informação faz movê-la 
para a sua memória de 
trabalho.
3. Recupere o que você 
já conhece e trabalhe nas 
novas informações para 
associá-las ao 
conhecimento existente. 
Isso irá codificar novas 
memórias, o que significa 
que você aprendeu algo.
4. Agora você aprendeu 
algo armazenando-o em 
sua memória de longo 
prazo. Está disponível 
para você na próxima vez 
que você precisar 
aprender algo novo.
Contexto é importante
▶O contexto afeta até que ponto as informações podem ser 
recuperadas posteriormente
▶Às vezes pode ser difícil para as pessoas relembrarem 
informações codificadas em um contexto diferente:
▪“Você está em um trem e alguém chega até você e diz “olá”. 
Você não o reconhece por alguns momentos, mas depois percebe que 
é um dos seus vizinhos. Você só está acostumado a ver seu vizinho no 
corredor de seu bloco de apartamentos e vê-lo fora de contexto o torna 
difícil de reconhecer inicialmente ”
26
Atividade
▶Tente lembrar as datas do aniversário dos seus avós
▶Tente lembrar da capa dos dois últimos DVDs (filmes) 
comprados ou alugados
▶Qual foi o mais fácil? Por quê?
▶As pessoas são muito boas em lembrar dicas visuais sobre as 
coisas
▪por exemplo: a cor dos itens, a localização de objetos e 
marcas em um objeto
▶ Elas acham mais difícil aprender e lembrar de algo arbitrário
▪por exemplo: aniversários e números de telefone
27
Reconhecimento versus “recall”
▶As interfaces baseadas em linha de comando 
exigem que os usuários recuperem da memória um 
nome de um possível lista de 100.
▶Interfaces GUIs (exemplo: MP3 player) as opções 
são visuais nas quais os usuários precisam apenas 
navegar até aquela desejada.
▶Navegadores da Web, etc., fornecem listas de 
URLs visitados, títulos de músicas, etc., que 
suportam memória de reconhecimento
28
Você consegue lembrar o número do canal?
29
O teclado...
▶Qual são as letras em sequência da primeira linha do 
teclado?
30
O teclado...
▶Qual são as letras em sequência da primeira linha do 
teclado?
31
https://pt.wikipedia.org/wiki/QWERTY
QWERTY é o layout de teclado para o alfabeto latino atualmente mais utilizado em 
computadores e máquinas de escrever.
O formato adotado tinha o objetivo de organizar as teclas separando os pares de 
letras mais usados na língua inglesa para diminuir a quantidade de possíveis 
travamentos das teclas da máquina de escrever mecânica. Scholes aperfeiçoou a 
ideia de James Densmore, seu parceiro comercial, e criou o teclado QWERTY, nome 
dado devido à disposição das primeiras seis teclas.
O problema do número mágico “72”
▶Refere-se a teoria de George Miller (1956) sobre a 
quantidade de informações que uma pessoa pode se 
lembrar de imediato
▶A capacidade de memória imediata das pessoas é 
muito limitada (“memória cache”)
▶Muitos projetistas foram levados a acreditar que 
esta teoria era a base absoluta para o 
desenvolvimento de novas interfaces 
▪Mas....
Os designers passaram a…
▶Exibir apenas 7 opções em um menu
▶Mostrar apenas 7 ícones em uma barra de 
ferramenta
▶Elaborar listas com no máximo 7 bullets
▶Mostrar apenas 7 itens em um menu pull down
▶Organizar um website com no máximo 7 botões 
(tabs) no topo da página
▶Mas está errado!!! Por quê?
Por quê?
▶Aplicação inapropriada da teoria
▶As pessoas podem percorrer as listas, tabelas e menus para 
encontrar o que procuram
▶As pessoas não precisam necessariamente recuperar as 
informações da memória, mas podem reconhecer o que estão 
vendo
▶Muitas vezes um menor número de itens define um melhor 
design
▶Tudo depende da situação específica de cada tarefa e do 
“status” do software no momento
Aplicação mais apropriada da recuperação de dados de 
memória
▶Gerenciamento de arquivos e sua recuperação é um problema 
para a maioria dos usuários;
▶Pesquisa na recuperação de dados de memória é 
extremamente útil
▶A memória envolve 2 processos:
▪recuperação direta da informação (lembrar) e 
busca/reconhecimento da informação
▶O gerenciamento de arquivos em um sistema computacional 
deve contemplar os dois processos de recuperação de dados 
de memória
▪Ex: Caixa de pesquisa (Search box) e histórico de acesso aos arquivos
Gerenciamento de arquivos
▶Deve facilitar as estratégias de memória existentes e ajudar 
o usuário na recuperação dessas informações
▶Deve ajudar o usuário de forma a proporcionar diversas 
formas de armazenamento e recuperação de dados 
▪Armazenar arquivos com a utilização de cores, flags, 
imagens, hipertexto, etc
Ex: Abrir um arquivo no Office
37
O usuário pode selecionar o arquivo em uma pasta ou local 
específico ou recuperar um dos últimos arquivos usados 
recentemente.
A ferramenta de pesquisa Spotlight da Apple é boa?
38
Você sabe “configurar o proxy” no Chrome?
39
Ajudas de memória
▶SenseCam foi desenvolvido pela 
Microsoft Research Labs (agora 
Autographer)
▶É um dispositivo wearable (“vestível”) 
que, de forma intermitente, tira fotos 
sem qualquer intervenção do usuário
▶As imagens digitais tiradas são 
armazenadas e revisitadas usando um 
software especial
▶Útil para melhorar a memória das 
pessoas que sofrem de Alzheimer
40
https://en.wikipedia.org/wiki/Autographer
SenseCam
41
https://www.microsoft.com/en-us/research/project/sensecam/
Implicações do design (pontos importantes)
▶Não sobrecarregue a memória dos usuários com 
procedimentos complicados para realizar tarefas
▶Crie interfaces que promovam reconhecimento em 
vez de recall
▶Forneça aos usuários várias maneiras de codificar 
informações para ajudá-los a lembrar
▪por ex: categorias, cor, sinalização, carimbo de 
tempo
42
Aprendizado
▶Como aprender a usar um aplicativo baseado em 
computador?
▶Você pode usar o aplicativo ou vídeo do YouTube
para entender um determinado tópico.
▶As pessoas acham difícil aprender seguindo as 
instruções em um manual
▪A maioria prefere aprender fazendo
43
Dispositivos de “prótese cognitiva”
▶Nós confiamos cada vez mais na internet e nos smartphones 
para procurar as coisas
▶Recurso cognitivo —> mente estendida
▶Esperar ter acesso à internet reduz a necessidade e a 
extensão com que nos lembramos
▶Também aprimora nossa memória para saber onde encontrá-
lo on-line (Sparrow et al, 2011)
▶Quais são as implicações para o design de tecnologias o 
suporte como as pessoas aprenderão e o que aprenderão?
www.id-book.com
44
▶Projete Interfaces que incentivam a exploração
▶Projete Interfaces que restringem e guiam os alunos
▶Crie “links” dinâmicos para conceitos e representações que 
podem facilitar a aprendizagem de materiais complexos 
(Rogers e Scaife, 1998)
▪Ex: a cadeia 
alimentar ilustrada
O recurso “links dinâmicos” foi usado 
no software educativo PondWorld para 
demonstrar representações da cadeia 
alimentar.
Implicações do design (pontos importantes)
45
https://www.researchgate.net/publication/246435810_Improving_Children%27s_Understanding_of_Formalisms_through_Interacting_with_Multimedia
Ler, falar e ouvir
▶A facilidade com que as pessoas podem ler, ouvir ou 
falar difere de preferências e propósito:
▪Muitos preferem ouvir a leitura
▪A leiturapode ser mais rápida do que falar ou ouvir
▪Ouvir exige menos esforço cognitivo do que ler ou falar
▪Os disléxicos têm dificuldades para entender e reconhecer 
palavras escritas
46
https://noticias.uol.com.br/midiaglobal/nytimes/2018/12/10/estudo-revela-que-precisaremos-cultivar-mais-alimentos-em-menos-terra.htm
Aplicações
▶Os sistemas de reconhecimento de fala permitem que os 
usuários interajam com eles, fazendo perguntas
▪ex. Google Voice, Siri
▶Sistemas de fala e saída usam fala artificialmente gerada
▪ex. sistemas de leitura e escrita de texto para cegos
▶Os sistemas de linguagem natural permitem que os usuários 
digitem perguntas e forneçam respostas baseadas em texto
▪ex. motores de busca (Google, Ask, Bing, etc)
47
Implicações do design (pontos importantes)
▶Menus e instruções baseados em fala devem ser curtos
▶Acentue a entonação de voz de fala artificialmente geradas
▪Vozes sintéticas são mais difíceis de entender do que 
vozes humanas
▶Forneça oportunidades para tornar o texto maior em uma 
tela
48
Resolução de problemas, planejamento, raciocínio e 
tomada de decisões
▶Tudo envolve cognição reflexiva
▪EX. pensando sobre o que fazer, quais são as 
opções e as consequências
▶Muitas vezes envolve processos conscientes, 
discussão com os outros (ou a si mesmo) e o uso de 
artefatos
▪EX. mapas, livros, caneta e papel
▶Pode envolver trabalhar com diferentes cenários e 
decidir qual é a melhor opção
www.id-book.com
49
Implicações do design (pontos importantes)
▶Fornecer informações/funções adicionais para 
usuários que desejam entender mais sobre como 
realizar uma atividade com mais eficiência
▶Use recursos computacionais simples para apoiar a 
rápida tomada de decisões e o planejamento para 
usuários em movimento
www.id-book.com
50
Modelos Mentais
51
O que você vê na imagem?
52
O que você vê agora é um objeto (cálice).
53
Modelos mentais
▶Os usuários desenvolvem um entendimento do sistema 
aprendendo e usando este
▶O conhecimento é frequentemente descrito em termos de 
um modelo mental
▪Como usar o sistema (o que fazer em seguida)
▪O que fazer em situações não familiares ou inesperadas 
(como o sistema funciona)
▶Pessoas fazem inferências usando modelos mentais de como 
realizar suas tarefas
Modelos mentais
▶Craik (1943) descreveu os modelos mentais como construções 
internas de algum aspecto do mundo exterior permitindo fazer 
predições
▶Envolve processos conscientes e inconscientes, onde imagens 
e analogias são ativadas
▶Modelos aprofundados e superficiais 
Por exemplo:
• como dirigir um carro e como 
ele funciona;
• como a bicicleta funciona e 
como se equilibrar em duas 
rodas; 
Exemplo: saque em um caixa eletrônico 
1. O saque em um caixa eletrônico começa quando o cliente coloca o 
cartão no leitor magnético.
O leitor transmite os dados do cartão ao sistema que libera o acesso à 
máquina se o cliente digitar a senha correta. 
2. O cliente informa quanto quer sacar.
3. O caixa eletrônico acessa a conta do cliente para verificar o saldo. Se 
houver saldo e dinheiro suficiente, o sistema envia ao caixa um sinal 
autorizando o saque.
4. Com o saque autorizado pelo banco, o caixa aciona os mecanismos que 
vão entregar as notas para o cliente
5. O dinheiro é liberado por um dispositivo dispensador de notas.
6. Depois de entregue, o dinheiro é debitado na conta corrente. Se o 
cliente pedir, o processador envia uma ordem para a impressora 
embutida na máquina e ela emite um comprovante da transação
56
https://super.abril.com.br/mundo-estranho/como-funcionam-os-caixas-eletronicos/
Como funciona um caixa eletrônico?
▶Quanto dinheiro você tem permissão para tirar?
▶Se você foi para outra máquina, com a transação em aberto 
no caixa, e tentar sacar o mesmo valor, o que aconteceria?
▶Quais informações estão presentes em seu cartão? Como isso 
é usado?
▶O que acontece se você digitar a senha incorreta?
▶Se uma nota ficar presa, o que ocorre?
▶Você conta o dinheiro? Por quê?
57
Modelos mentais
✧Muitas pessoas acabam desenvolvendo modelos 
mentais errados (Kempton, 1996)
✧Por quê?
▪Teoria do princípio do “mais e mais” é generalizada 
para diversas coisas
▶Você chega em casa com fome e vai esquentar aquele 
pedaço de pizza que estava na geladeira. Você coloca o 
botão do forno na temperatura máxima? Por quê?
▶O que você faz quando o computador trava? Você 
desliga-o no botão reset ou reinicializa o sistema?
Computadores pobres de interface, frequentemente são incompletos, confusos, baseados 
em analogias inapropriadas e superstições (Norman, 1983). 
Golfos de execução e avaliação
▶Os "golfos" explicam as lacunas existentes entre o usuário e a 
interface
▶O Golfo da Execução
▪É a distância do usuário ao sistema físico
▶O Golfo da Avaliação
▪a distância do sistema físico até o usuário
▶Preencher os golfos pode reduzir o esforço cognitivo 
necessário para executar tarefas
59
Norman, 1986; Hutchins et al, 1986 
Preenchendo os golfos
www.id-book.com
60
Processando a informação
▶Conceitua o desempenho humano em termos metafóricos dos 
estágios de processamento de informação
61
O modelo de processador humano (Card et al, 1983)
Conhecido como “Modelo de Card”
▶Modela os processos de informação de um 
usuário interagindo com um computador
▶Prevê quais processos cognitivos estão 
envolvidos quando um usuário interage com um 
computador
▶Permite que sejam feitos cálculos de quanto 
tempo um usuário levará para executar uma tarefa
www.id-book.com
62
O modelo de processador humano (Card)
63
O modelo de processador humano (Card)
▶O MPH é composto de 3 subsistemas:
▪Processador Perceptual (PP) ou perceptivo, 
▪Processador Cognitivo (PC) 
▪Processador Motor (SM)
64
Cada qual com suas próprias 
memórias e processadores, 
juntamente com alguns 
princípios de operação.
O modelo de processador humano
65
Limitações do Modelo de Card
▶Trata-se de um modelo tradicional baseado em modelar 
atividades mentais que acontecem exclusivamente dentro da 
cabeça (do intelecto, isolado das influências do ambiente)
▶Não contabiliza adequadamente como as pessoas interagem 
com computadores e outros dispositivos no mundo real
▶Atualmente, há estudos que demonstram que atividades 
cognitivas são influenciadas no contexto que ocorrem.
▪O objetivo desses estudos consiste em observar como as 
estruturas no ambiente podem auxiliar a cognição humana e 
reduzir a carga cognitiva.
▪Entre as abordagens modernas, vamos apresentar duas:
➢Cognição Distribuída
➢Cognição Externa
66
Cognição Distribuída
▶Preocupa-se com a natureza dos fenômenos 
cognitivos em todos os indivíduos, artefatos e 
representações internas e externas (Hutchins, 1995)
▶Descreve isso em termos de propagação no estado 
representacional
▶A informação é transformada através de diferentes 
mídias (computadores, displays, papel, cabeças)
www.id-book.com
67
Como isso difere do processamento de informações
68
69
Maçaneta de 
configuração de 
alerta de altitude
Propagação de estados representacionais
1. ATC dá autorização ao piloto para voar para maior altitude (verbal)
2. Piloto muda medidor de altitude (mental e físico)
3. Capitão observa piloto (visual)
4. Capitão voa para maior altitude (mental e físico)
O que está envolvido no modelo distribuído?
▶Ocorre a distribuição de soluções-problemas
▶O papel do comportamento verbal e não verbal
▶Os vários mecanismos de coordenação usados (por 
exemplo, regras, procedimentos)
▶A comunicaçãoque ocorre enquanto a atividade 
colaborativa progride
▶Como o conhecimento é compartilhado e acessado
70
Cognição externa
✧Refere-se como nós interagimos com as 
representações externas (mapas, anotações e 
diagramas)
✧Quais são os benefícios cognitivos e quais são os 
processos envolvidos
✧Considera como é possível estender a nossa 
cognição
✧Como podemos desenvolver representações em 
aplicações baseadas em computador que possam 
ajudar cada vez mais?
Externalizando para reduzir a carga de memória
✧Diários, lembretes, calendários, notas, listas de compras, listas 
de tarefas
▪Escrever ajuda-nos a lembrar
✧Post-its, pilhas, e-mails assinalados ou destacados 
▪Registrar em um local nos ajuda a priorizar
✧Representações externas:
▪Lembra-nos que precisamos fazer alguma coisa (comprar um presente 
para o Dia das Mães, por exemplo)
▪Lembra-nos o que fazer (por exemplo: levar flores, chocolate, etc)
▪Lembra-nos quando fazer (domingo, Dia das Mães)
Exemplo: Sobrecarga computacional
✧O uso de uma ferramenta junto com uma representação 
externa ajuda executar um cálculo (por exemplo, lápis e papel)
✧Tente executar as contas abaixo
(a) de cabeça
(b) com a ajuda de papel e caneta
(c) com uma calculadora
▪234 x 456 =??
▪CCXXXIV x CCCCXXXXXVI = ???
✧Qual é mais fácil e por que já que ambas representam contas 
idênticas? 
Anotação e traçado cognitivo 
✧Anotação envolve modificar as representações existentes 
fazendo-se marcas 
▪Ex: sublinhar, assinalar,marcar, etc
✧O traçado cognitivo envolve externamente a manipulação de 
itens ou estruturas diferentes 
▪Ex: jogar cartas, xadrez, etc
Implicação do design
✧Forneça as representações externas na interface de 
forma a reduzir a carga de memória e facilitar o 
processamento das tarefas
A visualização da 
informação através 
de gráficos e 
interface gráfica, 
permite a 
interpretação melhor 
de uma grande 
massa de dados e a 
rápida tomada de 
decisões
O design da informação baseado na nossa 
compreensão dos usuários
✧Como nós podemos usar o nosso conhecimento 
sobre os usuários para desenvolver o projeto de um 
sistema?
✧Forneça a orientação e as ferramentas
▪Projete os princípios e conceitos
▪Defina regras
✧Forneça ferramentas analíticas
▪Métodos para avaliar a usabilidade
Modelos mentais e o design do sistema
✧A noção de modelos mentais foi usada como base para os 
modelos conceituais 
✧A suposição é que se você pode compreender como as 
pessoas desenvolvem os seus modelos mentais, você pode 
ajudá-las a desenvolver um modelo mental mais apropriado a 
funcionalidade do sistema
✧Por exemplo, um princípio de design é tentar fazer com que 
o sistema seja “transparente”, assim as pessoas podem 
compreende-lo melhor e saber o que fazer e como operá-lo
O princípio da transparência no design
• Não deve ser entendido de forma tão 
literal
• forneça um “feedback” útil
• torne fácil para entender
• intuitivo de se usar
• claro e fácil de seguir instruções
• forneça “help on line” apropriado
• orientação sensível ao contexto ajuda 
como proceder em caso de falhas 
Pontos chaves (Resumo)
✧A cognição envolve muitos processos, incluindo a atenção, a 
memória, a percepção e o aprendizado
✧A forma com que uma interface é projetada pode afetar a 
forma de como os usuários podem perceber, atender, 
aprender, e recordar como utilizar a aplicação para realizar as 
suas tarefas
✧A estrutura conceitual de modelos mentais e a cognição 
externa fornecem maneiras de entender de como e porque as 
pessoas interagem com os sistemas e, desta forma, nos leva 
a considerar como melhorar o design de sistemas e produtos
Referências
✧Design de Interação: Além da Interação Humano-
Computador. por Yvonne Rogers, Helen Sharp, Jenny 
Preece. Ed Bookman. 3ª Ed. 2013. 
▪ Capitulo 3 – Entendendo os usuários (da 2ª edição)