SlideShare a Scribd company logo
1 of 42
TÉCNICAS
DE
USABILIDAD
E
RENATO MELO - 2021
USABILIDADE
Erros
1) FEEDBACK
até 0,1s: ideia de
continuidade
até 1s: delay
percebido, mas ok
depois de 10s: o
usuário muda de
tarefa.
O USUÁRIO NÃO
QUER ESPERAR!
Mais de 2 segundos para abrir
um site e ele já é penalizado
no ranking de buscas (SEO)
O QUE O
GOOGLE DIZ?
47% dos consumidores esperam
que a página carregue em 2
segundos ou menos.
CONSUMIDORES
40% dos consumidores não irão
esperar mais do que 3 segundos
pelo carregamento de uma página.
Depois disso eles irão abandonar o
site.
CONSUMIDORES
52% dos consumidores afirmam
que a velocidade está diretamente
associada com a fidelidade a um
determinado site.
CONSUMIDORES
A CADA 100 MILISSEGUNDOS DE TEMPO
DE CARREGAMENTO DE PÁGINA REDUZ
1% DE VENDAS NA AMAZON.
AMAZON
AO AUMENTAR O CARREGAMENTO DO
SITE DE 0.4 PARA 0.9 SEGUNDOS, PERDEU
20% DA RECEITA EM PUBLICIDADE,
GOOGLE
2) PÁGINAS DE ERRO
O usuário deve saber o que está acontecendo
em uma linguagem fácil.
O usuário deve saber que a culpa não foi dele.
O usuário deve conseguir voltar para o site.
3) ERROS DE FORMULÁRIO
Nome:
Endereço:
CEP:
CPF:
Telefone:
Renato Melo
Rua dos Bobos, número zero
01234-000
12345678900
48 6666-6666
Houve um erro no preenchimento do formulário.
Onde?
3) DADOS DO FORMULÁRIO
Remover um único campo do formulário (telefone) foi capaz
de aumentar as conversões em 167%. A taxa média de
conversão da página foi de 20,18% para 53,90%.
Pense que para cada R$ 100 investidos em mídia
anteriormente, agora conseguiríamos o mesmo resultado
investindo apenas R$37,45, ou então teríamos quase três
vezes esse resultado se investíssemos o mesmo valor.
4) CAIXA DE BUSCA
5) ETAPAS DO SEU
SITE
1. Escolhas dos produtos
2. Cadastro ou login
3. Entrega e embalagem
4. Pagamento
USABILIDADE
Testes
TESTE COM USUÁRIOS!
Nunca mencione a palavra teste, ela assusta as pessoas.
Maior controle de dados e
variáveis;
Mais fácil de envolver o
cliente;
Maior custo
Usuário pode se sentir
desconfortável
Comportamento distante do
seu universo real
LABORATÓRIO
Mais barato;
Usuário se sente mais a
vontade;
Mais próximo de seu uso real;
Menor controle dos dados e
variáveis
Dificuldade de envolver o
cliente (quem contrata)
AMBIENTE DO USUÁRIO
Laboratório
Medir performance (tempo,
número de erros)
Produção acadêmica
(maior “aceitação” científica
para teses, artigos e
dissertações)
Estudos permanentes com
equipe dedicada (Globo)
Ambiente do Usuário
Obter feedback rápido
Projetos com recursos
reduzidos
Testar conceitos e
interfaces em fases iniciais
de design
USABILIDADE
Avaliação Heurística
Jakob Nielsen, o pai
da usabilidade
1.Visibilidade do status do seu site
• Você tem uma página de erro 404?
• Toda e qualquer ação realizada tem um feedback claro e
visível?
• Os links funcionam e direcionam para as páginas certas?
2. Seu site x mundo real
• O estilo da comunicação do site é a mesma do seu usuário?
• O visual do seu site é parecido com o mundo onde o seu
usuário vive?
• As nomenclaturas utilizadas estão de acordo com o que o
seu público entende?
3. Controle e liberdade para o usuário
• Seu site tem um breadcrumb (navegação por páginas) que
funciona?
• Dentro de páginas internas, tem opção de “voltar” ou
outros links?
• Caso tenha mais de uma, você sempre oferece todas as
opções possíveis para o usuário?
4. Consistência e padronização
• Todas as telas seguem o mesmo padrão visual?
• Todas as ações estão com os seus significados (texto e/ou
ícone) e links certinhos?
• A organização e ordem de leitura das coisas está fazendo
sentido? – pense sempre no modelo mental dos seus
usuários.
5. Prevenção de Erros
• Todos os links e ações estão funcionando e
direcionando/fazendo o que é para ser feito?
• Quando tem uma ação importante como “deletar algo”,
você pergunta se ele “tem certeza” que quer fazer? – Não
deixe que o usuário faça algo “sem querer”.
• Você dá a opção do usuário “desfazer” alguma ação que
porventura tenha feito por engano?
6. Reconhecimento x Memorização
• Os elementos do site (textos, menu, imagens…) estão no
mesmo local entre uma tela e outra?
• O caminho do breadcrumb está todo correto?
• Seu site está com informações suficientes e de qualidade? –
não use texto demais, as pessoas não costumam ler.
7. Eficiência e flexibilidade de uso
• Os atalhos do teclado estão funcionando nos formulários do
seu site? – teste o “tab” e o “enter”.
• Conforme as pessoas usam algumas coisas, elas vêem um
conteúdo mais adequado e personalizado?
• Existe um preenchimento automático a partir de dados
anteriores?
8. Estética e design minimalista
• O objetivo do seu site está evidente?
• Os textos estão objetivos e claros?
• O visual está de acordo com o seu público e não está
comprometendo a informação?
9. Reconhecer e ajudar nos erros
• Você mostra ao usuário porque o erro aconteceu?
• As mensagens de erro estão claras?
• Você dá uma solução a cada erro encontrado?
10. Ajuda, FAQ e documentação
• Os textos estão de fácil entendimento?
• Caso preciso, você fornece canais de ajuda? – como chat,
tutoriais, etc.
• Caso necessários, o usuário tem acesso a documentações e
materiais?
USABILIDADE
Pesquisas
Perguntas abertas são aquelas que permitem ao
participante responder da forma que quiser, no
formato que quiser, e com a profundidade e duração
que quiser.
Perguntas abertas vs.
Perguntas fechadas
Perguntas fechadas são aquelas que podem ser
respondidas com um “Sim? ou “Não”, ou outra
opção sugerida.
Perguntas abertas vs.
Perguntas fechadas
Perguntas fechadas funcionam melhor para
questionários quantitativos (porcentagem de
sim ou não). Já para usabilidade, o melhor é
utilizar questões abertas.
Perguntas abertas vs.
Perguntas fechadas
MUDANÇAS:
De: A interface agiu como esperado?
Para: O que você esperava que
acontecesse quando você ____?
MUDANÇAS:
De: Você encontrou o que procurava?
Para: Onde você encontrou o item?
MUDANÇAS:
De: Você acha que usaria esse produto?
Para: Como você acha que esse produto se
encaixaria no seu trabalho?
MUDANÇAS:
De: Você achou fácil de usar?
Para: Qual a parte mais confusa da
experiência?
USABILIDADE
Exercício
ACESSE O SITE DA KANUI E
REPRODUZA OS TESTES:
- FORMULÁRIO
- FERRAMENTA DE BUSCA
- TEMPO DE CARREGAMENTO
- QUANTAS E QUAIS AS ETAPAS
DE COMPRA DO SITE
- renatomelo85@gmail.com

