Usabilidade Interfaces Web

Usabilidade de
Interfaces Web
Projetando interfaces para o uso
USABILIDADE
USABILIDADE
O que vem a sua
cabeça?
USABILIDADE
Dificuldade
Problema
Solução
Melhoria
® Todos os direitos reservados.
Proibida a reprodução
USABILIDADE
Dificuldade
Problema
Solução
Melhoria
USABILIDADE
Dificuldade Oportunidade
Problema Necessidade
Solução
Melhoria
USABILIDADE
Solução
Melhoria
http://goias24horas.com.br/wp-content/uploads/2013/07/parreira.jpg
"O gol é um detalhe"
Carlos Alberto Parreira, técnico Tetracampeão Mundial
pela Seleção Brasileira em 1994
http://goias24horas.com.br/wp-content/uploads/2013/07/parreira.jpg
USABILIDADE
Solução Usuário
Melhoria Inovação
Momento dica!
Os números do jogo 
Chris Anderson e David Sally
Não tomar um gol

tem mais valor do
que fazer dois gols
na busca por uma
vitória
http://www.companhiadasletras.com.br/detalhe.php?codigo=13478
USABILIDADE
USABILIDADE
USABILIDADE
DE INTERFACES
WEB
USABILIDADE
ERGONOMIA
IHC
USABILIDADE
Ergonomia
• É a disciplina científica que estuda as interações
entre humanos e outros elementos de um sistema e
também é a profissão que aplica teoria, princípio,
informação e método para projetar de modo a
otimizar o bem-estar humano e desempenho geral
de um sistema.
International Ergonomics Association

http://www.iea.cc/whats/index.html
Ergonomia
• É o estudo sobre as habilidades, limitações e
outras características humanas que são relevantes
para o design.
Alphonse Chapanis, 1994

Ergonomia
• Maximizar a eficiência no trabalho
• Maximizar a condição de saúde do trabalhador
• Minimizar os riscos de saúde e segurança

IHC (Interação
Homem-Computador)
• É um campo de estudo interdisciplinar que tem
por objetivo entender como e porque as pessoas
utilizam (ou não utilizam) a tecnologia de
informação.
Stephania Padovani, 2002, em Design e Avaliação de Interface

http://pan.nied.unicamp.br/publicacoes/livros.php?id=40&download=1
IHC (Interação
Homem-Computador)
• Conjunto de processos, diálogos e ações através
dos quais um usuário humano interage com um
determinado sistema computadorizado.
Ronald Baecker e William Buxton, 1987

http://pan.nied.unicamp.br/publicacoes/livros.php?id=40&download=1
COMPLEXIDADE
USABILIDADE
SIMPLICIDADE
COMPLEXIDADE
USABILIDADE
SIMPLICIDADE
“O princípio básico do web design é não ser
obstrutivo e fazer com que o usuário tenha
sucesso em sua tarefa o mais rápido possível"
Jakob Nielsen, 1999
USABILIDADE
SIMPLICIDADE
Momento dica!
Projetando websites 
Jakob Nielsen
Usabilidade na Web 
Jakob Nielsen e Hoa Loranger
Usabilidade móvel
Jakob Nielsen e Raluca Budiu
http://busca.livrariacultura.com.br/?termo=NIELSEN,%20JAKOB&modo_busca=A&filtro10=Y&ordem=RD
USABILIDADE
USABILIDADE
Lição no.1
O problema NUNCA
está no usuário
“Se o usuário tem um problema,
esse problema é nosso”
Steve Jobs
USABILIDADE
Lição no.2
NÃO faça o usuário

pensar
Momento dica!
Não me faça pensar 
Steve Krug
“Fazer algo que uma

pessoa não muito
experiente consiga
usá-lo para a sua
devida finalidade, sem
nenhuma frustração
durante esse processo"
http://www.livrariacultura.com.br/scripts/resenha/resenha.asp?nitem=2590021
USABILIDADE
Facilidade de uso e
de aprendizado
FACILIDADE DE USO?!
http://ux-disasters.com/image/61782797227
http://i01.i.aliimg.com/wsphoto/v0/959970945/FREE-SHIPPING-font-b-Push-b-font-font-b-pull-b-font-glass-font-b-door.jpg
RESPONDA RÁPIDO
RESPONDA RÁPIDO
Quais as cores das
palavras?
AMARELO
AZUL
VERMELHO
VERDE
AZUL
AMARELO
VERDE
VERMELHO
http://i01.i.aliimg.com/wsphoto/v0/959970945/FREE-SHIPPING-font-b-Push-b-font-font-b-pull-b-font-glass-font-b-door.jpg
Momento dica!
Rápido e Devagar 
Daniel Kahneman
O seu cérebro é
preguiçoso por
natureza. É uma
questão de
sobrevivência
http://www.livrariasaraiva.com.br/produto/4074748/rapido-e-devagar-duas-formas-de-pensar/
http://uiobservatory.com/media/2011/ElevatorButtonPanelPlus1B.png!
http://drzaius.ics.uci.edu/blogs/danyelf/archives/images/user_interface_1.jpg
http://ux-disasters.com/image/61782797227
http://s2.glbimg.com/EKxg4-VzMof6zhpQz19FfzCk0uk=/0x0:1037x615/690x409/s.glbimg.com/es/ge/f/original/ ® Todos os direitos reservados.
2014/03/12/pagina-ingresso-fifa_reproducao_1.jpg Proibida a reprodução
http://s2.glbimg.com/ikPd8SG9UQNN3YXdnoQ1gexbG3g=/0x0:1206x548/695x316/s.glbimg.com/po/tt2/f/original/ ® Todos os direitos reservados.
2013/11/29/black_friday_tira_site_do_submarino.com_do_ar.png Proibida a reprodução
https://itunes.apple.com/id/app/baby-sleep-brush-bath-bed/id874814480?mt=8
https://www.usertesting.com/highlight_reels/5dqD7r8sgCyVY9RgPqDG#27562
http://www.youtube.com/watch?v=XRs7BJP6Ky4&feature=youtu.be
http://www.informationisbeautiful.net/visualizations/million-lines-of-code/
http://www.informationisbeautiful.net/visualizations/million-lines-of-code/
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
14 de Setembro de 2005
New York Times, página B9
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
Unidade 1
http://www.amazon.com/Kensington-K64218-WebRacer-Internet-Mouse/dp/B00000K4LJ! ® Todos os direitos reservados.
http://impossibleobjects.com/cafetiere-pour-masochistes.html?___store=francoise&___from_store=english Proibida a reprodução
Usabilidade
• ISO 9241-11: É a extensão na qual um produto
pode ser usado por usuários específicos com
efetividade, eficiência e satisfação em um
contexto de uso específico

