IHM02

DSC/CCT/UFCG
rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br
Prof.: José Eustáquio Rangel de Queiroz
Carga Horária: 60 h
DSC/CCT/UFCG
DSC/CCT/UFCG 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?

2
DSC/CCT/UFCG
DSC/CCT/UFCG 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)
3
DSC/CCT/UFCG
 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).
4
DSC/CCT/UFCG
 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.
5
DSC/CCT/UFCG
 Problema simples de projeto:
 Faça-me uma caixa

ou seja,
 Construa-me uma caixa
6
DSC/CCT/UFCG
 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?
 …
7
DSC/CCT/UFCG
 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?
8
DSC/CCT/UFCG
 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
 ...
9
DSC/CCT/UFCG
 Evitar resultados desastrosos
 Compreensão Contextual
Usuários
Sistemas
Tarefas
Ambientes
10
DSC/CCT/UFCG
 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
11
DSC/CCT/UFCG
 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
12
DSC/CCT/UFCG
 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;
13
DSC/CCT/UFCG
 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!
14
DSC/CCT/UFCG
DSC/CCT/UFCG Exemplos de Desastres
 Desastres em IHM
 Torrey Canyon
 Soyuz 11
 Bhopal
 Therac-25
 Ônibus Espacial A320
15
DSC/CCT/UFCG
 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
16
DSC/CCT/UFCG
 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
17
DSC/CCT/UFCG
 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.
18
DSC/CCT/UFCG
 Torrey Canyon - Resultado
 31.000.000 de galões de petróleo
ATINGIRAM a Inglaterra e a França !!!
19
DSC/CCT/UFCG
 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
20
DSC/CCT/UFCG
 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
21
DSC/CCT/UFCG
 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.
22
DSC/CCT/UFCG
 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.
23
DSC/CCT/UFCG
 Soyuz 11 - Resultado
 Soyouz 11 aterrissou, MAS...
 ... os 3 cosmonautas MORRERAM !!!
24
DSC/CCT/UFCG
 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/Soyuz11Land/Soyuz11land.html
25
DSC/CCT/UFCG
 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,
Anderson Presidente da Union Carbide 26
DSC/CCT/UFCG
 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
27
DSC/CCT/UFCG
 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
28
DSC/CCT/UFCG
 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
29
DSC/CCT/UFCG
 Bhopal - Resultado
 nuvem de 40 T de isocianato de metila
 cerca de 200.000 expostos
 cerca de 2.500 MORTOS!!!
30
DSC/CCT/UFCG
 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
31
DSC/CCT/UFCG
 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
32
DSC/CCT/UFCG
 Therac-25 - Projeto
 Opções
modo FEIXE E modo RAIOS X
 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 “b”2 (ativar feixe)
2 beam – feixe, em inglês 33

DSC/CCT/UFCG
 Therac-25 - Uso
 type “x” (!!!) <edit mode> “e” “b”
 feixe de alta potência, placa metálica
retraída
 mensagem de erro: Malfunction 54

 type “b” Malfunction 54 “b” Malfunction
54 …
34
DSC/CCT/UFCG
 Therac-25 - Resultado
 paciente MORREU devido à dose
excessiva de radiação!!!
 courses.cs.vt.edu/~cs3604/lib/Therac_25/Therac_1.html
35
DSC/CCT/UFCG
 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!
36
DSC/CCT/UFCG
 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.htm
l
 www.gecas.com/tour_airbus320.asp
37
DSC/CCT/UFCG
 Ô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)
38
DSC/CCT/UFCG
 Ô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
39
DSC/CCT/UFCG
 Ô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!!!
40
DSC/CCT/UFCG
 Ô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

41
DSC/CCT/UFCG
DSC/CCT/UFCG 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
42
DSC/CCT/UFCG
DSC/CCT/UFCG Interface Homem-
 O que é projeto da IHM? máquina
 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