More Related Content

What's hot

UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01Renato Melo
 
Usabilidade em Aplicativos - Webdesign - 2021-01
Usabilidade em Aplicativos - Webdesign - 2021-01Usabilidade em Aplicativos - Webdesign - 2021-01
Usabilidade em Aplicativos - Webdesign - 2021-01Renato Melo
 
Planejamento em Redes Sociais - Gestão de Redes Sociais - Aula 1 - 2020
Planejamento em Redes Sociais - Gestão de Redes Sociais - Aula 1 - 2020Planejamento em Redes Sociais - Gestão de Redes Sociais - Aula 1 - 2020
Planejamento em Redes Sociais - Gestão de Redes Sociais - Aula 1 - 2020Renato Melo
 
Vender, Converter, Lançar e Funil - Aulas 22 e 23 - Plataformas Digitais
Vender, Converter, Lançar e Funil - Aulas 22 e 23 - Plataformas DigitaisVender, Converter, Lançar e Funil - Aulas 22 e 23 - Plataformas Digitais
Vender, Converter, Lançar e Funil - Aulas 22 e 23 - Plataformas DigitaisRenato Melo
 
Planejamento e Redes Sociais - MBA Dia 2 - 2020
Planejamento e Redes Sociais - MBA Dia 2 - 2020Planejamento e Redes Sociais - MBA Dia 2 - 2020
Planejamento e Redes Sociais - MBA Dia 2 - 2020Renato Melo
 
Ambiente Digital - MBA Comportamento Digital - Aula 01 2020-01
Ambiente Digital - MBA Comportamento Digital - Aula 01 2020-01Ambiente Digital - MBA Comportamento Digital - Aula 01 2020-01
Ambiente Digital - MBA Comportamento Digital - Aula 01 2020-01Renato Melo
 
