Interfaces Homem-

Máquina

Universidade Federal do Tocantins

Curso: Ciência da Computação
Disciplina: Interfaces Homem-Máquina
Professor: Eduardo Ferreira Ribeiro
Histórico
 1ª interface gráfica: Xerox em 1973 no
computador "Alto", a partir de um projeto do
MIT [Ivan Sutherland]
 Apple: Macintosh 1985
 Windows: cópia de algumas funções do Mac,
em 1987
 Interfaces gráficas são conhecidas como
WIMP (Windows, Icons, Menus e Point devices)
 O paradigma de interação é conhecido como
WYSIWYG (What You See Is What You Get)
 Tendência: migrar para o padrão WYGIWYS
(What You Get Is What You See)
Histórico dos elementos da Interface
Gráfica
Menus baseados em teclado
◦ Antes de 1978
Menus Hierárquicos baseados em teclado
◦ UCSD Pascal - (1978)
Displays Bitmapped
◦ Xerox PARC (Palo Alto Research Center), para computador
Alto (1973)
Light Pen como pointer para tela
◦ 1960
Joysticks
◦ Spacewar games, 1962
Trackballs
◦ anos 60
Dispositivo de apontamento com pointer na tela
◦ Douglas Englebart - SRI (anos 70).
Histórico dos elementos da Interface
Gráfica
Mouse
◦ Douglas Englebart - SRI
Mudança no Cursor para mostrar modo do sistema
◦ William Newman - Xerox PARC
Cursor muda para mostrar contexto
◦ David Tilbrook (Newswhole) (1975) Lisa - Versão Inicial
Menus
◦ LRG - Xerox PARC
Popup Menus
◦ Ingalls (LRG) - Xerox PARC
Pulldown menus
◦ Lisa - Apple
Apple Menu bar
◦ Lisa - Apple
Primeiro Computador Pessoal a
ter uma interface gráfica
AppleLisa – Baseados nas XEROX
WorkStations
1º mouse
 Histórico dos elementos da Interface
Gráfica
Menus Hierárquicos
◦ Paeth(SSL) - Xerox PARC (Smalltalk)
Desabilitar itens de menus
◦ Lisa - Apple ou Xerox PARC (1982)
Teclas de comando (atalhos) para itens de menus
◦ Lisa - Apple
"Check Marks" ( √ ) em itens de menu Lisa - Versão Final
◦ Lisa - Apple
Janelas Sobrepostas
◦ Ingalls(LRG) - Xerox PARC
Janelas lado-a-lado
◦ CSL - Xerox PARC
Filas de eventos
◦ Simula - NCC, Lisa - Apple (1975)
Histórico dos elementos da Interface
Gráfica
Icones
◦ David Smith(SDD) - Xerox (Star->Mac->Lisa)
Barras de Rolagem
◦ LRG - Xerox PARC
Push Buttons
◦ LRG - Xerox PARC
Radio Buttons
◦ Kaehler(LRG) - Xerox PARC
Check Boxes
◦ LRG - Xerox PARC
Dimming de botões inativos
◦ David Tilbrook (Newswhole) (1975)
Dialog Boxes
◦ Star - Xerox PARC
 Histórico dos elementos da Interface
Gráfica
Multiplos fontes & estilos
no texto
◦ CSL - Xerox PARC (Bravo)
(1978)
Move/Copy/Delete
◦ Xerox PARC
Cut/Copy/Paste com mouse
◦ Tesler(SSL) - Xerox PARC
(Gypsy, Smalltalk)
Ponto de Seleção entre
caracteres
◦ Tesler(SSL) - Xerox PARC
(Gypsy & Smalltalk).

