Entendendo os Usuários Preece - Cap. 3 e 4

Entendendo os Usuários

Preece - Cap. 3 e 4

Hitoshi

DCC/IME/USP

2o Semestre 2007

O Que vamos ver nessa aula?

!

Que atividades os usuários conseguem fazer

bem, e quais eles fazem mal?

!

O que é cognição?

!

O que são modelos mentais?

O que é cognição externa?

!

Como usar essa informação no processo de

design?

Para que entender os usuários?

! A interação com tecnologias requer cognição ! Portanto precisamos considerar os processos

cognitivos envolvidos, e as limitações cognitivas dos usuários

! Pode fornecer conhecimento sobre o que esperar que os usuários possam ou não fazer

! Permite identificar e explicar a natureza e causas dos problemas encontrados pelos usuários ! Permite construir teorias, ferramentas de

modelagem, guias e métodos que podem resultar no projetos de tecnologias melhores.

2 dimensões para entender:

! 1) O que eles fazem

! Entender como os usuários interagem com a tecnologia

através da observação

! 2) O que eles pensam

! Entender os usuários cognitivamente

! Principais processos cognitivos ! Modelos mentais

! Cognição externa

E utilizar essa informação para nos ajudar a construir tecnologias melhores.

What goes on in the mind? perceiving.. thinking.. remembering.. learning.. understanding others talking with others manipulating others planning a meal imagining a trip painting writing composing making decisions solving problems daydreaming...

Qual o conteúdo da mente?

Aspectos principais da cognição

! Atenção

! Mecanismo que utilizamos para concentrar nossa

capacidade cognitiva em alguma atividade(s)

! Percepção e reconhecimento

! Pode ser visual, auditivo, tátil.

! Memória

! O que é isso mesmo?

! Outros que não trataremos nessa aula: leitura, fala, planejamento, aprendizado, resolução de

problemas, etc.

Atenção

! Seleciona objetos para nos concentrar

! Dentre a variedade de coisas acontecendo ao nosso redor

! Nós somos capazes de focalizar e dividir a atenção, permitindo direcionar a atenção de forma seletiva

! Cocktail party

! Dirigindo e conversando

! Informação na interface deveria ser estruturada para capturar a atenção do usuário

! Uso de limites perceptuais (janelas), cor, som, luzes

O Chama mais atenção?

Como chamar atenção

!

Foco de visão e visão periférica

!

Se é necessário chamar a atenção para uma

mensagem de erro crucial, ela precisa ser

projetada diferente das mensagens comuns.

CRAP e atenção

! Contraste, Repetição,

Alinhamento, e Proximidade

Implicações no design

!

Faça a informação SALIENTE quando ela

requer atenção

!

Use técnicas que realcem os objectos como

cor, contraste, ordenação, espaçamento,

sublinhamento, sequenciamento e animação.

!

Evite poluir sua interface (só porque o sw te

permite) - procure simplicidade, clareza e

objetividade.

! Google

implicações para projeto

!

A informação que necessita atenção imediata

deve sempre aparecer em um lugar bastante

proeminente (mensagens de erro e avisos)

Outras implicações

! Informação que não é necessária com

freqüência deve ser mostrada apenas quando requisitada

! Help

! Informação menos urgente deve ser

colocada em um local menos

proeminente, mas em áreas específicas na tela, de forma que o usuário saberá onde olhar quando desejar essa informação

Interrupções

"Em ambientes normais de trabalho, os usuários

sofrem constantes distrações (conversa com colegas, telefone, chefe batendo na porta, etc) e quando retornam para a atividade suspendida eles podem:

!esquecer o que estavam fazendo

!esquecer se eles completaram ou não a tarefa

#Esqueci de colocar sal na salada, ou coloco 2

vezes

#Homer: esqueci a porta do reator aberta...

Multiprocessamento

! Em atividades complexas, é comum que o usuário deva

realizar várias atividades concorrentemente. Exemplo:

"um piloto de avião deve monitorar vários instrumentos,

comunicar-se com o controle de tráfego aéreo, e lidar com possíveis emergências.

"dirigir, falando ao celular, diminuindo o volume do rádio e

mandando as crianças no banco de trás se calarem. ! Nesse caso o usuário deve ser capaz de alternar

rapidamente entre tarefas.

"Tarefas primárias x secundárias

!primárias são mais importantes no momento

