Interação Humano-Computador: Aula 01

IHC
Interação Humano-Computador
aula 01
aula 01
IHC Objetivos do Curso
Apresentar aos participantes os conceitos teóricos envolvendo a

disciplina de Interação Humano-Computador
Capacitar os participantes no projeto e avaliação de interfaces

segundo critérios preconizados pela disciplina de Interação Humano-
Computador
Ciência da Computação 2 Interação Humano-Computador

IHC Estrutura do Curso
Introdução
Definição e histórico. Classificação de IHC.
Dispositivos gráficos de entrada e saída.
Conceitos Básicos de IHC:
Percepção humana, gestalt, formas. Ilusões.
Teoria das cores. Textos e mensagens. Composição.
Elementos de IHC
Modelo gráfico de interfaces
Teorias de Interação
GIMP
Projeto de Interfaces
Casos de uso
Critérios de Usabilidade e Qualidade de Interfaces
Avaliação de Interfaces

IHC Introdução
Antes de mais nada...
IHC não se restringe ao projeto de interfaces !

IHC Introdução
“IHC se preocupa com o design, implementação e avaliação de

sistemas computacionais interativos e com o estudo dos fenômenos
que os envolvem”
(ACM SIGCHI, 1992)
“Desenvolver ou melhorar a segurança, utilidade, efetividade,

eficiência e usabilidade de sistemas que incluem o computador”
(Interacting with Computers, 1989)

IHC Introdução
IHC lida com
Design
Implementação
Avaliação
de sistemas interativos para utilização por humanos

IHC Elementos de IHC
Em IHC:
Sistema = Computador (software e hardware) + humanos +

contexto de uso

IHC Elementos de IHC
Humanos
São os usuários que demandam alguma tarefa
Computador
Dispositivo com capacidade de processamento de dados
Interação
O usuário diz ao computador o que fazer e o computador
comunica o resultado

IHC Por que se preocupar com IHC ?
Capacidade computacional

Capacidade humana

A capacidade computacional, de certa forma, “amplia” a capacidade

humana:
Execução de tarefas complexas em curto espaço de tempo
Amplia a capacidade de comunicação
Apoio à tomada de decisão
...
Entretanto, se essa interação não é projetada de forma adequada:

Os objetivos do sistema podem não ser atendidos plenamente
Em alguns casos o uso do sistema pode até ser contraproducente
Exemplo no sistema bancário:

Caixas humanos
Caixas eletrônicos
Internet banking

Assim, interfaces de baixa qualidade:

Requerem treinamento excessivo, aumentando o custo
Desmotivam a exploração
Confundem os usuários
Induzem os usuários ao erro
Geram insatisfação
Diminuem a produtividade
Não trazem o retorno de investimento previsto

IHC Interface com o Usuário
Interface com o usuário:
Parte do software que permite ao usuário interagir com o

computador e executar sua tarefa.
Tradicionalmente, considera-se que uma interface homem-

máquina é a parte de um artefato que permite a um usuário
controlar e avaliar o funcionamento deste artefato através de
dispositivos sensíveis às suas ações (dispositivos de entrada) e
capazes de estimular sua percepção (dispositivos de saída).
No processo de interação usuário-sistema a interface é a

combinação de software e hardware necessária para viabilizar e
facilitar os processos de comunicação entre o usuário e a
aplicação.

Como as interfaces humano-computador são os elementos que

viabilizam a interação, é preciso entender as interações para projetar
essas interfaces.

Fatores que influenciam o projeto da interface:
Tecnológicos:
Uso de mouse, comandos de voz, touch screen, etc.
Culturais:
Convenções, sinais, cores, etc.
Impacto nos usuários:

Facilitar o aprendizado
Evitar erros
Quantidade de treinamento necessário
...

Contexto de uso do sistema:
Exemplo 1: sistemas críticos como controle de tráfico aéreo,

reatores nucleares, operações militares, etc. (alto custo)
Confiabilidade e efetividade;
Eficiência de uso;
Grande quantidade de treinamento é aceitável em prol da
ausência de erros de operação;
Satisfação subjetiva menos valorizada;
Memorização é obtida a partir do uso freqüente;

Exemplo 2: sistemas comerciais ou industriais como sistemas de

bancos, seguradoras, reserva aérea, aluguel de carros,
gerenciamento de cartão de crédito, etc. (custo é fundamental)
Treinamento é caro;
Facilidade de aprendizagem é fundamental;
Alto desempenho pode ser fundamental;
Satisfação subjetiva tem importância modesta;
Memorização obtida a partir do uso freqüente

