Aula 1. Introdução: Interface Homem-Máquina

Apresentação da disciplina
Motivação, Objetivos
Metodologia de ensino
Introdução e conceituação de IHM
Histórico e evolução
Problemas em IHM

1. IHM
A
IHM Interface Humano-Máquina Prof. Dra. Sílvia Dotta
Aula 1 -Introdução

2. Roteirodaaula •Apresentação da disciplina
•Motivação, Objetivos
•Metodologia de ensino
•Introdução e conceituação de IHM
•Histórico e evolução
•
Problemas em IHM
•
Problemas em IHM
CRÉDITOS T P I: 4-0-4

3. Motivação
• Como conceber interfaces que atendam
satisfatoriamente a critérios de funcionalidade,
usabilidade e acessibilidade? Como o computador
deve “interagir” com humanos?

4. cédula vs. urna eletrônica
•
Como votar no José da Silva
para vereador?
•
Como saber se o número é do
candidato desejado?
•
Como votar em branco?
•
Como votar nulo?
•
Em que ordem votar?
Eleições de 1982 – fonte TRE

5. •
Permitir ao aluno a percepção, avaliação e concepçã o
de interfaces que se aproximem cada vez mais das
necessidades dos usuários em relação não apenas a
critérios de
FUNCIONALIDADE
(conjunto de tarefas
desempenhadas pelo sistema) mas principalmente em
relação à
ObjetivosdaDisciplina
•
USABILIDADE
(maneira como os usuários devem
proceder para tirar proveito da funcionalidade do
sistema, ou seja facilitar o uso e melhorar a inte ração
com o usuário)

6. •
Conceituação (interface, interação, fatores humanos )
•
Histórico –evolução dos tipos de interfaces
•
Fatores Humanos (cognição, percepção, ergonomia)
•
Fatores Tecnológicos (design, padrões para interfac es)
•
Engenharia de Usabilidade, Acessibilidade
•
Guidelines, guias de estilo e padrões para interfac es. IHM -ProgramadaDisciplina
•
Guidelines, guias de estilo e padrões para interfac es.
•
Métodos e Técnicas de Design de Interfaces
•
Processo de desenvolvimento
•
Avaliação de Interfaces e Testes de Usabilidade

7. •BENYON, Deavid. Interação Humano-computador. São Paulo, Pearson, 2011.
•PREECE, ROGERS & SHARP, Design de Interação -Além da interação homem-
computador, Ed Bookman, 2005
•NIELSEN, Jakob, Projetando Websites , Editora:Campu s, 2000
•SHNEIDERMAN, Ben; PLAISANT, C., Designing The User I nterface -Strategies
For Effective Human
-
Computer Interaction, Editora: Addison Wesley, 2009 .
IHM -Bibliografia
For Effective Human
-
Computer Interaction, Editora: Addison Wesley, 2009 .
•ROCHA, H. V.; BARANAUSKAS, M.C. , Design e Avaliação de Interfaces
Humano-Computador. Campinas: NIED/ UNICAMP, 2003

8. •
Exposição em aula
•
Atividades práticas
•
Projeto de interfaces
•
Desenvolvimento de artigos
•
Apresentação de seminários IHM -Metodologia
•
Apresentação de seminários
Recursosdidáticos
•
Disponibilização de roteiros de aula em CONVERGÊNCI A –
Grupo IHC •
Entrega de atividades em CONVERGÊNCIA e Tidia

9. Avaliação
Créditos
: IHM Interface Humano-Máquina -MC7104
T-Teoria: 4,
•
I-Atividadesextra-classe: 4
•
As 4 horasde
atividadesextra-classe
sãoseriamente
consideradas.
Nota
:
Nota
:
Atividadessemanaisindividuaisouemgrupo: 50%
Artigofinal individual: 50%
Frequência:mínimo75%

