Aula 4. Área Multidisciplinar

1,526 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,526
On SlideShare
0
From Embeds
0
Number of Embeds
313
Actions
Shares
0
Downloads
89
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aula 4. Área Multidisciplinar

  1. 1. AIHMInterface Humano-MáquinaProf. Dra. Sílvia DottaAula 4. IHC – Área Multidisciplinar
  2. 2. CogniçãoPercepçãoSemióticaErgonomia
  3. 3. Psicologia Cognitiva Estuda estrutura e funcionamento da mente (atenção, memória, aprendizagem, experiência, solução de problemas, pensamento). Construção e avaliação com percurso cognitivo (raciocínio dedutivo e intuitivo)Psicologia Perceptiva estudo da percepção (visão, audição, tato)Semiótica comunicação através de signos Signo é algo que representa alguma coisa para alguém (palavras, simbolos...), Serve para avaliar a comunicação entre o designer e o usuário
  4. 4. Ergonomia• A ergonomia é a disciplina relacionada ao entendimento das interações entre seres humanos e outros elementos de um sistema• É a capacidade que um sistema interativo oferece ao usuário em determinado contexto de operação, para realizar tarefas (ação) de maneira eficaz, eficiente e agradável (usabilidade)• Um problema de ergonomia é identificado quando um aspecto da interface está em desacordo com as características dos usuários e da maneira pela qual ele realiza sua tarefa.
  5. 5. Entendendo os mecanismos da percepção... • Do ponto de vista cognitivo, a percepção envolve os processos mentais, a memória e outros aspectos que podem influenciar na interpretação dos dados percebidos. • Como os sinais externos que chegam aos nossos órgãos sensoriais são convertidos em experiências perceptuais significativas? 5
  6. 6. cecilia@ic.unicamp.br – II Workshop de Engenharia de6 Software UNESP Bauru
  7. 7. Degradando a imagem... 7 degrada-se a imagem completamente tornando a interpretação difícil Foto de R.C.James
  8. 8. O surrealistas violam intencionalmente as regras daconstrução da percepção
  9. 9. Confundindo a interpretação• Uma imagem pode ser ambígua por falta de informação relevante ou por excesso de informação irrelevante 9
  10. 10. Colocando organizações competitivas... colocam-se organizações competitivas, 10 tornando possível o conflito de interpretações da mesma imagemM C Escher, Cavaleiros
  11. 11. Salvador Dalí, The Slave Market with Disappearing Bust ofVoltaire 11
  12. 12. 12
  13. 13. “Figuras Impossíveis”• As partes individualmente conflitam na interpretação global• Não lidamos com as coisas isoladamente... • Quando informação sensorial é colocada junto, uma imagem consistente do mundo deve ser produzida... 14
  14. 14. 15
  15. 15. Abordagens Teóricas de IHC• fundamentos de base psicológica, etnográfica e semiótica: • leis de Hick-Hyman e de Fitts • processador humano de informação • princípios da Gestalt • engenharia cognitiva • abordagens etnometodológicas • teoria da atividade • cognição distribuída • engenharia semiótica
  16. 16. Lei de Hick-Hyman• relaciona o tempo que uma pessoa leva para tomar uma decisão com o número de possíveis escolhas que ela possui
  17. 17. Lei de Hick-Hyman• relaciona o tempo que uma pessoa leva para tomar uma decisão com o número de possíveis escolhas que ela possui Em qual alternativa é mais rápido localizar um estado que você não conhece? Por quê? ordem alfabética ordem por região (Norte, Nordeste, ...)
  18. 18. Lei de Fitts• relaciona o tempo (T) que uma pessoa leva para apontar para algo com o tamanho (S) do objeto-alvo e com a distância (D) entre a mão da pessoa e esse objeto-alvo
  19. 19. Lei de Fitts – exemplos em IHC Em qual alternativa é mais rápido alcançar o botão salvar? Por quê? Em qual alternativa é mais rápido alcançar o menu? Por quê? menu no topo da tela, menu no topo da janela, como no MAC OS como no Windows
  20. 20. Processador Humano de Informação
  21. 21. Princípios de Gestalt (1/2)22 • proximidade: as entidades visuais que estão próximas umas das outras são percebidas como um grupo ou unidade; • boa continuidade: traços contínuos são percebidos mais prontamente do que contornos que mudem de direção rapidamente; • simetria: objetos simétricos são mais prontamente percebidos do que objetos assimétricos;
  22. 22. Princípios de Gestalt (2/2)23 • similaridade: objetos semelhantes são percebidos como um grupo; • destino comum: objetos com a mesma direção de movimento são percebidos como um grupo; • fecho: a mente tende a fechar contornos para completar figuras regulares, “completando as falhas” e aumentando a regularidade
  23. 23. Engenharia Cognitiva (1/11)• mundo psicológico X mundo físico
  24. 24. Engenharia Cognitiva (2/11)• controle da temperatura e fluxo de água na torneira • problemas de mapeamento (a): Qual é o controle de água quente e qual é o de água fria? De que maneira cada controle deve ser girado para aumentar ou reduzir o fluxo da água? • dificuldade de controle (b): Para aumentar a temperatura da água mantendo o fluxo constante, é necessário manipular simultaneamente as duas torneiras. • dificuldade de avaliação (c): Quando há dois bicos de torneira, às vezes se torna difícil avaliar se o resultado desejado foi alcançado.
  25. 25. Engenharia Cognitiva (3/11)• controle da temperatura e fluxo de água na torneira problemas de mapeamento, dificuldade de controle, dificuldade de avaliação
  26. 26. Engenharia Cognitiva (4/11)• definição de cor via componentes [Red, Green e Blue] ou [Hue (matiz), Saturation , Luminance]problemas de mapeamento das componentes RGB e HSLdificuldade de controle das componentes HSL dificuldade de avaliação, pois não se vê a cor definida
  27. 27. Engenharia Cognitiva (5/11)• definição de cor via componentes [Red, Green e Blue] e [Hue (matiz), Saturation , Luminance] reduz problemas de mapeamento e dificuldade de controle das componentes RGB e HSL
  28. 28. Engenharia Cognitiva (6/11)• Teoria da Ação - golfos variáveis variáveispsicológicas distância entre e controles físicos
  29. 29. Engenharia Cognitiva (7/11)• Teoria da Ação – travessia dos golfos
  30. 30. Engenharia Cognitiva (8/11)• Teoria da Ação – travessia dos golfos • estabelecimento do objetivo: mudar a cor de fundo do retângulo selecionado • formulação da intenção: definir uma cor verde oliva com os valores R=85, G=107, B=47 • especificação das ações: 1. acionar o item de menu Formatar > Cor de fundo 2. informar o valor 85 para a componente R 3. informar o valor 107 para a componente G 4. informar o valor 47 para a componente B 5. confirmar a cor definida pelos valores informados • execução: ação #1 - acionar o item de menu Formatar > Cor de fundo • percepção: observou que apareceu uma janela de diálogo • interpretação: o título da janela de diálogo é “Selecionar cor” e há controles de definição de cada componente de cor individual • avaliação: me aproximei do meu objetivo. A especificação de ações parece correta e portanto posso prosseguir para o próximo passo. • continua...
  31. 31. Engenharia Cognitiva (9/11)• Teoria da Ação – travessia dos golfos • execução: ação #2 - informar o valor 85 para a componente R, digitando esse valor na caixa de texto correspondente • percepção: o valor na caixa de texto correspondente à componente R mudou, assim como a cor da imagem de pré-visualização • interpretação: o novo valor corresponde ao valor digitado • avaliação: me aproximei do meu objetivo. A especificação de ações parece correta e portanto posso prosseguir para o próximo passo. • execução: ação #3 - informar o valor 107 para a componente G, digitando esse valor na caixa de texto correspondente • percepção: o valor na caixa de texto correspondente à componente G mudou, assim como a cor da imagem de pré-visualização • interpretação: o novo valor corresponde ao valor digitado • avaliação: me aproximei do meu objetivo. A especificação de ações parece correta e portanto posso prosseguir para o próximo passo. • continua...
  32. 32. Engenharia Cognitiva (10/11)• Teoria da Ação – travessia dos golfos • execução: ação #4 - informar o valor 47 para a componente B, digitando esse valor na caixa de texto correspondente • percepção: o valor na caixa de texto correspondente à componente B mudou, assim como a cor da imagem de pré-visualização • interpretação: o novo valor corresponde ao valor digitado e a cor da imagem de pré-visualização corresponde à cor desejada • avaliação: me aproximei do meu objetivo. A especificação de ações parece correta e portanto posso prosseguir para o próximo passo. • execução: ação #5 (confirmar a cor definida pelos valores informados, clicando em OK) • percepção: a janela de diálogo foi ocultada; a cor do retângulo mudou • interpretação: a nova cor do retângulo é verde oliva • avaliação: alcancei meu objetivo
  33. 33. Engenharia Cognitiva (11/11)• Modelos da engenharia cognitiva• O usuário deve ser capaz de elaborar um modelo conceitual compatível com o modelo de design através da sua interação com a imagem do sistema. Para isso, o designer deverá produzir uma imagem de sistema explícita, inteligível e consistente com seu modelo de design.
  34. 34. Abordagens Etnometodológicas• enfatizam as influências entre contexto físico e sociocultural e o uso de sistemas computacionais interativos• algumas das principais iniciativas • ações situadas (Suchman) × ações planejadas (Norman) • análise da conversação entre pessoas • estudo da comunicação usuário-sistema • estudos de campo no trabalho, em casa, em movimento etc.
  35. 35. Teoria da Atividade (1/3) A atividade é realizada através de ações conscientes direcionadas a objetivos do sujeito. As ações são realizadas através de operações inconscientes, disparadas pela estrutura da atividade e as condições do ambiente.
  36. 36. Teoria da Atividade (2/3)• a atividade humana possui três características básicas: • é dirigida a um objeto material ou ideal; • é mediada por artefatos; • é socialmente constituída dentro de uma cultura.
  37. 37. Teoria da Atividade (3/3)• alguns pontos abordados em IHC • análise e design de uma prática de trabalho específica, considerando as qualificações, o ambiente de trabalho, a divisão de trabalho e assim por diante; • análise e design com foco no uso real e na complexidade da atividade multiusuário e, em particular, na noção essencial do artefato como mediador da atividade humana; • o desenvolvimento da experiência e do uso em geral; • a participação ativa do usuário no design, e foco no uso como parte do design.
  38. 38. Cognição Distribuída (1/2)• amplia a semântica de cognitivo para abranger as interações entre pessoas, recursos e materiais no ambiente
  39. 39. Cognição Distribuída (2/2)• descreve o contexto da atividade, os objetivos do sistema funcional e seus recursos disponíveis;• identifica as entradas e saídas do sistema funcional;• identifica as representações e processos disponíveis;• identifica as atividades de transformação que ocorrem durante a resolução de problemas para atingir o objetivo do sistema funcional.
  40. 40. Engenharia Semiótica (1/7)• caracteriza a interação humano-computador como um caso particular de comunicação humana mediada por sistemas computacionais• foco na comunicação entre designers, usuários e sistemas
  41. 41. Engenharia Semiótica (2/7)• investiga processos de comunicação em dois níveis distintos: • a comunicação direta usuário–sistema e • a metacomunicação do designer para o usuário mediada pelo sistema, através da sua interface.
  42. 42. Engenharia Semiótica (3/7)• paráfrase da metamensagem: Este é o meu (designer) entendimento de quem você (usuário) é, do que aprendi que você quer ou precisa fazer, de que maneiras prefere fazer, e por quê. Este, portanto, é o sistema que projetei para você, e esta é a forma como você pode ou deve utilizá-lo para alcançar uma gama de objetivos que se encaixam nesta visão.
  43. 43. Engenharia Semiótica (4/7)• espaço de design de IHC • quem é o emissor (designer)? Que aspectos das limitações, motivações, crenças e preferências do designer devem ser comunicados ao usuário para o benefício da metacomunicação; • quem é o receptor (usuário)? Que aspectos das limitações, motivações, crenças e preferências do usuário, tal como interpretado pelo designer, devem ser comunicados aos usuários reais para que eles assumam seu papel como interlocutores do sistema;
  44. 44. Engenharia Semiótica (5/7)• espaço de design de IHC • qual é o contexto da comunicação? Que elementos do contexto de interação — psicológico, sociocultural, tecnológico, físico etc. — devem ser processados pelo sistema, e como; • qual é o código da comunicação? Que códigos computáveis podem ou devem ser utilizados para apoiar a metacomunicação eficiente, ou seja, qual deve ser a linguagem de interface;
  45. 45. Engenharia Semiótica (6/7)• espaço de design de IHC • qual é o canal? Quais canais de comunicação estão disponíveis para a metacomunicação designer–usuário, e como eles podem ou devem ser utilizados; • qual é a mensagem? O que o designer quer contar aos usuários, e com que efeito, ou seja, qual é a intenção comunicativa do designer.
  46. 46. Engenharia Semiótica (7/7)objetivo do designerproduzir + introduziro sistema interativo para os usuários através da interface
  47. 47. Relembrando Affordance
  48. 48. Affordances (todas as possibilidades de ação(acesso) latente no ambiente)• Objetos físicos possuem affordances • Uma pedra pode ser movida, rolada, chutada, atirada, usada para nos sentarmos... • Não todas as pedras, apenas aquelas no tamanho certo para mover, rolar, chutar, atirar, sentar sobre.• O conjunto de possíveis ações [relativas ao sujeito] é chamado de “affordance” do objeto 49
  49. 49. Affordance não é uma propriedade doobjeto, • É uma relação estabelecida entre o objeto e o organismo que age sobre o objeto. • O conceito foi criado por J. Gibson em sua teoria sobre a percepção humana • Norman estendeu o termo à aplicação em design • Affordances “percebidas” contam ao usuário que ações devem ser realizadas sobre um objeto e como realizá-las (até certo ponto) • São o que determina a usabilidade do objeto 50
  50. 50. Affordance em Design 51 www.baddesigns.com
  51. 51. Affordance em Design 52 www.baddesigns.com
  52. 52. 53www.baddesigns.com
  53. 53. 54cecilia@ic.unicamp.br – II Workshop de www.baddesigns.com Engenharia de Software UNESP Bauru
  54. 54. Torneiras com sensor eletrônico de movimento 55
  55. 55. Design Universal 56
  56. 56. Como“ajustar”cadeiras?
  57. 57. Como ajustar uma cadeira?O ajuste da altura do assentoé feito por uma complicadacombinação de uma alavancaque deve ser puxada comuma mão e a utilização daoutra mão para puxar oassento para cima e o pépara segurar as rodas dacadeira.
  58. 58. 1 - Situação : Ajustar aaltura da cadeira O usuário tenta abaixar ou levantar a cadeira enquanto está sentado, mexendo na alavanca. Problema: o usuário puxa e empurra a alavanca porém a cadeira não se move.
  59. 59. Procedimento correto Para se abaixar a cadeira, deve-se levantar a alavanca e a cadeira ao mesmo tempo e depois empurrá-la. Para levantar a cadeira, deve- se puxar com força o assento, segurando com o pé as rodas da cadeira.
  60. 60. Galão de águaRemoção da tampaFatores• Tampa extremamente rígida e de difícil remoção;• Nenhuma estrutura auxiliar para ajudar a remoção da tampa.“Erros” esperados• A pessoa precisará, obrigatoriamente utilizar de um instrumento cortante, como uma faca - que não foi desenhada especificamente para este tipo de uso, podendo ocasionar acidentes;• Dependendo do instrumento utilizado, pode-se contaminar a água.
  61. 61. Galão de águaColocação do galão no bebedouroFatores• Peso elevado do galão;• Tampa necessariamente aberta antes da colocação.“Erros” esperados• É praticamente impossível virar o galão com sua tampa aberta e seu peso sem deixar a água cair;• Não é raro a pessoa deixar o galão cair neste momento, fazendo aquela aguaceira quando o galão “explode” no chão.
  62. 62. Como ajustar o relógio?
  63. 63. Paradoxo da Tecnologia• Sempre que o número de funções excede o número de controles, o design torna-se arbitrário e não natural, e complicado.• A mesma tecnologia que simplifica a vida provendo um maior número de funcionalidades em um objeto, também a complica tornando-a muito mais difícil de aprender e usar
  64. 64. Quantos produtos interativos existem em nossavida cotidiana?
  65. 65. Design de InterfacesObservar e analisar as características de design do ambiente cotidiano é um modo de desenvolver uma sensibilidade ao mundo desenhado em que vivemos e trabalhamosSistemas computacionais poderão facilitar a atividade e experiência humana somente quando requisitos sociais e cognitivos dirigirem o processo de design
  66. 66. Lembrando das gerações… Mainframe PC Internet1950 1980 2000O Computador como O computador como O ComputadorFerramenta Ferramenta Cognitiva como MídiaPara automatizar Para estender atarefas humanas capacidade humana Semiótica comunicação
  67. 67. Relembrando os princípios…O primeiro princípio do design de interfaces, tanto para uma maçaneta quanto para um computador, é manter em mente o ser humano que quer usá-la. A tecnologia é um meio àquele objetivo.…. Mais ênfase em design centrado no usuário. Menos em tecnologia; mais nas pessoas, e grupos, e interações sociais. E tarefas. (Norman, D)
  68. 68. Objetivos de IHM• Produzir sistemas usáveis, seguros e funcionais• Desenvolver ou melhorar a segurança, utilidade, efetividade e USABILIDADE de sistemas computacionais
  69. 69. Aceitabilidade de um Sistema
  70. 70. Para próxima aulaAtividade individual: Escrevendo o artigoAgora que você já está familiarizado com o seu tema, você deve iniciar a atividade de escrita de seu artigo. Comece escrevendo um texto de no máximo 5 (cinco) linhas discorrendo sobre o objetivo de seu trabalho. Continue seu texto apresentando uma justificativa para o seu trabalho. A justificativa deve ser teórica e prática. Utilize fontes bibliográficas que auxiliem a compreensão de sua justificativa. Este texto deve ser publicado no Fórum do grupo IHC em Convergência.Para atingir seu objetivo, você vai precisar ampliar a pesquisa bibliográfica. Visite os artigos publicados por seus colegas, pesquise outros artigos na internet, procure livros sobre o assunto.
  71. 71. Para próxima aulaAtividade em grupo: Projeto de interfaceAgora que vocês já têm uma análise aprofundada dos sistemas estudados, é o momento de iniciar o seu projeto. Preparem um descritivo do seu projeto. Este descritivo deve conter:TítuloResumo da interface: o que é?Atividades: para que serve? Que atividades serão realizadas com essa interface?Contextos de uso: espaço, tempo.Usuários: quem são os usuários? Quais suas características? Preferências?

×