Slides baseados no livro:
Design e Avaliação de Interfaces Humano Computador
Heloísa Vieira da Rocha
M.Cecília C. Baranauskas
PrincípiosPrincípiosO primeiro princípio do design de interfaces,
tanto para uma maçaneta quanto para um computador, é manter em mente o ser humano que quer usá-la. A tecnologia é subserviente àquele objetivo.
….menos ênfase em “interfaces” e mais em ferramentas apropriadas para a tarefa. Mais ênfase em design centrado no usuário. Menos em tecnologia; mais nas pessoas, e grupos, e interações sociais. E tarefas. (Norman, D)
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Objetivos de IHCObjetivos de IHCProduzir sistemas usáveis, seguros e
funcionaisDesenvolver ou melhorar a
segurança, utilidade, efetividade e USABILIDADE de sistemas computacionais
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Aceitabilidade de um SistemaAceitabilidade de um SistemaD
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
Fatores Organizacionaistreinamento, políticas, organização do trabalho, etc.
Fatores Ambientaisbarulho, aquecimento, ventilação,
luminosidade, etc.
Saúde e Segurançaestresse, dores de cabeça,
perturbações musculares, etc.
capacidades e processos cognitivos
O Usuáriomotivação, satisfação,
personalidade, experiência, etc.
Confortoposição física, layout do
equipamento, etc.
Interface do Usuáriodispositivos de entrada e saída, estrutura do diálogo, uso de cores, ícones, comandos, gráficos,
linguagem natural, 3-D, materiais de suporte ao usuário, multimídia, etc.
Tarefafácil, complexa, nova,
alocação de tarefas, repetitiva,monitoramento, habilidades, componentes, etc.
Restriçõescustos, orçamentos, equipe,
equipamento, estrutura do local de trabalho, etc.
Funcionalidade do Sistemahardware, software, aplicação
Produtividadeaumento da qualidade, diminuição de custos, diminuição de erros,
diminuição de trabalho, diminuição do tempo de produção,aumento da criatividade , oportunidades para idéias criativas em direção a novos produtos, etc.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Disciplinas EnvolvidasDisciplinas EnvolvidasD
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
Princípios de DesignPrincípios de DesignVisibilidade e AffordancesBom modelo conceitualBons mapeamentosFeedback
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Princípios de DesignPrincípios de Design Partindo dos objetos que nos cercam:
Visibilidade e Affordances O usuário necessita ajuda. Apenas as coisas necessárias têm que estar
visíveis para indicar quais as partes podem ser operadas e como.
Ex: portas Visibilidade
indica o mapeamento entre ações pretendidas e as ações reais.
indica também distinções importantes diferenciar a vasilha do sal da do açúcar.
Visibilidade do efeito das operações A falta de visibilidade é que torna muitos dispositivos
controlados por computadores tão difíceis de serem operados.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Visibilidade – Editores GráficosVisibilidade – Editores GráficosD
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
VisibilidadeVisibilidadeD
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
Princípios de DesignPrincípios de DesignVisibilidade e Affordances
Affordances o termo definido para se referir às
propriedades percebidas e propriedades reais de um objeto, que deveriam determinar como ele pode ser usado. Botões são para girar, teclas para pressionar,
tesouras para cortar, etc. Quando se tem a predominância da affordance
o usuário sabe o que fazer somente olhando, não sendo preciso figuras, rótulos ou instruções
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Princípios de DesignPrincípios de Design Bom modelo conceitual
◦ Um bom modelo conceitual permite prever o efeito de ações.
◦ Sem um bom modelo conceitual opera-se sob comando, cegamente Ex.: uma tesoura Contra-ex: relógio digital com dois e até quatro
botões no mostrador
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Princípios de DesignPrincípios de DesignBons mapeamentos◦termo técnico para denotar o relacionamento
entre duas entidades. ◦em interfaces, indica o relacionamento entre
os controles e seus movimentos e os resultados no mundo.
◦Mapeamentos naturais Aproveitam analogias físicas e padrões culturais
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Princípios de DesignPrincípios de DesignFeedback◦Retornar ao usuário informação sobre as
ações que foram feitas, quais os resultados obtidos, é um conceito conhecido da teoria da informação e controle ? Falar com uma pessoa sem ouvir sua voz!! Carros X Telefones
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Paradoxo da TecnologiaParadoxo da TecnologiaA 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.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Paradoxo da TecnologiaParadoxo da TecnologiaSempre 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
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Ciclo de Vida da TecnologiaCiclo de Vida da Tecnologia InovadoresEntusiastasPragmáticosConservadoresCéticos
tempo
usuários
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
USABILIDADE USABILIDADE DE SISTEMAS COMPUTACIONAISDE SISTEMAS COMPUTACIONAIS
S Nielsen explicita seus princípios de design a partir de alguns slogans, que ele define como slogans de usabilidade. A seguir apresentamos alguns deles:
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SlogansSlogans de Usabilidade de Usabilidade
• Sua melhor tentativa não é suficientemente boa
• O usuário sempre está certo• O usuário nem sempre está certo• Usuários não são designers• Designers não são usuários• Menos é mais (less is more)• Help doesn´t
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SlogansSlogans de Usabilidade de Usabilidade
Sua melhor tentativa não é boa o suficiente
É impossível fazer o design de uma interface ótima simplesmente baseado emnossas melhores idéias.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SlogansSlogans de Usabilidade de Usabilidade
Usuário está sempre certo A atitude do designer quando verifica que o
usuário tem problemas de interação com um determinado aspecto da interface, não deve ser a de julgar que o usuário é ignorante ou então, que ele não tentou o suficiente ou ainda, deixar passar que um dia o usuário aprende.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SlogansSlogans de Usabilidade de Usabilidade
Usuário não está sempre certo Também não se deve ir ao extremo de
construir uma interface somente a partir do que os usuários gostariam. Usuários freqüentemente não sabem o que é bom para eles.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SlogansSlogans de Usabilidade de Usabilidade
Usuário não está sempre certo Também não se deve ir ao extremo de
construir uma interface somente a partir do que os usuários gostariam. Usuários freqüentemente não sabem o que é bom para eles.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SlogansSlogans de Usabilidade de Usabilidade
Usuários não são designers Uma solução simples para atender a diversidade de
usuários seria a de prover interfaces flexíveis que pudessem ser amplamente customizadas e aí cada usuário teria exatamente a interface que melhor lhe satisfizesse (análogo aos bancos de carros modernos mencionados anteriormente). Estudos demonstram que usuários novatos não customizam suas interfaces, mesmo quando essas facilidades estão disponíveis (Jorgensen e Sauer, 1990).
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SlogansSlogans de Usabilidade de Usabilidade
Designers não são usuários Designers são humanos e certamente usam
computadores, mas são diferentes de usuários em diversos aspectos básicos: a experiência computacional e o conhecimento dos fundamentos conceituais do design do sistema.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SlogansSlogans de Usabilidade de Usabilidade
Menos é mais (less is more) Uma das frequentes soluções de design
que têm sido adotadas é colocar no sistema todas as opções e características imagináveis, pois se tudo está disponível então todos ficarão satisfeitos.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SlogansSlogans de Usabilidade de Usabilidade
Help não ajuda (help doesn´t) Muitas vezes, senão na maioria delas,
vemos usuários perdidos tentando encontrar informação na enorme quantidade de material de help que acompanha um sistema, e quando a encontra não consegue entendê-la.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Definição de UsabilidadeDefinição de UsabilidadeAtributos de usabilidade◦facilidade de aprendizagem (learnability)◦eficiência◦facilidade de rememorar (memorability)◦erros : poucos e não catastróficos◦satisfação subjetiva
Como medir usabilidade ?
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Definição de UsabilidadeDefinição de Usabilidade
Facilidade de aprendizagem (learnability)
O sistema precisa ser fácil de aprender de forma que o usuário possa rapidamente começar a interagir. Segundo Nielsen, é o mais importante atributo de usabilidade, por ser a primeira experiência que qualquer usuário tem com um sistema.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Definição de UsabilidadeDefinição de Usabilidade
Eficiência O sistema precisa ser eficiente no uso, de
forma que uma vez aprendido o usuário tenha um elevado nível de produtividade. Portanto, eficiência refere-se a usuários experientes, após um certo tempo de uso.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Definição de UsabilidadeDefinição de Usabilidade
Facilidade de relembrar (memorability) O sistema precisa ser facilmente
relembrado, de forma que o usuário ao voltar a usá-lo depois de um certo tempo não tenha novamente que aprendê-lo.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Definição de UsabilidadeDefinição de Usabilidade
Erros Neste contexto, erro é definido como uma
ação que não leva ao resultado esperado, um "engano" portanto. O sistema precisa ter uma pequena taxa de erros, ou seja, o usuário não pode cometer muitos erros durante o seu uso e, em errando, deve ser fácil a recuperaração, sem perda de trabalho.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Definição de UsabilidadeDefinição de Usabilidade
Satisfação subjetiva Os usuários devem gostar do sistema, ou
seja, deve ser agrádável de forma que o usuário fique satisfeito ao usá-lo.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Definição de UsabilidadeDefinição de UsabilidadeAtributos de usabilidade◦facilidade de aprendizagem (learnability)◦eficiência◦facilidade de rememorar (memorability)◦erros : poucos e não catastróficos◦satisfação subjetiva
Como medir usabilidade ?
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Medidas de Satisfação SubjetivaMedidas de Satisfação SubjetivaQuestionárioPor favor indique o grau com o qual você concorda ou não
com as seguintes afirmações sobre o sistema: É muito fácil aprender como se usa esse sistema Usar este sistema foi uma experiência muito frustante Eu sinto que esse sistema irá me permitir conseguir uma alta
produtividade Eu me preocupo que muitas das coisas que faço com esse sistema
podem estar erradas Este sistema pode fazer todas as coisas que eu poderia precisar É muito agradável trabalhar com esse sistema
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Medidas de Satisfação SubjetivaMedidas de Satisfação SubjetivaEscala semântica Diferencial
Por favor marque as posições que melhor refletem suas impressões sobre o sistema
◦Agradável ------- Irritante◦Completo ------- Incompleto◦Cooperativo ------- Não Cooperativo◦Simples ------- Complicado◦Rápido de Usar ------- Lento para usar◦Seguro ------- Inseguro
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Usabilidade de ÍconesUsabilidade de ÍconesD
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
Usabilidade de ÍconesUsabilidade de ÍconesD
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
Usabilidade de ÍconesUsabilidade de ÍconesD
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
Usabilidade de ÍconesUsabilidade de ÍconesD
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
Categorias de UsuáriosCategorias de Usuários e Diferenças Individuais e Diferenças Individuais
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
WEBWEBem janeiro de 2000 - 10 milhões de sites ◦1,6 bilhão de páginas◦72 milhões de servidores◦275 milhões de usuários navegando◦a cada 24hs
3,3 milhões de novas páginas 123 000 novos usuários
dezembro de 2000 - 25 milhões de sitesprevisão para fim de 2002 - 100 milhões
de sites
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
WEBWEB
em 1998 cerca de 3 bilhões de dólares deixaram de ser ganhos na WEB norte- americana por causa de designs mal feitos com a enorme oferta de alternativas usuários tem uma notável impaciência e insistência em gratificação imediata
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
WEBWEB
usabilidade assume uma importância ímpar na economia da Internet:◦no design de produtos e de software
tradicionais, usuários pagam antes e experimentam a usabilidade depois
◦na WEB experimentam a usabilidade antes e pagam depois
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Usabilidade na WEB- Ex.: IBMUsabilidade na WEB- Ex.: IBMD
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
O caso IBMO caso IBM
recurso mais popular em seu site função de busca
as pessoas não conseguiam descobrir como navegar segundo recurso mais popular
◦ botão de ajuda. solução
amplo processo de redesign, envolvendo centenas de pessoas e milhões de dólares.
Resultado na primeira semana depois do redesign em fevereiro de 1999 o uso do botão de ajuda caiu 84% as vendas aumentaram 400%.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Usabilidade na WEBUsabilidade na WEBClareza na arquitetura da informação◦essencial que o usuário consiga discernir o
que é prioritário e o que é secundário no site. Um bom arranjo da informação
◦usuários sempre terão dificuldades em encontrar o que procuram devem ser ajudados
prover um senso de como a informação está estruturada e localizada. uma das alternativas adotadas em alguns sites, é prover
um mapa do site
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Usabilidade na WEBUsabilidade na WEBFacilidade de navegação◦Uma máxima é que o usuário deveria
conseguir acessar a informação desejada no máximo em três cliques
Simplicidade◦Quem navega quer encontrar o mais
rapidamente possível o objetivo da busca. a pirotecnia deve ser evitada, dando ao usuário paz
e tranquilidade para que possa analisar a informação
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SimplicidadeSimplicidade
Onde estou ? O que este site faz ?
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
SimplicidadeSimplicidadeD
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
Usabilidade na WEBUsabilidade na WEBA relevância do conteúdo◦Sempre que questionados sobre sites,
usuários se referem a qualidade e relevância do conteúdo
◦Um bom texto para essa mídia o mais conciso e objetivo possível não promocional ou publicitário leitores online imprimem textos
necessitam páginas bem curtas informação secundária deixada para páginas de suporte
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Usabilidade na WEBUsabilidade na WEBManter a consistência◦Quando as coisas acontecem sempre do
mesmo jeito, os usuários não precisam se preocupar a respeito do que irá acontecer
◦um Website deve ser gerenciado como um projeto único de interface com o usuário
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Usabilidade na WEBUsabilidade na WEBTempo suportável◦tempo de carga das páginas deve ser curto◦10 segundos é o máximo de tempo antes que as
pessoas percam o interesse na Web os usuários já têm uma baixa
expectativa limite pode aumentar para 15 segundos
Foco nos usuários◦ 'sair do caminho' para que o usuário possa fazer o que quer da
maneira mais rápida possível.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Usabilidade na WEB - resumoUsabilidade na WEB - resumoClareza na arquitetura da informaçãoFacilidade de navegaçãoSimplicidadeA relevância do conteúdoManter a consistênciaTempo suportávelFoco nos usuários
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
Amazon (1995) Amazon (1995) D
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
Amazon (2000)Amazon (2000)D
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
UOL 1995UOL 1995
A Folha Web, site da Folha de S. Paulo, no
ar em 1995, trazia reportagens
selecionadas do jornal impresso e a charge
do dia
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
UOL FuturoUOL Futuro
Barra de navegação principal
verticalizada à
esquerda
Barra superior de ajuste do
navegador
Nomes das estações no
miolo da página
Um dos estudos para a homepage do futuroUniverso Online, ainda com o nome de trabalhopara preservar o sigilo
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
UOL – 28.04.1996UOL – 28.04.1996D
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
UOL - agosto de 1996UOL - agosto de 1996D
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
UOL ( junção com Abril)UOL ( junção com Abril)
Em dezembro de 1996, a home page ficoumais quente: foi aberto espaço para imagens
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
UOL – 04.1999UOL – 04.1999
No aniversário de 3 anos do UOL, em abril de 1999, a
home page do UOL mudou para espelhar o crescimento
do site. Os assinantes votaram e ajudaram a escolher a nova
cara do UOL
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
UOL - 1999UOL - 1999
Em outubro de 1999, entra no ar a nova home com a cor escolhida pelo público.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
UOL 2002UOL 2002D
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
USP 2002USP 2002D
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
UNICAMP - 2002UNICAMP - 2002D
ESIG
N E
AVA
LIAÇ
ÃO D
E IN
TERF
ACES
HU
MAN
O-C
OM
PUTA
DO
R
HEL
OÍS
A VI
EIRA
DA
ROCH
A -
MA
RIA
CECÍ
LIA
CALA
NI B
ARA
NA
USK
AS
INTERFACES INTERNACIONAISINTERFACES INTERNACIONAIS
Exportar software é vital para qualquer indústria produtora de software. Interfaces internacionais são aquelas projetadas para serem usadas em mais de um país. Fato mais que definitivo é que não basta um produto traduzido em muitas outras línguas.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
INTERFACES INTERNACIONAISINTERFACES INTERNACIONAIS
Fazer o design de uma interface internacional pode ou não envolver tradução de linguagem, mas certamente deve envolver conhecimento sobre as necessidades e cultura de outros países.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
INTERFACES INTERNACIONAISINTERFACES INTERNACIONAIS
Usuários desejam um produto que seja adequado às suas características culturais e práticas de trabalho e, algumas vezes, isso não implica necessariamente em uma tradução. Equipes de design de software têm então pela frente o desafio de garantir a usabilidade de seus produtos para todo o mercado global.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
INTERFACES INTERNACIONAISINTERFACES INTERNACIONAIS
Do ponto de vista dos usuários, temos que bem mais da metade de usuários de software usam atualmente interfaces cujo design foi feito em um país estrangeiro. Usabilidade para esse grande número de usuários irá depender da maior consciência da necessidade de se ter design direcionado à internacionalização (Nielsen, 1993).
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
INTERFACES INTERNACIONAISINTERFACES INTERNACIONAIS
Internacionalização e Localização
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
INTERFACES INTERNACIONAISINTERFACES INTERNACIONAIS
Podemos classificar os símbolos gráficos em três categorias distintas (Rogers, 1989):
Símbolos de semelhança ou íconesretratam o objeto que representam. Por
exemplo, a figura de uma impressora para indicar a função imprimir, a de uma tesoura para a cortar, etc.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
INTERFACES INTERNACIONAISINTERFACES INTERNACIONAIS
Símbolos de referênciaretratam algum objeto que por referência
ou analogia pode representar o conceito que o símbolo está querendo representar.
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
INTERFACES INTERNACIONAISINTERFACES INTERNACIONAIS
Símbolos arbitráriosformas arbitrárias que somente tem
significado por convenção. Por exemplo, todos os sinais de trânsito (que têm sido fonte de inspiração para muitos designers dada a sua característica de padrão internacional).
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS
INTERFACES INTERNACIONAISINTERFACES INTERNACIONAIS
Símbolos arbitráriosformas arbitrárias que somente tem
significado por convenção. Por exemplo, todos os sinais de trânsito (que têm sido fonte de inspiração para muitos designers dada a sua característica de padrão internacional).
DES
IGN
E A
VALI
AÇÃO
DE
INTE
RFAC
ESH
UM
ANO
-CO
MPU
TAD
OR
H
ELO
ÍSA
VIEI
RA D
A RO
CHA
- M
ARI
A CE
CÍLI
A CA
LAN
I BA
RAN
AU
SKAS