Smalltalk
Macintosh sistema 1 a 6
Macintosh sistema 8 e 9
Macintosh Sistema X
Windows 1
Windows 2
Windows 3
Windows 95
Windows XP, VISTA, 7, 8…
Histórico – Introdução da
Interface Gráfica do Usuário
Histórico – Introdução da
Interface Gráfica do Usuário
Histórico – Introdução da
Interface Gráfica do Usuário
Histórico – Introdução da
Interface Gráfica do Usuário
Histórico – Introdução da
Interface Gráfica do Usuário
Histórico – Introdução da
Interface Gráfica do Usuário
Histórico – Introdução da
Interface Gráfica do Usuário
Histórico – Introdução da
Interface Gráfica do Usuário
Histórico – Introdução da Interface
Gráfica do Usuário – Anos 2010
Histórico – Design de Telas
O interesse no bom design de telas só
começou a surgir a partir dos anos 70
◦ Quando a IBM lançou seu tubo de raios
catódicos 3270 – terminal baseado em
texto
Telas da década de 70
◦ Muitos campos, com legendas obscuras e
ilegíveis
◦ Visualmente desordenadas e geralmente
possuíam campos de comandos que
desafiavam o usuário a se lembrar do que
eles faziam
◦ Mensagens ambíguas obrigavam o uso do
manual
Tela Típica da Década de
70
Histórico – Design de Telas
Guiaspara projeto de telas
baseadas em texto surgiram na
década de 80
◦ Telas com rótulos menos obscuros
◦ Teclas de função para acesso aos
campos
◦ Mensagens mais claras
◦ No entanto algumas abreviações
continuavam obscuras aos usuários
◦ Muitas telas no estilo da década de
70 continuaram a ser desenvolvidas
Tela Típica da Década de
80
Histórico – Design de Telas
Advento de gráficos na década
de 90
◦ Alguns princípios básicos não
mudaram
 Agrupamento e alinhamento, por
exemplo
◦ Bordas usadas para separar grupos
visualmente
◦ Botões e menus em substituição às
teclas de função
◦ Propriedade múltiplas dos elementos
 Tamanhos e estilos de fontes, largura de
linhas, cores, etc.
Tela Típica da Década de
90
Tela Típica dos anos 2000
Tela Típica dos anos 2010
Produtos Interativos

Quantos sao faceis de

Expectativas
Quando interagimos com
objetos conhecidos,
esperamos um
comportamento baseado em
experiências passadas:
 Ex:
◦ Uma torneira deve ser aberta
girando no sentido anti-horário.
A experiência do
usuário
É possível um produto influenciar no
comportamento de uma pessoa ?
◦ Alguns produtos viram moda e até dão status,
isto muitas vezes está associado ao seu design;
◦ Bons designs vendem bem, associado com
facilidade de uso e experiência do usuário;
◦ Todo produto de sucesso é baseado na
experiência do usuário com este produto
(facilidade de uso);
◦ Não é possível projetar a experiência do
usuário, e sim projetar produtos que tragam
satisfação para quem os experimenta.
Comportamento X
Novo
 Interação com objetos novos:
◦ É associado a ele um comportamento de algo que já é
conhecido;
◦ Seres humanos, em situações complexas ou novas
tendem a simplificar as coisas;
 É curioso observar uma pessoa interagindo com
algo que se comporta diferente do esperado.
Por que o iPod é um
sucesso?
Termos Utilizados
Interfaces Homem-Máquina
Interfaces Homem Computador
Interação Homem Máquina
Interação Humano Computador
Interação Humano-Computador
(IHC)
Interação entre pessoas e
sistemas computacionais
Interação Humano-Computador
(IHC)
Interação Humano-Computador
(IHC)
Interação Humano-Computador
(IHC)

Forma
+
Função
Por que é importante pensar na
qualidade de uso?
Porque o resultado do nosso
trabalho vai afetar direta ou
indiretamente a forma como as
pessoas...
◦ trabalham,
◦ estudam,
◦ se informam,
◦ se relacionam,
◦ etc.
Interfaces de baixa
qualidade...
 requerem treinamento excessivo
 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
Uma interface ruim é ineficiente
Uma interface ruim é
ineficiente
Uma interface ruim não é
confiável
Uma interface ruim tira o
controle do usuário
Que tal, na hora de salvar um
documento...
Uma interface ruim atrapalha
mais que ajuda...
Curiculo Lates
◦ Não funciona se você apertar o
botão. Funciona se você der Enter no
campo de texto.
Uma interface mal projetada
incomoda...
Que horas são? Celular fica com
teclado
bloqueado no
bolso. Quando
quero ver as
horas, tenho
que apertar
uma tecla para
ele acender o
display. Porém,
aparece a
mensagem da
Fig. B.
Só depois de
alguns
Sugestão: incômodos
segundos