Multiprocessamento

As tarefas realizadas em multiprocessamento são bastante vulneráveis a distrações

!Recomendação para tratar interrupções e

multiprocessamento:

"Disponibilize alguma ajuda cognitiva

!Recordações ou representações externas com o

propósito de ganhar a atenção do usuário em

momentos relevantes, permitindo que o usário veja o estado do sistema quando desejar, e retomar sua atividade em caso de distração. Ex:

#barra de status

#* no nome de arquivos modificados e não salvos

Processamento automático

! Atividades super-aprendidas, que somos capazes de fazer sem

pensar, ou seja, de forma automática: "leitura, escrita, fala (na linguagem nativa), ...

"não precisamos prestar atenção (pensar, ficar consciente sobre) a

atividade sendo realizada, como andar de bicicleta

! Quanto mais praticamos uma atividade, melhor se torna o nosso

desempenho (desenvolvemos uma habilidade), e sua execução se torna automática

! Características dos processos cognitivos automáticos:

"rapidez

"demanda pouca atenção, e portanto não interfere com outras

atividades

Experimento

!Descrição

"Ache um voluntário e um cronômetro

"serão apresentadas duas telas

"cada tela contém duas listas de letras em cores diferentes

"meça o tempo que o seu voluntário leva para dizer em voz alta

as cores que aparecem na tela

! Quando a próxima tela aparecer, diga as cores o mais

rápido que puder, e ao final diga FIM. Ex

ehbrec ovcieb dneucb asvuev

adfzl

vdfasdfgo

fbjtru

vq;woi

vpejec

prqqytp

afpwrem

avwpih

bytwpa

vkakeyto

pbtwl

z3jfnqa

abcmt&

v731ma

Fim da primeira fase

!

Quanto tempo nosso voluntário levou?

Anote esse tempo.

!

Agora que ele já sabe o que fazer, vamos

repetir o processo para a próxima tela.

!

Pronto?

azul

vermelho

amarelo

verde

vermelho

preto

azul

amarelo

branco

vermelho

preto

cinza

amarelo

verde

Conflito

!Qual a conclusão? A segunda tela demora mais que a

primeira (em geral!)

!Porque?

"o processo automático de leitura entra em conflito

com o processo automático de perceber cores !Processos cognitivos

"a psicologia identifica 2 tipos de processos cognitivos:

!Automáticos: recitar tabela de multiplicação !Não automáticos ou controlados: fazer cálculos

mentais

Processos cognitivos

!Processos cognitivos automáticos

"não são afetados pela limitada capacidade do cérebro e não

requerem atenção

"são difíceis de "desaprender"

!Processos cognitivos controlados

"tem capacidade limitada e requerem atenção e controle

consciente

"são facilmente "desaprendidos"

!Exemplos processos automáticos:

"direção esquerda x direita

"control keys

Percepção e reconhecimento

! Como a informação do mundo é capturada e transformada em experiencias

! O que acontece quando nós percebemos algo é automático, e não conseguimos evitar

! Percepção pode ser:

! Visual ! Auditiva ! Táctil

A seguir algumas imagens de:

http://www.owlnet.rice.edu/~psyc351/imagelist.htm#Perceptual%20Organization

Gestalt

Multiestabilidade

Vamos ver…

Contexto

Implicações em IHC

! O design precisa conter o que é perceptível ou reconhecível dado o que ocorre cognitivamente

! Texto deve ser legível

! Contraste entre figura e fundo

! Ícones devem ser simples de interpretar

! Agrupados, cores semelhantes, ‘look and feel’

! Funções podem ser assinaladas

! Sombras para botões

! Repetição melhora o reconhecimento

! O membro de uma classe se parece com os demais

mebros da classe, e diferente dos membros de outras classes

Legibilidade: o que é mais fácil de ler?

What is the time?

What is the time?

What is the time?

What is the time?

What is the time?

Uso de cores

!

Cuidado com contraste, brilho.

!

Pessoas com deficiências na visão de cores

Uso de cores

!

Estereoscopia de cor: o vermelho e o azul

parecem estar em planos distintos

Usar ou não usar cor?

!Alguns estudos indicam que certas

tarefas ficam mais eficientes se implementadas SEM o uso de cor:

"identificação: é mais rápida usando

alfanuméricos que cor

"uso de cor não facilita a identicação do

