INTERFACE HOMEM-

MÁQUINAERGONOMIA DA INTERACÇÃO USUÁRIO-MÁQUINA. PERFIL

DO USUÁRIO. PSICOLOGIA DO USUÁRIO.

Revisão das Tarefas

Fazer um protótipo sem interação de un formulário de

cadastramento de estudantes à universidade.

Fazer uma proposta de protótipo sem interação para a

interface principal de um Sistema de gestão da biblioteca

de ISUTIC.

Objectivo

Caracterizar as disciplinas de Ergonomia e Psicologia para o

bom desenho de interfaces de usuário.

Conteúdo

Ergonomia da Interação Usuário-Máquina.

O factor humano.

Psicologia da interação pessoa-computador.

Ergonomia

“ergon”= trabalho “nomos” = lei ou regras

A filosofia de humanização do trabalho deu lugar ao

nascimento da Ergonomia como disciplina.

Definições

O estudo científico dos factores humanos em relação com o

ambiente de trabalho e o desenho de equipas (máquinas,

espaços de trabalho, etc.)

Ergonomics Research Society

Definições

O aplicativo das Ciências Biológicas Humanas para conseguir

a óptima recíproca adaptação do homem e seu trabalho, os

benefícios serão medidos em termos de eficiência humana e

bem-estar.

Organização Internacional do Trabalho(OIT)

O conjunto de conhecimentos científicos relativos ao homem

e necessários à concepção de instrumentos, máquinas e

dispositivos que possam ser utilizados com o máximo de

conforto, segurança e eficiência.

Definições

Elementos comuns

1. Estudo da pessoa em sua interação com o médio.

2. Análise da actividade humana em suas diversas vertentes

para melhorá-las em termos de saúde, eficácia e

usabilidade, etc.

3. Sua vertente preventiva é a saúde trabalhista.

Tipos

1. Ergonomia Física

2. Ergonomia Cognitiva

3. Ergonomia Organizacional

Objectivos. Ergonomia-Software

1. Desenhar aplicativos que se adaptem às diferentes tarefas e

habilidades do ser humano ante um computador.

2. Estudar aspectos físico e mental das interfaces entre o usuário e

os programas.

3. Desenhar procedimentos de diálogo e formatos de

apresentação que sejam efetivos e fáceis de usar.

4. Procurar que os aplicativos sejam fáceis de entender e

aprender, e que potencien os conhecimentos de quem os

usam.

Resumo 1ª Parte

Análise Desenho Protótipo Avaliação

Iteração

Observação

dos usuários

Processo de Desenho centrado no usuário

Perfil de usuário,

Pessoas ou

personagens,

Cenários

Técnicas de Desenho

Os perfis de usuário, as personagens ou pessoas e os

Cenários são técnicas que nos acercam aos usuários e a

suas motivações, objetivos e situações de uso. São técnicas

que servem para entender e analisar os usuários e o uso que

fazem dos sistemas interativos e que se utilizam

principalmente para orientar o desenho.

Ergonomia=Factor Humano

Factor Humano

Modelo de processamento

Os sentidos

O modelo de memória

O modelo mental

Modelo de processamento

Para estudar o papel do ser humano nos sistemas interativos

recorre-se à Psicologia Cognitiva:

Disciplina científica que se encarrega do estudo do sistema de processamento de informação humano

¿Como se percebe o mundo que nos rodeia?

¿Como se aloja e recupera a informação?

Modelo de processamento

Máquina

Dispositivos

Saída

Dispositivos

Entrada

Sensores Efetores

Memória

sensorial (MS)

atenção

Memória de Trabalho

Memória de Longo Prazo

elaboração recuperação

lembrete rendimento

Esquema psicológico que mostra a interacção

homem-máquina

Canais entrada-saída

Máquina

Dispositivos

Saída

Dispositivos

Entrada

Sensores Efetores

Memória

sensorial (MS)

atenção

Memória de Trabalho

Memória de Longo Prazo

elaboração recuperação

lembrete rendimento

Modelo de processamento humano

Sensores e efetores

Saída

Percepção através dos

sentidos (Sensores)

Vista

Ouvido

Tacto

Gosto

Olfacto

Entrada

Ações através dos atuadores (efetores)

extremidades

membros

dedos

olhos

cabeça

sistema vocal

Os sentidos

Os sentidos constituem os canais de comunicação com o

exterior (sensores).

Os sentidos

Percepção

Perceber: acrescentar conhecimentos do mundo exterior pormédio das impressões que transmitem os sentidos.

Para interatuar com um computador precisamos perceber ainformação que se apresenta na interface

As mais importantes para a IHM são:

Percepção visual (olho)

Percepção acústica (ouvido)

Percepção háptica (tacto)