◦ Mensagem menor aparece a hora

(Fig. C).
Resumo: Uma interface
ruim...
Pode fazer isso com uma
pessoa...
Uma analogia
interessante?
Mas a interface concreta não é
tudo.
Modelo Conceitual
Se é obvio, então por
que...
Queremos parar de sofrer
com os sistemas que
utilizamos?
Como desenvolvemos sistemas?
Queremos parar de sofrer
com os sistemas que
utilizamos?
Quando projetamos as interfaces
com os usuários ?
Quando começar a pensar nas
interfaces de usuário?
Desde o início. E não assim...
É possível aumentar a qualidade
de uso!
durante a análise
◦ quem são os usuários?, o que eles fazem?, como? e
por quê?
 durante o projeto
◦ elaboração de soluções alternativas
 cenários, modelos, maquetes…
◦ avaliação por inspeção de todos os artefatos
gerados
durante a prototipação
◦ testes com usuários
 na implantação
◦ acompanhamento da introdução do novo sistema e
evolução do uso
Quando não se sabe direito quem
vai usar o software ou para o quê…
Como saber quem vai utilizar o
software, e para quê?
estudos etnográficos
◦ observação dos usuários em seu
ambiente de trabalho
 entrevistas
◦ pesquisa em profundidade
questionários
◦ pesquisa em abrangência
grupos de foco
◦ opiniões sobre propostas de design
O que projetar?
Considerar:
◦ Quem são os usuários
◦ Quais atividades serão realizadas
◦ Onde as atividades serão realizadas

Otimizar as interações que os

usuários tem com o produto, de
modo que elas satisfaçam as
necessidades e atividades do
usuário.
Diferenças culturais são
importantes ?
5/21/1960 X 21/5/1960?
◦ Qual dos formatos deveriam ser
usados em um formulário WEB
internacional?
Por que certos produtos como os
iPods são bem aceitos em todos
os lugares do mundo? Mesmo em
culturas diferentes.
Software X Usuário
A barreira tecnológica:
◦ Usuários novatos ficam apreensivos;
◦ Ficam com medo de "estragar" algo;
◦ Sentem "pânico" de possíveis mensagens de erro;
◦ Normalmente pensam: "Fiz algo de errado“
◦ Afinal, o produto foi projetado por profissionais
experientes.
O Projetista deve (sempre que possível):
◦ Conhecer os usuários e tarefas por eles realizadas;
◦ Quais tarefas eles estão tentando realizar;
◦ Conhecer o ambiente operacional dos usuários;
◦ Produzir produtos que se adaptem ao usuário e não
o contrário.
Quem são os Usuários?
Trazem consigo experiências passadas;
 Têm concepção daquilo que o
computador pode fazer;
 Se ele não sabe muito a respeito de um
objeto ou tarefa, irá associar com algo que
já é de seu conhecimento;
Quem são os Usuários?
(2/4)
Usuários são impacientes;
Quem são os Usuários?
Usuários odeiam bugs;
Quem são os Usuários?
Usuários odeiam bugs;
Quem são os Usuários?
Usuários têm necessidades diferentes em
função da sua experiência (diferentes
perfis);
Objetivos da experiência do
usuário
satisfazer divertir
ter boa estética provocar
agradar  ser útil
 suportar  surpreender
criatividade desafiar
 engajar satisfazer emocionalmente
 recompensar o motivar
uso aumentar sociabilidade
entreter

Entediar
Incomodar
Frustrar
Irritar
Aceitabilidade de um
Sistema
Problemas de Interação:
Incômodo
Bom e Mau Design
Preocupação Central:
Desenvolver produtos interativos
que sejam utilizáveis
◦ Produtos fáceis de aprender, eficazes
no uso, que proporcionem ao usuário
uma experiência agradável.
Exemplo 1:
◦ Correio de Voz
Interação Humano-Computtador
(IHC)
 Revisao
