Tópicos em Interface Humano-Computador

1. Tópicos em Interface Humano-Computador M. Cecilia C. Baranauskas Instituto de Computação UNICAMP

2. Agenda • O que é IHC? Porquê estudar IHC? • Interfaces que nos fazem ou • Os lados da Interação HC • Modelo de Usuário – Fatores Humanos • IHC como Ciência de Design • Entendendo a Evolução em IHC cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

3. IHC/HCI/CHI Human-Computer Interaction is a discipline concerned with the design, evaluation and implementation of interactive computer systems for human use and with the study of major phenomena surrounding them (ACM SIGCHI, 1992, p.6) cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

4. Década de 90: Integração de IHC na Ciência da Computação • 1988 ACM enumera IHC como uma das 9 áreas centrais da CC • 1991 ACM e IEEE recomendam a inclusão de IHC nos curriculo de CC • 1997 incluída como uma das 10 seções do Handbook of Computer Science and Engineering • departamentos de CC incorporam IHC como área de pesquisa cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

5. Algumas aplicações InternetWeb page design / E-commerce / E-government IntranetAspectos organizacionais e sociais TV Interativa Novas formas de interação (nova mídia) Dispositivos MóveisAcesso em tempo real, tela pequena & alta densidade Kiosk & Bibliotecas DigitaisAcesso rápido e fácil à informação … cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

6. Demanda por IHC Motorola – Research Engineers Usability & Human Factors“… to investigate multimedia user requirements, interactions and interfaces, taking an application-focused approach… The position will involve fundamental human factors research, prototype design, implementation and evaluation” Microsoft – Usability Engineer“Candidates should have a thorough knowledge of methods for gathering usability data and be able to plan usability work in conjunction with the product team and provide a user focus for the teams. The candidate must be self sufficient and capable of leading the usability effort for a product with millions of users in a highly competitive and complex environment.” Buscas rápidas (8 Oct 2003)Usability/Accessibility/HCI specialistsHuman Factors (defence, transportation, mobile devices) … cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

7. Uma Coisa que me faz Sublinhado vermelho para indicar erros de grafia Esforço zero do usuário para checagem Aumenta possibilidade de aprender ? cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

8. Deslocamento de toda linha de guias quando uma delas é selecionada • Seleção de uma das guias faz com que as demais guias da mesma linha sejam deslocadas para o primeiro nível; • Esforço perceptual a cada acesso para recuperação das posições a acessar; • Solução: deslocamento da guia de interesse pela permuta com outra, da mesma coluna. cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

9. Imagine como este problema pode crescer! cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

10. Senha no Macintosh: Problema com caixa-alta ativa • Aplicativo alerta o usuário quanto ao possível esquecimento da tecla Caps Lock ativada; • Mensagem bastante útil na medida em que este é um erro muito comum de percepção, ou da falta dela; • Recurso fácil de ser implementado e auxilia o usuário a perceber uma possível fonte de erro, evitando perda do seu tempo ou bloqueio de acesso; • Recurso funciona como uma memória externa do usuário. cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

11. Padrão Windows: Pré-visualização de imagem • Recurso não demanda esforço de memória na identificação do arquivo que deseja acessar; • Evita necessidade de saber ou memorizar nome dentre um conjunto disponível. Abstração, transparência de nomes, acesso às imagens. • Possibilita acesso a arquivos que usuário desconhece. Ex.: busca por figura para ilustração; cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

12. Padrão Windows: Guia de documentos recentes • Recurso facilita acesso aos arquivos recentemente utilizados reduzindo o esforço de memória; • Funciona como “memória adicional” na identificação do local de armazenamento e nome do arquivo que usuário deseja acessar; • Reduz o esforço de percepção pois somente apresenta ao usuário arquivos que possam ser acessados pelo aplicativo. cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

13. MS Word 2000 ? MS Word 2000 com as seguintes barras de ferramentas visíveis: padrão, formatação, auto texto, banco de dados, caixa de ferramentas de controle, desenho, ferramentas da web, figuras, formulário, moldura, revisão, tabelas e bordas, visual basic, web, word art cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

14. Pine ? cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

15. Website Ig ? cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

16. Interação Humano-Computador cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

17. Um Modelo Inicial do Usuário de Computadores • Com que facilidade palavras da linguagem de interface podem ser lembradas? • Como o tipo de fonte altera a legibilidade? • Qual a velocidade de leitura na tela? • Card, Moran e Newell (1983) • Como características do ser humano afetam a maneira como ele interage com computadores • Bases para as abordagens cognitivas ao design e avaliação de sistemas computacionais cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

18. MLD MCD/MT MIV MIA PC PP PM O Modelo do Processador de Informação Humano • Memórias e Processadores • Princípios de Operação Card, Moran e Newell (1983) cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

19. Eventos perceptuais que ocorrem dentro de um único ciclo são combinados em um único perceptum- impressão mental percebida pelos sentidos • Cheatham e Whote (1954). Os sujeitos ouvem o número correto, quando os estalidos são apresentados 10/segundo (1 para cada tp) cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

