INTERFACE HOMEN- MÁQUINA ERGONOMIA DA INTERACÇÃO USUÁRIO-MÁQUINA. PERFIL DO USUÁRIO. PSICOLOGIA DO USUÁRIO.

Objectivo Caracterizar as disciplinas de Ergonomia e Psicologia para o bom 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 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)

Definições 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.

Elementos comuns 1. Estudo da pessoa em sua interacçã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 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.

Processo de Desenho centrado no usuário Análise Desenho Protótipo Avaliação Iteração Observação dos usuários 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, objectivos 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 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 interactivos 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 Efectores atenção elaboração Memória sensorial (MS) lembrete Memória de Trabalho Memória de Longo Prazo rendimento recuperação

Esquema psicológico que mostra a interacção homem-máquina Canais entrada-saída Máquina Dispositivos Saída Dispositivos Entrada Sensores Efectores atenção elaboração Memória sensorial (MS) lembrete Memória de Trabalho Memória de Longo Prazo rendimento recuperação

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 por médio das impressões que transmitem os sentidos. Para interatuar com um computador precisamos perceber a informaçã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

Percepção visual Cor Experimento 20 19 18 17 16 15 14 13 12 11 9876543210 Olha fixamente o olho do pássaro vermelho enquanto contas lentamente até 20 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 http://www.exploratorium.edu/exhibits/espanol/bird_in_a_cage/index.html

Percepção visual Cor Explicação Os pássaros fantasmales denominam-se imagens secundárias, e são imagens que permanecem após olhar um objeto. Quando se olha fixamente o pássaro vermelho, os cones sensíveis ao vermelho começam a se cansar e perdem sua sensibilidade. Quando se muda repentinamente a mirada ao fundo branco da jaula, se vê o branco menos vermelho 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 os cones sensíveis ao verde os que se fatigam. Blanco menos luz verde é luz magenta, de maneira que vê-se a imagem secundária de cor magenta.

Modelos de Cor C M Y 1 1 1 R G B

Percepção visual 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 EXEMPLO EXEMPLO EXEMPLO EXEMPLO

Percepção visual Cor 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 Usar branco, cyan ou verde sobre fundos escuros. 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

Percepção visual Organização de objetos 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 e tarefa do usuário 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 Percepção e atenção 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 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 conhecimento 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.

Ícones https://www.flaticon.es/

Percepção visual Percepção do texto 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.

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 atenção elaboração Memória sensorial (MS) lembrete Memória de Trabalho Memória de Longo Prazo rendimento recuperação

Modelo de memória Memória sensorial Máquina Dispositivos Saída Dispositivos Entrada Sensores Efectores atenção elaboração Memória sensorial (MS) lembrete Memória de Trabalho Memória de Longo Prazo rendimento recuperação

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 atenção elaboração Memória sensorial (MS) lembrete Memória de Trabalho Memória de Longo Prazo rendimento recuperação

Modelo de memória Memória de trabalho 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

Quantos há?

Quantos números individuais podeis recordar? 72410358291064351290

Quantos números individuais podeis recordar? 72 41 03 58 29 10 64 35 12 90

Modelo de memória Memória de trabalho 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 esquecese 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.

O processo de interacção. Problemas Processo de interacção Âmbito de execução Âmbito de avaliação O usuário conhece seu objectivo mas não sabe que acções realizar O usuário não sabe como interpretar as mudanças que sua acção tem provocado no sistema

Modelo de memória Memória de trabalho 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.

http://goldnuggetwebs.com/peorpagweb/

Modelo de memória Memória de Longo Prazo Máquina Dispositivos Saída Dispositivos Entrada Sensores Efectores atenção elaboração Memória sensorial (MS) lembrete Memória de Trabalho Memória de Longo Prazo rendimento recuperação

Modelo de memória Memória de Longo Prazo 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.

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.

O modelo mental 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 Os modelos mentais formam-se através da experiência, o treinamento e a aprendizagem.

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.

Princípios generais que regem o desenho ergonómico 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.

Adequado para o trabalho ao que se destina 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.

Autodescriptivo 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 de ecrãs de ajuda de fácil acesso, que contenham explicações concretas.

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

Conforme às expectações que gera 1. Resolver não só o que dizem os papéis e anúncios sina as demandas mais usuais que possam imaginar quem o compram. 2. Os diálogos 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. Os diálogos devem mostrar-se em ecrã e funcionar de maneira consistente.

Tolerante com os erros que o usuário possa cometer 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 acção que vai executar.

Personalizável pelo usuário 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.

Documentado suficientemente 1. Facilitar o labor de aprendizagem com a disposição de manuais de usuário, ajuda, tutoriais com explicações coerentes.

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?

Orientação do Seminário #2 1. Conhecer e aplicar as convenções internacionais para o desenho de interfaces é importantíssima para todo engenheiro informático. A cada equipa deve selecionar uma das seguintes convenções e explicar numa apresentaçã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ÁQUINA ERGONOMIA DA INTERACÇÃO USUÁRIO-MÁQUINA. PERFIL DO USUÁRIO. PSICOLOGIA DO USUÁRIO.