Interface x Interação
Interação é o processo de
comunicação entre pessoas e sistemas
interativos
◦ Usuário e sistema trocam turnos em que
um “fala” e outro “ouve”, interpreta, e
realiza uma ação
Interfaceé o nome dado a toda porção
de um sistema com a qual um usuário
mantém contato ao utilizá-lo
◦ Hardware (teclado, mouse, monitor, etc),
software (botões, ícones, menus, etc).
Definindo Interface do
Usuário
A melhor interface é aquela que
não é notada, aquela que permita
que o usuário mantenha o foco
na informação e tarefa em mãos,
não no mecanismo usado para
apresentar a informação e
realizar a tarefa.
Objetivos do Design de Interação
Desenvolver produtos com Usabilidade
◦ Usabilidade significa facilidade de aprendizagem,
eficiência no uso, e promoção de uma experiência
agradável para o usuário
◦ Usabilidade é parte importante da experiência do
usuário

Envolver os usuários no design de interação

IHC e Design de Interação
O que fazem os Profissionais
da área?
 Designers de interação: envolvidos no
projeto de todos os aspectos interativos de
um produto, não somente do design gráfico
de uma interface;
 Engenheiros de usabilidade: avaliam
produtos, utilizando métodos e princípios de
usabilidade;
 Web designers: criam e desenvolvem o
design visual de websites;
 Arquitetos de informação: planejam e
estruturam produtos interativos
(principalmente websites).
Necessidades do Usuário
Considere as atividades que as
pessoas desenvolvem pior e
melhor.
Considere o que pode auxiliar as
pessoas na maneira que elas
conduzem suas atividades.
Escute o que as pessoas querem
e envolva-as no projeto.
Utilize métodos de
desenvolvimento baseados no
Qualidade de
Uso
O que é qualidade “de uso”?
Qualidade de artefatos que são…
◦ Úteis
◦Agradáveis de usar
◦ Fáceis de aprender e de se lembrar
◦ Seguros (evitam erros que causem
danos)
◦ Eficazes e eficientes
...na perspectiva dos usuários, e
que o usuário entende como
funciona e por quê.
Qualidade de Uso
A qualidade de uso de sistemas
interativos envolve:
◦ Usabilidade [Nielsen, 1993]
◦ Acessibilidade [Melo e Baranauskas,
2005]
◦ Comunicabilidade [Prates et al.,
2000]
◦ Experiência do usuário (user
experience) [Preece et al., 2005]
Usabilidade
Qualidades de interfaces de
usuário
Usabilidade (ISO 9241)
Fácil de Aprender
◦ requer pouco treinamento formal
Fácil de memorizar
◦ lembrar como usar depois de algum
tempo
Maximizar a produtividade
◦ fazer a tarefa de forma rápida e
eficiente
Minimizar a taxa de erros
◦ se acontecerem, avisar o usuário e
permitir fácil correção
Maximizar a satisfação do usuário
◦ dar-lhe confiança e segurança
Que fatores deve-se priorizar
neste caso?
Que fatores deve-se priorizar
neste caso?
Que fatores deve-se priorizar
neste caso?
Que fatores deve-se priorizar
neste caso?
Usabilidade
Usabilidade
Usabilidade
Exercicio Mental
Quanto tempo deveria levar e
quanto tempo seu pai demoraria
para:
◦ Usar um aparelho de DVD para
assistir a um DVD.
◦ Programar um DVD para gravar um
programa.
◦ Criar e diagramar um BLOG.
Como ajustar o relógio?
Estudo de caso: O controle do
Portao
A situação:

Você

X
O Controle Remoto da Garagem
1. Esquema da Situação -
Antes
1. Esquema da Situação -
Depois
2. O que contribuiu para a
Situação:
Falha de projeto:
◦ Não é possível identificar os botões rapidamente,
através do tato ou contato visual breve.

Pressapara acionar o botão, que pode ser

causada por diversas razões:

• Estar atrapalhando o trânsito