43
Fatores
Humanos/Ergonomia
DSC/CCT/UFCG
DSC/CCT/UFCG
 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
44
Fatores
Humanos/Ergonomia
DSC/CCT/UFCG
DSC/CCT/UFCG
 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
45
DSC/CCT/UFCG
DSC/CCT/UFCG 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
46
DSC/CCT/UFCG
DSC/CCT/UFCG 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
47
DSC/CCT/UFCG
DSC/CCT/UFCG 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
48
DSC/CCT/UFCG
DSC/CCT/UFCG 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
DSC/CCT/UFCG
MemEx Vanevar Bush (1890-1974)
 MemEx = Memory Expander (primeiros
escritos: início dos anos 30)
 As we may think
(The Atlantic Monthly - Julho 1945)
1945 M e m e x
1963 Sketchpad
 www.press.jhu.edu/press/books/landow/memex.html
1968 Augment
 www.theatlantic.com/unbound/flashbks/computer/bushf.htm
1969 FLEX
1973 Alto  www.aedo-to.com/eng/inspiration/future/realizzati/01/ art01.html
1974 B r a v o
1981 S t a r  Concebido como sistema baseado em
1983 L i s a microfilme, não em computador
1984 Mac
1985 Windows 50
DSC/CCT/UFCG
 Possibilidade de armazenamento
de todos os registros/ artigos/
comunicações
 Capacidade elevada de memória
1945 M e m e x
1963 Sketchpad
1968 Augment  Itens recuperados por indexação,
1969 FLEX palavras-chaves, cruzamento de
1973 Alto
1974 B r a v o referências
1981 Star
1983 Lisa
1984 Mac
1985 Windows 51
DSC/CCT/UFCG
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 52
DSC/CCT/UFCG
Sketchpad Ivan Sutherland (1938- )
 Ph.D em 1963 no MIT Laboratory
 Dispositivo de entrada: Caneta

óptica usada sobre CRT
1945 M e m e x
1963 Sketchpad  Possibilidade de desenho e
1968 Augment modificação de objetos gráficos
1969 FLEX
1973 Alto
através de constraints
1974 B r a v o
 Modelo orientado a objetos
1981 Star
1983 Lisa  Funções de cópia (copy) e colagem
1984 Mac
(paste)
1985 Windows 53
DSC/CCT/UFCG
Sketchpad Ivan Sutherland (1938- )
 Funções de cópia (copy) e colagem
(paste)
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 54
DSC/CCT/UFCG
Augment/NLS
Douglas Engelbart (1925- )
 Fundador do Augmentation Research
Center (1963)
 Diversas contribuições para o domínio
1945 M e m e x
1963 Sketchpad
1968 Augment da interação usuário-computador –
1969 FLEX mouse, NLS, interface gráfica com o
1973 Alto
usuário
1974 B r a v o
1981 Star  www.livinginternet.com/?w/wi_engelbart.htm
1983 Lisa  www.bootstrap.org/engelbart/hist_pix/index.jsp
1984 Mac  www.histech.rwth-

1985 Windows aachen.de/www/quellen/engelbart/ahi62index.html
55
DSC/CCT/UFCG
Mouse Douglas Engelbart (1925- )
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 56
DSC/CCT/UFCG
Augment/NLS
 Demonstração pública do NLS, em
1968 (90 minutos de vídeo)
1945 M e m e x
1963 Sketchpad
 NLS: oN Line System
1968 Augment
1969 FLEX  NLS foi o 2° sistema computacional
1973 Alto conectado à ARPANET
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 57
DSC/CCT/UFCG
Augment/NLS
 Características pioneiras do NLS:
 mouse
 edição em visualizador 2D
1945 M e m e x
1963 Sketchpad  endereçamento e indexação de objetos in-file
1968 Augment  hipermídia
1969 FLEX
 processamento outline