Planejamento e Redes Sociais - MBA Dia 2 - 2020
Planejamento e Redes Sociais - MBA Dia 2 - 2020Planejamento e Redes Sociais - MBA Dia 2 - 2020
Planejamento e Redes Sociais - MBA Dia 2 - 2020Renato Melo
 
Twitter, TikTok e Outras Redes Sociais - Plataformas Digitais - 2020-02
Twitter, TikTok e Outras Redes Sociais - Plataformas Digitais - 2020-02Twitter, TikTok e Outras Redes Sociais - Plataformas Digitais - 2020-02
Twitter, TikTok e Outras Redes Sociais - Plataformas Digitais - 2020-02Renato Melo
 
Comportamento e Ambiente Digital - MBA ESAMC - aula 1
Comportamento e Ambiente Digital - MBA ESAMC - aula 1Comportamento e Ambiente Digital - MBA ESAMC - aula 1
Comportamento e Ambiente Digital - MBA ESAMC - aula 1Renato Melo
 
Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25
Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25
Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25Renato Melo
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioRenato Melo
 
Youtube e Video Marketing - Aulas 18 e 19 - Plataformas Digitais - 2020-01
Youtube e Video Marketing - Aulas 18 e 19 - Plataformas Digitais - 2020-01Youtube e Video Marketing - Aulas 18 e 19 - Plataformas Digitais - 2020-01
Youtube e Video Marketing - Aulas 18 e 19 - Plataformas Digitais - 2020-01Renato Melo
 
Webdesign Revisão 2019-01
Webdesign Revisão 2019-01Webdesign Revisão 2019-01
Webdesign Revisão 2019-01Renato Melo
 
Marketing por Conteúdo e SEO - Plataformas Digitais - Aulas 26 e 27 de 2020-01
Marketing por Conteúdo e SEO - Plataformas Digitais - Aulas 26 e 27 de 2020-01Marketing por Conteúdo e SEO - Plataformas Digitais - Aulas 26 e 27 de 2020-01
Marketing por Conteúdo e SEO - Plataformas Digitais - Aulas 26 e 27 de 2020-01Renato Melo
 
Facebook Marketing - Gestão de Redes Sociais - Aula 2 - 2020
Facebook Marketing - Gestão de Redes Sociais - Aula 2 - 2020Facebook Marketing - Gestão de Redes Sociais - Aula 2 - 2020
Facebook Marketing - Gestão de Redes Sociais - Aula 2 - 2020Renato Melo
 
Planejamento de Redes Sociais - Plataformas Digitais - Aulas 10 e 11 - 2020-01
Planejamento de Redes Sociais - Plataformas Digitais - Aulas 10 e 11 - 2020-01Planejamento de Redes Sociais - Plataformas Digitais - Aulas 10 e 11 - 2020-01
Planejamento de Redes Sociais - Plataformas Digitais - Aulas 10 e 11 - 2020-01Renato Melo
 
Social Canvas - Planejamento em Redes Sociais - Plataformas Digitais - Aulas ...
Social Canvas - Planejamento em Redes Sociais - Plataformas Digitais - Aulas ...Social Canvas - Planejamento em Redes Sociais - Plataformas Digitais - Aulas ...
Social Canvas - Planejamento em Redes Sociais - Plataformas Digitais - Aulas ...Renato Melo
 
SEO, ADWORDS E GOOGLE - Plataformas Digitais - Aulas 28-29
SEO, ADWORDS E GOOGLE - Plataformas Digitais - Aulas 28-29SEO, ADWORDS E GOOGLE - Plataformas Digitais - Aulas 28-29
SEO, ADWORDS E GOOGLE - Plataformas Digitais - Aulas 28-29Renato Melo
 
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022Escrevendo para o SEO - Técnicas de Redação em RP - 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022Renato Melo
 
Anúncios Facebook e Instagram - Plataformas Digitais 2020-02
Anúncios Facebook e Instagram - Plataformas Digitais 2020-02Anúncios Facebook e Instagram - Plataformas Digitais 2020-02
Anúncios Facebook e Instagram - Plataformas Digitais 2020-02Renato Melo
 

What's hot (20)

UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
 
Usabilidade em Aplicativos - Webdesign - 2021-01
Usabilidade em Aplicativos - Webdesign - 2021-01Usabilidade em Aplicativos - Webdesign - 2021-01
Usabilidade em Aplicativos - Webdesign - 2021-01
 
Planejamento em Redes Sociais - Gestão de Redes Sociais - Aula 1 - 2020
Planejamento em Redes Sociais - Gestão de Redes Sociais - Aula 1 - 2020Planejamento em Redes Sociais - Gestão de Redes Sociais - Aula 1 - 2020
Planejamento em Redes Sociais - Gestão de Redes Sociais - Aula 1 - 2020
 