Os sentidos

Percepção visual

A visão é a principal fonte de informação

Processo da visão:

Recepção física do estímulo

Interpretação do estímulo

Componentes:

Cor

Brilho

Tamanho e profundidade

Ângulo visual

Olha fixamente o olho do pássaro vermelho enquanto contas lentamente até 20

Percepção visual

Cor

http://www.exploratorium.edu/exhibits/espanol/bird_in_a_cage/index.html

Experimento

Agora olha imediatamente um sozinho ponto na jaula vazia. A imagem débil

e fantasmal de um pássaro Cyan aparecerá na jaula

Faz o mesmo com o pássaro verde. Na jaula aparecerá a figura débil de um

pássaro magenta

20191817161514131211109876543210

Os pássaros fantasmales denominam-se imagens secundárias, e são imagensque permanecem após olhar um objeto.

Quando se olha fixamente o pássaro vermelho, os cones sensíveis ao vermelhocomeçam a se cansar e perdem sua sensibilidade. Quando se mudarepentinamente a mirada ao fundo branco da jaula, se vê o branco menosvermelho nos lugares onde as células sensíveis ao vermelho se cansaram.A luz branca menos a luz vermelha é luz Cyan. Por isso a imagem secundária éCyan.

O mesmo sucede quando olha fixamente o pássaro verde. Desta vez são oscones sensíveis ao verde os que se cansam. Blanco menos luz verde é luzmagenta, de maneira que vê-se a imagem secundária de cor magenta.

Percepção visual

Cor Explicação

−

=

B

G

R

Y

M

C

1

1

1

Modelos de Cor

Este fenómeno visual tem importantes consequências para

a IHM:

Deve evitar-se a combinação de cores oponentes na

tela: vermelho-cyan, amarelo-azul.

Exemplo: letras azuis sobre fundo amarelo. Podem

deixar-se de ver as letras, palavras em vermelho sobre

fundos azuis pode parecer que ‘vibram’, etc.

Percepção visual

Cor

Percepção visual

Cor

EXEMPLO

EXEMPLO

EXEMPLO

EXEMPLO

Recomendações gerais:

Eleger combinações de cores compatíveis. Evitar as

combinações vermelho-verde, azul-amarelo, verde-azul,

vermelho-azul.

Usar altos contrastes de cor entre a letra e o fundo.

Limitar o número de cores (4 para usuários iniciantes, 7 para

usuários experientes).

Usar azul claro só para as áreas de fundo.

Usar o branco para a informação periférica.

Percepção visual

Cor

Percepção visual

Cor

Usar branco, cyan ou verde sobre fundos oscuros.

Evitar cores muito saturadas.

Não se deve abusar da cor como médio de codificação

porque os problemas de visão da cor são muito comuns.

O mau uso das cores pode causar vibrações e sombras,

distrair ao usuário e forçar a vista.

É necessário conhecer as relações cromáticas para

combinar correctamente as cores

http://paletton.com

Cores

https://htmlcolorcodes.com

Cores

A distribuição de elementos na interface é uma decisão que

toma o desenhador baseada muitas vezes em sua intuição

ou o espaço disponível.

Hoje em dia existe suficiente informação a respeito dos

processos psicológicos que subjazem na percepção

organizada de cenas.

É possível proporcionar ao desenhador ferramentas para

decidir a melhor distribuição dos objetos numa interface.

Percepção visual

Organização de objetos

A organização dos elementos pode facilitar ou entorpecer o trabalho

do usuário

Cria para um bom desenho: a organização perceptual da

informação deve estar subordinada a como o usuário leve a cabo a

tarefa sobre a mesma (Wickens, 1990)

Exemplo do buscador:

Utiliza-se um quadro de texto e um botão.

Ambos elementos devem estar juntos.

Se se escreve de esquerda a direita, o botão deve aparecer à

direita do quadro de texto.

Percepção visual

Organização e tarefa do usuário

Exemplo de compatibilidade e incompatibilidade da organização

perceptual e a tarefa do usuário

Percepção visual

Organização e tarefa do usuário

O usuário recebe com frequência mais informação da que pode

processar ao mesmo tempo

Exemplo: página de início de um portal de Internet

¿Que determina a atenção do usuário?

O ambiente: estímulos chamativo (imagem com cores

brilhantes)

O próprio usuário: as pessoas não rastrean a totalidade da

imagem senao que se centram nas áreas de alto conteúdo

informativo. Analisando estas zonas fazem-se uma ideia do que

têm enfrente.

Percepção visual

Percepção e atenção

Exemplo deste fenómeno: “cegueira ao banner” (Benway,

1998)

Os usuários com frequência não prestam atenção aos

banners que aparecem na parte superior das páginas web

