Kein Folientitel

1
Interface Homem-Máquina
Considerações
Introdutórias
2
Questões Introdutórias

• De que trata a disciplina Interface Homem-Máquina
  (IHM)?
• Por que este curso é importante?
• Quanto este curso exige do estudante?
• Há de fato problemas relevantes a serem
  solucionados IHM ou esta é apenas mais uma
  disciplina para complementação de créditos?
• O que é projeto em IHM ?
• Por que avaliar uma interface é importante?

3
Visão Geral

• Interface Homem-Máquina (IHM) é uma disciplina
  que trata do projeto, da implementação e da
  avaliação de sistemas interativos destinados ao
  uso humano
• IHM transcende o projeto de interfaces para
  sistemas computacionais
• Diversidade de equipamentos eletro-eletrônicos
  automatizados (e.g. forno de micro-ondas,
  videocassetes, painéis de aeronaves)

4
Visão Geral

• IHM é uma área interdisciplinar
• Ciência da Computação (engenharia e projeto de
  aplicações de interfaces humanas)
• Psicologia (aplicação de teorias cognitivas e
  análises comportamentais do usuário)
• Sociologia e Anthropologia (interações entre
  tecnologias, contextos de trabalho e
  corporações)
• Projeto Industrial (geração de produtos
  interativos).

5
Visão Geral

• Eixos-chaves
• Abordagens de Projeto
• e.g. considerações de fatores humanos, diretrizes
  para projeto gráfico, engenharia de software,
  análise da tarefa
• Técnicas e Ferramentas de Implementação
• e.g. técnicas de prototipagem, caixas de
  ferramentas de diálogo, métodos orientados a
  objetos, representação de dados e
• Técnicas de Avaliação
• e.g. análise de desempenho, teste de usabilidade,
  sondagem da satisfação, inspeção de conformidade
  de produtos a padrões, heurísticas, guias de
  estilo, etc.

6
Visão Geral

• Problema simples de projeto
• Faça-me uma caixa
• ou seja,
• Construa-me uma caixa

7
Visão Geral

• Quem usará a caixa?
• Para que a caixa será usada?
• Onde a caixa será usada?
• Qual o artefato que está sendo atualmente usado
  em lugar da caixa?
• Quão importante é que a caixa
• tenha dimensões exatas?
• seja construída em um material específico?
• seja resistente a impactos?

8
Visão Geral

• Questões freqüentemente ouvidas ou formuladas no
  contexto de projeto da IHM
• Quem usará o sistema?
• Para que o sistema será usado?
• Qual o sistema que existe atualmente?
• Qual o contexto de uso do sistema?

9
Visão Geral

• Falha nas respostas relevantes ao contexto do
  projeto ? resultados desastrosos
• implementações de projetos deficientes
• Exemplos
• Spruce Goose
• MS-Bob
• Painel de controle do Three-mile Island
• ...

10
Visão Geral

• Evitar resultados desastrosos
• Compreensão Contextual

Usuários
Sistemas
Tarefas
Ambientes
11
Visão Geral

• Projeto e implementação de sistemas úteis
• Suprimento da funcionalidade que os usuários
  necessitam
• Projeto e implementação de sistemas usáveis
• Suprimento da funcionalidade que pode ser usada
  com um grau de esforço moderado

12
Visão Geral

• Dificuldades do curso
• NÃO se deve à quantidade de tarefas
• NÃO se deve ao grau de dificuldade dos exercícios
  de avaliação
• NÃO se deve ao dispêndio de tempo com a execução
  do projeto
• DEVE-SE à focalização no projeto
• Aprendizado e execução de projetos não é uma
  atividade trivial

13
Visão Geral

• Por que o projeto da IHM não é trivial?
• Projetistas sentem dificuldade em apre(E)nder as
  tarefas do usuário
• As tarefas e seus domínios podem assumir graus de
  complexidade elevados
• Há diversos aspectos de naturezas distintas a
  serem contrabalançados
• E.g. projeto gráfico, internacionalização,
  padrões, desempenho, satisfação, graus de
  detalhamento, fatores sociais, questões legais,
  prazos

