Interação Humano-Computador

(IHC)
Professora: Erica Alves
Fevereiro 2011.
Objetivos
• Entender como as interfaces afetam os seus
usuários (positiva ou negativamente): sobre os
indivíduos, as tarefas, sobre as organizações e
sobre a sociedade. Despertar os alunos para
considerar IHC no processo de desenvolvimento
dos sistemas e a identificar problemas em uma
interface.
Alguns temas a serem abordados
 Conceitos básicos: Interação e Interface, Design de interação, Usabilidade e
Acessibilidade.
 A evolução de interfaces, desafios de IHC, objetivos e princípios de design.
 Aspectos sobre psicologia humana em IHC, a Memória Humana, seus tipos e
características.
 Aspectos Multidisciplinares envolvidos em IHC.
 Interfaces adaptativas. Interfaces 3D. Avanços Tecnológicos. Auxilio na realização
do trabalho.
 Modelos de Desenvolvimento de Interfaces (Clássico, Centrado no Usuário,
Orientado a Usabilidade).
 Avaliação heurística (10 heurísticas de Nielsen), inspeção cognitiva, checklists,
diferentes plataformas.
 Metodologia de desenvolvimento de Interfaces. Análise de Contexto (Público Alvo,
Tarefas, Ambiente e Restrições Tecnológicas).
 Metodologia de desenvolvimento de Interfaces. Projeto da Interface, Prototipação,
Implementação.
 Avaliação de usabilidade de sites web e a usabilidade para interfaces Web.
 Fatores Estratégicos e Táticos do Desenvolvimento de interfaces para web.
 O futuro (im) perfeito das novas tecnologias se configura pelas
incertezas
da existência ou não desta sociedade de informação e pelas
desigualdades
culturais e econômicas cada vez mais impostas àqueles que vivem à
margem da sociedade, os “sem tecnologia”... As tecnologias de
comunicação e informação são inúteis se elas não possuem um
caráter
social – social na produção e no consumo. Se estas tecnologias vão se
tornar
artérias e entranhas da sociedade do futuro, então é preciso encontrar
políticas públicas e caminhos criativos para intervir no mercado para
termos certeza de que os tradicionais níveis de desvantagens não
sejam ampliados.

Guedes e Paula, 1999

Conteúdo programático
▫ Princípios Básicos da Interação Homem-Computador:
• Definições de Interface;
• Por que estudar Interfaces;
• Quem são os Usuários;
• Interface Humano-Computador;
• Problemas encontrados com interfaces;
• A evolução das Interfaces;
• Estilos de Interação;
• Objetivos e propostas de interação;
• IHC na Engenharia de Software;
• Tecnologias de interfaces de usuário
• Tipos de Interface
• Fundamentos Teóricos em IHC:
• Fundamentos da Psicologia da
Interação Humano-Computador;
• Processamento de Informação
Humano;
• Mecanismos da Percepção Humana;
• Modelos da Memória Humana;
• Modelos Mentais;
• Interdisciplinaridade;
• Engenharia Cognitiva;
• Engenharia Semiótica;
• Engenharia de Usabilidade;
• Conceitos de Usabilidade
• Ergonomia de Software: Conceitos de Ergonomia;
Vantagens e Desvantagens;
• Recomendações Ergonômicas no Projeto de
Interfaces;
• Design de Interfaces
• Definições
• Modelos de design de interface
Projeto de Interfaces:
• Fontes;
• Formatação de Texto;
• Efeitos Visuais;
• Uso de Cores;
• Projeto de Telas;
• Componentes Visuais Interativos (Widgets).
• • Gerência de Erros;
• Imagens;
Projeto de Websites:
• Arte X Engenharia;
• Engenharia de Sistemas Web;
• Problemas comuns em Sistemas Web;
• Usabilidade;
• Terminologias da Web;
• Usabilidade na Web;
• Recomendações no Projeto de Páginas Web;
• Recomendações de Conteúdo na Web;
• Recomendações no Projeto de Websites;
• Problemas de Usabilidade: Estudos de Caso.
Avaliação de Interfaces:
• Testes de usabilidade;
• Testes de Comunicabilidade;
• Testes de Ergonomia;
• Testes de Usabilidade x Comunicabilidade;
• Prototipação.
• Tempo de Resposta
• Fundamentos teóricos
• Padrões ISO
• Expectativas e atitudes
• Produtividade do usuário
• Variabilidade
• Perspectivas das Interfaces Homem-Máquina
Bibliografia