A experiência lhes diz que seu conteúdo costuma ser

publicitário pelo que são sistematicamente ignorados,

apesar de seu desenho llamativo

Percepção visual

Percepção e atenção

Conhecimento através de imagens: uso de ícones.

Os ícones permitem um acesso direto e rápido à informação.

Recomendações:

Mínima diferença entre o objeto real e o objeto representado.

Apresentar na mesma posição em todos as telas.

Facilmente distinguível do resto dos ícones.

Evitar que tenham várias interpretações.

Percepção visual

Percepção e conhecimento

https://www.flaticon.es/

Ícones

Lemos ao redor de 250 palavras por minuto em boas condições; a

velocidade à que lemos o texto é uma medida de sua

legibilidade

Os melhores tipos de letras estão entre 9 e 12 pontos.

A longitude das linhas deve estar entre 6 e 13 cm.

Percepção visual

Percepção do texto

O modelo de memória

A maior parte de nossa actividade diária baseia-se na memória:

Alojar informação

Repetir ações

Utilizar linguagens, etc.

Interessa-nos conhecer como trabalha a memória para modelar

as interações

Existem vários tipos de memória

O modelo de memória

Máquina

Dispositivos

Saída

Dispositivos

Entrada

Sensores Efectores

Memória

sensorial (MS)

atenção

Memória de Trabalho

Memória de Longo Prazo

elaboração recuperação

lembrete rendimento

Modelo de memória

Memória sensorial

Máquina

Dispositivos

Saída

Dispositivos

Entrada

Sensores Efectores

Memória

sensorial (MS)

atenção

Memória de Trabalho

Memória de Longo Prazo

elaboração recuperação

lembrete rendimento

Modelo de memória

Memória sensorial

A função desta memória é reter a informação para que possa ser

transferida à memória de trabalho antes de que desapareça.

Atenção: É o processo de concentração mental sobre um

conjunto de estímulos (ou pensamentos). Se não atendemos

selectivamente podemos ser desbordados pela magnitude de

informação.

Modelo de memória

Memória de trabalho

Máquina

Dispositivos

Saída

Dispositivos

Entrada

Sensores Efectores

Memória

sensorial (MS)

atenção

Memória de Trabalho

Memória de Longo Prazo

elaboração recuperação

lembrete rendimento

É um componente cognitivo ligado à memória que permite o

armazenamento temporário de informações com capacidade

limitada. Todos nós utilizamos a memória de trabalho em todos os

tipos de atividades e tarefas diárias.

Exemplos:

Recordar um número a marcar

Realizar uma operação aritmética

Modelo de memória

Memória de trabalho

¿Quantos há?

?

¿Quantos há?

¿Quantos números individuais

podeis recordar?

72410358291064351290

?

72 41 03 58 29 10 64 35 12 90

¿Quantos números individuais

podeis recordar?

?

Os experimentos demonstram que:

recordam-se melhor as primeiras e as últimas palavras de

uma lista (primacía e recencia)

é mais fácil recordar elementos com significado ou relação

comum.

é mais difícil recordar elementos similares mas é mais fácil

recordar elementos similares bem organizados

Modelo de memória

Memória de trabalho

As interferências afetam à memória e podem provocar erros nas

tarefas

¿Em que estava eu pensando?

Exemplos:

Máquina automática de venda: obtém-se o ticket e esquece-

se o voltado.

Caixa: toma-se o dinheiro e esquece-se o cartão.

Modelo de memória

Memória de trabalho

A informação sensorial condiciona as associações que fazemos:

Pouca informação disponível

Demasiada informação simultânea

Conclusão: quando o usuário não sabe que deve fazer e falta

informação de ajuda seu rendimento diminuirá e será incapaz

de realizar ações que pareciam óbvias ao desenhador.

Modelo de memória

Memória de trabalho

O processo de interacção. Problemas

Processo de

interacção

O usuário conhece seu

objectivo mas não sabe

que acções realizar

Âmbito de

execução

O usuário não sabe como

interpretar as mudanças

que sua acção tem

provocado no sistema

Âmbito de

avaliação

Aplicativo ao desenho de sites:

Se põe-se uma música de fundo, o fala da canção provoca

interferências com os processos nos que seja necessário

trabalhar com informação verbal (p.ex. uma busca) ainda que

não se lhe preste atenção conscientemente.

Modelo de memória

Memória de trabalho

http://goldnuggetwebs.com/peorpagweb/

Modelo de memória

Memória de Longo Prazo

Máquina

Dispositivos

Saída

Dispositivos

Entrada

Sensores Efectores

Memória

sensorial (MS)

atenção

Memória de Trabalho

Memória de Longo Prazo

elaboração recuperação

lembrete rendimento

A memória de longo prazo aloja todo nosso conhecimento.

