Disciplina: Interface Humano-Computador
Prof: João Carlos da Silva Junior
Definição

Interação homem-computador é o conjunto
de processos, diálogos, e ações através dos
quais o usuário humano interage com um
computador.
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
2
Humano-Computador

Devido ao fato da interação homemcomputador estudar o homem e a máquina
em comunicação é necessário, ao estudioso
da área, o conhecimento tanto de máquinas
como do ser humano.
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
3
Humano (Homem)





teoria da comunicação;
disciplinas de projeto gráfico e industrial;
Questões sobre a
lingüística;
memória , atenção,
percepção
ciências sociais;
psicologia cognitiva e desempenho humano
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
4
Máquinas




conhecimento de técnicas de computação
gráfica;
sistemas operacionais;
linguagens de programação;
ambientes de desenvolvimento;
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
5
Exemplos




IPHONE
Minority Report
Microsoft Surface
Terminais de ATM
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
6
Introdução


Resultado do design é um produto
O produto é derivado das especificações
fornecidas pelo cliente
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
7
Modelo Cascata
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
8
Modelo Cascata

Desvantagens


É difícil entender completamente e expressar os
requisitos do usuário antes que algum design
tenha sido feito
Os custos para manutenção são maiores
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
9
Modelo Espiral



Tentativa de melhorar o Modelo Cascata
Apesar de usar os mesmos processos
(Análise de Requisitos, Design e
Implementação), mostra maior interação
entre essas fases
Introduz a idéia de prototipagem para maior
entendimento dos requisitos
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
10
Modelo Espiral
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
11
DESIGN CENTRADO NO
HUMANO (DCH)


Surgiu em resposta aos vários problemas
encontrados nos modelos anteriores
Pressupostos Importantes



O resultado de um bom design é a satisfação do
cliente
O processo de design envolve uma colaboração
entre designers e clientes
O cliente e o designer estão em constante
comunicação durante o processo
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
12
DESIGN CENTRADO NO
HUMANO (DCH)

Objetivos



Produzir sistemas fáceis de aprender e usar
Seguros e Efetivos em facilitar as atividades do
usuário
Importante:

Testes freqüentes com o usuário usando
representações informais e prototipagem.
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
13
Modelo de Eason
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
14
Modelo Estrela
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
15
MODELO DE SHNEIDERMAN

Modelo baseado em 3 “Pilares”



No início do processo, o designer deve gerar um
conjunto de guidelines
O segundo pilar é composto de ferramentas de
prototipagem
O terceiro pilar é dedicado a testes de usabilidade
- avaliação com experts e testes com usuários
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
16
MODELO DE SHNEIDERMAN
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
17
MODELO LUCID (Logic UserCentered Interface Design)





Desenvolver o conceito do produto
Realizar pesquisa e análise das necessidades - usando
construção de cenários, design participativo, fluxo e
seqüência de tarefas
Criar conceitos e protótipos de telas - usando guidelines,
guias de estilo e metáforas para o design
Design interativo e refinamento - expandindo o protótipo
para sistema completo; inclui avaliação por experts e
testes de usabilidade
Implementação e Suporte
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
18
O que leva a um bom design?

Escolha um domínio no qual muitas pessoas
estão envolvidas




Estude a natureza das ações dessas pessoas
naquele domínio, especialmente em ações repetitivas
O que elas reclamam mais?
Que ações gostariam de realizar?
Defina software que imite padrões de ação
incluindo funções que não poderiam ser feitas
manualmente
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
19
O que leva a um bom design?



Crie protótipos o mais cedo possível e observe
como as pessoas reagem, o que “quebra”a
experiência delas
Mantenha comunicação com elas
Projetar para usuários x Projetar com usuários
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
20
Não Esquecer - IHC


Conheça o usuário
Minimize memorização


Otimize operacionalização



Reduza a carga de memória do usuário
Coloque o usuário no controle da interface
Previna erros
Torne a interface do usuário consistente
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
21
Colocar o usuário no controle






Permitir o uso de mouse e teclado
Mostrar mensagens descritivas e textos
Prover ações e feedbacks imediatos e
reversíveis
Prover caminhos e saídas significativos
Acomodar-se a diferentes habilidades de
usuários (Acessibilidade)
Tornar a interface do usuário transparente
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
22
Colocar o usuário no controle


Permitir que usuários adaptem a interface
Permitir a manipulação direta da interface
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
23
Reduzir a carga de memória




Realçar a demanda da memória de curto
prazo
Contar com o reconhecimento e não
relembrança
Prover pistas visuais
Prover ‘defaults, undo e redo’
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
24
Reduzir a carga de memória




