INTERFACE HOMEN-

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

DO USUÁRIO. PSICOLOGIA DO USUÁRIO.

Objectivo

Caracterizar as disciplinas de Ergonomia e Psicologia para obom desenho de interfaces de usuário.

Conteúdo

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

O factor humano.

Psicologia da interacçã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 oambiente 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 conseguira óptima recíproca adaptação do homem e seu trabalho, osbenefícios serão medidos em termos de eficiência humana ebem-estar.

Organização Internacional do Trabalho(OIT)

O conjunto de conhecimentos científicos relativos ao homeme necessários à concepção de instrumentos, máquinas edispositivos que possam ser utilizados com o máximo deconforto, segurança e eficiência.

Definições

Elementos comuns

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

2. Análise da actividade humana em suas diversas vertentespara melhorá-las em termos de saúde, eficácia eusabilidade, 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

aptidões 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.

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 osCenários são técnicas que nos acercam aos usuários e asuas motivações, objectivos e situações de uso. Sãotécnicas que servem para entender e analisar os usuários eo uso que fazem dos sistemas interactivos 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 interactivosrecorre-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 Efectores

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 Efectores

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

Canais entrada-saída

Saída

Percepção através dos sentidos (Sensores)

Vista

Ouvido

Tacto

Gosto

Olfacto

Entrada

Acções através dos actuadores (efectores)

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)

A 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 fatigaram.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 fatigam. 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 num ecrã: vermelho-verde, 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 pára novatos, 7 pára

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 escuros.

Evitar cores muito saturadas.

Não se deve abusar da cor como médio de codificaçãoporque 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

A distribuição de elementos na interface é uma decisão quetoma o desenhador baseada muitas vezes em sua intuiçãoou o espaço disponível.

Hoje em dia existe suficiente informação a respeito dosprocessos psicológicos que subjazem na percepçãoorganizada de cenas.

É possível proporcionar ao desenhador ferramentas paradecidir 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 llamativos (imagem com cores

brilhantes)

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

imagem sina 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 aosbanners que aparecem na parte superior das páginas web

A experiência lhes diz que seu conteúdo costuma serpublicitá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 os ecrãs.

Facilmente distinguibles do resto de í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 acções

Utilizar linguagens, etc.

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

as interacçõ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 dantes 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

Conjunto de símbolos ativos num momento determinado aos que

estamos a prestar atenção, e que por tanto podemos manipular

mediante controle voluntário

Os símbolos com os que se está a trabalhar se mantêm nela

enquanto os estejamos a usar e prestando atenção

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 afectam à 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 acçõ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 páginas site:

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 em longo prazo aloja todo nosso conhecimento.

Informação com significado: a informação estruturada é mais fácil de recordar que a não estruturada.

Sentenças: as frases são mais fáceis de recordar, e ainda mais se são concretas dantes que abstratas.

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, sina

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-sequando a operação do sistema difere do modelo mental.

Exemplo: botão fechar janela

Solução: sempre vai na ezquina superior direita ou esquerdano caso de alguns sistemas operativos Linux.

É importantíssimo dispor de um modelo mental correto. Odesenho 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 dosoftware.

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-interacção

claro, simples e conciso, apoiado por um mecanismo deecrãs de ajuda de fácil acesso, que contenham explicaçõesconcretas.

Autodescriptivo

1. Garantir em todo momento a possibilidade de cancelaracções que tenha empreendido o usuário, desfazer osúltimos comandos que tenha ordenado e governar seusdispositivos primeiramente e saída de dados. ...

Controlable

1. Resolver não só o que dizem os papéis e anúncios sina asdemandas mais usuais que possam imaginar quem ocompram.

2. Os diálogos dos aplicativos devem corresponder com osconhecimentos dos usuários, com as normas convencionais,e com os requisitos básicos de formação das pessoas.

3. Os diálogos devem mostrar-se em ecrã e funcionar demaneira consistente.

Conforme às expectações que gera

1. Não permitir aos usuários executar tarefas que possamprovocar um erro irrecuperável.

2. Detectar e avisar ao usuário dos erros e mais que nada tratarde prevenir ao mesmo do que pode suceder com a acçãoque vai executar.

Tolerante com os erros que o usuário

possa cometer

1. Qualquer usuário independentemente de seu nível deconhecimentos, poderá personalizar sua área de trabalhosegundo convenha-lhe e segundo conceba que podeaumentar 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 labor de aprendizagem com a disposição demanuais de usuário, ajuda, tutoriais com explicaçõescoerentes.

Documentado suficientemente

Conclusões...

¿Que se entende por Ergonomia?

¿Quais são os elementos a ter em conta para estudar ocomportamento humano para o desenho de interfaces?

¿Quais são os princípios generais que regem o desenhoergonómico?

Orientação do Seminário #2

1. Conhecer e aplicar as convenções internacionais para odesenho de interfaces é importantíssima para todoengenheiro informático. A cada equipa deve selecionaruma das seguintes convenções e explicar numaapresentação que elementos a caracterizam.

- Devem de trazer exemplos ou demostração segundo seja

sua selecção.

Convenções

1. Lei de Fitt

2. Leis de Gestalt

3. Princípios de desenho de interacção de Bruce Tognazzini

4. Princípios Mandel (1997)

5. Princípios Simpson (1985)

6. Princípios IBM (2001)

7. Guias de estilo Apple (1985)

Convenções

7. Guias de estilo CUA (Common User Interface)

8. Guias de estilo Motif

9. Guias de estilo OpenLook

10. Guias de estilo CDE

11. Guias de estilo Microsoft

12. Guias de estilo Java Swing

13. Guias de estilo para a Web

INTERFACE HOMEN-

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

DO USUÁRIO. PSICOLOGIA DO USUÁRIO.