• Medo de assaltos
• Nervosismo
• Ansiedade
3. Como evitar ou sobreviver ao
erro:
Diferenciar botões:
• Cores (botão verde / vermelho)
• Formas (botão triangular / redondo)
• Textos (Entrada / Saída)
• Teclas iluminadas

Desenho do controle:
• Formato diferenciado
• Botões distanciados
Revisão Qualidades de
Uso
A qualidade de uso de sistemas
interativos envolve:
◦ Usabilidade [Nielsen, 1993]
◦ Acessibilidade [Melo e Baranauskas,
2005]
◦ Comunicabilidade [Prates et al.,
2000]
◦ Experiência do usuário (user
experience) [Preece et al., 2005]
Revisão Qualidades de
Uso
Acessibilidade
Qualidades de interfaces de
usuário
Acessibilidade –
Legislação
 Brasileira
◦ http://www.acessobrasil.org.br/index.
php?itemid=43
Americana
◦ http://www.section508.gov/index.cfm
?FuseAction=Content&ID=3
Acessibilidade
I - acessibilidade: condição
para utilização, com
segurança e autonomia, total
ou assistida, dos espaços,
mobiliários e equipamentos
urbanos, das edificações, dos
serviços de transporte e dos
dispositivos, sistemas e meios
de comunicação e
informação, por pessoa
portadora de deficiência ou
com mobilidade reduzida;
Acessibilidade (cont.)
 II - barreiras: qualquer entrave ou obstáculo que limite ou
impeça (...) a possibilidade de as pessoas se comunicarem ou
terem acesso à informação, classificadas em: (...)
 d) barreiras nas comunicações e informações: qualquer entrave
ou obstáculo que dificulte ou impossibilite a expressão ou o
recebimento de mensagens por intermédio dos dispositivos,
meios ou sistemas de comunicação, sejam ou não de massa,
bem como aqueles que dificultem ou impossibilitem o acesso à
informação;
Acessibilidade (cont.)
V - ajuda técnica: os produtos,
instrumentos, equipamentos ou tecnologia
adaptados ou especialmente projetados
para melhorar a funcionalidade da pessoa
portadora de deficiência ou com
mobilidade reduzida, favorecendo a
autonomia pessoal, total ou assistida;
Acessibilidade (cont.)
 IX - desenho universal: concepção de
espaços, artefatos e produtos que visam
atender simultaneamente todas as pessoas,
com diferentes características
antropométricas e sensoriais, de forma
autônoma, segura e confortável,
constituindo-se nos elementos ou soluções
que compõem a acessibilidade.
Acessibilidade (cont.)
Capítulo VI
Do Acesso à Informação e Comunicação
Art. 47. No prazo de até doze meses a
contar da data de publicação deste Decreto,
será obrigatória a acessibilidade nos portais
e sítios eletrônicos da administração pública
na rede mundial de computadores
(internet), para o uso das pessoas
portadoras de deficiência visual,
garantindo-lhes o pleno acesso às
informações disponíveis.
 (Decreto-lei 5296 de 2 de dezembro de 2004 )
Videos
Uso do Iphone por Deficientes Visuais
https://www.youtube.com/watch?
v=kB0zEB2m1Lw

Uso de softwares de Leitura de Tela

https://www.youtube.com/watch?
v=0kqowip139A

Palestra sobre a WCAG (cai na prova)

◦ http://www.youtube.com/watch?v=OKpflo-L6j0
Comunicabilidade
Qualidades de interfaces de
usuário
Alta comunicabilidade
Baixa comunicabilidade
Qualidades de interfaces de
usuário
user experience
satisfação
prazer
“quero mais sistemas assim”
Princípios de Design
Heurística e Princípios de
Usabilidade
Princípios de design usados na
prática -> heurística
Principios de usabilidade são
utilizados como base para avaliar
protótipos e sistemas existentes
-> heurística
Princípios de Design
Abstrações generalizáveis
destinadas a orientar os
designers a pensar sobre
aspectos diferentes do seu
design.
Conhecimentos baseados em
teorias, experiência e senso
comum.
 O que utilizar e o que evitar.