http://pt.wikipedia.org/wiki/Usabilidade
Usabilidade em uma interface
• Está diretamente ligada ao diálogo na interface. É
a capacidade do software em permitir que o
usuário alcance suas metas de interação com o
sistema.
Dominique Scapin, 1993

Usabilidade em uma interface
• É um conjunto de propriedades de uma interface:
• Ser de fácil aprendizagem
• Permitir a utilização eficiente
• Apresentar poucos erros
• Ser de fácil memorização
• Gerar satisfação e prazer no uso
Jakob Nielsen, 1999

http://www.nngroup.com/articles/usability-101-introduction-to-usability/
USUÁRIO
Usabilidade
Necessidade
de um ser Efetividade!
humano Fazer o que se quer
!
Eficiência!
No menor tempo e
TAREFA CONTEXTO esforço
Objetivo a ser Motivação, !
atingido. ambiente e Satisfação!
Resultado tecnologia Nível de conforto e
realização

http://www.interfaceando.com/usabilidade-para-websites/aspectos-e-medidas-da-usabilidade/
Unidade 1
Usabilidade
Efetividade é a capacidade da interface em
permitir que o usuário alcance os objetivos
iniciais de interação. A efetividade geralmente é
observada em termos de finalização de uma tarefa
e também em termos de qualidade do resultado
obtido.

Unidade 1
Usabilidade
Efetividade!
!
Segundo o Aurélio:!
!
1. Qualidade de efetivo!
2. Atividade real, resultado verdadeiro!
3. Realidade, existência

Unidade 1
Usabilidade
Eficiência se refere à quantidade de esforço
necessário para se chegar a um determinado
objetivo. Não é suficiente permitir que o usuário
atinja o objetivo e realize a tarefa, mas que o faça
com o menor esforço possível. Os desvios que o
usuário faz durante a interação, e a quantidade de
erros cometidos, servem para avaliar o nível de
eficiência do aplicativo.

Unidade 1
Usabilidade
Satisfação se refere ao nível de conforto que o
usuário sente ao utilizar a interface e qual a
aceitação como maneira de alcançar seus objetivos.
A satisfação poder ser percebida por meio de
análise qualitativa das atitudes, por exemplo,
através da opinião do usuário, seja por meio de
entrevistas ou mesmo comentários feitos durante a
interação.

Unidade 1
Usabilidade
Para Jordan (1999), satisfação se refere ao nível
de conforto que o usuário sente ao utilizar um
produto e o quanto esse produto é aceitável para o
usuário como veículo para atingir seus objetivos.
!
Motta (1999) aponta que satisfação é o grau de

consistência entre o que o usuário (consumidor)
espera e o que percebe após o uso.

Unidade 1
Usabilidade
Kotler (1998) se refere ao termo satisfação como
o sentimento de prazer ou de desapontamento
resultante da comparação do desempenho
esperado pelo produto em relação às
expectativas da pessoa.

Unidade 1
Usabilidade
O termo satisfação, desta forma, se Expectativa
refere às expectativas do usuário em
relação à determinada interface de
aplicativo e o resultado, refletido por sua Interface
atitude, obtido após a interação.
Resultado

Unidade 1
Usabilidade
“O Webdesign insatifatório acarreta uma série de
custos para as companhias” (Nielsen, 1998).
!
Os principais são:
• Perda de 50% das vendas, porque os clientes não
conseguem encontrar produtos nem informações;

• O resultado negativo da primeira visita gera perda
de 40% de clientes na segunda visita (NIELSEN,

1998).

Unidade 1
Usabilidade
Considerar somente os objetivos corporativos das
empresas, confundindo-os com os objetivos dos
usuários é o caminho mais rápido para criar um Web
site inavegável. (Fleming, 1998)

Unidade 1
Usabilidade
Para o Negócio:
• Mais barato - Diminui os custos de concepção;
• Mais rápido - Encurta o tempo de desenvolvimento;
• Mais seguro - Diminui o risco de desvio
orçamentário no projeto, melhora a probabilidade
de sucesso no mercado;

Unidade 1
Usabilidade
Para o Negócio:
• Aumenta as vendas - Os produtos são mais
atraentes e vendem mais porque são mais
intuitivos, rápidos e eficientes;
• Aumenta o nível competitivo - Os clientes esperam
obter produtos de fácil utilização.

Unidade 1
Usabilidade
Para a Gestão de Projeto:
• Melhora a gestão de riscos - Permite testar o produto
e tomar decisões muito antes de sair para o
mercado;
• Simplifica o planejamento - Permite calcular os
tempos de execução e elimina a necessidade de
refazer trabalho devido a uma concepção incorreta
ou falta de comunicação;

Unidade 1
Usabilidade
Para a Gestão de Projeto:
• Fornece provas de sucesso desde o momento inicial:
relatórios detalhados confirmam a validade do
produto desde as etapas iniciais do projeto.

