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

Transcrição

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

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

3 Objectivo Caracterizar as disciplinas de Ergonomia e Psicologia para o bom desenho de interfaces de usuário.

4 Conteúdo Ergonomia da Interação Usuário-Máquina. O factor humano. Psicologia da interação pessoa-computador.

5 Ergonomia ergon = trabalho nomos = lei ou regras A filosofia de humanização do trabalho deu lugar ao nascimento da Ergonomia como disciplina.

6 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

7 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)

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

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

10 Tipos 1. Ergonomia Física 2. Ergonomia Cognitiva 3. Ergonomia Organizacional

11 4. Procurar que os aplicativos sejam fáceis de entender e aprender, e que potencien os conhecimentos de quem os usam. 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.

12 Resumo 1ª Parte

13

14 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

15 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

16 Factor Humano Modelo de processamento Os sentidos O modelo de memória O modelo mental

17 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?

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

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

20 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

21 Os sentidos Os sentidos constituem os canais de comunicação com o exterior (sensores).

22 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)

23 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

24 Percepção visual Cor Experimento 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

25 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 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 os cones sensíveis ao verde os que se cansam. Blanco menos luz verde é luz magenta, de maneira que vê-se a imagem secundária de cor magenta.

26 Modelos de Cor C M Y = R G B

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

28 Percepção visual Cor EXEMPLO EXEMPLO EXEMPLO EXEMPLO

29

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

31 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

32 Cores

33

34 Cores

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

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

37 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

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

39 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

40 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 as telas. Facilmente distinguível do resto dos ícones. Evitar que tenham várias interpretações.

41 Ícones

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

43 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

44 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

45 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

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

47 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

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

49 Quantos há?

50 ?

51 Quantos há?

52 Quantos números individuais podeis recordar?

53 ?

54 Quantos números individuais podeis recordar?

55 ?

56 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

57 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 esquecese o voltado. Caixa: toma-se o dinheiro e esquece-se o cartão.

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

59 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

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

61

62 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

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

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

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

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

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

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

69 Autodescriptivo 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.

70 Controlable 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....

71 Conforme às expectações que gera 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.

72 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 ação que vai executar.

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

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

75 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?

76 Resumo 2ª Parte

77

78 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)

79 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

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