• Bibliografia Básica:
ROCHA, H. V.; BARANAUSKAS, M. Design e Avaliação de Interfaces Humano-
Computador. Campinas: Editora: NIED/UNICAMP, 2003. v. 1.
• Bibliografia Complementar:
OLIVEIRA-NETTO, A. A. Interação Humano Computador: modelagem e gerência de
interfaces com o usuário. Florianópolis: VisualBooks, 2004.
NIELSEN, J. Projetando Web sites. São Paulo: Ed. Campus, 2000.
NORMAN, D. A; DRAPER, S. W. User Centered System Design. Hillsdale, NJ:
Lawrence Erlbaum, 1986.
PREECE, J.; ROGERS, Y.; SHARP, H. Human-computer interaction. Harlow:
Addison-Wesley, 1994.
SHNEIDERMAN, B. Designing the User Interface: Strategies for Efective Human-
Computer Interaction. 4. ed. Editora. Readings, MA: Addison-Wesley, 2003.
DIAS, C. Usabilidade na Web - Criando Portais Mais Acessíveis. Rio de Janeiro:
AltaBooks, 2003.
Conceitos gerais de IHC
Problemas Comuns no Desenvolvimento
de Sistemas
foco no sistema (versus foco no usuário)
desprezo pela interface
impacto da introdução de novas tecnologias
desprezado
base teórica dos desenvolvedores fraca ou
inexistente
design de software desconsiderado
processo de desenvolvimento inadequado
ferramentas inadequadas
interação usuário-sistema não avaliada
O que é IHC?
• Interação Humano-Computador (IHC): área de estudo que está na
interseção das ciências da computação e informação e ciências
sociais e comportamentais e envolve todos os aspectos relacionados
com a interação entre usuários e sistemas.

• A interação humano-computador estuda tanto os fatores

computacionais quanto os fatores humanos e surgiu como um
campo autônomo de estudo na interseção das áreas de:
 computação gráfica,
 sistemas operacionais,
 fatores humanos,
 ergonomia,
 engenharia industrial,
 psicologia cognitiva.
O que é IHM?

 É o canal de comunicação entre o homem e o

computador, através do qual interagem, visando
atingir um objetivo comum.

 É o conjunto de comandos de controle do

usuário + respostas do computador,
constituídos por sinais (gráficos, acústicos e
tácteis)
O que é IHM?
• É parte de um sistema computacional com a qual uma
pessoa entra em contato física, perceptual e
conceitualmente. [Moran, 1981]

Sistema

ação
Usuário Interface Aplicação
interpretação
Por que estudar Interfaces?
1-) Porque é necessário estabelecer um bom nível de
conversação entre o usuário e o sistema computacional

CONFORTO DESEMPENHO
(Confiabilidade) (Custo do trabalho)
2-) A qualidade da interface determina se os usuários aceitam ou
recusam um sistema (interesse comercial)

Sucesso ou fracasso de mercado

3-) Custos de hardware e software barateados permitem que se

gaste maior capacidade computacional em troca de conforto
para o usuário

4-) A qualidade da interface é crítica em certas atividades,

como: tráfego aéreo ou usinas nucleares
Objetivo da área de interação
humano-computador
projeto
avaliação
(design)

Fornecer explicações e previsões para

fenômenos de interação usuário-sistema e
resultados práticos para o design da interface
de usuário (ACM SIGCHI, 1992).

função
+
forma
Histórico

Primeiros programas: “batch”, sem interface

Passado : Interfaces do tipo textual
▫ Linhas e telas de caracteres
Presente: interfaces gráficas
▫ novos dispositivos são envolvidos, dia a dia
▫ auxílio de som
Futuro: ambientes virtuais
▫ uso da palavra e dos gestos
▫ imagens animadas
Conceitos básicos
▫ Interface
▫ Interação
▫ Usabilidade
▫ Comunicabilidade
▫ Feedback
Interface
• O conceito de interface é utilizado em diferentes áreas da
ciência da computação e é importante no estudo da
interação homem-máquina, no projeto de dispositivos de
hardware, na especificação de linguagens de
programação e também em projetos de desenvolvimento
de software.