Princípios de Design
 Visibilidade
 Feedback
 Restrições
 Mapeamento
 Consistência
 Affordance
Visibilidade
 Visibilidade das funções do
sistema
Visibilidade
Apenas as coisas necessárias têm que estar visíveis, para indicar
quais parte podem ser operadas e como. Deve indicar o
mapeamento entre ações pretendidas e as ações reais.
Visibilidade
A solução ajuda o usuário a lembrar
comandos que antes precisavam ser
memorizados.
Pode ser utilizado para direcionar um
projeto de disposição de controles e
elementos de interface que promovam a
interação. P
Benefícios
◦ facilidade e rapidez para encontrar controles e
funções (principalmente os apropriados para
tarefa); e
◦ facilidade de proceder com a interação.
Visibilidade na WEB
Não lemos páginas. As exploramos de forma superficial
– SCAN!
Isso acontece por que sabemos que não precisamos ler tudo
somos bons na tarefa de scanear.
 O resultado é que não fazemos as melhores escolhas. Usamos
a técnica de SATISFICIÊNCIA! Porque?
◦ normalmente estamos com pressa;
◦ aprendemos que não há grandes problemas em tentar e errar;
◦ comparar opções pode não trazer benefícios ou melhorar as chances
de êxito;
◦ adivinhar é mais divertido;
Nós não imaginamos como as coisas funcionam. Nós fazemos
de qualquer jeito. Assim, se o usuário sucede usando de
qualquer jeito, você acha que ele se importa se “entendeu”?
A resposta é: IMPORTA BASTANTE, porque embora usar de
qualquer jeito possa funcionar em algumas vezes, tende a ser
ineficaz e sujeito a erros, o que pode impedi-los de achar o
que procuram.
Visibilidade na WEB
DESIGN PARA EXPLORADORES
As páginas devem ser criadas
para explorar, não para ler!
 Identificação de uma hierarquia visual clara
em cada página;
 Uso de convenções que facilitariam a
identificação e compreensões;
 Páginas divididas em áreas bem definidas;
 Identificar o que é clicável do que não é
clicável;
 Tornar o visual leve – O menos é mais e
combate a poluição visual.
Visibilidade na WEB

A primeira imagem mostra uma interface sem pontos focais. A

segunda oferece uma estrutura visual com melhor contraste e
pontos visuais de entrada.
A principal atividade de um internauta ao entrar em uma página web
é visualizar as grandes massas de contornos com atenção para
as CORES e os ELEMENTOS do primeiro plano
em CONTRASTE com oFUNDO.
Feedback
Possui grande relação com a
visibilidade.
O objetivo é oferecer
informações ao usuário após a
interação para:
◦ sugerir que a ação foi realizada; e
◦ confirmar o que exatamente foi
realizado.
Feedback
 Retorno de informações a
respeito de que ação foi feita e
do que foi realizado
 Permite a continuidade da
atividade
Feedback
Mandar informação de volta ao
usuário em consequência das
suas ações
◦ Ex.: som, highlighting, animação e
combinações disso
◦ Ex.: quando clica botão, há feedback
sonoro e highlight vermelho:
Feedback
Feedback
Mecanismos de Feedback
Feedback
Mecanismos de Feedback
 Feedback - Visual

Visual: o estímulo visual gerado pela escolha adequada da apresentação da

