Post on 07-Apr-2016
rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Prof.: José Eustáquio Rangel de QueirozJosé Eustáquio Rangel de Queiroz
Carga Horária: 60 h60 h
2rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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?
3rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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)
Visão Geral
4rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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).
Visão Geral
5rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Visão GeralEixos-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.
6rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Visão Geral Problema simples de projeto:
Faça-me uma caixa
ou seja, Construa-me uma caixa
7rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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? …
8rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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?
9rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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 ...
10rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Evitar resultados desastrosos Compreensão Contextual
Visão Geral
Tarefas
Usuários
Sistemas
Ambientes
11rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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
12rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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
13rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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;
14rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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!
15rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Exemplos de Desastres Desastres em IHM
Torrey Canyon Soyuz 11 Bhopal Therac-25 Ônibus Espacial A320
16rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
17rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
18rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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.
Exemplos de Desastres
19rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Torrey Canyon - Resultado 31.000.000 de galões de petróleo
ATINGIRAM a Inglaterra e a França !!!
Exemplos de Desastres
20rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
21rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
22rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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.
Exemplos de Desastres
23rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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.
Exemplos de Desastres
24rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Soyuz 11 - Resultado Soyouz 11 aterrissou, MAS... ... os 3 cosmonautas MORRERAM !!!
Exemplos de Desastres
25rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
26rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
11 Warren AndersonWarren Anderson, Presidente da Union Carbide
Exemplos de Desastres
27rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
28rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
29rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
30rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Bhopal - Resultado nuvem de 40 T de isocianato de metila cerca de 200.000 expostos cerca de 2.500 MORTOS!!!
Exemplos de Desastres
31rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Bhopal - Problemas NENHUM treinamento em procedimentos de
emergência Apresentação de ESTADOS, não de
MUDANÇAS DE ESTADO
Exemplos de Desastres
gurukul.ucc.american.edu/ted/BHOPAL.HTM
32rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
33rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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 “b”2 (ativar feixe)
2 bbeam – feixe, em inglês
Exemplos de Desastres
modo RAIOS X modo FEIXE E
34rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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 …
Exemplos de Desastres
35rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Therac-25 - Resultado paciente MORREU devido à dose
excessiva de radiação!!!
Exemplos de Desastres
courses.cs.vt.edu/~cs3604/lib/Therac_25/Therac_1.html
36rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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!
Exemplos de Desastres
37rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
flightdeck.ie.orst.edu/FDAI/Phase1/phase1.html
www.gecas.com/tour_airbus320.asp
38rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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)
Exemplos de Desastres
39rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
40rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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!!!
Exemplos de Desastres
41rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
Exemplos de Desastres
42rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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
Interface Homem-máquina
43rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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
Interface Homem-máquina
44rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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
45rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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
46rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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
Eng. de Fatores Humanos
47rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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
Evolução
48rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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
Evolução
rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
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
50rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
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/bushf.htm
www.aedo-to.com/eng/inspiration/future/realizzati/01/ art01.html
Concebido como sistema baseado em microfilme, não em computador
MemEx Vanevar Bush (1890-1974)
51rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
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
52rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve HistóricoMemEx Vanevar Bush (1890-1974)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
53rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico 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)
Sketchpad Ivan Sutherland (1938- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
54rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico Funções de cópia (copy) e colagem
(paste)
Sketchpad Ivan Sutherland (1938- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
55rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico
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/ahi62index.html
Augment/NLSDouglas Engelbart (1925- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
56rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve HistóricoMouse Douglas Engelbart (1925- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
57rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
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
Breve HistóricoAugment/NLS
Douglas Engelbart (1925- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
58rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve HistóricoAugment/NLS
Douglas Engelbart (1925- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
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
59rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve HistóricoAugment/NLS
Douglas Engelbart (1925- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
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
60rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve HistóricoAugment/NLS
Douglas Engelbart (1925- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
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
61rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve HistóricoAugment/NLS
Douglas Engelbart (1925- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
62rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico 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.html#IIAf
FLEX Alan Kay (1940- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
63rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico Precursor do Dynabook, do Star
(XEROX) e do Mac (Apple)
www.ieee.org/organizations/history_center/cht_papers/Barnes.pdf
FLEX Alan Kay (1940- )
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
64rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico Precursor do Dynabook, do Star
(XEROX) e do Mac (Apple)
www.ieee.org/organizations/history_center/cht_papers/Barnes.pdf
Alto XEROX PARC (1973)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
65rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico 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
Alto XEROX PARC (1973)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
66rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico Licenciamento do mouse (1971) e do
Alto (1973) para a XEROX
Fato mais surpreendente: uso por apenas um usuário (PC)
Visualizador gráfico P&B com pixels resolução: 808 x 606 pixels
Alto XEROX PARC (1973)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
67rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico Interface gráfica (GUI):
janelas controladas pelo cursor dispositivo de entrada: mouse menu popup (controle de tarefas)
Impressora a laser Ethernet
Alto XEROX PARC (1973)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
68rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico 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
Bravo XEROX PARC (1974)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
69rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico 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
BravoX XEROX PARC (1976-1978)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
70rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico 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
Star XEROX (1981)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
71rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico
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
Star XEROX (1981)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
www.thocp.net/hardware/xerox_star.htm www.geocities.com/SiliconValley/Office/7101/retrospect/
72rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve HistóricoStar XEROX (1981)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
Arquitetura fechada
73rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico GUI (1)
Star XEROX (1981)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
74rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico GUI (2)Star XEROX (1981)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
75rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico 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
Lisa Apple (1983)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
http://www.pegasus3d.com/apple_screens.html
76rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico Lisa 7/7
LisaWrite - processador de texto5
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
Lisa Apple (1983)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
77rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve HistóricoLisa Apple (1983)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
GUI
78rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico Steve Jobs - líder do projeto do
Macintosh Jef Raskin - projeto original Uso profundamente vinculado ao
projeto físico GUI muito similar à do Lisa
Macintosh Apple (1984)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
79rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
GUIMacintosh Apple (1984)
80rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico 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
Macintosh Apple (1984)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
http://www.ideafinder.com/history/inventors/jobs.htm http://www.landsnail.com/apple/local/design/macintosh.html
81rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve Histórico 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
Macintosh Apple (1984)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
http://www.ideafinder.com/history/inventors/jobs.htm http://www.landsnail.com/apple/local/design/macintosh.html
82rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Breve HistóricoWindows
Microsoft (1985)
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
Descendente do DOS,Windows 1.0 – 3.11 e Windows 9x
Descendente doWindows NT
Descendente do DOS,Windows 1.0 – 3.11 e Windows 9x
Descendente doWindows NT
83rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
Exercício 01
1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows
Realizar um estudo comparativo da família Windows em nível da interface com o usuário.
rang
el@
dsc.
ufpb
.br
ran
gel@
lmrs
-sem
arh.
ufpb
.br
DSC/CCT/UFCG
José Eustáquio Rangel de Queiroz
DEPARTAMENTO DE SISTEMAS E COMPUTAÇÃO
UNIVERSIDADE FEDERAL DE CAMPINA GRANDECENTRO DE CIÊNCIAS E TECNOLOGIA