Prover atalhos de interface
Prover uma sintaxe objeto-ação
Usar metáforas do mundo real
Prover clareza visual
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
25
Tornar a interface consistente




Manter consistência intra e entre
aplicações
Manter os resultados da interface
Prover apelos estéticos e integridade
Dar suporte ao contexto das tarefas


Uso cotidiano
Configuração
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
26
Reconhecer o usuário

Perfil de usuários




Novato ou usuários de primeiro momento
Conhecedor ou usuário intermitente
Usuários experientes
Conseqüência para o design

Proposição da interface em múltiplos níveis
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
27
Prevenir Erros


Completar sentenças
Corrigir comandos
?
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
28
Diretrizes – Projeto Interfaces
1.
2.
3.
4.
5.
6.
7.
8.
Conheça o seu usuário ou cliente
Entenda a função do negócio
Entendimento dos princípios de bons projetos de telas
Desenvolva menus do sistema e esquemas de
navegação
Selecione o tipo apropriado de janela
Selecione os dispositivos de controle apropriados
Escolha os controles de tela apropriados
Escreva mensagens e textos claros
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
29
Diretrizes – Projeto Interfaces
1.
2.
3.
4.
5.
6.
Fornecer feedback, orientação e assistência efetivos
Fornecer internacionalização e acessibilidade efetivos
Criação de gráficos, ícones e imagens significativas
Escolha as cores apropriadas
Organização e layout de janelas e páginas
Teste, teste e teste
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
30
O que são “guidelines”?




São orientações que devem ser consideradas na
elaboração e avaliação de um software.
São criadas, principalmente, a partir do senso comum e
da experiência na elaboração de outros projetos de
software.
Os “guidelines” proporcionam uma valiosa e prática
ferramenta para a aplicação de conceitos de interface
voltada para o usuário, em um projeto de software.
O uso de “guidelines” não deve ser entendido como uma
“receita de design”, mas sim como um conjunto de
princípios norteadores do design.
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
31
“Guidelines”

Princípios de design:



São guidelines mais genéricas, exigem uma interpretação antes
de ser aplicadas.
Ex.: Mantenha o site simples (p/websites)
Regras de design:


São guidelines em um nível mais detalhado.
Ex.: Não ofereça uma opção para buscas em toda a rede a partir
de seu próprio website”.
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
32
“Guidelines”

Guia de estilo



Consiste em uma coleção de regras de design
específicas e em princípios dos quais derivam as
regras.
São mais comuns nas “guidelines” de determinados
fabricantes, para definir a identidade visual da
interface e garantir consistência tanto no produto
quanto entre produtos de um determinado fabricante.
Ex.: “Ao criar um ícone colorido, você deve iniciar
criando primeiro a versão preto e branco e depois
acrescentar cor”. (Macintosh)
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
33
Onde encontrar?

http://warau.nied.unicamp.br/
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
34
O que é usabilidade?

Características de um sistema





Fácil de Aprender
Fácil de Utilizar
Fácil de Relembrar
Tolerante a Erros
Subjetivamente Agradável
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
35
O que é usabilidade?

Combinar Objetivos
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
36
O que é usabilidade?
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
37
Usabilidade é importante?







Historicamente muitas empresas subestimaram a importância da
Usabilidade no fracasso ou sucesso de seu projeto web
90% dos sites comerciais tem Usabilidade deficiente
Usabilidade é uma parte pequena de um projeto, porém a mais crítica
porque é a parte que o usuário vê
Do ponto de vista do Usuário, Usabilidade pode ser a diferença entre
executar uma atividade de maneira adequada ou se frustar
Do ponto de vista do Desenvolvedor, Usabilidade pode ser a diferença
entre o Sucesso e o Fracasso do sistema
Do ponto de vista da Gestão, um sistema de Usabilidade deficiente pode
reduzir a produtividade da força de trabalho a um nível até pior do que sem
o sistema
Falta de Usabilidade, além de custar tempo e esforço extras, pode decretar
a falência do projeto
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
38
Usabilidade - Benefícios

Usuário





Fácil de Aprender e Usar
Gera Menos Stress
Gera Confiança no Sistema
Força de Trabalho mais Rápida e Eficiente
Diminui Custos de Treinamento e Help Desk
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
39
Usabilidade - Benefícios

Gestão do Projeto



Melhora o Controle de Risco - consegue-se, por
meio de testes, identificar os melhores designs
Simplifica o Planejamento e Reduz Retrabalho
Indica Evidência de Sucesso já na Fase de
Testes
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
40
Usabilidade - Benefícios