Unidade 1
Usabilidade
Para as equipes de Design:
• Design mais apurado - tem-se uma visão mais
apurada daquilo que necessita ser efetuado em cada
parte do projeto;
• Prova de que o design funciona - Validação por parte
de usuários reais antes do produto sair para o
mercado;

Unidade 1
Usabilidade
• Demonstra como os usuários navegam - Testes de
usabilidade permitem saber o que os utilizadores
usam e como usam antes de se começar a
desenvolver o projeto;
• Fim das alterações de última hora - O produto é
testado antes da entrada em produção prevenindo
que hajam alterações de última hora;

Unidade 1
Usabilidade
• Testes de validação finais menos estressantes - Uma
vez que já houve uma validação inicial, os testes de
validação finais são um processo mais suave e com
muito poucas correções à efetuar ao produto final.

Unidade 1
Usabilidade
Para as equipes de Documentação:
• A documentação de ajuda (manual do usuário) é
iniciada mais cedo - A documentação do projeto é
feita desde o momento inicial, o que permite ter
mais tempo para a produção da documentação;
• Menos documentos - Diminui a necessidade de
manuais de utilização, uma vez que a interface é
mais intuitiva.

Unidade 1
Usabilidade
Para os usuários:
• Redução dos tempos de cada tarefa - A redução dos
tempos de execução aumenta o desempenho e a
produtividade do usuário;
• Redução dos erros - A ocorrência de erros por parte
do usuário leva a um redução da produtividade
devido à necessidade da sua correção.
Consequentemente isto induz a uma menor
qualidade do serviço prestado;

Unidade 1
Usabilidade
Para os Usuários:
• Redução do tempo de formação - Cada hora a
menos na formação é uma hora a mais em produção;
• Redução do turnover - Maior satisfação e motivação
dos usuários aumenta a sua lealdade para com o
produto/empresa.

Unidade 1
Usabilidade
Para as equipes de Suporte:
• Menos material de formação - É necessário menos
material para a formação, reduzindo os custos da
mesma;
• Melhor eficiência - Reduz o tempo dispendido a dar
atendimento aos usuários sempre que estes
encontram dificuldades;

Unidade 1
Usabilidade
Para as equipes de Suporte:
• Linha de apoio mais eficaz - A maior parte das
questões efetuadas às linhas de apoio são sobre
problemas de usabilidade. Uma melhor usabilidade
irá reduzir o número de chamadas de ajuda. Cada
atendimento de um call center custa em torno  
de R$ 10,00.

Unidade 1
Usabilidade
Ação do usuário Reconhecimento e
gerando input para interpretação dos
o computador inputs do usuário
Tomada de Processamento
Interface
decisões (o que Homem Computador de Input de
fazer com a acordo com os
resposta recebida algoritmos
do computador)
Reconhecimento Resposta do
e interpretação da computador
informação enviada ao
apresentada pelo usuário
computador

Exercício
Pensar uma proposta de serviço para construir um
protótipo de interface a ser testado até o fim do
curso. 
 
Premissas para a definição da proposta:
• Um objetivo único e claro (ex: vender bolos e

doces)
• Assunto/Tema do seu interesse e/ou conhecimento

Exercício
Exemplos / Sugestões:
• Compra / Encomenda de bolo e doces para festas
• Marcação de consulta médica
• Tutoriais de aprenda e faça você mesmo (objetos

decorativos, acessórios de roupa, uso de software
etc)

Exercício
Quais as questões que esse(s) serviço(s)
compreende(m) do ponto de vista de quem vai
fazer uso?

Unidade 3
Teste de usabilidade
Quanto mais cedo os testes forem introduzidos no
processo de desenvolvimento, menores serão os
custos e melhores serão os resultados. É
absolutamente viável realizar testes de usabilidade
em protótipos de todo o tipo, bem como outras
técnicas que trazem à luz a visão do usuário sobre
a interação.

Unidade 3
Teste de usabilidade
O mais importante destas considerações é que há
um cuidado que deve ser tomado antes de todos
os demais: o comprometimento dos superiores e
da equipe com os testes. Sem que todos
entendam o valor de conhecermos a visão do
cliente na hora da interação, não há razão para
investir tempo e dinheiro nos testes.

Unidade 3
Laboratório de usabilidade
1999. Laboratório de Ergonomia e Usabilidade de
Interfaces em Sistemas Humano-Tecnologia (LEUI),
sob a coordenação de Claudia Mont'Alvão.

Unidade 3
Laboratório de Usabilidade da Globo.com foi
inaugurado em julho de 2001, como o primeiro
laboratório inhouse da América Latina dedicado
exclusivamente à questão da usabilidade. O
laboratório é localizado no escritório do Cittá América
na Barra da Tijuca, Rio de Janeiro. Em 2010, o
laboratório foi ampliado e reformado.

Unidade 3

Unidade 3
Department of Computer Science at The University of Waikato

Unidade 3




The University Of Queensland

Cuidado!!
!
Essa busca pela rapidez, do aproveitamento do

“time-to-market”, ou seja, do tempo de chegada de
determinado produto ao mercado, gera pressão em
torno do desenvolvimento, impossibilitando um
projeto cuidadoso.

Unidade 3
Nielsen (1989) mostrou em seu artigo “Usability
Engineering at a Discout” que testes de usabilidade
não precisam necessariamente envolver muito
dinheiro. Ele afirmou que mesmo sem um laboratório
de usabilidade e testando poucos usuários, se
chegaria a um resultado satisfatório.

Unidade 3
Equipamentos mínimos necessários:
• Câmara de vídeo
• Gravador VHS / Digital
• Software capturador de telas
• Gravador de áudio

Laboratório de Usabilidade
Projeto do laboratório da Infoglobo

Testar ou não testar?
Testar ou não testar?
“Seu projeto será testado por usuários de
qualquer forma. A sua única opção é executar o
teste antes do lançamento para corrigir
problemas inevitáveis enquanto é barato,
evitando o risco de pagar caro mais tarde.”
Jakob Nielsen, 2013