1973 Alto
1974 B r a v o  controle de visualização flexível
1981 Star  multi-janelas
1983 Lisa  edição cross-file
1984 Mac
1985 Windows 58
DSC/CCT/UFCG
Augment/NLS
 e-mail com hipermídia
 controle de versões de documentos
1945 M e m e x
1963 Sketchpad  teleconferência via tela compartilhada
1968 Augment
1969 FLEX  reuniões mediadas por computador
1973 Alto  ajuda sensível ao contexto
1974 B r a v o
 arquitetura cliente-servidor distribuída
1981 Star
1983 Lisa  sintaxe de comandos uniforme
1984 Mac
1985 Windows 59
DSC/CCT/UFCG
Augment/NLS
 módulo front-end de "interface com o usuário"
universal
1945 M e m e x
 interpretador de linguagem de comandos
1963 Sketchpad
orientado a gramática
1968 Augment
1969 FLEX  protocolos para terminais virtuais
1973 Alto  protocolos para chamada de procedimentos
1974 B r a v o remotos
1981 Star
 "Metalinguagem de Comandos" compilável
1983 Lisa
1984 Mac
1985 Windows 60
DSC/CCT/UFCG
Augment/NLS
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 61
DSC/CCT/UFCG
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
1945 M e m e x
1963 Sketchpad  www.cosc.canterbury.ac.nz/~wolfgang/cosc205/
1968 Augment smalltalk1.html
1969 FLEX
1973 Alto  FLEX: FLExible EXtendable (FLEX
1974 B r a v o Machine e FLEX Language)
1981 Star  www.users.qwest.net/~rvossler/vision.html
1983 Lisa
 www.mprove.de/diplom/gui/kay69.html#IIAf
1984 Mac
1985 Windows 62
DSC/CCT/UFCG
FLEX Alan Kay (1940- )
 Precursor do Dynabook, do Star
(XEROX) e do Mac (Apple)
 www.ieee.org/organizations/history_center/cht_papers/
Barnes.pdf
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 63
DSC/CCT/UFCG
Alto XEROX PARC (1973)
 Precursor do Dynabook, do Star
(XEROX) e do Mac (Apple)
 www.ieee.org/organizations/history_center/cht_papers/
Barnes.pdf
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 64
DSC/CCT/UFCG
 Primeira estação de trabalho pessoal


 Primeiras iniciativas efetivas de

desenvolvimento de:
 mouse
1945 M e m e x  edição WYSIWYG

1963 Sketchpad
 gráficos bit-map
1968 Augment
1969 FLEX  Incorporação dos resultados de
1973 Alto
1974 B r a v o
pesquisa de:
1981 Star  rede local
1983 Lisa  impressão a laser
 todos os conceitos modernos de computação
1984 Mac
distribuída cliente/servidor
1985 Windows 65
DSC/CCT/UFCG
 Licenciamento do mouse (1971) e do
Alto (1973) para a XEROX


 Fato mais surpreendente:

 uso por apenas um usuário (PC)
1945 M e m e x
1963 Sketchpad  Visualizador gráfico P&B com pixels
1968 Augment
1969 FLEX  resolução: 808 x 606 pixels
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 66
DSC/CCT/UFCG
 Interface gráfica (GUI):
 janelas controladas pelo cursor
 dispositivo de entrada: mouse
 menu popup (controle de tarefas)
 Impressora a laser
1945 M e m e x
1963 Sketchpad
1968 Augment  Ethernet
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 67
DSC/CCT/UFCG
Bravo XEROX PARC (1974)
 Sistema de edição de documentos para
o Alto
 Charles Simonyi & Butler Lampson
 Editor de texto WYSIWYG com

1945 M e m e x
1963 Sketchpad facilidades de:
1968 Augment
 sublinhado
1969 FLEX
 negrito
1973 Alto
 itálico
1974 B r a v o
 família de fontes
1981 Star
 caracteres com largura variável
1983 Lisa
 divisão de tela