mensagem pode facilitar o processo de compreensão. Perceba a feição dos
rostos das pessoas (Figura 5) quando elas lêem uma mensagem com uma “boa
informação”(“d” e “h”), com uma “ informação comum e esperada” (“a”, “b” e
Restrições
Restringir as ações que podem
ser realizadas
◦ Desativar opções
Impede a seleção de opções
incorretas
 Reduz a chance de erros
Restrições
Restrições
São formas de delimitar a ação do usuário garantindo
que, em meio a uma grande quantidade de opções, ele
escolha a correta para continuar a atividade.
É uma forma de:
◦ restringir a interpretação (minimizar a opções disponíveis); e
◦ forçar um caminho dentre várias possibilidades (um
fluxograma mostra as ligações coerentes).
Os benefícios no processo de interação são impedir
seleções incorretas e reduzir chances de erro. Como
fazer isso? Desativando opções desnecessárias
naquele momento da atividade. Você já viu isso em
sombreamento de itens de menu.
Restrição
 Perceba que ao
selecionar um texto e
escolher o item de
menu “Table” algumas
opções são restringidas
para garantir a
ausência de erro. É
uma forma de
direcionar o usuário
para as
funcionalidades
possíveis de serem
realizadas. Mas
perceba a
inconsistência – ao
selecionar o item
“Select” o usuário tem
acesso a um sub-menu
com opções restritas.
O correto seria
indisponibilizar
também esta opção.
Restrição Física
 Oferece apenas uma possibilidade de movimento ou
acondicionamento (ex forma, tamanho).
◦ Exemplo: Ao tentar colocar um disquete ao contrário no seu drive ele
não entrará por que existe uma restrição que evita a ocorrência do
erro.
Restrição Lógica
Entendimento do mundo
Senso comum a respeito de ações e
conseqüências (expectativas)
Dedução lógica para outras ações
(sombreamento menu)
◦ Exemplo: Para efetuar a tarefa de apagar um
elemento existem dois procedimentos
diferentes em dois locais distintos do sistema.
◦ Em um apenas oferece um ícone de uma
lixeira.
◦ Em outro exige que o usuário entre no menu e
escolha a opção excluir elemento.
Restrição Cultural
Convenções aprendidas
Cores (alerta, livre, atenção),
carinhas (estados), áudio
Relações arbitrárias –
abstratas
Podem se tornar convenções
se aceitas e aprendidas
◦ Exemplo:
 O uso de cores difere entre as
culturas.
 O mesmo acontece com o uso de
objetos, por exemplo. Indicar um
restaurante com sinais de garfo e
faca no Japão pode não ser a melhor
opção, uma vez que ohachi é a
ferramenta mais utilizada pelos
japoneses ainda nos dias de hoje.
http://thenounproject.com/
Mapeamento
Relação entre controles e seus
efeitos
Mapeamento
Discuta o mapeamento dos
botões de controle abaixo:
Mapeamento
Discuta o mapeamento dos
botões de controle abaixo:

Porque o mapeamento abaixo é

melhor?
Mapeamento
 Um bom mapeamento indica o
relacionamento correto entre duas
entidades.
◦ Por exemplo, ao girar o botão de volume de
um aparelho de som no sentido horário, o
volume aumentará e no sentido anti-horário,
diminuirá.
◦ A utilização de controles de som por meio de
setas é fácil de ser compreendida, pois reage
com efeitos esperados pelo usuário.
 Relaciona-se com retorno, pois pode
ser entendido como o efeito do controle.
Mapeamento
O que devo fazer? Como o objeto está me informando o que
devo fazer?
◦ O mapeamento da posição relativa dos controles deve estar em sintonia e de
acordo com a orientação ou direção da ação.
◦ A representação gráfica para comandos também deve seguir esta lógica:
 setas para frente e para trás indicam a direção do filme ou da música; e
 a tecla Return ou Enter indica que o texto descerá para a próxima linha. Será que esta
reação é autosugestiva?
Algo que promete um mudança de conceitos na relação entre controle
e efeito são as “gestural interface” ou interfaces gestuais.
Um exemplo recente disso é o IPhone da Apple que não oferece botões,
mas permite uma série de procedimentos aparentemente fáceis de
serem aprendidos e absorvidos.
Consistência
Operações semelhantes utilizam
elementos semelhantes para realização
de tarefas similares.
◦ Mais fáceis de aprender e de usar
Ex: ctrl+c e ctrl+v em todas as aplicações
Ex. de inconsistência:
Consistência
Consistência
 Dificuldade de projeto  criar e adotar um modelo
conceitual de consistência baseado em modelos mentais.
◦ É o que se chama de consistência externa (provindo do mundo real)
e consistência interna (aquela adotada para o sistema).
◦ Se no mundo físico existem diferentes formas de trancar coisas em
algum lugar e vários elementos representam esta ação (cofre,
cadeado, chave), qual deles deve ser utilizado para que haja
consistência com  o mundo físico? 
◦ (
http://gizmodo.uol.com.br/por-que-os-icones-do-ios-7-sao-tao-estran
hos/
)
 Consistência
 Mas o que é
inconsistência?
◦ 1) agrupamento inadequado;
◦ 2) a ordenação inadequada; e o
uso de metáforas inadequadas.
 Alguns resultados de