http://www.nngroup.com/articles/quality-assurance-ux/
Testar!
Observar!
Pesquisar!
Perguntar!
Investigar!
Entrevistar!
…
Técnicas e métodos
Quantitativos ou qualitativos
Formativos ou somativos
Individuais ou coletivos
Presenciais ou à distância
Com usuários ou por especialistas
Teóricos ou empíricos

Técnicas e métodos
Questionários
Entrevistas em profundidade
Grupo de foco
Análise da tarefa
Avaliação cooperativa
Avaliação heurística
Eye-Tracking
…

Questionários
Objetivos!
Investigação de público-alvo;
Selecionar amostra para os testes de usabilidade;
Ser utilizado como um método formativo ou somativo.
!
Quando aplicar!
Depende da etapa, no início do projeto quando ainda
se está colhendo informações, ou quando se opta
por um reprojeto de interface.

Questionários
Para GÜNTHER (2003), o questionário é um conjunto
de perguntas sobre um determinado tópico que
não testa a habilidade do respondente, mas mede a
sua opinião, seus interesses, aspectos de
personalidade e informação biográfica.

Questionários
Para JORDAN (1998), os questionários são um
método barato (pode ser copiado e distribuído para
quantas pessoas o investigador julgar necessário) e
eficaz de reunir dados de uma grande população
(amostra). O método também é versátil, podendo ser
utilizado em qualquer estágio do processo de projeto.

Unidade 3
Questionários
Para a elaboração do questionário você precisa:
• Planejamento (Definição de objetivos, prazos,
confiabilidade e recursos disponíveis) ;
• Definição da amostragem (Definição do público-alvo,
tamanho da amostra e procedimentos de amostragem);
• Construção do questionário (lista de perguntas,
ordenamento.

Unidade 3
Questionários
Procedimentos:
• Testar o questionário, com 10 a 30 pessoas corrigir
e ajustar perguntas;
• Questionário reformulado;
• Aplicar o questionário reformulado;
• Tabular as respostas;
• Selecionar o grupo de pessoas para futuros testes.

Questionário: exemplo
1) Você procura informações sobre o trânsito antes de sair de casa? 
 
Sim, sempre 
Sim, mas só quando tenho tempo 
Não, nunca me preocupo
!
2) Você acompanha informações de trânsito quando está no trânsito? 
 
Sim, pelo rádio
Sim, pelo celular 
Sim, pelo celular e pelo rádio 
Sim, por outro meio 
Não

3) Você usa o celular para buscar informações sobre o trânsito em
algum momento do dia?
!
Sim, às vezes 
Sim, sempre que preciso
Não, nunca utilizo
!
4) Quando você vê algum problema no trânsito, você costuma alertar
outras pessoas?
!
Sim, aviso todo mundo que posso
Sim, procuro avisar os amigos
Não

5) Qual o meio de transporte que você mais utiliza para ir trabalhar?
!
Bicicleta
Carro
Metrô
Ônibus
Táxi
Trem
Vou a pé 
Outro(s)



Exercício
Construir um questionário para investigar público-
alvo, potenciais interesses, expectativas e
necessidades, e reunir informações que podem
ser úteis para definir o projeto.
!
!
Ferramenta para o questionário: Google Drive.
!
!
Tempo da atividade: 45 minutos.

Avaliação heurística
O termo “avaliação heurística” em IHC foi introduzido
por Jakob Nielsen e Rolf Molich no início da década
de 1990, quando propuseram um método através do
qual um pequeno grupo de avaliadores examina uma
dada interface e procura por problemas que violem
alguns princípios gerais do bom projeto de interface.

As heurísticas de Nielsen
1.Visibilidade do status do sistema;
2.Equivalência entre o sistema e o mundo real;
3.Controle do usuário e liberdade;
4.Consistência e padrões;
5.Prevenção de erro;
6.Reconhecer ao invés de relembrar;
7.Flexibilidade e eficiência de uso;
8.Estética e design mínimo;
9.Auxiliar usuários a reconhecer, diagnosticar e
recuperar ações erradas;
10. Ajuda e documentação.
1. Visibilidade do status do sistema!
!
O sistema deve sempre manter o usuário
informado sobre o que está acontecendo, através
de feedback apropriado em período de tempo
razoável.

1. Visibilidade do status do sistema



2. Equivalência entre o sistema e o mundo real!
!
O sistema deve falar a linguagem do usuário, com
palavras, frases e conceitos que lhes sejam
familiares, ao invés de termos orientados ao
sistema. Deve-se seguir convenções do mundo
real, fazendo a informação aparecer em uma
ordem natural e lógica.

2. Equivalência entre o sistema e o mundo real

3. Controle do usuário e liberdade
!
Usuários podem escolher funções do sistema por
engano e precisarão de uma “saída de
emergência” bem marcada para deixar o estado
não desejado sem ter que passar por um extenso
diálogo. Deve-se possibilitar que o usuário possa
desfazer e refazer ações.

3. Controle do usuário e liberdade

4. Consistência e padrões!
!
Usuários não devem ter que imaginar se palavras,
situações, ou ações diferentes significam a
mesma coisa. Devem-se seguir as convenções
da plataforma.

4. Consistência e padrões

5. Prevenção de erro!
!
Muito melhor que boas mensagens de erro é um
projeto cuidadoso que, em primeiro lugar, previna
a ocorrência de problemas.

5. Prevenção de erro!

6. Reconhecer ao invés de relembrar!
!
Deve-se tornar objetos, ações e opções visíveis.
O usuário não deve ter que relembrar informação
de uma parte do diálogo em outra parte.
Instruções para uso do sistema devem estar
visíveis ou facilmente recuperáveis sempre que
necessário.

6. Reconhecer ao invés de relembrar!