14
Visão Geral

• Por que o projeto da IHM não é trivial?
• Teorias e diretrizes existentes NÃO garantem per
  si a concepção de BONS projetos
• Projeto iterativo e iNterativo NÃO é simples
• Projeto de interfaces NÃO é projeto gráfico!

15
Exemplos de Desastres

• Desastres em IHM
• Torrey Canyon
• Soyuz 11
• Bhopal
• Therac-25
• Ônibus Espacial A320

16
Exemplos de Desastres

• Torrey Canyon - Características
• Super-petroleiro (Março, 1967)
• 31.000.000 de galões
• Entrega arriscada!
• Canal com 6 milhas de largura
• Aportamento APENAS numa maré muito alta (MAS )
• () Tripulação experiente e navio automatizado

17
Exemplos de Desastres

• Torrey Canyon - Projeto
• Controle de leme com 3 posições
• automático (posição próxima)
• manual (posição intermediária)
• controle (posição distante)
• SE o leme falhar, desconectá-lo e cambiar a
  direção para uma alavanca de controle
• Retorno (feedback) audível (clique para grau de
  mudança de curso)
• Ajuste fino (até 3º ) em modo automático

18
Exemplos de Desastres

• Torrey Canyon - Uso
• Posição mal calculada
• Mudança de curso significativa necessária
• Controle de leme cambiado de automático para
  manual
• Conversão feita, MAS
• Controle de leme foi cambiado de manual para
  controle.

19
Exemplos de Desastres

• Torrey Canyon - Resultado
• 31.000.000 de galões de petróleo ATINGIRAM a
  Inglaterra e a França !!!

20
Exemplos de Desastres

• Torrey Canyon - Problema
• Retorno da informação (feedback) sobre a posição
  de controle do leme
• sugestão de posição, MAS os olhos estavam em
  outra parte
• clique audível sinalizando mudança de posição
• ausência de cliques sinalizou o problema, MAS
  muito tarde!
• Ausência de uma sugestão pode não ser uma forma
  eficaz de feedback

21
Exemplos de Desastres

• Soyuz 11 - Características
• Retorno da estação espacial Salyut (Junho, 1971)
• Tripulação altamente treinada, espaçonave
  altamente automatizada
• Segurança e redundância SÃO metas de projeto

22
Exemplos de Desastres

• Soyuz 11 - Projeto
• Na entrada na Atmosfera
• Retro-foguetes do módulo orbital reduziriam a
  velocidade da aeronave
• Módulo de comando se separaria do módulo orbital
• Foguetes de orientação manteriam o curso
• Pára-quedas se abriria, escudo de reentrada seria
  descartado, foguetes de aterrissagem disparariam,
  válvula de equalização da pressão se abriria.

23
Exemplos de Desastres

• Soyuz 11 - Uso
• Na entrada na Atmosfera
• Pinos explosivos separaram o módulo orbital do
  módulo de comando
• Válvula de equalização da pressão abriu-se,
  aeronave girou, começou a perder pressão e
  oxigênio
• A válvula foi fechada manualmente
• ... MAS não a tempo de evitar o trágico desfecho.

24
Exemplos de Desastres

• Soyuz 11 - Resultado
• Soyouz 11 aterrissou, MAS...
• ... os 3 cosmonautas MORRERAM !!!

25
Exemplos de Desastres

• Soyuz 11 - Problema
• Segurança e redundância NÃO testadas sob
  condições de uso típicas!
• Como v. testaria tal sistema?
• courses.cs.vt.edu/cs3604/lib/Safety/soyuz11.html
• http//www.users.wineasy.se/svengrahn/histind/Soyu
  z11Land/Soyuz11land.html

26
Exemplos de Desastres

• Bhopal - Características
• Índia (Dezembro, 1984)
• Pesticida Sevin (isocianato de metila - MIC)
• ...our safety standards in the U.S. are
  identical to those in India or Brazil or some
  place else. Same equipment, same design, same
  everything 1

1 Warren Anderson, Presidente da Union Carbide
27
Exemplos de Desastres

