O documento discute técnicas de usabilidade como feedback rápido, erros de página, formulários e pesquisas. Apresenta dados sobre tempos de carregamento de páginas e taxas de conversão. Discute avaliação heurística, testes com usuários e perguntas abertas x fechadas em pesquisas.

1. TÉCNICAS
DE
USABILIDAD
E
RENATO MELO - 2022

2. USABILIDADE
Erros

3. 1) FEEDBACK

4. Mais de 2 segundos para abrir
um site e ele já é penalizado
no ranking de buscas (SEO)
O QUE O
GOOGLE DIZ?

5. 47% dos consumidores esperam
que a página carregue em 2
segundos ou menos.
CONSUMIDORES

6. 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

7. 52% dos consumidores afirmam
que a velocidade está diretamente
associada com a fidelidade a um
determinado site.
CONSUMIDORES

8. A CADA 100 MILISSEGUNDOS DE TEMPO
DE CARREGAMENTO DE PÁGINA REDUZ
1% DE VENDAS NA AMAZON.
AMAZON

9. AO AUMENTAR O CARREGAMENTO DO
SITE DE 0.4 PARA 0.9 SEGUNDOS, PERDEU
20% DA RECEITA EM PUBLICIDADE,
GOOGLE

10. 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.

11. 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?

12. 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.

13. 4) CAIXA DE BUSCA

14. 5) ETAPAS DO SEU
SITE
1. Escolhas dos produtos
2. Cadastro ou login
3. Entrega e embalagem
4. Pagamento

15. USABILIDADE
Avaliação Heurística

16. Jakob Nielsen, o pai
da usabilidade

17. 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?

18. 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?

19. 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?

20. 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.

21. 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?

22. 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.

23. 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?

24. 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?

25. 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?

26. 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?

27. USABILIDADE
CHECKLIST

28. Verificar se o site abre
bem em todas as telas
TAMANHO
DE TELA

29. Cuidado com imagens e
arquivos pesados. O
site deve abrir rápido
no 4G.
CONEXÃO

30. O que o usuário pretende ao entrar
no site/app?
Compras, Orçamento, Preço, Imagens, Contato
OBJETIVO

31. Em qual ambiente seu usuário costuma
acessar? Ele está com pouco ou muito tempo?
AMBIENTE

32. De acordo com a classe social / idade do
usuário, qual a capacidade de uso do seu
público alvo?
CAPACIDADE

33. Qual seu objetivo? Orçamento? Venda?
Contato? Como é feita sua conversão?
CONVERSÃO

34. CHECKLIST
GERAL
 TAMANHO DA TELA
 CONECTIVIDADE
 OBJETIVOS DO USUÁRIO
 AMBIENTES DO USUÁRIO
 CAPACIDADE DO USUÁRIO
CONVERSÃO

35. USABILIDADE
UBER

38. USABILIDADE
SNAPCHAT

39. NÃO É POR QUE DEU CERTO QUE
ESTÁ TUDO CERTO!

40. SNAPCHAT:
Usuário Novo
1 - Manter a imagem pressionada até o tempo de visualização
acabar;
2 - Algumas imagens, se o usuário soltasse antes da hora havia
contratempo. Até que ele conseguisse voltar e apertar
novamente o tempo acabava e ele ficava sem ler a mensagem;
3 – Problemas com a limitação de caracteres;
4 – Onde adiciono meus amigos do Facebook?
5 – Cadê minha timeline?

41. AO CONTRÁRIO DO TIKTOK, SNAPCHAT FOI
RAPIDAMENTE ENGOLIDO PELO
INSTAGRAM. FALTA DE UX!

42. USABILIDADE
Testes

43. TESTE COM USUÁRIOS!
Nunca mencione a palavra teste, ela assusta as pessoas.

44. 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

45. USABILIDADE
Pesquisas

46. 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

47. 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

48. 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

49. MUDANÇAS:
De: A interface agiu como esperado?
Para: O que você esperava que
acontecesse quando você ____?

50. MUDANÇAS:
De: Você encontrou o que procurava?
Para: Onde você encontrou o item?

51. MUDANÇAS:
De: Você acha que usaria esse produto?
Para: Como você acha que esse produto se
encaixaria no seu trabalho?

52. MUDANÇAS:
De: Você achou fácil de usar?
Para: Qual a parte mais confusa da
experiência?

53. TÉCNICAS
DE
USABILIDAD
E
RENATO MELO - 2022