DAINF

PR
UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ Departamento Acadêmico de
Informática

IHC - Interação
Humano-Computador

1 Prof. Geraldo Ranthum

[email protected]

Prof. Geraldo Ranthum

Aula 1
2 IHC – Informações Gerais
Objetivo da Disciplina
Projetar interfaces de usuário utilizando
conceitos de IHC

Carga Horária (Horas/Aula)

BCC ADS
36 h – PRESENCIAIS 30 h – PRESENCIAIS
24 h – REMOTAS 28 h – REMOTAS
15 Faltas 14 Faltas

Prof. Geraldo Ranthum

3 Ementa
 Conceitos básicos e fundamentação teórica
de interação humano-computador.

 Diretrizes para o projeto de interfaces.

 Engenharia Cognitiva e Engenharia

Semiótica.

 Padrões e estilos de interação para interface.

 Projeto e implementação de interfaces

humano-computador.

Prof. Geraldo Ranthum

4 Sistema de Avaliação

Data
Atividade Valor Peso
Programada
Avaliação
10,0 2,0 05/11/2024
Teórica 1
Avaliação
10,0 2,0 10/12/2024
Teórica 2
Exercícios
10,0 2,5 A definir (*)
Avaliativos (*)
Projeto Final 10,0 3,5 24/02/2025

(*) Distribuídos ao longo do Semestre

Prof. Geraldo Ranthum

5 Sistema de Avaliação

Exercícios Avaliativos Peso Entrega

Estilos de Interação

Aplicação Diretrizes

Engenharia Cognitiva 2,5 A definir

Prototipação Formulário
Desktop/Web/Mobile
Comparativo Métodos de
Avaliação

Prof. Geraldo Ranthum

6 Referências
CYBIS, Walter; BETIOL, Adriana Holtz; FAUST,
Richard (Autora). Ergonomia e usabilidade:
conhecimentos, métodos e aplicações. . 2.
ed. São Paulo, SP: Novatec, 2015.
 PREECE, Jennifer. Design de interação: além da
interação homem-computador. Porto Alegre, RS
: Bookman, 2005.
 SHNEIDERMAN, Ben. Designing the User Interface:
Strategies for Effective Human-Computer Interaction.
4ª Ed. EUA: Addison-Wesley, 2010.

Prof. Geraldo Ranthum

7 Referências
www.labiutil.inf.ufsc.br
www.serg.inf.puc-rio.br
www.nngroup.com
 Nielsen-Norman Group - Site de um dos principais nomes
de IHC

Prof. Geraldo Ranthum

8 Interação Humano-Computador (IHC)

Campo de estudos multidisciplinar abrangendo aplicações em

todas as áreas do conhecimento humano.

Objetiva o desenvolvimento e a avaliação de sistemas

computacionais interativos usáveis, seguros e funcionais, que
satisfaçam (atendam) as necessidades (requisitos) dos seus
usuários (stakeholders - envolvidos com o sistema)

Prof. Geraldo Ranthum

9 Disciplinas Envolvidas

Psicologia
Psicologia Social e
Cognitiva Organizacional
Ergonomia e
Ciência da Fatores
computação Humanos
Conhecimento e
Inteligência Habilidades dos Engenharia Teorias,
Especialistas em IHC
Artificial Métodos,
Design Técnicas e
Lingüística
Ferramentas
Antropologia
Filosofia
de
Sociologia Design de IHC

Prof. Geraldo Ranthum

 Por quê estudar IHC?
Pessoas são complexas e têm limitações;
Computadores são complexos;
Pelo menos a interface entre os dois deve ser
simples;
Todos os dias as pessoas usam computadores;
Sistemas computacionais proporcionam
maior produtividade e efetividade;
Erros em sistemas computacionais são caros
em termos de:
Perda de tempo, dinheiro, vidas humanas.
 Interfaces e Tecnologia
Interface e Tecnologia
“O sistema ideal deve esconder a tecnologia de
maneira tal que, o usuário não note sua presença.”

“O objetivo é deixar as pessoas realizarem suas

atividades, com a tecnologia aumentando sua
produtividade, seu poder e sua eficiência...

“As pessoas devem aprender a tarefa, não a

tecnologia.”

Prof. Geraldo Ranthum

Interfaces e Tecnologia

Prof. Geraldo Ranthum

13 Conceitos

Interface
Meio que interliga dois sistemas.
Interface humano-computador é o
combinado de software e hardware
necessário para viabilizar e facilitar os
processos de comunicação entre o usuário
e a aplicação.
“A interface é a parte de um sistema
computacional com a qual uma pessoa
(usuário) entra em contato física, perceptiva
e conceitualmente” [Moran, 1981].
Prof. Geraldo Ranthum
14 Conceitos
 É através da interface que os usuários têm