7. Flexibilidade e eficiência de uso!
!
Aceleradores da tarefa – não vistos pelo novato –
podem ainda aumentar a velocidade de interação
para o usuário experiente de forma que o sistema
possa atender tanto aos usuários experientes
quanto aos inexperientes.



8. Estética e design minimalista!
!
Diálogos não devem conter informação que seja
irrelevante ou raramente necessária. Toda
unidade de informação extra em um diálogo
compete com unidades de informação relevantes
e diminui sua visibilidade relativa.

8. Estética e design minimalista!

9. Auxiliar usuários a reconhecer, diagnosticar e
recuperar ações erradas!
!
Mensagens de erro devem ser expressas em
linguagem clara (sem códigos), indicar
precisamente o problema, e sugerir
construtivamente uma solução.

9. Auxiliar usuários a reconhecer, diagnosticar e
recuperar ações erradas

10. Ajuda e documentação
!
Ainda que seja melhor que o sistema possa ser
usado sem documentação, pode ser necessário
prover ajuda. Qualquer informação deste tipo
deve ser fácil de buscar, ser focada na tarefa do
usuário, relacionar passos concretos a serem
desenvolvidos, e não ser muito longa.

10. Ajuda e documentação

Etapas: 1/5
!
Reunir um grupo de especialistas para executar a
avaliação!
!
Nielsen, após alguns estudos, relatou que o número suficiente de avaliadores
para detectar grande número de problemas de usabilidade pode variar entre
três e cinco.
 
Um outro ponto a ser considerado é o nível de expertise do avaliador,
confrontado com seu conhecimento do domínio da tarefa para a qual a interface
em questão se destina.

Etapas: 2/5
!
Pedir que os especialistas avaliem a interface
isoladamente, posteriormente comparando-se os
achados.
!
A avaliação isolada é importante para evitar que os achados de um sejam
influenciados pelos de outro avaliador da interface.
!
Os avaliadores devem percorrer a interface mais de uma vez à procura de cada
elemento da interface e avaliar seu design, posicionamento, implementação etc.,
tendo como referência a lista de princípios heurísticos.

Etapas: 3/5
!
Obter o feedback dos avaliadores.!
!
a) relatório estruturado – onde são compiladas todas as notas e relacionados os
achados da avaliação. A redação de um relatório estruturado pode levar muito tempo;
!
b) registro de verbalizações – pressupõe a presença de alguém para tomar nota das
falas do avaliador durante o processo. Possibilita a descoberta de problemas que
poderiam ser encobertos no caso do avaliador por si só tivesse que tomar nota de
tudo. Captura comentários não estruturados;
!
c) relatório segundo categorias – as categorias de problemas devem ser
estabelecidas e apresentadas aos avaliadores. Apesar de ser mais fácil de analisar,
este tipo de resposta pode deixar de lado alguns problemas que outras formas de
relatório poderiam registrar.
Etapas: 4/5
!
Atribuir níveis de gravidade aos problemas encontrados.!
!
0 - Não é encarado necessariamente como um problema de usabilidade.
!
1 - Problema estético. Não necessita ser corrigido, a menos que haja tempo
disponível.
!
2 - Problema menor de usabilidade. Baixa prioridade para sua correção.
!
3 - Problema maior de usabilidade. Alta prioridade para sua correção.
!
4 - Catástrofe de usabilidade. É imperativo corrigir.

Nielsen (1999) destaca que a gravidade de um
problema de interface é uma combinação de três
fatores: 
Frequência: implica saber se o problema é comum ou raro;

 
Impacto: deve-se procurar saber se os usuários conseguem ultrapassar o problema
de maneira fácil ou com dificuldade;
 
Persistência: implica saber se os usuários poderão ultrapassar o problema, uma vez
que tenham conhecimento de sua existência, ou serão repetidamente por ele
incomodados.

Etapas: 5/5
!
Tabular dados.!
!
A tabulação dos dados propicia ter uma visão da quantidade de problemas e sua
distribuição em relação aos níveis de gravidade.
!
A partir dos resultados, é possível determinar quais os problemas mais graves e que
precisarão ser corrigidos prioritariamente.

Etapas!
!
1. Reunir um grupo de especialistas para executar a avaliação; 
2. Pedir que os especialistas avaliem a interface isoladamente, comparando-se os

achados posteriormente; 
3. Obter o feedback dos avaliadores; 
4. Atribuir níveis de gravidade aos problemas descobertos; 
5. Tabular dados.

Exercício
Fazer uma avaliação do site do iLearn com base nas heurísticas
de Nielsen.
!
Cada grupo deve gerar uma lista de problemas identificados,
todos classificados quanto à heurística e à gravidade.
!
Depois, consolidaremos juntos em uma lista única e final.
!
https://docs.google.com/spreadsheets/d/1tlsEnI7W3IHXrEbJSBMyUPrCuIq10HS21ZCGsxVjeNc/edit?
usp=sharing
!
!
!
Tempo da atividade: 45 minutos.

Objetivo:!
Obter insights de preferências, formas de uso e
modelos mentais de potenciais usuários.
Confirmar ou validar percepções extraídas de outros
formatos de pesquisa (como questionários ou análise
de métricas, por exemplo).

Em formato de pergunta e resposta, a entrevista e
profundidade é feita de maneira individual e busca se
aprofundar nas questões qualitativas que envolvem
as afirmações do usuário. 
Por conta disso, é um formato de investigação não

orientado por tarefas, mas pelo discurso e pelas
percepções do usuário. E por isso mesmo, demanda
experiência do facilitador para a condução o trabalho.
Algumas dicas importantes para uma bom resultado
no trabalho de entrevista:
Estabeleça um diálogo com o participante de forma a
conquistar a confiança dele;
Pergunte sempre “Porquê?"
Use ferramentas simples ara registrar a entrevista: um
gravador (de celular ou smartphone, por exemplo) e
lápis e papel para anotações.