Vender, Converter, Lançar e Funil - Aulas 22 e 23 - Plataformas Digitais
Vender, Converter, Lançar e Funil - Aulas 22 e 23 - Plataformas DigitaisVender, Converter, Lançar e Funil - Aulas 22 e 23 - Plataformas Digitais
Vender, Converter, Lançar e Funil - Aulas 22 e 23 - Plataformas Digitais
 
Planejamento e Redes Sociais - MBA Dia 2 - 2020
Planejamento e Redes Sociais - MBA Dia 2 - 2020Planejamento e Redes Sociais - MBA Dia 2 - 2020
Planejamento e Redes Sociais - MBA Dia 2 - 2020
 
Ambiente Digital - MBA Comportamento Digital - Aula 01 2020-01
Ambiente Digital - MBA Comportamento Digital - Aula 01 2020-01Ambiente Digital - MBA Comportamento Digital - Aula 01 2020-01
Ambiente Digital - MBA Comportamento Digital - Aula 01 2020-01
 
Planejamento e Redes Sociais - MBA Dia 2 - 2020
Planejamento e Redes Sociais - MBA Dia 2 - 2020Planejamento e Redes Sociais - MBA Dia 2 - 2020
Planejamento e Redes Sociais - MBA Dia 2 - 2020
 
Twitter, TikTok e Outras Redes Sociais - Plataformas Digitais - 2020-02
Twitter, TikTok e Outras Redes Sociais - Plataformas Digitais - 2020-02Twitter, TikTok e Outras Redes Sociais - Plataformas Digitais - 2020-02
Twitter, TikTok e Outras Redes Sociais - Plataformas Digitais - 2020-02
 
Comportamento e Ambiente Digital - MBA ESAMC - aula 1
Comportamento e Ambiente Digital - MBA ESAMC - aula 1Comportamento e Ambiente Digital - MBA ESAMC - aula 1
Comportamento e Ambiente Digital - MBA ESAMC - aula 1
 
Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25
Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25
Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
 
Youtube e Video Marketing - Aulas 18 e 19 - Plataformas Digitais - 2020-01
Youtube e Video Marketing - Aulas 18 e 19 - Plataformas Digitais - 2020-01Youtube e Video Marketing - Aulas 18 e 19 - Plataformas Digitais - 2020-01
Youtube e Video Marketing - Aulas 18 e 19 - Plataformas Digitais - 2020-01
 
Webdesign Revisão 2019-01
Webdesign Revisão 2019-01Webdesign Revisão 2019-01
Webdesign Revisão 2019-01
 
Marketing por Conteúdo e SEO - Plataformas Digitais - Aulas 26 e 27 de 2020-01
Marketing por Conteúdo e SEO - Plataformas Digitais - Aulas 26 e 27 de 2020-01Marketing por Conteúdo e SEO - Plataformas Digitais - Aulas 26 e 27 de 2020-01
Marketing por Conteúdo e SEO - Plataformas Digitais - Aulas 26 e 27 de 2020-01
 
Facebook Marketing - Gestão de Redes Sociais - Aula 2 - 2020
Facebook Marketing - Gestão de Redes Sociais - Aula 2 - 2020Facebook Marketing - Gestão de Redes Sociais - Aula 2 - 2020
Facebook Marketing - Gestão de Redes Sociais - Aula 2 - 2020
 
Planejamento de Redes Sociais - Plataformas Digitais - Aulas 10 e 11 - 2020-01
Planejamento de Redes Sociais - Plataformas Digitais - Aulas 10 e 11 - 2020-01Planejamento de Redes Sociais - Plataformas Digitais - Aulas 10 e 11 - 2020-01
Planejamento de Redes Sociais - Plataformas Digitais - Aulas 10 e 11 - 2020-01
 
Social Canvas - Planejamento em Redes Sociais - Plataformas Digitais - Aulas ...
Social Canvas - Planejamento em Redes Sociais - Plataformas Digitais - Aulas ...Social Canvas - Planejamento em Redes Sociais - Plataformas Digitais - Aulas ...
Social Canvas - Planejamento em Redes Sociais - Plataformas Digitais - Aulas ...
 
SEO, ADWORDS E GOOGLE - Plataformas Digitais - Aulas 28-29
SEO, ADWORDS E GOOGLE - Plataformas Digitais - Aulas 28-29SEO, ADWORDS E GOOGLE - Plataformas Digitais - Aulas 28-29
SEO, ADWORDS E GOOGLE - Plataformas Digitais - Aulas 28-29
 
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022Escrevendo para o SEO - Técnicas de Redação em RP - 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
 
Anúncios Facebook e Instagram - Plataformas Digitais 2020-02
Anúncios Facebook e Instagram - Plataformas Digitais 2020-02Anúncios Facebook e Instagram - Plataformas Digitais 2020-02
Anúncios Facebook e Instagram - Plataformas Digitais 2020-02
 