estado de instrumentos de aviação

"o entendimento de desenhos de linhas é

tão eficiente quanto fotos coloridas

desenho

de linhas + cor

Uso de cores

!

Abuso de cores?

Memória

! Envolve armazenamento e recuperação de conhecimento, atuando de forma apropriada ! A gente não se lembra de tudo: isso implica em

filtragem e processamento

! Contexto influencia a nossa memória

! Nós RECONHECEMOS objetos muito melhor que conseguimos RECUPERAR (lembrar, puxar da memória) esses objetos

! Isso explica o domínio de GUI’s (interfaces gráficas) sobre

interfaces baseadas em linhas de comando

! Mais fácil lembrar imagens que palavras

! Uso de ícones ao invés de nomes

Modelo de Funcionamento

Memória de trabalho

!A maioria das pessoas consegue manter na memória

aproximadamente 7 "aglomerados" de informação na memória de trabalho [George Miller]

"aglomerado: números, dígito, item, palavra, letra, etc

"número mágico: 7 +/- 2 aglomerados

!Um aglomerado depende da pessoa, sua experiência, e

do contexto

"Piano

! um aglomerado deve ter um significado

Mais um experimento

!

A próxima tela mostra um número

Sua tarefa é memorizá-lo

!

Você tem 5 segundos para isso

Pronto?

3002200210020002

Qual era o número?

!

Cerca de 50% das pessoas é capaz de

lembrar o número.

!

Por que?

Por que?

" Existe um padrão de dígitos no número

" Aos que não identificaram o padrão, existem 16

aglomerados de informação para recordar, ou seja, mais que a capacidade típica de memorização

" Aos que identificaram o padrão, somente um

3002200210020002

da esquerda para a direita:

2000

2001

2002

2003

Reconhecimento x recordação

!Nós conseguimos reconhecer um material muito

mais facilmente que podemos recordá-lo !Implicações óbvias para o projeto de interfaces

"Torne os objetos visíveis, facilitando o reconhecimento

"Compare: menus vs. linha de comando

"Reconhecimento

!o conhecimento está no ambiente

"Recordação

!o conhecimento está na cabeça do usuário

Exemplos

Que figura está na nota de R$ 5,10, 20 e 50?

Auxílios para melhorar a memória

auxílios cognitivos: representações externas que

usamos para nos chamar a atenção em um

momento relevante a tarefa que desempenhamos

linha amarada no dedo

!

copinho sobre o manche do avião

"

mnemônicos: muito útil para lembrar a ordem de

objetos

!

Li Na Kma Robison Crusoe em Francês

Níveis de processamento

! O nível de recordação de um material novo é

proporcional ao seu significado ! Teoria dos níveis de processamento:

"informação é processada em níveis, desde o mais baixo

(sensor), até os níveis semânticos mais profundos

"qto mais profunda a informação, mais durável ela é

"o significado de um item determina a profundidade em que

ele é processado

! Ou seja, quanto mais significativa for uma informação, mais

provável será sua lembrança ao longo do tempo.

Significado

!Fatores que determinam significado

"Familiaridade de um item: é a freqüência com a qual o

item ocorre na linguagem coloquial

!familiar: porta, livro, escrever

!não familiar: compilar, deletar, listagem

"Sua imagem associada: capacidade de uma palavra em

evocar imagens associadas na memória

!pedalar, dormir, comer

#concretas, são mais fáceis de lembrar

!começar, aumentar, avaliar

#abstratas, são mais difíceis.

Interfaces significativas

!

Alguns itens são mais significativos que

outros, e portanto mais memoráveis

!

Itens que devem ser recordados na interface

devem ser bem significativos

"mas o que é um ícone ou comando significativo? "obviamente devem ser escolhidos segundo a

familiaridade e imagem associada

Comandos significativos

!Para criar um conjunto significativo de comandos,

considere:

"contexto

"características culturais

"características do usuário (crianças, ou especialistas)

!Problema: itens familiares ao nosso cotidiano podem ser

confusos em um contexto computacional.

!exemplo: cut

Significado de ícones

!Fatores que determinam o significado de ícones:

"1 - Contexto

!banheiro feminino x masculino usando sapatos

#em um restaurante x em um shopping center. Nesse último

poderia ser confundido com loja.

!em um contexto geral (no meio da rua), o significado pode

se tornar ambígüo.