Grupo focado
Objetivo:!
Conhecer de modo informal a visão e a percepção
de usuários sobre uma ideia ou uma interface.

Grupo focado
A técnica de Grupo focado pode ser compreendida
como uma pesquisa qualitativa, significando que
seus resultados não são obtidos em percentagem, em
testes estatísticos ou em tabelas. Este método tende a
ser mais exploratório e menos estruturado do que
outras técnicas de inspeção ou de pesquisa
quantitativa.

Grupo focado
Permite ao pesquisador capturar comentários
subjetivos dos participantes, avaliando suas
considerações, assim como suas percepções,
sentimentos, atitudes e motivações.
!
É uma forma de estudo, cujo os resultados

apresentados não são quantificáveis.

Grupo focado
Na fase de recrutamento normalmente é utilizado o
contato telefônico por meio de entrevistas baseadas
em um questionário controle, que servirão como
filtro para se alcançar o perfil desejado dos
participantes.
!

Grupo focado
Roteiro da atividade
!
• Criar um roteiro que traz as perguntas fundamentais relacionadas ao assunto
da investigação:
!
• Iníciar com perguntas simples para os participantes;
!
• A sequência de perguntas deve ser direcionada ao objetivo que se pretende
atingir;
!
• Ir das perguntas genéricas para as específicas;
!
• Estimar o tempo para resposta das perguntas e, assim, o tempo da atividade;

Grupo focado
Roteiro da atividade
!
• Perguntas sempre feitas para o grupo;
!
• Devem parecer informais. A informalidade ajuda a criar e manter um ambiente
propício para a troca de idéias durante o estudo;
!
• Usar perguntas com palavras ou expressões que os integrantes do grupo,
normalmente, usam quando estão conversando sobre o assunto;
!
• Perguntas claras, curtas e de caráter aberto

Grupo focado
Moderação
!
• Qualidades de um bom moderador: experiência, organizado, flexível e
com boa memória;
!
• Início da sessão com a saudação de boas-vindas;
!
• Na sequência, As regras e recomendações do Grupo focado, em especial
a informação para os participantes do estudo que eles estão sendo
gravados em imagem e áudio;
!
• Após, fazer apresentação geral dos tópicos que serão discutidos na
reunião de estudo;
!
• Então, a primeira pergunta.

Grupo focado
Registro em vídeo e áudio
!
• Pode ser com o auxílio de um profissional monitorando o aparelho;
!
• Pode também ser feito com a câmera de filmagem posicionada em um ponto
fixo na sala, sem ser operada presencialmente por um técnico;
!
• Visão de todos os participantes e da atividade;
!
• Recomenda-se o uso de um gravador de áudio como método preventivo da
qualidade do som.

Grupo focado
Relatório
!
• Qual é a proposta do estudo?
!
• Quais foram os objetivos deste estudo?
!
• Quais são as principais descobertas?
!
• Como resultado, quais são as recomendações?

Objetivos:!
1) Conhecer como usuário interage com a interface;
2) Avaliar tarefas representativas do sistema;
3) Elaborar o projeto de interface;
4) Re-projetar a interface.

Quando aplicar?!
1) Quando o site já está pronto;
2) Em protótipos navegáveis.

Avaliação cooperativa foi desenvolvida na década de
80 na Universidade de York, como uma ferramenta de
pesquisa, e após passou a ser utilizada como técnica
de avaliação para projetos na indústria.

É uma técnica em que os usuários são os avaliadores,
com o objetivo de identificar pontos onde um protótipo
de design possa ser mudado para melhorar. 
Avaliação cooperativa envolve usuários no design,

fazendo-os completar tarefas atribuídas pelo designer
a eles; ao mesmo tempo eles são encorajados a
explicar o que eles estão fazendo e quaisquer
dificuldades que eles tenham.

O que distingue este tipo de avaliação é a cooperação
que ocorre à medida que usuários e projetistas avaliam
o sistema juntos. Os usuários são encorajados a
perguntar ao avaliador sobre o processo de interação
com o sistema, e o avaliador, por sua vez, questiona
sobre o entendimento do usuário em relação ao
sistema. Isto faz o processo parecer muito natural para
os usuários, e requer menos recursos que os métodos
de teste normais.

Etapas:
1) Elaborar tarefas representativas do sistema
2) Marcar o tempo de execução desta tarefa
3) Elaborar documento para acompanhar o teste
4) Selecionar 9 pessoas para avaliação (público-alvo)
5) Instalar um software de captura de ações no computador.
(exemplos: Cantasia, Morae)
6) Filmar e gravar
7) Relatório

Análise da tarefa
Objetivos:!
1) Fornecer descrições detalhadas sobre como as
tarefas são realmente executadas;
2) Avaliar simulações, protótipos, sistemas ainda
incompletos e sistemas em funcionamento.

Análise da tarefa
Pode ser aplicado em todos os estágios do
desenvolvimento de sistemas, desde as primeiras
especificações de requisitos até a avaliação final.
!
É composta por duas etapas:

• Coleta de dados;
• Análise de dados.

Análise da tarefa
Consiste de uma ou uma lista de tarefas a serem
executadas pelo usuário na interface do produto ou
protótipo. Os resultados são em grande parte
quantitativos, mas normalmente é possível extrair
também informações qualitativas, a partir dos
comentários e expressões dos usuários durante o teste.

Análise da tarefa
Exemplos de tarefas:
“Você soube que hoje existe uma promoção neste site
para compra de um tênis que você estava querendo
muito e ficou muito interessado(a). Você decide entrar
agora mesmo para aproveitar essa promoção e
comprar o produto."

Análise da tarefa
“Você quer encontrar a reportagem sobre chegada de
um astro de cinema ao Brasil para ver a Copa do
Mundo. Entre no site e encontre essa informação”