Similar to Testes de usabilidade - Webdesign 2021-02

Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022Renato Melo
 
[GUTS-RS] Testar Interfaces com UX
[GUTS-RS] Testar Interfaces com UX[GUTS-RS] Testar Interfaces com UX
[GUTS-RS] Testar Interfaces com UXGUTS-RS
 
Revisão Webdesign
Revisão WebdesignRevisão Webdesign
Revisão WebdesignRenato Melo
 
Webdesign revisãao 2018-02
Webdesign revisãao 2018-02Webdesign revisãao 2018-02
Webdesign revisãao 2018-02Renato Melo
 
Teste de Usabilidade - Webdesign - Aula 10 2019-02
Teste de Usabilidade - Webdesign - Aula 10 2019-02Teste de Usabilidade - Webdesign - Aula 10 2019-02
Teste de Usabilidade - Webdesign - Aula 10 2019-02Renato Melo
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfJulioCesar371362
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e UsabilidadeClaudio Toldo
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshareguest5ccda
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGELuiz Agner
 
Workshop: Ouvindo usuários e stakeholders
Workshop: Ouvindo usuários e stakeholdersWorkshop: Ouvindo usuários e stakeholders
Workshop: Ouvindo usuários e stakeholdersNeue Labs
 
MTA1 Aula-01. Introdução
MTA1 Aula-01. IntroduçãoMTA1 Aula-01. Introdução
MTA1 Aula-01. IntroduçãoAlan Vasconcelos
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraenteSuzana Viana Mota
 
Testes de usabilidade com uma pitada de lean ux
Testes de usabilidade com uma pitada de lean uxTestes de usabilidade com uma pitada de lean ux
Testes de usabilidade com uma pitada de lean uxQualister
 
USABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USAR
USABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USARUSABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USAR
USABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USARCarla De Bona
 
Teste de Usabilidade - Webdesign - Aula 10
Teste de Usabilidade - Webdesign - Aula 10Teste de Usabilidade - Webdesign - Aula 10
Teste de Usabilidade - Webdesign - Aula 10Renato Melo
 
O que é e como fazer um Teste de Usabilidade
O que é e como fazer um Teste de UsabilidadeO que é e como fazer um Teste de Usabilidade
O que é e como fazer um Teste de UsabilidadeGustavo Silveira
 

Similar to Testes de usabilidade - Webdesign 2021-02 (20)

Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022
 
[GUTS-RS] Testar Interfaces com UX
[GUTS-RS] Testar Interfaces com UX[GUTS-RS] Testar Interfaces com UX
[GUTS-RS] Testar Interfaces com UX
 
Revisão Webdesign
Revisão WebdesignRevisão Webdesign
Revisão Webdesign
 
Webdesign revisãao 2018-02
Webdesign revisãao 2018-02Webdesign revisãao 2018-02
Webdesign revisãao 2018-02
 
AI na jornada do usuário de ecommerce
AI na jornada do usuário de ecommerceAI na jornada do usuário de ecommerce
AI na jornada do usuário de ecommerce
 
Teste de Usabilidade - Webdesign - Aula 10 2019-02
Teste de Usabilidade - Webdesign - Aula 10 2019-02Teste de Usabilidade - Webdesign - Aula 10 2019-02
Teste de Usabilidade - Webdesign - Aula 10 2019-02
 
Testes de Usabilidade
Testes de UsabilidadeTestes de Usabilidade
Testes de Usabilidade
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
 
Desenvolvimento em tempos de UX - Versão 3.0
Desenvolvimento em tempos de UX - Versão 3.0Desenvolvimento em tempos de UX - Versão 3.0
Desenvolvimento em tempos de UX - Versão 3.0
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGE
 
Workshop: Ouvindo usuários e stakeholders
Workshop: Ouvindo usuários e stakeholdersWorkshop: Ouvindo usuários e stakeholders
Workshop: Ouvindo usuários e stakeholders
 
MTA1 Aula-01. Introdução
MTA1 Aula-01. IntroduçãoMTA1 Aula-01. Introdução
MTA1 Aula-01. Introdução
 
O que é user experience
O que é user experienceO que é user experience
O que é user experience
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
 
Testes de usabilidade com uma pitada de lean ux
Testes de usabilidade com uma pitada de lean uxTestes de usabilidade com uma pitada de lean ux
Testes de usabilidade com uma pitada de lean ux
 
USABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USAR
USABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USARUSABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USAR
USABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USAR
 
Teste de Usabilidade - Webdesign - Aula 10
Teste de Usabilidade - Webdesign - Aula 10Teste de Usabilidade - Webdesign - Aula 10
Teste de Usabilidade - Webdesign - Aula 10
 