Informação com significado: a informação estruturada é

mais fácil de recordar que a não estruturada.

A memória de longo prazo é uma capacidade muito grande

e complexa que envolve muitas estruturas cerebrais

Modelo de memória

Memória de Longo Prazo

O modelo mental

A informação da memória não está alojada de forma caótica,

senao que está organizada em estruturas semânticas que facilitam

sua aquisição e sua recuperação posterior.

Entre todas as estruturas propostas, as mais relevantes para a IHM

são os modelos mentais.

Os modelos mentais formam-se através da experiência, otreinamento e a aprendizagem.

Um modelo mental é o modelo que as pessoas têm deles mesmos, dos outros, do meio e das coisas com as que interagem

Donald Norman

O modelo mental

Dado um modelo mental de um sistema, os erros produzem-se

quando a operação do sistema difere do modelo mental.

Exemplo: botão fechar janela

Solução: sempre vai na ezquina superior direita ou esquerda

no caso de alguns sistemas operativos Linux.

É importantíssimo dispor de um modelo mental correto. O

desenho da interface deve ajudar a isso

Por exemplo, respeitando as convenções.

O modelo mental

1. Adequado para o trabalho ao que se destina.

2. Autodescriptivo.

3. Controlable.

4. Conforme às expectações que gera.

5. Tolerante com os erros que o usuário possa cometer.

6. Personalizável pelo usuário.

7. Documentado suficientemente para facilitar sua

aprendizagem.

Princípios generais que regem o

desenho ergonómico

1. Clara definição do que realizam as diferentes opções do

software.

2. Automação dos processos mais repetitivos e usuais.

3. Ocultar ao usuário a complexidade dos processos internos

que os programas e o computador estão a realizar.

Adequado para o trabalho ao que se

destina

1. Interface fácil e rapidamente compreendida pelo usuário.

2. Oferecer ao usuário um sistema de diálogo-interação claro,

simples e conciso, apoiado por um mecanismo de telas de

ajuda de fácil acesso, que contenham explicações

concretas.

Autodescriptivo

1. Garantir em todo momento a possibilidade de cancelar

ações que tenha empreendido o usuário, desfazer os últimos

comandos que tenha ordenado e governar seus dispositivos

primeiramente e saída de dados. ...

Controlable

1. Resolver não só o que dizem os papéis e anúncios senao as

demandas mais usuais que possam imaginar quem o

compram.

2. A informação dos aplicativos devem corresponder com os

conhecimentos dos usuários, com as normas convencionais,

e com os requisitos básicos de formação das pessoas.

3. A informação deve mostrar-se em ecrã e funcionar de

maneira consistente.

Conforme às expectações que gera

1. Não permitir aos usuários executar tarefas que possam

provocar um erro irrecuperável.

2. Detectar e avisar ao usuário dos erros e mais que nada tratar

de prevenir ao mesmo do que pode suceder com a ação

que vai executar.

Tolerante com os erros que o usuário

possa cometer

1. Qualquer usuário independentemente de seu nível de

conhecimentos, poderá personalizar sua área de trabalho

segundo convenha-lhe e segundo conceba que pode

aumentar a efetividade do uso dos programas.

2. O usuário poderá definir cores, formas, agrupamento de

ícones, criação e agrupamento de macros.

Personalizável pelo usuário

1. Facilitar o trabalho de aprendizagem com a disposição de

manuais de usuário, ajuda, tutoriais com explicações

coerentes.

Documentado suficientemente

Conclusões...

¿Que se entende por Ergonomia?

¿Quais são os elementos a ter em conta para estudar o

comportamento humano para o desenho de interfaces?

¿Quais são os princípios generais que regem o desenho

ergonómico?

Resumo 2ª Parte

Orientação do Seminário #2

Caracterize um aplicativo informático que leve tempo no

mercado, tendo em conta princípios ergonómicos, de

usabilidade e acessibilidade, e as mudanças que tem tido ao

longo do tempo. Como ajuda para a resposta tem os seguintes

elementos:

Dados generais do aplicativo.

Características de funcionamento.

Evolução(Mudanças).

Avaliação (Princípios que cumpre ou não cumpre)

Orientação do Seminário #2

Sugestões de aplicativos :

1. Facebook

2. Mozilla Firefox

3. S. O. Windows

4. Microsoft oficce word

5. S. O. Android

6. Google Chrome

7. Microsoft oficce PP

8. Youtube

9. Photoshop

10. Google+

11. Twitter

12. ...

INTERFACE HOMEM-

MÁQUINAERGONOMIA DA INTERACÇÃO USUÁRIO-MÁQUINA. PERFIL

DO USUÁRIO. PSICOLOGIA DO USUÁRIO.