acesso às funções da aplicação.

 Fatores como: eficiência, segurança, custo de

treinamento, retorno de investimento e
satisfação subjetiva, dependem de um bom
design da interface.

 No contexto de IHC devemos considerar 4

elementos básicos: o sistema, os usuários, os
desenvolvedores e o ambiente de uso
(domínio de aplicação) [Dix et al., 1993].
Prof. Geraldo Ranthum
15 Conceitos
Interação
 Processo que engloba as ações do usuário sobre
a interface de um sistema, e suas interpretações
sobre as respostas reveladas por esta interface.

 É o conjunto de comandos de controle do

usuário + respostas do computador, constituídos
por sinais (gráficos, acústicos e tácteis)

Prof. Geraldo Ranthum

16 Conceitos

Interação

Sistema
ação
Usuário Interface Aplicação Dados
interpretação

Interação

Prof. Geraldo Ranthum

17 Comunicabilidade

Propriedade que a interface tem de

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

Quanto maior o conhecimento do usuário

da lógica do designer embutida na
aplicação, maiores suas chances de
conseguir fazer um uso eficiente e produtivo
da aplicação.

Prof. Geraldo Ranthum

18 Comunicabilidade
 comunicação do designer através da interface
usuário entende o que pode fazer e como interagir

• intenção de design
• princípios de interação

mensagem
designer do usuário
sistema
Prof. Geraldo Ranthum
19 Comunicabilidade
Ex. de Alta Comunicabilidade

Prof. Geraldo Ranthum

20 Comunicabilidade
Ex. de Baixa Comunicabilidade

Prof. Geraldo Ranthum

21 Comunicabilidade
Ex. de Baixa Comunicabilidade

Prof. Geraldo Ranthum

 Comunicabilidade
Dilema da Comunicabilidade

 Semelhança com o ícone existente

(pesquisar) -em muitas aplicações-, o que
sugere uma interpretação diferente da
indicada no tooltip ou hint (NEW TASK).
 No entanto, na concepção do designer, o
VirusScan é uma ferramenta que PROCURA
vírus no disco.
23 Usabilidade
Conceito que se refere à qualidade da
interação de sistemas com os usuários.

 Atributos (Nielsen,1993)
 Facilidade de aprendizado (learnability)
 Eficiência de uso(efficiency)
 Facilidade de memorização (memorability)
 Baixa taxa de erros/segurança (safety)
 Satisfação do usuário/subjetiva
(satisfaction)
Prof. Geraldo Ranthum
24 Usabilidade
Atributos (Nielsen,1993)

 Facilidade de aprendizado: o usuário consegue

explorar rapidamente o sistema e realizar suas
tarefas;
 Eficiência de uso: tendo aprendido a interagir
com o sistema, o usuário atinge níveis altos de
produtividade na realização de suas tarefas;

Prof. Geraldo Ranthum

25 Usabilidade
 Facilidade de memorização: após um certo
período sem utilizá-lo, o usuário não frequente é
capaz de retornar ao sistema e realizar suas
tarefas sem a necessidade de reaprender como
interagir com ele;
 Baixa taxa de erros: o usuário realiza suas tarefas
sendo capaz de recuperar erros, caso ocorram;
 Satisfação subjetiva: o usuário considera fácil a
interação com o sistema e se sente satisfeito
subjetivamente com ele.
Prof. Geraldo Ranthum
26 Usabilidade

Prof. Geraldo Ranthum

27 Usabilidade

Prof. Geraldo Ranthum

28 Perspectivas em IHC
Foco Sistema

Usuário era considerado uma máquina, que

tinha que aprender a falar a linguagem do
computador.

Com o surgimento da I.A. a tentativa era

considerar o computador como uma pessoa.

Prof. Geraldo Ranthum

29 Perspectivas em IHC
Foco Usuário

Mais tarde, surgiu a perspectiva de

computador como ferramenta, que o
usuário utiliza para obter um resultado ou
produto.

Atualmente o computador é um mediador

da comunicação entre pessoas.

Prof. Geraldo Ranthum

 30 Perspectivas em IHC
usuário como máquina computador como pessoa

Foco sistema
Foco usuário

trabalho
ou
produto

computador como “mídia” computador como ferramenta

Prof. Geraldo Ranthum

31 Perfis de Usuários
 No projeto de uma interface usuário é necessário
levar-se em consideração o perfil dos seus
potenciais usuários.

 A análise deste perfil é fundamental para que a

interface (e por consequência, o software) seja
explorada em todo o seu potencial.

 “Todo projeto deve iniciar-se com um

entendimento do perfil dos usuários aos quais se
destina (background cultural ou étnico, metas,
etc.)” [Shneiderman 93].
Prof. Geraldo Ranthum
32 Perfis de Usuários