Exemplo 3: sistemas de uso doméstico como aplicações de

escritório, domésticas e de entretenimento, processadores de
texto, jogos, softwares educacionais, etc. (custo baixo é muito
relevante)
Facilidade de aprendizagem;
Baixa taxa de erros de operação e satisfação subjetiva são
fundamentais;
Assistência online é importante;
Rememorar também é relevante.

Exemplo 4: sistemas exploratórios, cooperativos e criativos como

enciclopédias eletrônicas, escrita cooperativa, tomada de
decisão, simulação científica, sistemas para composição musical,
diagnóstico médico, apoio a projetos de arquitetura, etc.
Usuários peritos no domínio e não em computadores;
Usuário se preocupa somente com a tarefa;
Objetivo principal: deixar o computador transparente para o
usuário.

Lembre-se: o projeto da interface faz parte do projeto do software

e, portanto, está sujeito a limitações de cronograma, recursos
humanos, recursos financeiros, etc.
Muitas vezes as necessidades em termos de interface são

conflitantes com esses limitadores.
O desafio está em negociar esses limites e projetar a melhor

interface possível dentro dos limites estabelecidos para o projeto.

IHC Por que investir em IHC ?
Visão de negócio:
Tornar as pessoas mais produtivas ou eficientes.
Custos com pessoas são maiores que custos com

hardware e software.

Visão pessoal
As pessoas vêem os computadores como

“utilitários” e querem que se comportem como tal

Visão de mercado:
Pessoas médias usam computadores:

Esperam sistemas “fáceis de usar”
Não toleram sistemas mal projetados
Não recebem treinamento
Grupo heterogêneo
Se o produto for difícil de usar, as pessoas

buscarão outros produtos. Exemplos:
Mac x PC
Apple x Microsoft

Visão de sistemas:
Humanos: complexo
Computador: complexo
Interface entre os dois: complexa

Visão de fatores humanos:
Humanos tem limitações.
Erros são custosos em termos de:

Perda de tempo
Perda de dinheiro
Perda de vidas (em sistemas críticos)
Perda de confiança
Design da interface pode lidar com estas limitações!

IHC Disciplina de IHC
A disciplina de IHC envolve:

Uso e Contexto:
Sinergia e adaptação entre o homem e o computador:
Entendimento da organização social e trabalho
Entendimento das características do domínio da aplicação
Aumentar a sinergia entre o computador e sua utilização:

Como usuários improvisam sua rotina
Como sistemas se adaptam ao usuário (customização)
Como os usuários se adaptam ao sistema (treinamento,
facilidade de aprendizado)
Guias para o usuário (ajuda, documentação, tratamento
de erros)

Características humanas:
Estudar o homem como um sistema de informações, como ele se

comunica e seus requisitos físicos e psicológicos:
Processamento de informações humano:

Características do homem como processador de informações:
memória, percepção, habilidades motoras, atenção, resolução de
problemas, aprendizado e aquisição de habilidades, motivação, etc.

Características humanas:
Estudar o homem como um sistema de informações, como ele se

comunica e seus requisitos físicos e psicológicos:
Linguagem de comunicação e interação:

Aspectos de linguagem:
Sintaxe, semântica, pragmática, interação conversacional,
linguagens especializadas
Ergonomia:
Características das pessoas e sua relação com a área de
trabalho e o ambiente:
Organização de displays e controles, limites cognitivos e
sensoriais, fadiga e saúde, mobiliário e iluminação, design para
ambientes perigosos ou estressantes, design para pessoas com
limitações físicas, etc.

Características computacionais:
Estudar os componentes específicos através dos quais o computador

interage com os usuários:
Dispositivos de entrada e saída:

Mecânica e características de dispositivos de hardware,
desempenho, dispositivos virtuais, etc.
Técnicas de diálogo:
Técnicas básicas de software para interação com humanos:
Ex: diálogos de entrada e saída, estilos de interação

Características computacionais:
Estudar os componentes específicos através dos quais o computador

interage com os usuários:
Computação gráfica:
Conceitos básicos de computação gráfica são úteis para IHC
Arquitetura de diálogo:
Arquitetura de software e padrões de interface:
Ex: geração de imagens em tela, gerenciadores de janelas,
toolkits de interface, arquiteturas multi-usuário, look and feel,
padronização e interoperabilidade.