1984 Mac
1985 Windows 68
DSC/CCT/UFCG
BravoX XEROX PARC (1976-1978)
 Versão melhorada do Bravo
 Larry Tessler
 Protótipo Gypsy
1945 M e m e x
1963 Sketchpad
 Incorporação de estilos - capacidade de
1968 Augment controle da aparência de documentos
1969 FLEX
1973 Alto  Simonyi integrou-se à Microsoft
1974 B r a v o  desenvolvimento do MS Word
1981 Star
1983 Lisa
1984 Mac
1985 Windows 69
DSC/CCT/UFCG
Star XEROX (1981)
 Projetado como sistema para
automação de escritórios
 Computador para profissionais em
organizações de negócios
1945 M e m e x
1963 Sketchpad  Meta-chave: o computador invisível
1968 Augment
para o usuário
1969 FLEX
1973 Alto  Primeiro computador fundamentado
1974 B r a v o
em engenharia de usabilidade
1981 Star
1983 Lisa  prototipagem e análise em papel
1984 Mac  teste de usabilidade e refinamento
1985 Windows iterativo 70
DSC/CCT/UFCG
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)
1945 M e m e x
1963 Sketchpad
 ícones diferentes para tipos diferentes de
1968 Augment
arquivos
1969 FLEX
1973 Alto  “desvendamento” progressivo
1974 B r a v o
1981 Star  www.thocp.net/hardware/xerox_star.htm
1983 Lisa  www.geocities.com/SiliconValley/Office/7101/retrospect/
1984 Mac
1985 Windows 71
DSC/CCT/UFCG
Star XEROX (1981)
 Arquitetura fechada
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 72
DSC/CCT/UFCG
Star XEROX (1981)
 GUI (1)
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 73
DSC/CCT/UFCG
Star XEROX (1981)
 GUI (2)
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 74
DSC/CCT/UFCG
Lisa Apple (1983)
 Início do desenvolvimento em 1979
como sistema com interface textual
 Reprojeto como sistema gráfico
similar ao Star da XEROX
1945 M e m e x
1963 Sketchpad  GUI muito similar à do Star
1968 Augment  http://www.pegasus3d.com/apple_screens.html
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 75
DSC/CCT/UFCG
Lisa Apple (1983)
 Lisa 7/7

55
LisaWrite - processador de texto
 LisaCalc - planilha eletrônica
 LisaGraph - editor gráfico
1945 M e m e x
1963 Sketchpad  LisaList - agenda
1968 Augment  LisaProject - gerenciador de projetos
1969 FLEX
1973 Alto  LisaDraw - aplicativo de desenho
1974 B r a v o  LisaTerminal - aplicativo de comunicações
1981 Star via modem
1983 Lisa
1984 Mac
1985 Windows 76
DSC/CCT/UFCG
Lisa Apple (1983)
 GUI
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 77
DSC/CCT/UFCG
Macintosh Apple (1984)
 Steve Jobs - líder do projeto do
Macintosh
 Jef Raskin - projeto original
 Uso profundamente vinculado ao
1945 M e m e x
1963 Sketchpad
projeto físico
1968 Augment  GUI muito similar à do Lisa
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 78
DSC/CCT/UFCG
 GUI
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 79
DSC/CCT/UFCG
 Problema do Mac - apenas 128 kB de
memória
 Aplicações bem escritas - MacWrite e
MacDraw
1945 M e m e x
1963 Sketchpad
 Mac 512k, Mac512ke e Mac Plus foram
1968 Augment
1969 FLEX lançados para “salvar” o Mac
1973 Alto
1974 B r a v o  Novas aplicações - Pagemaker, Word
1981 Star Excel
1983 Lisa  http://www.ideafinder.com/history/inventors/jobs.htm
1984 Mac  http://www.landsnail.com/apple/local/design/macintosh.html
1985 Windows 80
DSC/CCT/UFCG
 Problema do Mac - apenas 128 kB de
memória
 Aplicações bem escritas - MacWrite e