Usuários novatos

- Os usuários novatos possuem pouco

conhecimento sintático (regras de interação) e
semântico (metas e objetivos) da aplicação.
- Necessitam de facilidades para fazer bom uso
da interface como:

a) simplificação de tarefas.
b) auxílio on-line.

Prof. Geraldo Ranthum

33 Perfis de Usuários
Usuários intermediários

- Estes usuários possuem razoável conhecimento

semântico da aplicação, mas relativamente
pouca lembrança de informações sintáticas para
usar a interface.
- Necessitam que a interface ofereça:

a) consistência.
b) mensagens informativas.
c) manuais on-line.
Prof. Geraldo Ranthum
34 Perfis de Usuários

 Usuários experientes
- Possuem bom conhecimento semântico e sintático, o
que costuma levar à "síndrome de usuários com poder",
ou seja, indivíduos que procuram atalhos e modos
abreviados de interação.
- As características seguintes tornam o uso da interface
mais produtivo:

a) atalhos.
b) eficiência de resposta.
c) enunciado de tarefas facilitado.

Prof. Geraldo Ranthum

35 Estilos de Interação
 Estilo de interação é um termo genérico que inclui
todas as formas como os usuários se comunicam ou
interagem com sistemas computacionais. [Preece et
al., 1994; Shneiderman, 1998]

 Conjunto de características que definem a forma

como o usuário pode interagir com sistemas
computacionais.

 Coleção de objetos da interface e técnicas de

interação associadas (look and feel) que podem ser
escolhidas pelo projetista quando está desenvolvendo
o componente de interação da interface.
Prof. Geraldo Ranthum
36 Estilos de Interação
Linguagem de Comandos;
Menus;
Teclas de Atalho (combinação de teclas)
Preenchimento de Formulários;
Linguagem Natural;
Manipulação direta
WIMP (Windows, Icons, Menus and Pointers)
Realidade virtual
Hipertexto

Prof. Geraldo Ranthum

37 Linguagem de Comandos
 1º estilo de interação usado amplamente
 Possibilitam ao usuário enviar instruções diretamente ao
sistema através de comandos específicos
 Vocabulário limitado, sintaxe formalmente definida
 Ex: Ms DOS, Shell do Linux, Telnet
38 Linguagem de Comandos
 Vantagens:
 acesso direto as funcionalidades do sistema;
 requer maior iniciativa do usuário;
 usuários mais especializados conseguem maior controle
e produtividade do sistema através de interfaces
baseadas em comando.

 Desvantagens:
 maior dificuldade dos iniciantes em aprenderem a
utilizar o sistema;
 comandos e sintaxes precisam ser relembrados;
 altas taxas de erros de digitação mesmo para os mais
experientes.
Prof. Geraldo Ranthum
39 Menus
 As funções oferecidas pela aplicação são mostradas ao
usuário através da tela e cabe ao usuário selecionar uma
delas
 Organização hierárquica explícita
 Importante para usuários pouco treinados - facilitam
treinamento
40 Menus - Tipos
Menu Barra

Menu
Cascata

Menu Pull Down

Prof. Geraldo Ranthum

41 Menus - Tipos

Menu Local ou
de Contexto ou
Pop Up Menu

- Usado para apresentar

comandos específicos do objeto
ou contexto imediato;
- Usado quando a densidade da
tela é alta;
- Usuários experientes.

Prof. Geraldo Ranthum

 42

Menus - Tipos
 Menus padronizados (Arquivo, Editar, Exibir, Ajuda)
 Itens de menu
 acionamento de comando
comando imediato (Salvar)
comando que precisa de mais input (Salvar Como...)

 mudança de estado
opções independentes
 (Estilo de fonte: Negrito, Itálico)

opções interdependentes
 (Alinhamento: Esquerda, Direita,

 Centralizado, Justificado)
 43
Menus — Tipos
paletts

seleção simples: radio buttons

seleção múltipla: check boxes

44 Teclas de Atalho
 Comuns nas interfaces pois agilizam a realização de
algumas funções
 Devem ser apresentadas para o usuário de modo que ele
possa conhecê-las e utilizá-las.
 Exemplos:
F1 – F2 – F3 CTRL+C / CTRL+V
45 Teclas de Atalho - EXEMPLO
 É importante manter (sempre que possível) a
consistência interna e externa entre as teclas de atalho

Prof. Geraldo Ranthum

46 Formulários
 Estas interfaces apresentam para o usuário uma tela
com campos rotulados que lembram um formulário em
papel para entrada de dados referentes ao domínio da
aplicação.