Desenvolvimento



Prova que o Design Funciona – os usuários
validam o design bem antes do sistema ser
construído, de modo que sabe-se que o design
funcionará
Impossibilita Mudanças de Última hora
Redução no Número de Alterações pedidas
durante a Homologação
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
41
Estrutura do site



Refere-se a como a informação é organizada dentro de
um site
Permite ao usuário procurar por relacionamento de
informações, que revela:
 Categorias
 Hierarquias
 Networks
A estruturação do Site possibilita ao usuário construir
um modelo mental e também o ajuda a recordar
informações
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
42
Estrutura do site

Seqüencial – ideal para sites pequenos onde as informações fluem
como uma narrativa

Tipo Teia (Web) – ideal para sites pequenos com usuários
avançados. Acesso rápido a diferentes informações. Pode causar
confusão para alguns usuários por não ser prático
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
43
Estrutura do site

Hierárquica – uma das melhores formas de se organizar grupos de
informação. Os usuários, além de estarem mais acostumados com
estruturas hierárquicas, acham a metáfora mais familiar. A maioria
dos sites comerciais e corporativos adota essa estrutura
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
44
Estrutura do site – “Ruins”

Profundo e Estreito – uma estrutura de menu profunda e estreita
esconde a informação. O usuário deve clicar por uma série de submenus.
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
45
Estrutura do site – “Ruins”

Muito Largos – Estrutura ruim porque existem muitas opções no
menu principal, sobrecarregando o usuário com informações
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
46
Estrutura do site

Balanceada e Quadrangular – Estudos sugerem que uma mistura
entre profundidade e largura podem oferecer um tempo ótimo de
resposta. O usuário navega por um número mínimo de sub-menus e
tem escolhas limitadas no nível do menu principal.
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
47
Navegação






Ser regular, estruturada e hierárquica porque o usuário reconhecerá
as consistências e relacionamentos, facilitando a sua experiência
com a navegação do site
Sempre fornecer informações para o usuário de onde ele está, de
onde ele veio e para onde ele pode ir
Deixar bem claro aos usuários que um certo link, seja ele texto ou
imagem, é de fato clicável e que o mesmo o leva para o lugar em
que ele espera ir
Possibilitar ao usuário navegar de forma rápida pela estrutura do
site
Possibilitar ao usuário retornar sobre os links percorridos
Possibilitar ao usuário retornar a uma home page no caso dele se
sentir perdido
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
48
Navegação

Um site pode ter mais de um nível de
navegação. É recomendado a utilização de
Navegação Global e Local porque oferece
uma maneira clara de se organizar e
encontrar informação em um site
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
49
Navegação

Processo




Agregação – Como em um menu, o nível principal deve representar a
coleção dos demais itens, maximizando o processo de navegação e
evitando que o usuário se perca
Sumarização – Representa uma grande quantidade de dados de forma
condensada, como por exemplo usar pequenas imagens com um
tamanho inferior, como representação a de maiores resoluções.
Otimizando o tempo de resposta de uma determinada página.
Filtragem – exibir apenas informações relevantes após uma
determinada pesquisa.
Quebra – exibir apenas a parte inicial de uma determinada informação,
dando a possibilidade de exibição do contexto como um todo, em um
link, onde ficaria a critério do próprio usuário, selecioná-lo.
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
50
Metas e Objetivos
Aprendizado
Eficiência
Memorização
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
51
Metas de Eficiência

Qual o grau de dificuldade que os seus
clientes encontram para comprar em seu
site?
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
52
Metas de Eficácia

Exemplo – Comércio Eletrônico


Qual é a taxa de conversão?
Qual é a taxa de abandono de carrinho?
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
53
Metas de Aprendizado



Quanto tempo os seus usuários demoram para
aprender a interagir com o seu website?
O seu site é auto-explicativo?
Existe alguma área que estimule o aprendizado
sobre a utilização do seu produto ?
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
54
Metas de Aprendizado

Exemplo – Comércio Eletrônico

Qual o tempo médio que as pessoas gastam para finalizar
um pedido?
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
55
Metas de Memorização

Depois que os seus clientes entram no seu
site, eles conseguem lembrar como
executaram uma tarefa?
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
56
Protótipos

Antes de começar a fazer um site é feito um
“wireframe” funcional, que nada mais é que
um protótipo do produto final, remetendo a
definição de toda a arquitetura de
informação.
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
57
Softwares - Wireframe




Axure
Gliffy
Visio
Como construir Wireframe
Direitos reservados
conteúdo utilizado exclusivamente para fins didáticos
58