Processo de desenvolvimento:
Construção e avaliação de interfaces HC:
Abordagens de design:
Ex: fundamentos de design gráfico (tipografia, cor, etc.),
engenharia de software, análise de tarefas, design industrial, etc.
Técnicas e ferramentas de implementação:

Ex: prototipação, toolkits de diálogo, métodos OO , representação
de dados e algoritmos

Processo de desenvolvimento:
Construção e avaliação de interfaces HC:
Técnicas e métodos de avaliação:

Ex: produtividade, testes de usabilidade, técnicas de inspeção de
interface
Sistemas de exemplo e estudos de caso:

Designs clássicos que servem como exemplos de estilos de
interface com o usuário

IHC Fundamentos de Projetos de IHC
Entender o usuário e suas tarefas:

Projetar a interface a partir das tarefas do usuário (projeto
baseado em tarefas)
Desenvolver tarefas-exemplo
Avaliar designs através de um passo a passo centrado na tarefa
Projetar junto com o usuário:

Projeto e prototipação centrados no usuário:
Métodos para projetar junto com os usuários
Prototipação de baixa e média fidelidade
Avaliação de interfaces com o usuário:

O papel da avaliação no design de interface
Como observar usuários utilizando sistemas para detectar
problemas de interface

Projeto de interfaces visuais:

“Design of everyday things”
O que faz com que o design da interface funcione?
Além do projeto de tela

Representações e metáforas
Design de telas gráficas

Posicionamento de componentes de interface em uma tela
Princípios de design:
Princípios, regras e heurísticas de usabilidade para projetar e
descobrir problemas de usabilidade

Evolução das interfaces :

Interface de Linha de comando
Interface Caracter
Interface Gráfica (GUI)
Interface Natural (NUI)


• São implementadas pela entrada de comandos linha a linha (como no DOS).
• Requer que os usuários aprendam a sintaxe correta de muitos comandos.
• As sequências das ações não são padronizadas e geram muitas repetições.
• O computador controla a maneira como os usuários trabalham. Induz o

usuário a fornecer informação apenas quando o aplicativo precisa.
• As aplicações são escritas para refletir a ordem na qual o programa

necessita da informação e não a ordem de tarefas desejada pelo usuário.
• Assim para resolver um pequeno problema, com poucos comandos,

acabava-se com um maior, que é entender o programa.
• O operador era direcionado pela máquina. Não estava no controle do

diálogo H-M.
• Exemplos: DOS (monousuário) e Unix (sem X-Windows; multiusuário).


• Sessão Telnet - Unix


• Cartão perfurado

Interface Caracter
Envolvem apenas o uso de caracteres
o valendo-se somente do teclado

o sem botões
o sem imagens
o sem ícones
A comunicação H-M é realizada por:
o Telas de Menu: onde o usuário digita o caracter (ou comando abreviado) de

uma lista;
o Full Screen: mostra uma série de campos para serem preenchidos por
informação textual;
o Teclas de funções: selecionam o modelo de tela a ser utilizado.

Interface Caracter.
• Estilo de interação por menus - conjunto de opções apresentados na tela
• A implementação de uma interface caracter podia se realizar de várias

maneiras. Era comum o uso de telas definidas por uma linguagem de tags
(marcadores < >, / : \).
o Foi uma das origens da linguagem de marcação HTML da WWW.
• Dá ao usuário uma direção da interação com o software;
• Explica a sintaxe necessária;
• Porém, o computador ainda dita a maneira como o usuário deve trabalhar.
Exemplos: videotexto, XTreeGold e Help DOS.

Interface Caracter – Exemplo: Sessão Help do DOS

• Interface Gráfica (GUI)

Para realizar a comunicação H-M usam propriedades táteis, propriedades
visuais, contraste, imagens, Cores e fontes.
Estilo de interação WIMP (Janelas, Icones, Menus e Ponteiros)
1ª Geração:
O usuário pode usar o mouse para navegar.
Os arquivos ficam visíveis o tempo que o usuário quiser.
Há caixas de diálogo para a interação.
Os usuários controlam as tarefas.
Sem acesso ao Help
Exemplo: Windows 1.0 e 2.0, Edit do DOS

• Interface Gráfica (GUI)
2ª Geração:
O Help está acessível.