Nome: Matrícula:
Cargo: Classe: Nível:
CPF: Data de admissão: / /
Sexo: M( ) F( ) Data de nascimento: / /
Números de horas trabalhadas:

Pressione <F2> para proximo registro:

Prof. Geraldo Ranthum

47 Formulários

Prof. Geraldo Ranthum

 48
Formulários – Orientações Gerais
 Utilizar widgets adequados para o tipo de dado
 Marcar claramente os campos obrigatórios
 Sinalizar o término do preenchimento (ex.:
habilitando botão de confirmação)
 Instruções e mensagens
 instruções claras e breves (evite pronomes e referências)
 mensagens explicativas (barra de status ou quadros de
mensagem)
 Tratamento de erros
 prevenção de erros
 correção de erros para caracteres individuais ou campos inteiros
 mensagens de erro para valores inválidos
 49
Formulários — Erros Comuns
 Apresentação de informações internas ao
sistema e irrelevantes para o usuário
 Instruções excessivas, com texto redundante
 Instruções para o preenchimento dos
campos em locais pouco visíveis
 Excesso de quadros de mensagens que
interferem na tarefa do usuário
 Falta de indicação de campos obrigatórios
 50
Formulários — Erros Comuns
 Formato inadequado: Formulário X Planilha

Adequado para exibição de informações

Inadequado para entrada de dados

51 Linguagem Natural
 Através dessas interfaces o usuário pode interagir com o
sistema na sua própria linguagem.

 Nas interfaces que processam linguagem natural o maior

esforço fica a cargo do computador que deve interpretar
e gerar sentenças na linguagem natural do usuário.

 Problemas: ambiguidades, complexidade da língua

Prof. Geraldo Ranthum

52 Linguagem Natural
 Objetivo: permitir que o usuário utilize um vocabulário e uma
gramática conhecidos para interagir com o sistema
 Usuário: Como eu faço para imprimir um documento?
 Sistema: Selecione o menu Arquivo, item Imprimir.
 Entrada: expressões escritas ou faladas
 Saída: respostas escritas ou sintetizadas

U: Quais os horários do vôo Natal-Mossoró?

S: O vôo não existe.
U: E os vôos para Fortaleza?
S: Em qual companhia?
U: Nordeste.
S: 14:30, de segunda a sexta e 12:00 sabado
e domingo
U: ...

Prof. Geraldo Ranthum

53 Linguagem Natural
 Exemplos: Eliza (MIT, 1966) Chatterbot mais antigo (mãe)

 Chatterbot - é um programa de computador que tenta

simular um ser humano na conversação com as pessoas.
 Seu objetivo é responder às perguntas elaboradas por
um ser humano em linguagem natural.
 ELIZA simulava as respostas de um psicólogo.

Exemplo de diálogo do Eliza:

ELIZA: Bonjour, je suis votre psychotérapeute.

Parlez-moi de vos problèmes.
Patient: Je suis très anguoissé

Prof. Geraldo Ranthum

54 Manipulação Direta
 Usuário manipula diretamente representações
visíveis de objetos
 Estado do sistema é continuamente exibido e
alterações são visíveis
 Os comandos são ações que o usuário realiza
diretamente sobre o objeto (analogia entre o
cursor e a mão)
55 WIMP
 Acrônimo em inglês para Janelas, Ícones, Menus e
Apontadores, permite a interação através de
componentes virtuais de interação denominados
de Widgets
Widgets (botões, cx. de seleção, ícones, radio
buttons, check box, etc...) também conhecidos
como objetos de interação.

 O WIMP é a junção de tecnologias de hardware e

software, associada aos conceitos de janelas e de
Widgets que permite a implementação de vários
estilos.
Prof. Geraldo Ranthum
56 WIMP - Janelas

Janela Ativa
Janela
Primária

Janela
Secundária

Prof. Geraldo Ranthum

57 Realidade Virtual
 É um estilo de interação caracterizado por oferecer ao
usuário, através de tecnologias avançadas, a
sensação de estar presente num ambiente que simule
certas condições de trabalho de um domínio.

 Imersiva - quando o usuário utiliza dispositivos que lhe

dá a sensação de estar presente no ambiente virtual.
 óculos (com visores especiais para que sua visão
esteja concentrada apenas no mundo virtual),
 luvas (que lhe permitam interagir com os elementos
do mundo virtual).

Prof. Geraldo Ranthum

58 Realidade Virtual
 Não-Imersiva - é aquela na qual o usuário utiliza um
computador visualizando imagens tridimensionais e
interage com o ambiente virtual através de dispositivos
como: mouse, teclado, joystick.
59 Hipertexto
 Modelo de estruturação que permite ao usuário fazer
referências cruzadas entre diferentes partes por meio
de links (ligações).
 Este estilo ficou conhecido também como browsing
(folheamento)