INTERFACE HOMEM- MÁQUINA · 2018-09-30 · Objectivos. Ergonomia-Software 1. Desenhar aplicativos...
Transcript of INTERFACE HOMEM- MÁQUINA · 2018-09-30 · Objectivos. Ergonomia-Software 1. Desenhar aplicativos...
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.