"2 - Tarefa ou função

!ícones não são apropriados em geral para representar

informação verbal. Ex: busca

!apropriado em itens que requerem reconhecimento. Ex:

"pimenta" em menus de restaurante

"3 - Forma de representação

!objetos concretos !símbolos abstratos !combinação dos dois

"Além disso, ícones podem ser classificados em:

#semelhantes: usam a mesma imagem do conceito #exemplares: utiliza uma parte saliente do conceito.

exemplo: garfo e faca para restaurante em estrada

#simbólicos: evoca um significado de um outro nível de

abstração, como a imagem de um copo quebrado para indicar fragilidade

#arbitrários: sem relação com o conceito, e portanto deve

ser aprendido.

Fatores

Fatores

!

4 - Conceito utilizado

"O tipo de conceito também tem impacto sobre

o significado de um ícone

!conceitos concretos: mais fácil

#ex: folders

!conceitos abstratos: mais difícil

#ex: alertas - ícone elefante para representar

objeto pesado.

Ícones

Interpretação de ícones

Grupos

Classes

Posição

Look-and-feel

Comandos ou ícones?

!

O uso de ícones em geral é preferível pois:

"usa reconhecimento e não recordação

"mais fácil para usuários inexperientes e/ou casuais

!

Redundância: uso de ícones + nomes

"reduz o problema de reconhecimento do significado

do ícone, principalmente para conceitos abstratos

"requer mais espaço

Outras implicações

! O problema com 7+/-2

! Alguns projetistas são levados a acreditar que esse

fato é útil para IHC

!

Exemplos:

! Apresentar somente 7 opções no menu ! 7 ícones em um toolbar

! Não usar mais que 7 bullets em uma lista ! Usar até 7 tabs no topo de uma página web

Por que o uso é indevido?

! Pessoas podem varrer uma lista de bullets, tabs, itens

em um menu, até acharem o que procuram

! Eles não precisam recordar, basta te-los visto

! Há ocasiões em que um número pequeno/grande de

itens se constitui em um bom design, dependendo da tarefa e espaço disponível.

! As pessoas conseguem agrupar itens, como

seqüências de ações para deleção de um arquivo, o que se torrna, na prática, uma operação única; e são capazes de lembrar várias delas.

Aplicações mais apropriadas

!

Manipulação e recuperação de arquivos é

um problema real para muitos usuários

!

Pesquisa em recuperação de informação

pode ser aplicada (google desktop)

!

Memória envolve 2 processos

! Reconhecimento x recordação

!

Sistemas para manipulação de arquivos

deveriam ser projetados para otimizar ambas

as formas de memória

Manipulação de arquivos

!

Facilite as estratégias de memória existentes

e tente ajudar os usuários quando eles estão

com dificuldades

!

Ajude os usuários a codificar arquivos de

forma mais rica

! Forneça formas de armazenar arquivos usando

cor, flags, imagens, texto flexível, hora, etc.

Modelos mentais

! Usuários desenvolvem seu entendimento de um sistema através de seu uso e aprendizado

! Conhecimento é descrito frequentemente como um modelo mental

! Como usar o sistema (o que fazer a seguir)

! O que fazer com sistemas não familiares ou em situações

inesperadas (como o sistema funciona?)

! Pessoas fazem inferências usando modelos mentais de como as tarefas são realizadas

Modelos mentais

!

Craik (1943)

! Modelos mentais são construções internas de

algum aspecto do mundo externo que permite fazer predições

!

Envolve processos conscientes e

inconscientes, onde imagens e analogias são

ativadas

!

Modelos razos e profundos

! Exemplo: como dirigir um carro x como ele

funciona

Tipos de modelos

! Analogia

! O modelo se parece com o que ele representa. Exemplo:

rotação mental

! Estrutural

! O modelo consiste de entidades e relações. Exemplo: um

mapa

! Funcional:

! O modelo é uma seqüência de passos. Exemplo: remover

um arquivo

! Híbrido

! arrastar um arquivo para o lixo

Implicações

! As pessoas generalizam os modelos mentais ! Isso é importante no uso de tecnologia

! Exemplo:

! eu posso arrastar um arquivo para um diretório

! Portanto eu posso arrastar um email para um subdiretório

! Nota: esse é um exemplo de como as teorias cognitivas servem de base para conceitos importantes em IHC, como os princípios de usabilidade de Norman (consistência), e de Dix e outros (familiaridade, generalizabilidade,

consistência, e conformidade).