Análise da tarefa
“Você comprou ingressos para um show mas na hora
não teve tempo de imprimir. Agora você chegou em
casa para se vestir e na sequência ir ao show e
lembrou disso dos ingressos e quer imprimi-los.”

Protótipo em papel
Objetivos:!
1) Realizar testes com tarefas representativas do
sistema antes de construí-lo de fato;
2) Otimizar o trabalho da equipe de design;
3) Economizar tempo de desenvolvimento.

Protótipo em papel
A prototipagem em papel é uma maneira fácil e
rápida de criar esboços de páginas que podem ser
usadas para fazer testes com usuários.
!
Porque em papel dá para apagar e voltar a escrever

por cima, dobrar, recortar e é mais rápido de
desenhar do que se fosse feito através de algum
software.

Protótipo em papel
O que é possível investigar?
Conceitos e terminologia: Os usuários percebem os
termos escolhidos para os formulários?
Fluxos de navegação: Os passos que uma tarefa
requer são compreendidos pelos usuários?
Correspondem às suas expectativas?

Protótipo em papel
Conteúdo: A interface fornece a informação que os
utilizadores querem ver? Existe alguma informação em
falta ou a mais?

Protótipo em papel
Organização da página: Apesar dos "monitores"
desenhados não serem nada bonitos, dá para se ter
uma idéia da localização da informação. Os campos e
objetos estão onde os usuários esperam? A
informação disponibilizada é demasiada, pouca, ou a
correta?

Protótipo em papel
Funcionalidades: Através da interação com os
usuários podemos descobrir funcionalidades que eles
necessitam e que não foram concebidas, ou então
funcionalidades que estão no papel mas que os
utilizadores não necessitam.

Protótipo em papel

Protótipo em papel

Protótipo em papel

Protótipo em papel

Protótipo em papel
Bibliografia
Paper Prototyping: The Fast and

Easy Way to Design and Refine
User Interfaces
Carolyn Snyder

Teste com protótipo em papel

https://www.youtube.com/watch?v=9wQkLthhHKA
Exercício
Construir um protótipo em papel para o projeto de
site de encomenda de bolos e doces, com base nos
requerimentos a seguir.

Exercício - Requerimentos
- Site para venda de doces, cupcakes, bolos simples,
decorados e personalizados, bombons/trufas e
guloseimas em geral (balas, confeitos etc);
- Você trabalha com entregas programadas de dia e

horário e aceita diversas formas de pagamento;

Exercício - Requerimentos
- O seu negócio faz dinheiro vendendo tortas, bolos
doces simples, mas a procura por temas e
personalização tem crescido e você quer valorizar
também essa opção pois você acredita no potencial
de crescimento das vendas.

Exercício
Não se preocupem demais com a estética. Foquem
principalmente em: 
- Fluxos de navegação e uso; 
- Priorização e organização da informação; 
- Categorização, nomes de seções, botões etc e
textos.
Esses protótipos serão testados na próxima aula.

Exercício
Para realizar a tarefa, podem/devem ser usados
papéis, canetas, cola, post-its e tesoura.

Exercício
Use da criatividade para auxiliar sua representação das
interações. Os post-its são ótimos aliados nessa hora.

Exercício
Não deixe de construir uma página de "em construção”
e outro de “carregando (loading)“. Elas são elementos
importantes para a hora do teste.

Exercício
Tempo para construção do protótipo: 2 horas e meia.
Bom trabalho e bom divertimento.
E não deixem de pedir ajuda e compartilhar ideias e

dúvidas entre vocês e com o professor. :-)

Exercício - Cenário de uso
Você está procurando bolo e cupcakes temáticos para
o aniversário de 2 anos de seu afilhado.
Uma amiga lhe recomendou este site onde ela fez

recentemente uma compra para o aniversário de seu
filha. Ela elogiou muito a qualidade do bolo e doces
dessa empresa. Você decidiu seguir a dica dela.

Exercício - Cenário de uso
Só que além de escolher o tema, você quer
personalizar o que vai escrito no bolo, escolher a
quantidade de cupcakes e quer poder definir dia,
horário e local de entrega.

Papéis / Personagens!
Usuário - Participante que interage com a interface /

protótipo e fornecer sua opinião
Facilitador - Conduzir o teste e fazer anotações
Computador - Operacionalizar o funcionamento do

protótipo de papel

Facilitador!
Introduzir o teste explicando o papel do usuário
Fazer o usuário interagir com o protótipo e falar o que

está acontecendo ou pensando
Manter-se neutro
Evitar explicar ou defender o protótipo e perguntar ou

ajudar cedo demais

Facilitador!
Anotar: Percurso feito pelo usuário
Opiniões e percepções manifestadas verbalmente
O que não funcionou
Ideias de mudança
Dúvidas para perguntar ao fim do teste

Computador!
Silêncio total
Domínio do protótipo
Sentar-se em frente ao usuário
Neutro, sem qualquer tipo de reação expressiva
Em nenhuma hipótese deve orientar o usuário

Exercício
Aplicar o teste com os protótipos de papel.
Etapas: 
- Definir pessoas e papéis (facilitador, computador e
usuário) 
- Estudar script de teste 
- Arrumar e preparar material para o teste 
- Ensaiar o teste 
- Ajustar detalhes 
- Realizar um (1) teste
EXPERIÊNCIA  
DO USUÁRIO (UX)
EXPERIÊNCIA  
DO USUÁRIO (UX)
É o mesmo que
usabilidade?
O uso de um produto (web) geralmente acontece em
um contexto que envolvem outros sistemas e
interações, que inclusive, podem não ser apenas
virtuais, mas também reais.
Projetar com foco no usuário significa levar em

consideração todas as questões que envolvem a
interação do usuário com um sistema, desde a
motivação desse usuário, passando pelo contexto,
pelo uso em si e indo até as consequências e os
resultados da relação experiência x expectativas.