10. Alguns temas para artigo
Definir tema do artigo até próximo encontro (quarta -feira, 21/9) •
IHC in-car(dispositivos para automóveis: GPS, playe rs etc.)
•
IHC em dispositivos móveis
•
IHC em redes sociais
•
IHC em ambientes colaborativos
•
IHC em realidade virtual
•
Conceitos e técnicas para desenvolvimento de interf aces adaptativas
•
IHC em ambientes de aprendizagem
•
IHC em games e games sociais
•
IHC para um ambiente de vídeos on-line
Atividade para a próxima aula Compartilhar em LINKS (http://convergencia.grou.ps) pelos menos três
artigos sobre o tema que você pensa em fazer seu ar tigo.

11. convergencia.grou.ps
•
É uma mídia social utilizada como ambiente virtual de
aprendizagem em nossa disciplina
•
Todos os conteúdos estão publicados em Convergência.
•
Atividades serão realizadas em Convergência.
•
Para enviar atividades você precisa ser membro de
•
Para enviar atividades você precisa ser membro de Convergência.
•
Convergência é uma mídia social pública
•
Há um grupo (IHC) fechado no qual somente participam o s
estudantes da disciplina.

12. INTRODUÇÃO

13. Definição
•
Interface: •
Genérica
:
•
Lugar onde o contato entre duas entidades ocorre •
Ex.: maçanetas de portas, torneiras, direção de um carro, etc.
•
É uma superfície de contato que reflete as propried ades
13
•
É uma superfície de contato que reflete as propried ades físicas das partes que interagem, as funções a sere m
executadas e o balanço entre poder e controle (Laur el, 1993)
•
Informática:
•
Parte do sistema computacional com o qual o usuário entra
em contato físico e perceptivo (Moran, 1981); •
É o conjunto de comandos de controle do usuário + r espostas
do computador, constituídos por sinais (gráficos, a cústicos e
táteis) –tela do computador por exemplo;

14. Importância
•
Tem sido dada uma importância cada vez maior à interface de
aplicações computacionais;
•
Fatores de satisfação subjetiva, de eficiência, de segur ança, de custo de treinamento, de retorno de investimento, todo s,
14
custo de treinamento, de retorno de investimento, todo s, dependem de um bomdesignde interface;

15. Importância
•
Razões que justificam o investimento em Interfaces
•
Satisfação do usuário
(lealdade)
•
Vantagem competitiva
(usabilidade)
•
Minimização de custos posteriores
(redução dos custos e tempo
de treinamento dos usuários e custos de manutenção)
15

16. Importância
•
Competitividade •
O fator que acaba "desempatando" dois produtos
semelhantes passa a ser, muitas vezes, a interface e n ão a
análise das qualidades de desempenho do software
•
Em termos comerciais uma boa interface parece ser cada vez mais decisiva na boa colocação de um software no mer cado.
16
mais decisiva na boa colocação de um software no mer cado.
•
Se os produtos são semelhantes e vendidos por preço s
também semelhantes, compra-se aquele que vem em uma
"embalagem" mais agradável.
•
Informática como instrumento de inclusão social •
Usuários com necessidades especiais;
•
Dispositivos de I/O não convencionais •
Realidade Virtual

17. Contexto
•
No contexto de IHC (Interação Humano-Computador) de ve ser
considerado quatro elementos básicos:
•
o sistema (software em si);
•
os usuários;
•
os desenvolvedores do sistemae;
17
•
o ambiente em uso(domínio da aplicação)

18. Quem são os usuários?
•
Trazem consigo experiências passadas;
•
Têm concepção daquilo que o computador
pode fazer (modelos mentais);
•
Se ele não sabe muito a respeito de um
18
•
Se ele não sabe muito a respeito de um objeto ou tarefa, irá associar com algo que
já é de seu conhecimento;

19. Quem são os usuários?
•
São impacientes;
•
Odeiam erros;
•
Têm necessidades diferentes em função da sua experiência (diferentes perfis).
19
da sua experiência (diferentes perfis).

20. Definições
•
Interface Humano-Computador: •
Interface é o componente (software) responsável por
mapear ações do usuário em solicitações de
processamento ao sistema (aplicação), bem como
20
processamento ao sistema (aplicação), bem como apresentar os resultados produzidos pelo sistema.
•
A Interface é um componente essencial no contexto dos
sistemas interativos, sendo fator determinante para o
sucesso ou fracasso do projeto de um sistema
•
Não se pode pensar em interfaces sem considerar o ser
humano que vai usá-la.

21. Definições
•
Interação Humano-Computador (IHC)
:
•
É a disciplina preocupada com o design
, avaliação
e
implementação
de sistemas computacionais interativos para uso
humano e com o estudo dos principais fenômenos ao r edor
21
humano e com o estudo dos principais fenômenos ao r edor deles.
•
Área de aplicação: aspectos humanos •
Processamento de informação humano
•
Linguagem, comunicação e interação
•
Ergonomia

22. Definições
•
Área de aplicação: aspectos computacionais (sistema e interface) •
Dispositivos de entrada e saída
•
Técnicas e formas de diálogo
•
Computação gráfica
22
•
Computação gráfica
•
Arquiteturas para diálogo

23. Objetivos
•
Produzir sistemas fáceis de utilizar, seguros e funcionais;
•
Nesse contexto, o termo sistemas não se refere some nte ao
hardware e software mas todo o ambiente que usa ou é afetado
pelo uso da tecnologia computacional;
•
Pessoas não devem ter que mudar radicalmente para se adequar ao sistema, o sistema é que deve ser projetad o para
23
adequar ao sistema, o sistema é que deve ser projetad o para se adequar a seus usuários;

24. Objetivos
•
Enfatizar a importância de métodos e técnicas centrados no
usuário para incrementar a utilização de interfaces
computadorizadas;
•
Explicitar os componentes da interface e apresentar dire trizes
para o projeto de interfaces que facilitem a interação h omem-
computador;
24
computador;
•
Testar a facilidade de uso de aplicações computacionais,
relatar os problemas encontrados e apresentar possíveis
soluções.

25. Desafios
•
Como dar conta da rápida evolução tecnológica?
•
Equilibrar conforto e facilidades de uso com desempenho d a
aplicação (tolerância a erros controlada);
•
Como garantir que os projetistas ofereçam boas interfa ces ao mesmo tempo que exploram o potencial e funcionalidades da
25
mesmo tempo que exploram o potencial e funcionalidades da nova tecnologia?
•
Ex: Celulares (Os serviços e funcionalidades, hoje, vão muito além
de simples conversação ou armazenamento de nomes na
agenda).

26. Desafios
•
Aumentar a funcionalidade não pode ser desculpa para um
design mais pobre;
•
É possível projetar boas interfaces mesmo que a qua ntidade de
funções seja relativamente grande, desde que exista m bons
mecanismos de feedback;
26

27. AspectosMultidisciplinares de IHC
•
Ciência da Computação •
Prover o conhecimento sobre as possibilidades da
tecnologia e oferecer mecanismos sobre como
explorar todo seu potencial;
•
Psicologia
27
•
Entender o comportamento humano e os processos
mentais subjacentes;
•
Fatores Humanos ou Ergonomia •
Conceber e fazer o design de diversas ferramentas e
artefatos para diferentes ambientes de trabalho,
adequados às capacidades e necessidades dos
usuários;

28. AspectosMultidisciplinares de IHC
•
Linguística •
Estudar cientificamente a linguagem;
•
Explorar a estrutura da linguagem natural na
concepção de interfaces (uso mais tradicional);
•
Contribuir na concepção de linguagens de
28
•
Contribuir na concepção de linguagens de programação mais fáceis de serem aprendidas (Ex.
Linguagem Logo);
•
Contribuir na Internacionalização de Interfaces
(preocupação em isolar os fatores culturais de um
produto de outros que podem ser considerados
genéricos culturalmente).

29. AspectosMultidisciplinares de IHC
•
Sociologia •
Preocupa-se com o impacto dos sistemas interativos
na estrutura da sociedade, ou seja, o impacto socia l e
as mudanças na forma de trabalhar de uma
organização ocasionados pelo avanço
tecnológico
.
29
organização ocasionados pelo avanço
tecnológico
.
•
Design Gráfico •
Habilidade estética dessa área é importante na medi da
que a apresentação da interface torna-se "bonita" a os
olhos dos usuários, trazendo satisfação.

30. Evolução das Interfaces
Barbosa
e Silva
2010
30

31. Anos 40
•
Tecnologias de Hardware
•
Mecânica e Eletromecânica;
•
Sem retorno visual.
•
Modo de Operação •
Usado somente para cálculo.
•
Programação
31
•
Programação •
Movimento de cabos e chaves.
•
Usuários •
Os próprios inventores.
•
Paradigma de Interface com usuário: •
Nenhum.

32. Anos 40
Barbosa
e Silva
2010
32
ENIAC

33. Anos 50 e 60
•
Tecnologias de Hardware
•
Válvulas e Transistores;
•
Uso de painéis como retorno visual.
•
Modo de Operação
•
Um usuário por vez utiliza a máquina.
•
Programação
33
•
Programação
•
Linguagem de Máquina e Assembler.
•
Usuários
•
Pioneiros e Profissionais de Computação.
•
Paradigma de Interface com usuário:
•
Programação em batch.

34. Anos 50 e 60
Barbosa
e Silva
2010
34
Painel de Controle Strech

35. Anos 60 a 80
•
Tecnologias de Hardware •
Circuito Integrado;
•
Monitores monocromáticos.
•
Modo de Operação •
Time
Sharing
.
35
•
Time
Sharing
.
•
Programação •
Linguagens de Alto Nível (científicas).
•
Usuários •
Surgem os “primeiros” usuários utilizando o computador
para atividades repetitivas, sem poder de criação.
•
Paradigma de Interface com usuário: •
Menus hierárquicos e preenchimentos de formulários em
tela.

36. Anos 60 a 80
Invenção do Mouse
Barbosa
e Silva
2010
36
Terminais Monocromáticos

37. Anos 80
•
Tecnologias de Hardware
•
VLSI –Nova geração de circuitos integrados;
•
Monitores coloridos tornam a interface mais agradáv el.
•
Modo de Operação
•
Computador pessoal para um usuário único .
•
Programação
37
•
Programação
•
Linguagens orientadas a problemas;
•
Surgimento de Ferramentas para construção de Interf aces.
•
Usuários
•
Todos os tipos de profissionais começam a ter acess o aos
computadores.
•
Paradigma de Interface com usuário
:
•
Surgem as primeiras interfaces gráficas ( GUIs):
•
WIMP (Windows, Icons, Menus e Pointers);
•
Manipulação Direta: WIMP + uso de metáforas. Ex: ar rastar arquivos
para lixeira.

38. Anos 80
Barbosa
e Silva
2010
38
Geração Windows

39. Anos 90
•
Tecnologias de Hardware
•
Diversas tecnologias: computadores portáteis, redes de
computadores, telas sensíveis ao toque, palms, etc.
•
Modo de Operação
•
Usuários conectados a redes, sistemas distribuídos.
•
Programação
39
•
Programação
•
Linguagens orientadas a objetos.
•
Usuários •
Todas as pessoas (popularização do computadores).
•
Paradigma de Interface com usuário
:
•
Andeersen(1993 -Netscape): Cria o primeiro navegador com
interface em modo gráfico, surgem as interfaces WUI (Web User
Interface);
•
GUI (Desenvolvimento das Interfaces Gráficas) em várias
plataformas: Windows, Unix, Dispositivos portáteis, celulares,
interfaces baseadas em voz, etc.

40. Anos 90
Geração Realidade Virtual,
Notebooks, Palmtops e Celulares
Barbosa
e Silva
2010
40

41. Gerações de Interfaces
•
Primeira geração
:
•
Comandos e interfaces de perguntas ( query interfaces).
•
A comunicação é puramente textual e é feita via com andos e
respostas às perguntas geradas pelo sistema.
•
Exemplos: Unix, MS-DOS e SO dos Mainframes.
41

42. Gerações de Interfaces
•
Segunda geração
:
•
Menu simples.
•
Uma lista de opções é apresentada ao usuário e a de cisão
apropriada é selecionada via algum código digitado.
42

43. Gerações de Interfaces
•
Terceira geração
:
•
Orientada a janela, interfaces de apontar e apanhar (point and
pick interfaces).
•
Conhecidas como interfaces WIMP (Windows,
•
Icons, Menus, and Pointing devices) + Manipulação Direta.
43
•
Trazem o conceito de mesa de trabalho ( desktop).

44. Gerações de Interfaces
•
Quarta geração
:
•
Hipertexto e multitarefa (GUI + WUI).
•
Esta geração (geração corrente), soma aos atributos das
interfaces de terceira geração, as técnicas de hipe rtexto e
multitarefa.
•
A quarta geração das interfaces está disponível na maioria das
44
•
A quarta geração das interfaces está disponível na maioria das estações de trabalho e dos computadores pessoais at uais.
•
Utilização da alta tecnologia para usar metáforas

45. Tipos de Interface Homem-Computador •
CUI (Character-based User Interface): •
Textos e caracteres alfanuméricos, fazendo uso da met áfora
de uma máquina de escrever ou de um teletipo;
•
GUI (Graphical User Interface): •
Gráficos e desenhos, fazendo uso de metáforas de mes as
de trabalho, documentos, botões, janelas, etc.
•
WUI (Web User Interface): •
Usadas na Web (navegadores).
45
•
Usadas na Web (navegadores).
•
PUI (Pen-based User Interface) / (Perceptual): •
Compostas de um monitor de vídeo em formato de uma
planilha ou bloco de anotações que recebe dados através
de uma espécie de caneta eletrônica ou o próprio dedo. •
VRUI (Virtual Reality-based User Interface): •
Fundamentadas no paradigma da realidade virtual e
utilizadas com muito menor freqüência que as anteriores
por limitação de custos e tecnologia.

46. Para próxima aula
Atividade individual:
Preparação para o artigo final :
Compartilhar na seção LINKS de convergencia.grou.ps, t rês
artigos que tratem sobre o tema escolhido para seu art igo
final.
Atividade em grupo:
Projeto de interface
Organização dos grupos: 3 integrantes, definir líder, env iar por e-
mail nomes completos,
RAs
, e
-
mails e o tema do grupo
mail nomes completos,
RAs
, e
-
mails e o tema do grupo
Selecionar um sistema (desktop ou web) para desenvolver (ou
melhorar) projeto de interface
Analisar três sistemas similares: pontos negativos e positiv os das
interfaces.
Entregar texto (formatado ABNT) na Digiteca(Convergên cia).
Comunicar envio do arquivo pelo mural do grupo IHC
(Convergência)