• Bhopal - Projeto
• Segurança (?)
• medidor de pressão (sala de controle)
• termômetro (tanques)
• unidade de refrigeração
• depurador de soda cáustica
• sistema de flare
• sistema de lavagem de gases

28
Exemplos de Desastres

• Bhopal Uso (1)
• medidor de pressão
• normal (10psi, mas era 2psi minutos antes!!!)
• termômetro
• máximo de 77
• unidade de refrigeração
• líquido de resfriamento drenado e usado fora
• depurador de soda cáustica
• medidor defeituoso indicava falha

29
Exemplos de Desastres

• Bhopal Uso (2)
• sistema de flare
• tubo de conexão retirado para manutenção
• tubo NÃO reposto!
• fora de serviço
• sistema de lavagem de gases
• gás atingiu mais de 100 pés água SÓ atingiu 40
  pés

30
Exemplos de Desastres

• Bhopal - Resultado
• nuvem de 40 T de isocianato de metila
• cerca de 200.000 expostos
• cerca de 2.500 MORTOS!!!

31
Exemplos de Desastres

• Bhopal - Problemas
• NENHUM treinamento em procedimentos de emergência
• Apresentação de ESTADOS, não de MUDANÇAS DE ESTADO

• gurukul.ucc.american.edu/ted/BHOPAL.HTM

32
Exemplos de Desastres

• Therac-25 - Características
• Equipamento de radioterapia (1985-1987)
• PDP-11, VT100
• Dois modos de operação (apenas!)
• Raios X
• máxima potência via espessa placa metálica
• radiação de tumores internos
• Feixe eletrônico
• baixa potência, feixe direcionado
• cobertura localizada

33
Exemplos de Desastres

• Therac-25 - Projeto
• Opções
• type x (raios X)
• feixe de alta potência (25.000 rads), placa
  metálica posicionada sob o feixe
• type e (feixe eletrônico)
• feixe de baixa potência (200 rads), placa
  metálica retraída
• type b2 (ativar feixe)

2 beam feixe, em inglês
34
Exemplos de Desastres

• Therac-25 - Uso
• type x (!!!) ltedit modegt e b
• feixe de alta potência, placa metálica retraída
• mensagem de erro Malfunction 54
• type b Malfunction 54 b Malfunction 54

35
Exemplos de Desastres

• Therac-25 - Resultado
• paciente MORREU devido à dose excessiva de
  radiação!!!

• courses.cs.vt.edu/cs3604/lib/Therac_25/Therac_1.h
  tml

36
Exemplos de Desastres

• Therac-25 Problemas
• Seqüência de entrada NUNCA testada (!!!)
• entrada de dados pelo usuário ? erro percebido ?
  erro corrigido
• Falta de clareza no retorno da informação
  (feedback)
• Malfunction 54 não significava NADA para o
  operador!

37
Exemplos de Desastres

• Aeronave A320 - Características
• Show aéreo próximo ao aeroporto Mulhouse-Habsheim
  (França Junho, 1988)
• Tour de force tecnológico

• flightdeck.ie.orst.edu/FDAI/Phase1/phase1.html
• www.gecas.com/tour_airbus320.asp

38
Exemplos de Desastres

• Ônibus Espacial A320 - Projeto
• Aeronave com tecnologia fly-by-wire
• sistema computadorizado projetado para prevenir
  erros humanos de pilotagem
• Manobras de risco da aeronave, e.g.
  aterrissagens, ascenções e mergulhos extremos.
• 5 (cinco) computadores proporcionando proteção de
  vôo
• manutenção da aeronave no curso de vôo (ao invés
  de entradas feitas pelo piloto)

39
Exemplos de Desastres

• Ônibus Espacial A320 - Uso
• estratégia de baixa altitude (100 pés, 130
  nós)
• proteção de vôo desativada, a fim de permitir
  manobra
• a 30 pés, aeronave posicionada para a subida
• retardo no acionamento das turbinas

40
Exemplos de Desastres