20. O chunk • Função do usuário e da tarefa... ativação de sua MLD HSICAUIMPW IHCUSAWIMP cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

21. Recuperação da Informação na memória humana... • umcd = 7 [5~9] chunks • Lembrando palavras de uma lista... Ganzer e Cunitz (1966) cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

22. Observando a performance de usuários no teclado... • Quão rápido pode-se pressionar determinada tecla repetitivamente com o mesmo dedo? tm (pressionar) + tm(soltar) = 140ms/toque • Resultados experimentais: • 1000ms para o novato e 60ms para o experto • Datilografia em teclado alfabético 8% mais lenta do que teclado qwerty (Sholes) cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

23. cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

24. Entendendo os mecanismos da percepção... •  entender os processos psicológicos em operação e as redes neurais envolvidas • Como os sinais externos que chegam aos nossos órgãos sensoriais são convertidos em experiências perceptuais significativas? • “truques” que revelam o fenômeno humano da percepção • Nossos “erros” são reveladores... cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

25. Como? • degrada-se a imagem completamente tornando a interpretação difícil • colocam-se organizações competitivas, tornando possível o conflito de interpretações da mesma imagem • coloca-se uma organização sem sentido para ver como a experiência passada afeta o processo cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

26. O surrealistas violam intencionalmente as regras da construção da percepção cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

27. Degradando a imagem... cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru Foto de R.C.James

29. Uma imagem pode ser ambígua por falta de informação relevante ou por excesso de informação irrelevante cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

30. Colocando organizações competitivas... cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru M C Escher, Cavaleiros

31. Salvador Dalí, The Slave Market with Disappearing Bust of Voltaire cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

32. cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

33. Colocando uma organização sem sentido... Processos perceptuais impõem uma organização à imagem.... Escaninhos ou seqüência de triângulos? cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru B. Riley, Tremor

34. Organização sem sentido... • A interpretação da imagem visual é realizada pela segregação de grupos que tenham forma similar • Estes são tratados como unidades ou “pontos focais” • Um tipo de “quebra” no padrão repetitivo • A organização éflutuante • Uma forma ou outra pode ser observada... cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

35. Percepção do Espaço - Profundidade • Vivemos e nos movemos em um mundo 3D... • Nosso aparato visual evoluiu de forma a criar uma representação 3D no que vê cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

36. “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... cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

37. cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

38. Que informação o sistema nervoso extrai dos sinais que chegam dos órgãos sensoriais? • olhar as anomalias da percepção • Receptores de uma parte da imagem visual são afetados pela operação de receptores para partes vizinhas cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

39. Anomalias da Percepção Células neurais interagem umas com as outras. No único ponto do olho onde os receptores não interagem muito com os outros, o escurecimento da interseção não acontece cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

40. cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

41. Efeito Posterior • O efeito das cores • Células neuronais são emparelhadas de modo que células que respondem de um modo são conectadas a células que respondem do modo complementar • Suponha que o olho focalize determinada cor • Por fadiga, células para essa cor perdem a habilidade de responder • Se o olho focaliza a luz branca, a cor complementar responde normalmente, enquanto a resposta à cor focalizada é inibida cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

42. cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

43. Paralaxe do Movimento cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

44. IHC como uma ciência de design • O caminho de uma formiga atravessando uma praia… Simon em The Sciences of the Artificial • a estrutura do comportamento da formiga é derivado principalmente da praia • A tecnologia que o homem cria tem papel fundamental na estruturação do comportamento e experiência humanos. cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

45. A Tecnologia Centrada na Máquina • “Science Finds, Industry Applies, Man Conforms” * • 75% dos acidentes aéreos são atribuídos a “erro do piloto” • alto índice de erro humano nas indústrias • objetos desenhados do ponto de vista da máquina • confundem, alteram as relações sociais normais * Chicago Fair, 1933 cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

46. Pessoas são: vagas desorganizadas distraíveis emocionais ilógicas Máquinas são: precisas organizadas não distraíveis não emocionais lógicas Visão orientada à Máquina cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

47. A Tecnologia Centrada no Humano • criação de artefatos que expandem nossas capacidades • artefatos cognitivos (escrita, aritmética, lógica, linguagem) • os artefatos da tecnologia são essenciais para o crescimento do conhecimento humano e da capacidade mental • o poder caminha em direção aos mais avançados tecnologicamente... cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

48. Pessoas são: criativas flexíveis sensíveis a mudança imaginativas decisões flexíveis baseadas em contexto Máquinas são: bobas rígidas insens. a mudança sem imaginação decisões consistentes baseadas em restrições Visão Orientada ao Humano cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

49. Mudança de Paradigma • “Science Finds, Industry Applies, Man Conforms” • “People Propose, Science Studies,Technology Conforms” (D. Norman, 1993) • ? cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru

50. O quê está errado com as interfaces? • A interface é o “lugar” errado para começar... • Cultivar sensibilidade ao design • O designer da interface é um designer de sistema • Ter em mente o Ser Humano que quer usá-la. • A Tecnologia deve ser subserviente a essa meta... cecilia@ic.unicamp.br – II Workshop de Engenharia de Software UNESP Bauru