As aplicações são representadas por ícones.
Há interação com janelas múltiplas.
Efeitos 3D dão retorno do estado dos controles.
Excesso de janelas abertas confundem o usuário.
Utilização do duplo clique.
• 3ª Geração
Armazenamento de documentos e arquivos no desktop.

Help fácil de ser obtido e sensível ao contexto.
As aplicações abertas estão sempre visíveis.

• A interface gráfica atual mais utilizada é o Windows, que utiliza a metáfora

da mesa de trabalho (desktop).
• Sua evolução está tendendo para algo semelhante a um browser da

Internet.
• No Windows há janelas e num browser há frames, onde programas

diferentes são executados.
• Problemas da interface gráfica do Windows:
significado dos ícones (alguns símbolos com difícil tradução);

perda fácil das janelas que se sobrepõem;
não compreensão da hierarquia dos arquivos;
não saber quando dar um duplo clique;
convivência de cursores de texto e ponteiros de mouse simultâneos.

Interface Natural (NUI)

Evolução das interfaces atuais.
Mais intuitiva e de fácil aprendizado.
Explora novos dispositivos gráficos de entrada e saída, em
especial dispositivos touch screen, reconhecimento de gestos e
voz, etc.
Próximos passos: Interface Orgânica com o usuário (OUI –
Organic User Interface).

Interação Humano-Computador: Aula 01

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Interação Humano-Computador: Aula 01

Caricato da

Copyright:

Formati disponibili

IHC

Apresentar aos participantes os conceitos teóricos envolvendo a

Capacitar os participantes no projeto e avaliação de interfaces

Ciência da Computação 2 Interação Humano-Computador

Ciência da Computação 3 Interação Humano-Computador

Antes de mais nada...

IHC não se restringe ao projeto de interfaces !

Ciência da Computação 4 Interação Humano-Computador

“IHC se preocupa com o design, implementação e avaliação de

“Desenvolver ou melhorar a segurança, utilidade, efetividade,

Ciência da Computação 5 Interação Humano-Computador

IHC lida com

de sistemas interativos para utilização por humanos

Ciência da Computação 6 Interação Humano-Computador

Sistema = Computador (software e hardware) + humanos +

Ciência da Computação 7 Interação Humano-Computador

Ciência da Computação 8 Interação Humano-Computador

Ciência da Computação 9 Interação Humano-Computador

Ciência da Computação 10 Interação Humano-Computador

A capacidade computacional, de certa forma, “amplia” a capacidade

Entretanto, se essa interação não é projetada de forma adequada:

Exemplo no sistema bancário:

Ciência da Computação 11 Interação Humano-Computador

Assim, interfaces de baixa qualidade:

Ciência da Computação 12 Interação Humano-Computador

Interface com o usuário:

Parte do software que permite ao usuário interagir com o

Tradicionalmente, considera-se que uma interface homem-

No processo de interação usuário-sistema a interface é a

Ciência da Computação 13 Interação Humano-Computador

Como as interfaces humano-computador são os elementos que

Ciência da Computação 14 Interação Humano-Computador

Fatores que influenciam o projeto da interface:

Impacto nos usuários:

Ciência da Computação 15 Interação Humano-Computador

Fatores que influenciam o projeto da interface:

Contexto de uso do sistema:

Exemplo 1: sistemas críticos como controle de tráfico aéreo,

Ciência da Computação 16 Interação Humano-Computador

Fatores que influenciam o projeto da interface:

Contexto de uso do sistema:

Exemplo 2: sistemas comerciais ou industriais como sistemas de

Ciência da Computação 17 Interação Humano-Computador

Fatores que influenciam o projeto da interface:

Contexto de uso do sistema:

Exemplo 3: sistemas de uso doméstico como aplicações de

Ciência da Computação 18 Interação Humano-Computador

Fatores que influenciam o projeto da interface:

Contexto de uso do sistema:

Exemplo 4: sistemas exploratórios, cooperativos e criativos como

Ciência da Computação 19 Interação Humano-Computador

Lembre-se: o projeto da interface faz parte do projeto do software

Muitas vezes as necessidades em termos de interface são

O desafio está em negociar esses limites e projetar a melhor

Ciência da Computação 20 Interação Humano-Computador

Tornar as pessoas mais produtivas ou eficientes.

Custos com pessoas são maiores que custos com

Ciência da Computação 21 Interação Humano-Computador

As pessoas vêem os computadores como

Ciência da Computação 22 Interação Humano-Computador

Pessoas médias usam computadores:

Se o produto for difícil de usar, as pessoas