• Ônibus Espacial A320 - Resultado
• colisão com árvores impediu a decolagem ...
• ... a aeronave partiu-se...
• ... e explodiu ao atingir o solo...
• ... resultando na MORTE de TODOS os tripulantes e
  passageiros!!!

41
Exemplos de Desastres

• Ônibus Espacial A320 Problemas
• Piloto praticou a manobra em altitude com
  proteção de vôo ativa
• EXCESSO de confiança na proteção de vôo

42
Interface Homem-máquina

• O que É uma interface homem-máquina?
• parte do sistema que expande a autonomia do
  usuário
• agente integrador das propriedades físicas da
  interação, das funções do sistema e do equilíbrio
  entre a extensão e o controle da funcionalidade

43
Interface Homem-máquina

• O que é projeto da IHM?
• concepção de solução para problema em sistema
  interativo destinado ao uso humano, de modo a
  disponibilizá-lo para mais indivíduos
• necessidades e expectativas do usuário
• resultado da revolução industrial
• Ergonomia na Europa
• Fatores Humanos nos EUA

44
Fatores Humanos/Ergonomia

• Fatores Humanos/ Ergonomia
• Ciência aplicada relativa às características de
  indivíduos a serem consideradas no projeto e
  estruturação de artefatos por eles utilizados, de
  modo a prover uma interação mais efetiva e segura

45
Fatores Humanos/Ergonomia

• Engenharia de Fatores Humanos/ Engenharia de
  Usabilidade
• Aplicação de conhecimentos sobre características
  humanas, visando o projeto dos aspectos físicos
  dos sistemas e equipamentos ? interface com o
  usuário

46
Eng. de Fatores Humanos

• Meta
• Otimização do desempenho do sistema
• Compatibilização de processos (sistemas e
  ambientes) e atributos (usuários)
• Projeto, implementação e avaliação dos sistemas
  ou equipamentos
• Tarefas humanas requeridas para a operação,
  manutenção, controle e suporte dos sistemas ou
  equipamentos
• Ambiente de trabalho
• Atributos sensoriais, perceptivos, mentais e
  físicos dos usuários

47
Evolução

• Engenharia e Psicologia Industrial
• Operações e equipamentos
• Elevação da eficiência
• 2ª Guerra Mundial
• Segurança pessoal
• Visualização de informações em cabines de
  aeronaves (sistemas homem-máquina)
• Deficiência dos controles e visualizadores
• Indução de erros

48
Evolução

• Atualidade
• Complexidade progressiva das tecnologias
  computacionais
• Difusão mais efetiva de problemas e acidentes
  envolvendo usuários
• Three-mile Island
• Projeto mais ergonômico de artefatos em geral
  para uso humano
• Avanços da indústria de dispositivos médicos
• Hardware computacional mais amigável com o
  usuário

49
Breve Histórico

• Computador digital concebido em idéias nos
  séculos XVIII e XIX
• Tecnologia tornou-se disponível nas décadas 40 e
  50 do século XX

50
Breve Histórico
MemEx Vanevar Bush (1890-1974)

• MemEx Memory Expander (primeiros escritos
  início dos anos 30)
• As we may think
• (The Atlantic Monthly - Julho 1945)
• www.press.jhu.edu/press/books/landow/memex.html
• www.theatlantic.com/unbound/flashbks/computer/bush
  f.htm
• www.aedo-to.com/eng/inspiration/future/realizzati/
  01/ art01.html
• Concebido como sistema baseado em microfilme, não
  em computador

51
Breve Histórico
MemEx Vanevar Bush (1890-1974)

• Possibilidade de armazenamento de todos os
  registros/ artigos/ comunicações
• Capacidade elevada de memória
• Itens recuperados por indexação, palavras-chaves,
  cruzamento de referências

52
Breve Histórico
MemEx Vanevar Bush (1890-1974)
53
Breve Histórico
Sketchpad Ivan Sutherland (1938- )

• Ph.D em 1963 no MIT Laboratory
• Dispositivo de entrada Caneta óptica usada sobre
  CRT
• Possibilidade de desenho e modificação de objetos
  gráficos através de constraints