• A interface existente entre um computador e um

humano é conhecida como interface do usuário.

• As interfaces utilizadas para conectar componentes de

hardware são chamadas de interfaces físicas.
 Interface – hardware e software

A interface fornece métodos para:

• Entrada, permitindo ao
usuário manipular o
sistema

• Saida, permitindo ao
sistema produzir os efeitos
(as respostas) das ações
do usuário
Interface
• Atualmente as seguintes interfaces do usuário são as
mais comuns:
▫ Interface gráfica - aceita a entrada através de sistemas
como o teclado ou mouse e fornece saída gráfica
articulada no monitor.
▫ Interface web - aceita a entrada e fornece saída ao
gerar páginas Web, que são transportadas pela
Internet e visualizadas através de um navegador.
▫ Interface de linha de comando - aceita a entrada
através de comandos de texto utilizando teclado e
fornece saída imprimindo o texto no monitor.
▫ Interface tátil - interface gráfica do usuário que usa
telas de sensíveis ao toque como forma de entrada,
tornando o monitor um dispositivo tanto de entrada
como de saída do sistema.
Interação
• Interação é uma ação de um objeto físico sobre outro.
Além da interação puramente física, o termo designa a
ação conjunta humano-humano e humano-máquina.

• Em termos simples, ocorre interação quando a ação de

uma pessoa desencadeia uma reação em outro (humano
ou não). Esta interação pode ter diversos níveis, desde a
simples bidirecionalidade até a interatividade.

• Interatividade é o que possibilita ao indivíduo afetar e

ser afetado por outro numa comunicação que se
desenvolve num sistema de mão dupla que vamos
analisar dentro da grande rede mundial de
computadores, a Internet
Interface versus Interação

• Interface: Parte de um sistema computacional com a qual a pessoa

entra em contato – física, perceptiva ou conceitualmente

• Interação: Processo de comunicação entre pessoas e sistemas

interativos
Interação e Interface
• Interação: é um processo de comunicação que envolve
um ciclo contínuo de interpretação e ação entre usuários
e sistemas interativos.

• Interface: é o componente da arquitetura do software

interativo com o qual o usuário tem contato

o sistema
é
a interface

funcionalidade
usuário
Interação
Usabilidade
• Termo usado para definir a facilidade com que
as pessoas podem empregar uma ferramenta ou
objeto a fim de realizar uma tarefa específica e
importante.

• A usabilidade pode também se referir aos

métodos de mensuração da usabilidade e ao
estudo dos princípios por trás da eficiência
percebida de um objeto.

• Em IHC, usabilidade normalmente se refere à

simplicidade e facilidade com que uma interface,
um programa de computador ou um website
pode ser utilizado.
Comunicabilidade
• Qualidade de uma interface de comunicar aos usuários
as decisões e intenções do designer desta interface.

• É uma propriedade de um sistema de transmitir ao

usuário de forma eficaz e eficiente as intenções e
princípios de interação que guiaram seu design.

• Difere da usabilidade na medida em que:

▫ usabilidade refere-se em particular à facilidade de
atingir objetivos no sistema durante a experiência da
interação,
▫ enquanto a comunicabilidade refere-se ao uso de
elementos de interface que sejam informativos ao
usuário com relação ao uso esperado dos mesmos.
Feedback
▫ Mandar informação de volta ao usuário em
consequência das suas ações
A interface com o usuário

• Usualmente, os usuários julgam um sistema pela

sua interface ao invés de sua funcionalidade.
• Um projeto de interface pobre pode levar o
usuário a cometer erros catastróficos.
• Um projeto de interface pobre é a razão pela
qual muitos sistemas de software nunca foram
utilizados.
Forma (Representação Visual)
Simplifica a comunicação da idéia envolvida
Cérebro humano
▫ processa grande quantidade de informação em curto
espaço de tempo
▫ tem capacidade reduzida de receber e transmitir
informação
Visão:
▫ Capacidade humana mais desenvolvida, capaz de
receber e transmitir grande volume de informação, de
reconhecer formas e associar características a elas
Criação da Interface
Difícil
Não há técnicas ou regras que garantam o sucesso e a
facilidade de uso
Padrão

Difícil de ser escrita