O que é e como fazer um Teste de Usabilidade
O que é e como fazer um Teste de UsabilidadeO que é e como fazer um Teste de Usabilidade
O que é e como fazer um Teste de Usabilidade
 

More from Renato Melo

Expressa Esamc - Oficina de Reels e TikTOk
Expressa Esamc - Oficina de Reels e TikTOkExpressa Esamc - Oficina de Reels e TikTOk
Expressa Esamc - Oficina de Reels e TikTOkRenato Melo
 
Redação para Gestão de Crise 1 - Técnicas de Redação em RP
Redação para Gestão de Crise 1 - Técnicas de Redação em RPRedação para Gestão de Crise 1 - Técnicas de Redação em RP
Redação para Gestão de Crise 1 - Técnicas de Redação em RPRenato Melo
 
HTML 1 e 2 - Webdesign - 2022
HTML 1 e 2 - Webdesign - 2022HTML 1 e 2 - Webdesign - 2022
HTML 1 e 2 - Webdesign - 2022Renato Melo
 
Redação para E-mail - Jornalismo Multimídia
Redação para E-mail - Jornalismo MultimídiaRedação para E-mail - Jornalismo Multimídia
Redação para E-mail - Jornalismo MultimídiaRenato Melo
 
Html e E-mail Marketing - Webdesign 2022
Html e E-mail Marketing - Webdesign 2022Html e E-mail Marketing - Webdesign 2022
Html e E-mail Marketing - Webdesign 2022Renato Melo
 
Anúncio para AT Revista - Computação Gráfica 2022
Anúncio para AT Revista - Computação Gráfica 2022Anúncio para AT Revista - Computação Gráfica 2022
Anúncio para AT Revista - Computação Gráfica 2022Renato Melo
 
Marketing por Conteúdo - Projeto Web 2022
Marketing por Conteúdo - Projeto Web 2022Marketing por Conteúdo - Projeto Web 2022
Marketing por Conteúdo - Projeto Web 2022Renato Melo
 
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022Renato Melo
 
Storytelling no Jornalismo - Jornalismo Multimídia 2022
Storytelling no Jornalismo - Jornalismo Multimídia 2022Storytelling no Jornalismo - Jornalismo Multimídia 2022
Storytelling no Jornalismo - Jornalismo Multimídia 2022Renato Melo
 
HTML - Webdesign - 2022
HTML - Webdesign - 2022HTML - Webdesign - 2022
HTML - Webdesign - 2022Renato Melo
 
Imagens para Redes Sociais - Computação Gráfica 2022
Imagens para Redes Sociais - Computação Gráfica 2022Imagens para Redes Sociais - Computação Gráfica 2022
Imagens para Redes Sociais - Computação Gráfica 2022Renato Melo
 
Social Ads - Projeto Web - 2022
Social Ads - Projeto Web - 2022Social Ads - Projeto Web - 2022
Social Ads - Projeto Web - 2022Renato Melo
 
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022Renato Melo
 
Storytelling - Técnicas de Redação em RP 2022
Storytelling - Técnicas de Redação em RP 2022Storytelling - Técnicas de Redação em RP 2022
Storytelling - Técnicas de Redação em RP 2022Renato Melo
 
Jornalismo em Vídeo - Jornalismo Multimídia 2022
Jornalismo em Vídeo - Jornalismo Multimídia 2022Jornalismo em Vídeo - Jornalismo Multimídia 2022
Jornalismo em Vídeo - Jornalismo Multimídia 2022Renato Melo
 
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022Renato Melo
 
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022Renato Melo
 
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022Renato Melo
 
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022Escrevendo para o SEO - Técnicas de Redação em RP - 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022Renato Melo
 
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022Renato Melo
 

More from Renato Melo (20)

Expressa Esamc - Oficina de Reels e TikTOk
Expressa Esamc - Oficina de Reels e TikTOkExpressa Esamc - Oficina de Reels e TikTOk
Expressa Esamc - Oficina de Reels e TikTOk
 
Redação para Gestão de Crise 1 - Técnicas de Redação em RP
Redação para Gestão de Crise 1 - Técnicas de Redação em RPRedação para Gestão de Crise 1 - Técnicas de Redação em RP
Redação para Gestão de Crise 1 - Técnicas de Redação em RP
 
HTML 1 e 2 - Webdesign - 2022
HTML 1 e 2 - Webdesign - 2022HTML 1 e 2 - Webdesign - 2022
HTML 1 e 2 - Webdesign - 2022
 
Redação para E-mail - Jornalismo Multimídia
Redação para E-mail - Jornalismo MultimídiaRedação para E-mail - Jornalismo Multimídia
Redação para E-mail - Jornalismo Multimídia
 