• Modelo orientado a objetos
• Funções de cópia (copy) e colagem (paste)

54
Breve Histórico
Sketchpad Ivan Sutherland (1938- )

• Funções de cópia (copy) e colagem (paste)

55
Breve Histórico
Augment/NLS Douglas Engelbart (1925- )

• Fundador do Augmentation Research Center (1963)
• Diversas contribuições para o domínio da
  interação usuário-computador mouse, NLS,
  interface gráfica com o usuário
• www.livinginternet.com/?w/wi_engelbart.htm
• www.bootstrap.org/engelbart/hist_pix/index.jsp
• www.histech.rwth-aachen.de/www/quellen/engelbart/a
  hi62index.html

56
Breve Histórico
Mouse Douglas Engelbart (1925- )
57
Breve Histórico
Augment/NLS Douglas Engelbart (1925- )

• Demonstração pública do NLS, em 1968 (90 minutos
  de vídeo)
• NLS oN Line System
• NLS foi o 2 sistema computacional conectado à
  ARPANET

58
Breve Histórico
Augment/NLS Douglas Engelbart (1925- )

• Características pioneiras do NLS
• mouse
• edição em visualizador 2D
• endereçamento e indexação de objetos in-file
• hipermídia
• processamento outline
• controle de visualização flexível
• multi-janelas
• edição cross-file

59
Breve Histórico
Augment/NLS Douglas Engelbart (1925- )

• Características pioneiras do NLS
• e-mail com hipermídia
• controle de versões de documentos
• teleconferência via tela compartilhada
• reuniões mediadas por computador
• ajuda sensível ao contexto
• arquitetura cliente-servidor distribuída
• sintaxe de comandos uniforme

60
Breve Histórico
Augment/NLS Douglas Engelbart (1925- )

• Características pioneiras do NLS
• módulo front-end de "interface com o usuário"
  universal
• interpretador de linguagem de comandos orientado
  a gramática
• protocolos para terminais virtuais
• protocolos para chamada de procedimentos remotos
• "Metalinguagem de Comandos" compilável

61
Breve Histórico
Augment/NLS Douglas Engelbart (1925- )
62
Breve Histórico
FLEX Alan Kay (1940- )

• Concepção do 1 computador pessoal (final dos
  anos 60 University of Utah) a suportar uma
  linguagem gráfica e de simulação
• www.cosc.canterbury.ac.nz/wolfgang/cosc205/
• smalltalk1.html
• FLEX FLExible EXtendable (FLEX Machine e FLEX
  Language)
• www.users.qwest.net/rvossler/vision.html
• www.mprove.de/diplom/gui/kay69.htmlIIAf

63
Breve Histórico
FLEX Alan Kay (1940- )

• Precursor do Dynabook, do Star (XEROX) e do Mac
  (Apple)
• www.ieee.org/organizations/history_center/cht_pape
  rs/
• Barnes.pdf

64
Breve Histórico
Alto XEROX PARC (1973)

• Precursor do Dynabook, do Star (XEROX) e do Mac
  (Apple)
• www.ieee.org/organizations/history_center/cht_pape
  rs/
• Barnes.pdf

65
Breve Histórico
Alto XEROX PARC (1973)

• Primeira estação de trabalho pessoal
• Primeiras iniciativas efetivas de desenvolvimento
  de
• mouse
• edição WYSIWYG
• gráficos bit-map
• Incorporação dos resultados de pesquisa de
• rede local
• impressão a laser
• todos os conceitos modernos de computação
  distribuída cliente/servidor

66
Breve Histórico
Alto XEROX PARC (1973)

• Licenciamento do mouse (1971) e do Alto (1973)
  para a XEROX
• Fato mais surpreendente
• uso por apenas um usuário (PC)
• Visualizador gráfico PB com pixels
• resolução 808 x 606 pixels

67
Breve Histórico
Alto XEROX PARC (1973)

• Interface gráfica (GUI)
• janelas controladas pelo cursor
• dispositivo de entrada mouse
• menu popup (controle de tarefas)
• Impressora a laser
• Ethernet