Design centrado no usuário
Design centrado no usuário
Design centrado na experiência do usuário
Design centrado na experiência do usuário

http://vimeo.com/42175536\ Proibida a reprodução
UX > Usabilidade
UX > Usabilidade
UX inclui todas as
emoções, crenças,
preferências,
percepções,
respostas físicas e
psicológicas,
comportamentos e
realizações que
acontecem antes,
durante e depois
do uso
http://en.wikipedia.org/wiki/User_experience  ® Todos os direitos reservados.

http://semanticstudios.com/publications/semantics/000029.php Proibida a reprodução
Usabilidade
“Seu projeto será testado por usuários de qualquer

forma. A sua única opção é executar o teste antes do
lançamento para corrigir problemas inevitáveis
enquanto é barato, ao invés de pagar caro mais tarde.”
Jakob Nielsen

http://www.nngroup.com/articles/quality-assurance-ux/
Experiência do Usuário
“Todo produto tem uma experiência de uso, quer

você planeje ou não.”
Lane Haley
License: CC BY-NC-SA www.lanehalley.com! ® Todos os direitos reservados.

http://www.slideshare.net/LaneHalley/more-than-a-pretty-stick-ux-for-entrepreneurs Proibida a reprodução
“Na perspectiva do usuário, a experiência de uso é

que é o produto.”
Pabini Gabriel-Petit

http://www.uxmatters.com/mt/archives/2006/03/why-ux-should-matter-to-software-companies.php!
Como medir o valor da experiência do usuário
para o negócio?

https://www.youtube.com/watch?v=O94kYyzqvTc Proibida a reprodução
"Qualquer ser inteligente pode ser tolo o bastante
para fazer as coisas maiores e mais complexas [de
usar]. Mas é preciso ser gênio e ter muita coragem
para ir na direção contrária.”
Albert Einstein
“É 100 vezes mais barato consertar um problema

de projeto ainda na prancheta do que depois do
lançamento."
Jakob Nielsen
! ® Todos os direitos reservados.

http://www.nngroup.com/articles/usability-roi-declining-but-still-strong Proibida a reprodução
É um fator crítico da experiência de uso e também
um fator importante para a viabilização e gestão de
um projeto.
• Menos retrabalho e mais resultados
• Mais valor para o usuário e para o negócio

Usabilidade
• Colaboração e integração dentro do time
• É uma responsabilidade de todos  

dentro da equipe
• Forma de manter o todos na equipe focados na

necessidade real e nas expectativas dos usuários
• Necessidade dos usuários relacionada às

oportunidades de negócio: caminho para a garantia
do comprometimento de todos com o projeto
Etapas para construção de um processo de trabalho
focado na experiência de uso:
Concepção e Prototipação 
Construção de propostas de maneira rápida, fácil,
simples para serem validadas!
Avaliação, Pesquisa e Teste com usuários 

Validação das ideias e alinhamento entre
necessidades e oportunidades!

Métricas 
Medição de resultados e avaliação de performance
Organização de informação e conteúdo 

Desenho de fluxos de navegação, mapas mentais e
arquitetura de informação!
Desenho e implementação 
Desenvolvimento da proposta em produto final

Ferramentas para trabalhar a experiência de uso e a
usabilidade dentro de um projeto de interfaces
http://uxdesign.cc/ux-tools ® Todos os direitos reservados.

Unidade 1
Biografia complementar
Homepage: Design para a The Elements of   Ergonomia:

Usabilidade Internet User Experience Projeto e
Produção
Jakob Nielsen Felipe Jesse James Itiro Iida

Memória Garrett

Outras referências
Nielsen Norman Group - Treinamentos, pesquisas e
informações sobre Usabilidade e UX 
http://nngroup.com
Página do LEUI (Laboratório de Ergonomia e

Usabilidade de Interfaces da Puc-RJ) no Facebook 
https://www.facebook.com/pages/LEUI-Laborat
%C3%B3rio-de-Ergodesign-e-Usabilidade-de-
Interfaces-PUC-Rio/336831683095201

Outras referências
Measuring Usability - Site com estudos e pesquisas
sobre usabilidade 
http://www.measuringusability.com/
Blog de AI - Informações sobre AI, Usabilidade e UX 

http://arquiteturadeinformacao.com/
Interaction Design Foundation - Treinamentos em UX

e usabilidade 
http://www.interaction-design.org/

Obrigado :-)

Usabilidade Interfaces Web

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Usabilidade Interfaces Web

Enviado por

Direitos autorais:

Formatos disponíveis

Usabilidade de

Não tomar um gol

International Ergonomics Association

® Todos os direitos reservados.

Alphonse Chapanis, 1994

® Todos os direitos reservados.

• Maximizar a condição de saúde do trabalhador

• Minimizar os riscos de saúde e segurança

® Todos os direitos reservados.

® Todos os direitos reservados.

Ronald Baecker e William Buxton, 1987

® Todos os direitos reservados.

NÃO faça o usuário

“Fazer algo que uma

® Todos os direitos reservados.

® Todos os direitos reservados.

Jakob Nielsen, 1999

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

Motta (1999) aponta que satisfação é o grau de

® Todos os direitos reservados.

® Todos os direitos reservados.

atitude, obtido após a interação.

® Todos os direitos reservados.

conseguem encontrar produtos nem informações;

de 40% de clientes na segunda visita (NIELSEN,

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

• Um objetivo único e claro (ex: vender bolos e

• Assunto/Tema do seu interesse e/ou conhecimento

® Todos os direitos reservados.

• Compra / Encomenda de bolo e doces para festas

• Marcação de consulta médica

• Tutoriais de aprenda e faça você mesmo (objetos

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

Department of Computer Science at The University of Waikato

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

® Todos os direitos reservados.

3. Obter o feedback dos avaliadores; 

4. Atribuir níveis de gravidade aos problemas descobertos; 