Html e E-mail Marketing - Webdesign 2022
Html e E-mail Marketing - Webdesign 2022Html e E-mail Marketing - Webdesign 2022
Html e E-mail Marketing - Webdesign 2022
 
Anúncio para AT Revista - Computação Gráfica 2022
Anúncio para AT Revista - Computação Gráfica 2022Anúncio para AT Revista - Computação Gráfica 2022
Anúncio para AT Revista - Computação Gráfica 2022
 
Marketing por Conteúdo - Projeto Web 2022
Marketing por Conteúdo - Projeto Web 2022Marketing por Conteúdo - Projeto Web 2022
Marketing por Conteúdo - Projeto Web 2022
 
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
 
Storytelling no Jornalismo - Jornalismo Multimídia 2022
Storytelling no Jornalismo - Jornalismo Multimídia 2022Storytelling no Jornalismo - Jornalismo Multimídia 2022
Storytelling no Jornalismo - Jornalismo Multimídia 2022
 
HTML - Webdesign - 2022
HTML - Webdesign - 2022HTML - Webdesign - 2022
HTML - Webdesign - 2022
 
Imagens para Redes Sociais - Computação Gráfica 2022
Imagens para Redes Sociais - Computação Gráfica 2022Imagens para Redes Sociais - Computação Gráfica 2022
Imagens para Redes Sociais - Computação Gráfica 2022
 
Social Ads - Projeto Web - 2022
Social Ads - Projeto Web - 2022Social Ads - Projeto Web - 2022
Social Ads - Projeto Web - 2022
 
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
 
Storytelling - Técnicas de Redação em RP 2022
Storytelling - Técnicas de Redação em RP 2022Storytelling - Técnicas de Redação em RP 2022
Storytelling - Técnicas de Redação em RP 2022
 
Jornalismo em Vídeo - Jornalismo Multimídia 2022
Jornalismo em Vídeo - Jornalismo Multimídia 2022Jornalismo em Vídeo - Jornalismo Multimídia 2022
Jornalismo em Vídeo - Jornalismo Multimídia 2022
 
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
 
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
 
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
 
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022Escrevendo para o SEO - Técnicas de Redação em RP - 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
 
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
 