▫ Muitos dispositivos diferentes
▫ Funcionamento assíncrono dos dispositivos
Desempenho rigoroso, que força o software a garantir
que entre a solicitação do usuário e a resposta do
computador não haja “gaps”
Tempo de resposta
Criação da Interface
O que engloba ?
Esconder
▫ o sistema operacional
▫ a manipulação dos dispositivos de entrada e saída
▫ o sistema de comunicações
Separar
▫ as várias aplicações tratadas simultaneamente
Padronizar
▫ as formas de interação do usuário com o sistema
Ferramentas
Auxiliam o projeto (“design” ou desenho) da interface
Permitem a geração automática do software da interface
grande, complexo e difícil de testar
As interfaces exigem, constantemente, extensões (requisitos de
modificação)
Há inúmeras categorias de usuários:
▫ aprendiz - menus
▫ intermediário
▫ especialista – comandos
aumentam a produtividade
implementa a consistência
facilita a prototipação e o desenvolvimento interativo
incorporação do usuário “não programador”
Estilos de Interação
• Termo genérico que inclui todas as formas como os usuários
se comunicam ou interagem com sistemas computacionais

• Gráficas: WYSIWYG, Manipulação Direta e

WIMP

• Não-Gráficas: Modelo de Automação de

Escritórios (Menus), Linguagens de Comandos
• Linguagens Naturais, Preenchimento de
Formulários
Estilo - WYSIWYG
What You See Is What You Get (WYSIWYG)
A imagem de manipulação da interface é a mesma que
a aplicação cria . Ex: Editores de texto do tipo Word da
Microsoft.
“Aqui você tem negrito, sublinhado e itálico.”
Vantagens e Desvantagens:
▫ Tela difere da impressão no estilo não WYSISWYG
▫ Existem aplicações que não conseguem ser
implementadas neste estilo (estilo restrito)
Estilo – Manipulação Direta

São aquelas que permitem ao usuário agir

diretamente sobre os objetos da aplicação.
O usuário interage com ícones, utilizando o mouse ou
outro dispositivo equivalente, através da ação do tipo
clicar, arrastar (drag-and-drop), etc.
Exemplos de aplicativos que utilizam este estilo:
▫ Windows Explorer (mover arquivo/ diretório, ...)
▫ Jogos
Estilo – WIMP
Windows, Icons, Menus and Pointers
(WIMP)
Permite a interação através de componentes de
interação virtuais denominados widgets.
Permite a implementação de vários estilos
Pode ser considerado um estilo ou um
framework de interface apoiado pela tecnologia
de interfaces gráficas (GUI – Graphical User
Interfaces)
Estilo – Menus
É um conjunto de opções apresentadas na tela, no
qual a seleção de uma ou mais opções resulta em
uma mudança no estado da interface.
Categorização hierárquica das opções.
Um menu hierárquico pode ocorrer nas formas:
 Pull-down: surge ao se clicar em seu título, e desaparece
quando selecionada uma das opções.
 Pop-up: aparece ao se clicar em uma determinada área da tela
e pode permanecer visível até que o usuário selecione um de
seus itens ou decida fechá-lo.
Estilo – Lggs de Comando
As interfaces baseadas neste estilo proporcionam ao
usuário a possibilidade de enviar instruções
diretamente ao sistema através de comandos
específicos [Preece, 1994]
Vantagem:
▫ Poderosas por oferecerem acesso direto às funcionalidades do
sistema
▫ Maior iniciativa do usuário
Desvantagem:
▫ Maior dificuldade dos iniciantes em aprender e utilizar o sistema.
Estilo – Linguagem Natural
Bastante atrativa para usuários com pouco ou nenhum
conhecimento em computação
Não se aplica a todos os tipos de sistemas

Para a interação do usuário com aplicações em

linguagem natural podem ser utilizados:
Interface textual: usuário digita frases
Interfaces orientadas por menus: usuário seleciona cada palavra
ou expressão até compor a frase desejada
Estilo – Formulários

Utilizadas principalmente para entrada de dados

em sistemas de informação.
Útil principalmente quando os mesmos tipos de
dados devem ser digitados repetidamente,
como em cadastros, controle de vendas e
estoque, etc.
Fáceis de aprender
Populares em aplicações de Internet