MacDraw
1945 M e m e x
1963 Sketchpad
 Mac 512k, Mac512ke e Mac Plus foram
1968 Augment
1969 FLEX lançados para “salvar” o Mac
1973 Alto
1974 B r a v o  Novas aplicações - Pagemaker, Word
1981 Star Excel
1983 Lisa  http://www.ideafinder.com/history/inventors/jobs.htm
1984 Mac  http://www.landsnail.com/apple/local/design/macintosh.html
1985 Windows 81
DSC/CCT/UFCG
Windows Microsoft (1985)
Descendente do DOS, Descendente do
Windows 1.0 – 3.11 e Windows 9x Windows NT
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 82
DSC/CCT/UFCG
DSC/CCT/UFCG Exercício 01
 Realizar um estudo comparativo
da família Windows em nível da
interface com o usuário.
1945 M e m e x
1963 Sketchpad
1968 Augment
1969 FLEX
1973 Alto
1974 B r a v o
1981 Star
1983 Lisa
1984 Mac
1985 Windows 83
DSC/CCT/UFCG
José Eustáquio Rangel de Queiroz
UNIVERSIDADE FEDERAL DE CAMPINA GRANDE

CENTRO DE CIÊNCIAS E TECNOLOGIA
DEPARTAMENTO DE SISTEMAS E COMPUTAÇÃO

IHM02

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

IHM02

Enviado por

Direitos autorais:

Formatos disponíveis

DSC/CCT/UFCG

Prof.: José Eustáquio Rangel de Queiroz

 Por que este curso é importante?

 Quanto este curso exige do estudante?

 Há de fato problemas relevantes a serem

 O que é projeto em IHM ?

 Por que avaliar uma interface é importante?

 IHM transcende o projeto de interfaces para

 Sociologia e Anthropologia (interações entre

 Técnicas e Ferramentas de Implementação

 Faça-me uma caixa

 Construa-me uma caixa

 Para que a caixa será usada?

 Qual o artefato que está sendo atualmente usado

 Quão importante é que a caixa:

 Para que o sistema será usado?

 Qual o sistema que existe atualmente?

 Projeto e implementação de sistemas

 NÃO se deve ao dispêndio de tempo

 Há diversos aspectos de naturezas distintas a

 Projeto de interfaces NÃO é projeto gráfico!

 Canal com 6 milhas de largura

 (…) Tripulação experiente e navio

 controle (posição distante)

 Retorno (feedback) audível (clique para grau

 clique audível sinalizando mudança de

espaçonave altamente automatizada

 Foguetes de orientação manteriam o curso;

 Válvula de equalização da pressão abriu-se,

Como v. testaria tal sistema?

identical to those in India or Brazil or some

 sistema de lavagem de gases

posicionada sob o feixe

 type “b”2 (ativar feixe)

2 beam – feixe, em inglês 33

 mensagem de erro: Malfunction 54

 Falta de clareza no retorno da informação

aterrissagens, ascenções e mergulhos extremos.

 EXCESSO de confiança na proteção de vôo

 parte do sistema que expande a autonomia do

interação, das funções do sistema e do

 necessidades e expectativas do usuário

 Fatores Humanos/ Ergonomia

 Ciência aplicada relativa às características de

modo a prover uma interação mais efetiva e

 Engenharia de Fatores Humanos/ Engenharia

dos sistemas e equipamentos  interface com o

 Tecnologia tornou-se disponível nas décadas

 Dispositivo de entrada: Caneta

1983 Lisa  www.bootstrap.org/engelbart/hist_pix/index.jsp

1984 Mac  www.histech.rwth-

 Primeiras iniciativas efetivas de

1945 M e m e x  edição WYSIWYG

 Fato mais surpreendente:

 Editor de texto WYSIWYG com

 GUI fácil de apre(E)nder

José Eustáquio Rangel de Queiroz

UNIVERSIDADE FEDERAL DE CAMPINA GRANDE

Você também pode gostar