68
Breve Histórico
Bravo XEROX PARC (1974)

• Sistema de edição de documentos para o Alto
• Charles Simonyi Butler Lampson
• Editor de texto WYSIWYG com facilidades de
• sublinhado
• negrito
• itálico
• família de fontes
• caracteres com largura variável
• divisão de tela

69
Breve Histórico
BravoX XEROX PARC (1976-1978)

• Versão melhorada do Bravo
• Larry Tessler
• Protótipo Gypsy
• Incorporação de estilos - capacidade de controle
  da aparência de documentos
• Simonyi integrou-se à Microsoft
• desenvolvimento do MS Word

70
Breve Histórico
Star XEROX (1981)

• Projetado como sistema para automação de
  escritórios
• Computador para profissionais em organizações de
  negócios
• Meta-chave o computador invisível para o usuário
• Primeiro computador fundamentado em engenharia de
  usabilidade
• prototipagem e análise em papel
• teste de usabilidade e refinamento iterativo

71
Breve Histórico
Star XEROX (1981)

• GUI fácil de apre(E)nder
• janelas passíveis de superposição
• uso de ícones para a manipulação do sistema
  (manipulação direta)
• ícones diferentes para tipos diferentes de
  arquivos
• desvendamento progressivo

• www.thocp.net/hardware/xerox_star.htm
• www.geocities.com/SiliconValley/Office/7101/retros
  pect/

72
Breve Histórico
Star XEROX (1981)

• Arquitetura fechada

73
Breve Histórico
Star XEROX (1981)

• GUI (1)

74
Breve Histórico
Star XEROX (1981)

• GUI (2)

75
Breve Histórico
Lisa Apple (1983)

• Início do desenvolvimento em 1979 como sistema
  com interface textual
• Reprojeto como sistema gráfico similar ao Star da
  XEROX
• GUI muito similar à do Star

• http//www.pegasus3d.com/apple_screens.html

76
Breve Histórico
Lisa Apple (1983)

• Lisa 7/7
• LisaWrite - processador de texto
• 5
• LisaCalc - planilha eletrônica
• LisaGraph - editor gráfico
• LisaList - agenda
• LisaProject - gerenciador de projetos
• LisaDraw - aplicativo de desenho
• LisaTerminal - aplicativo de comunicações via
  modem

77
Breve Histórico
Lisa Apple (1983)

• GUI

78
Breve Histórico
Macintosh Apple (1984)

• Steve Jobs - líder do projeto do Macintosh
• Jef Raskin - projeto original
• Uso profundamente vinculado ao projeto físico
• GUI muito similar à do Lisa

79
Breve Histórico
Macintosh Apple (1984)

• GUI

80
Breve Histórico
Macintosh Apple (1984)

• Problema do Mac - apenas 128 kB de memória
• Aplicações bem escritas - MacWrite e MacDraw
• Mac 512k, Mac512ke e Mac Plus foram lançados para
  salvar o Mac
• Novas aplicações - Pagemaker, Word Excel

• http//www.ideafinder.com/history/inventors/jobs.h
  tm
• http//www.landsnail.com/apple/local/design/macint
  osh.html

81
Breve Histórico
Macintosh Apple (1984)

• Problema do Mac - apenas 128 kB de memória
• Aplicações bem escritas - MacWrite e MacDraw
• Mac 512k, Mac512ke e Mac Plus foram lançados para
  salvar o Mac
• Novas aplicações - Pagemaker, Word Excel

• http//www.ideafinder.com/history/inventors/jobs.h
  tm
• http//www.landsnail.com/apple/local/design/macint
  osh.html

82
Breve Histórico
Windows Microsoft (1985)
83
Exercício 01

• Realizar um estudo comparativo da família Windows
  em nível da interface com o usuário.

84
José Eustáquio Rangel de Queiroz
UNIVERSIDADE FEDERAL DE CAMPINA GRANDE
CENTRO DE CIÊNCIAS E TECNOLOGIA
DEPARTAMENTO DE SISTEMAS E COMPUTAÇÃO