inconsistência são:
◦ 1) dificuldade para lembrar
procedimentos;
◦ 2) grandes chances de
acontecerem erros; e
◦ 3) frustração na troca de versão.
 Uma forma recorrente de
inconsistência na web é a
utilização de termos diferentes
para representar o link e o
título da página de destino.
Affordance - Fornecimento
 Um atributo de um objeto que
permite às pessoas saber como
utilizá-lo.
Affordance
Atributode um objeto que
permite às pessoas saberem
como usá-lo.
◦ Por exemplo, uma maçaneta
redonda de porta convida o usuário
a girá-la.

http://www.baddesigns.com
Affordance -
Fornecimento
Auto sugere o que fazer.
Sua tradução literal para o português seria fornecimento,
mas o termo que ajuda a entender este princípio com mais
facilidade é auto-sugestão.
Trata das propriedades percebidas de um objeto que
determinam como ele pode ser usado.
Só olhando, o usuário sabe o que fazer, pois utiliza o
mínimo de esforço. A partir das características do objeto, o
usuário, mesmo sem o conhecer, cria uma idéia da
funcionalidade do mesmo. O processo é óbvio e não precisa
ser aprendido
◦ cadeado indica segurança;
◦ raio indica energia;
◦ cor vermelha significa perigo ou atenção;
◦ cor amarela significa estado  de alerta; e
◦ cor verde significa liberdade de ações.
Affordance -
Fornecimento
Por exemplo, uma faca contém dois lados, um
com fio e o outro sem o fio. Contém um cabo
com ondulações para agregar os dedos das
mãos voltadas para o lado do fio que indica
onde a pessoa irá segurar e com o lado que irá
trabalhar.
◦ As ondulações do cabo são affordances, pois sugerem
como a face deve ser manipulada e que o objeto será
manipulado com firmeza e segurança (LIMA, 2001).
Benefício:Cumprir Fornecimento significa
minimizar o uso de instruções.
◦ Como estabelecer isso em Projeto?
 Tornar óbvio o que se pode fazer.
 Utilizar analogias e metáforas do mundo real.
Bad Affordance na
Interface

Note que a caixa de instalação

não possui nenhuma forma
para cancelar o processo
apenas o botão situado no
canto superior direito que
possibilita fechar a caixa.
Um marketing agressivo que
desconsidera usuários que
possam ter se engando com a
versão.
Poderia haver uma mensagem
mais polida sugerindo um
“Cancelar” ou “Não obrigado,
não estou interessado”.
Paradoxo da Tecnologia
A tecnologia oferece potencial para tornar nossa
vida mais simples e agradável, e cada nova
tecnologia traz mais benefícios.
 E ao mesmo tempo adiciona tamanha complexidade
que faz aumentar nossa dificuldade e frustação.
Paradoxo da Tecnologia
Sempre que o número de funções
excede o número de controles, o design
torna-se arbitrário e não natural, e
complicado.
A mesma tecnologia que simplifica a
vida provendo um maior número de
funcionalidades em um objeto,
também a complica tornando-a
muito mais difícil aprender, e usar

http://www.hardware.com.br/artigos/comp
lexidade-design-interfaces/
Trabalho
 Apresentar um exemplo positivo e um exemplo
negativo de cada um dos 6 princípios de design
propostos por Norman (Visibilidade; Restrições;
Mapeamentos; Consistência; Feedback; Affordance
Percebida);
 Usar, de preferencia, softwares (e nao apenas
sites).
 Colocar os exemplos (Print da tela) em um
documento PDF, e comentar o porque da escolha.
Individual
Entrega por email até as 14:00h da próxima aula.
Assunto: 1º Trabalho de Interfaces Homem
Máquina.