Testes de usabilidade - Webdesign 2021-02

  • 4. até 0,1s: ideia de continuidade até 1s: delay percebido, mas ok depois de 10s: o usuário muda de tarefa. O USUÁRIO NÃO QUER ESPERAR!
  • 5. Mais de 2 segundos para abrir um site e ele já é penalizado no ranking de buscas (SEO) O QUE O GOOGLE DIZ?
  • 6. 47% dos consumidores esperam que a página carregue em 2 segundos ou menos. CONSUMIDORES
  • 7. 40% dos consumidores não irão esperar mais do que 3 segundos pelo carregamento de uma página. Depois disso eles irão abandonar o site. CONSUMIDORES
  • 8. 52% dos consumidores afirmam que a velocidade está diretamente associada com a fidelidade a um determinado site. CONSUMIDORES
  • 9. A CADA 100 MILISSEGUNDOS DE TEMPO DE CARREGAMENTO DE PÁGINA REDUZ 1% DE VENDAS NA AMAZON. AMAZON
  • 10. AO AUMENTAR O CARREGAMENTO DO SITE DE 0.4 PARA 0.9 SEGUNDOS, PERDEU 20% DA RECEITA EM PUBLICIDADE, GOOGLE
  • 11. 2) PÁGINAS DE ERRO O usuário deve saber o que está acontecendo em uma linguagem fácil. O usuário deve saber que a culpa não foi dele. O usuário deve conseguir voltar para o site.
  • 12. 3) ERROS DE FORMULÁRIO Nome: Endereço: CEP: CPF: Telefone: Renato Melo Rua dos Bobos, número zero 01234-000 12345678900 48 6666-6666 Houve um erro no preenchimento do formulário. Onde?
  • 13. 3) DADOS DO FORMULÁRIO Remover um único campo do formulário (telefone) foi capaz de aumentar as conversões em 167%. A taxa média de conversão da página foi de 20,18% para 53,90%. Pense que para cada R$ 100 investidos em mídia anteriormente, agora conseguiríamos o mesmo resultado investindo apenas R$37,45, ou então teríamos quase três vezes esse resultado se investíssemos o mesmo valor.
  • 14. 4) CAIXA DE BUSCA
  • 15. 5) ETAPAS DO SEU SITE 1. Escolhas dos produtos 2. Cadastro ou login 3. Entrega e embalagem 4. Pagamento
  • 17. TESTE COM USUÁRIOS! Nunca mencione a palavra teste, ela assusta as pessoas.
  • 18. Maior controle de dados e variáveis; Mais fácil de envolver o cliente; Maior custo Usuário pode se sentir desconfortável Comportamento distante do seu universo real LABORATÓRIO
  • 19. Mais barato; Usuário se sente mais a vontade; Mais próximo de seu uso real; Menor controle dos dados e variáveis Dificuldade de envolver o cliente (quem contrata) AMBIENTE DO USUÁRIO
  • 20. Laboratório Medir performance (tempo, número de erros) Produção acadêmica (maior “aceitação” científica para teses, artigos e dissertações) Estudos permanentes com equipe dedicada (Globo) Ambiente do Usuário Obter feedback rápido Projetos com recursos reduzidos Testar conceitos e interfaces em fases iniciais de design
  • 22. Jakob Nielsen, o pai da usabilidade
  • 23. 1.Visibilidade do status do seu site • Você tem uma página de erro 404? • Toda e qualquer ação realizada tem um feedback claro e visível? • Os links funcionam e direcionam para as páginas certas?
  • 24. 2. Seu site x mundo real • O estilo da comunicação do site é a mesma do seu usuário? • O visual do seu site é parecido com o mundo onde o seu usuário vive? • As nomenclaturas utilizadas estão de acordo com o que o seu público entende?
  • 25. 3. Controle e liberdade para o usuário • Seu site tem um breadcrumb (navegação por páginas) que funciona? • Dentro de páginas internas, tem opção de “voltar” ou outros links? • Caso tenha mais de uma, você sempre oferece todas as opções possíveis para o usuário?
  • 26. 4. Consistência e padronização • Todas as telas seguem o mesmo padrão visual? • Todas as ações estão com os seus significados (texto e/ou ícone) e links certinhos? • A organização e ordem de leitura das coisas está fazendo sentido? – pense sempre no modelo mental dos seus usuários.
  • 27. 5. Prevenção de Erros • Todos os links e ações estão funcionando e direcionando/fazendo o que é para ser feito? • Quando tem uma ação importante como “deletar algo”, você pergunta se ele “tem certeza” que quer fazer? – Não deixe que o usuário faça algo “sem querer”. • Você dá a opção do usuário “desfazer” alguma ação que porventura tenha feito por engano?
  • 28. 6. Reconhecimento x Memorização • Os elementos do site (textos, menu, imagens…) estão no mesmo local entre uma tela e outra? • O caminho do breadcrumb está todo correto? • Seu site está com informações suficientes e de qualidade? – não use texto demais, as pessoas não costumam ler.
  • 29. 7. Eficiência e flexibilidade de uso • Os atalhos do teclado estão funcionando nos formulários do seu site? – teste o “tab” e o “enter”. • Conforme as pessoas usam algumas coisas, elas vêem um conteúdo mais adequado e personalizado? • Existe um preenchimento automático a partir de dados anteriores?
  • 30. 8. Estética e design minimalista • O objetivo do seu site está evidente? • Os textos estão objetivos e claros? • O visual está de acordo com o seu público e não está comprometendo a informação?
  • 31. 9. Reconhecer e ajudar nos erros • Você mostra ao usuário porque o erro aconteceu? • As mensagens de erro estão claras? • Você dá uma solução a cada erro encontrado?
  • 32. 10. Ajuda, FAQ e documentação • Os textos estão de fácil entendimento? • Caso preciso, você fornece canais de ajuda? – como chat, tutoriais, etc. • Caso necessários, o usuário tem acesso a documentações e materiais?
  • 34. Perguntas abertas são aquelas que permitem ao participante responder da forma que quiser, no formato que quiser, e com a profundidade e duração que quiser. Perguntas abertas vs. Perguntas fechadas
  • 35. Perguntas fechadas são aquelas que podem ser respondidas com um “Sim? ou “Não”, ou outra opção sugerida. Perguntas abertas vs. Perguntas fechadas
  • 36. Perguntas fechadas funcionam melhor para questionários quantitativos (porcentagem de sim ou não). Já para usabilidade, o melhor é utilizar questões abertas. Perguntas abertas vs. Perguntas fechadas
  • 37. MUDANÇAS: De: A interface agiu como esperado? Para: O que você esperava que acontecesse quando você ____?
  • 38. MUDANÇAS: De: Você encontrou o que procurava? Para: Onde você encontrou o item?
  • 39. MUDANÇAS: De: Você acha que usaria esse produto? Para: Como você acha que esse produto se encaixaria no seu trabalho?
  • 40. MUDANÇAS: De: Você achou fácil de usar? Para: Qual a parte mais confusa da experiência?
  • 42. ACESSE O SITE DA KANUI E REPRODUZA OS TESTES: - FORMULÁRIO - FERRAMENTA DE BUSCA - TEMPO DE CARREGAMENTO - QUANTAS E QUAIS AS ETAPAS DE COMPRA DO SITE - renatomelo85@gmail.com