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

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

 IHC Introdução

Antes de mais nada...

IHC não se restringe ao projeto de interfaces !

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

 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)

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

 IHC Introdução

IHC lida com

Design

Implementação

Avaliação

de sistemas interativos para utilização por humanos

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

 IHC Elementos de IHC

Em IHC:

Sistema = Computador (software e hardware) + humanos +

contexto de uso

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

 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

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

 IHC Por que se preocupar com IHC ?

Capacidade computacional

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

 IHC Por que se preocupar com IHC ?

Capacidade humana

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

 IHC Por que se preocupar com IHC ?

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

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

 IHC Por que se preocupar com IHC ?

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

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

 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.

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

 IHC Interface com o Usuário

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

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

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

 IHC Interface com o Usuário

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

...

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

 IHC Interface com o Usuário

Fatores que influenciam o projeto da interface:

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;

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

 IHC Interface com o Usuário

Fatores que influenciam o projeto da interface:

Contexto de uso do sistema:

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

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

 IHC Interface com o Usuário

Fatores que influenciam o projeto da interface:

Contexto de uso do sistema:

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.

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

 IHC Interface com o Usuário

Fatores que influenciam o projeto da interface:

Contexto de uso do sistema:

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.

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

 IHC Interface com 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.

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

 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.

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

 IHC Por que investir em IHC ?

Visão pessoal

As pessoas vêem os computadores como

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

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

 IHC Por que investir em IHC ?

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

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

 IHC Por que investir em IHC ?

Visão de sistemas:

Humanos: complexo

Computador: complexo

Interface entre os dois: complexa

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

 IHC Por que investir em IHC ?

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!

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

 IHC Disciplina de IHC

A disciplina de IHC envolve:

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

 IHC Disciplina de IHC

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)

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

 IHC Disciplina de IHC

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.

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

 IHC Disciplina de IHC

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.

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

 IHC Disciplina de IHC

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

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

 IHC Disciplina de IHC

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.

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

 IHC Disciplina de IHC

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

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

 IHC Disciplina de IHC

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

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

 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

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

 IHC Fundamentos de Projetos de IHC

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

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

 IHC Fundamentos de Projetos de IHC

Evolução das interfaces :

Interface de Linha de comando

Interface Caracter

Interface Gráfica (GUI)

Interface Natural (NUI)

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

 IHC Fundamentos de Projetos de IHC

Interface de Linha de comando

• 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).

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

 IHC Fundamentos de Projetos de IHC

Interface de Linha de comando

• Sessão Telnet - Unix

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

 IHC Fundamentos de Projetos de IHC

Interface de Linha de comando

• Cartão perfurado

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

 IHC Fundamentos de Projetos de IHC

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.

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

 IHC Fundamentos de Projetos de IHC

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.

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

 IHC Fundamentos de Projetos de IHC

Interface Caracter – Exemplo: Sessão Help do DOS

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

 IHC Fundamentos de Projetos de IHC

• 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

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

 IHC Fundamentos de Projetos de IHC

• 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.

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

 IHC Fundamentos de Projetos de IHC

• 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.

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

 IHC Fundamentos de Projetos de IHC

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).

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