Raciocínio cotidiano x

modelos mentais

!

Você chega em casa com muito frio e quer

aquecer a casa o mais rápido possível. Você

liga o termostado na temperatura desejada,

ou na temperatura máxima?

!

Você chega em casa faminto, e vê que tem

uma pizza congelada na geladeira. Você

pre-aquece o forno até 375 graus e depois a

coloca (seguindo as instruções), ou ajusta

uma temperatura maior para aquece-la mais

rapidamente?

Modelos mentais do usuário

!

Muitas pessoas tem modelos mentais

incorretos (Kempton, 1996)

!

Por que?

! Modelo de “torneira”: quanto mais aberta, mais

água sai. Outros exemplos: acelerador, gás, volume do rádio, etc.

! Termostatos em geral são só liga / desliga,

modelo baseado no conceito de chave.

Implicações

!

O mesmo é em geral verdade no

entendimento de como os computadores e

dispositivos computacionais funcionam

! Entendimento pobre, em geral incompleto,

confuso, baseado em analogias incorretas e superstição (Norman, 1983)

! Exemplo: o cursor congelou -- a maioria das

pessoas vai apertar um monte de teclas.

Não apenas usuários erram..

! Sistemas e projetistas também ! ‘Error 404 file not found’

! Puxa vida, eu cometi um erro!

! ‘Erro Fatal’

! Opa, eu matei o computador!

! Termos técnicos baseados em modelos mentais profundos utilizados pelos cientistas da computação mas não por usuários comuns

! Lembre-se da heurística de Norman: conformidade do sistema com o mundo real.

Recomendações

!

Use modelos mentais familiares e comuns a

comunidade dos usuários em seu design

!

Projete algo generalizável, de forma que o

modelo mental de uma coisa possa ser

aplicada para outra coisa similar.

!

Crie meios de memorizar/aprender a

interação através de reconhecimento, que

pode ser operacionalizado em um modelo

mental funcional, ou seja, promove o

desenvolvimento de um modelo mental.

Cognição externa

! Considera como nós interagimos com

representações externas, como mapas, notas, diagramas, etc.

! Quais são os benefícios cognitivos e que processos estão envolvidos?

! Como eles estendem as nossas habilidades cognitivas?

! Que representações computacionais podemos desenvolver para nos ajudar ainda mais?

Redução da carga de memória

!

Diários, lembretes, calendários, notas, listas

de compras, listas de coisas a fazer, etc

!

Post-its, pilhas, emails marcados, indicando

prioridades

!

Representações externas

! Nos lembra que precisamos fazer algo (compre

um presente para sua namorada)

! Nos lembra do que fazer (comprar um cartão) ! Nos lembra quando fazer algo (mandar o cartão

em algum dia específico)

Liberação computacional

!

Tecnologias precisam ser projetadas para

permitir uma liberação computacional

!

Para isso é necessário fornecer

representações que possamos entender e

interagir com facilidade afim de atingir os

objetivos da atividade.

Liberação computacional

!

Tente realizar as duas somas abaixo

! A) de cabeça

! B) com papel e lápis ! C) em uma calculadora

234 x 356 = ?

CCXXXIV x CCCLVI = ?

Implicações

!

Forneça representações externas em sua

interface que reduzam a carga de memória e

facilite a liberação computacional

e.g. visualização de informação projetada para permitir entender e tomar decisões rápidas sobre grandes quantidades de dados.

Pontos relevantes

! A cognição envolve vários processos, incluindo atenção, memória,

percepção e aprendizado.

! O design da interface afeta como os usuários percebem o sistema,

reagem, aprendem e lembram como fazer as atividades.

! A atenção pode ser focalizada ou dividida, voluntária e involuntária.

Para interfaces: evite distrair o usuário, e permita que ele veja o estado do seu trabalho, facilitando a sua retomada se interrompido.

! Processos cognitivos podem ser automáticos ou controlados. Para

IHC, automáticos são desejavéis.

! A memória é limitada. A lembrança é facilitada pelo uso freqüente da

informação, e seu significado, sendo mais fácil reconhecer que recordar.

!Modelos conceituais e cognição externa fornecem meios de entender

como e porque as pessoas interagem com produtos, o que pode levar a criação de produtos melhores.