1) O documento fornece diretrizes sobre usabilidade e conversão em sites, incluindo não usar pop-ups e músicas, links claros, e testes de usabilidade com usuários. 2) É recomendado testar sites com usuários reais para obter feedback rápido e melhorar a experiência do usuário. 3) Mudanças simples como opções claras podem aumentar a taxa de conversão em mais de 50%.

1. Conversão
UX e Usabilidade
RENATO MELO - 2015

2. O BÁSICO: O
QUE FAZER E O
QUE NÃO FAZER

3. 1 – DEIXAR CLARO DO
QUE SE TRATA O SITE

4. 2 – FONTE BACANA, MAS
LEGÍVEL

5. 3 – NÃO USE POP-UP

6. 4 – NÃO USE URLS
DISCONEXAS OU
DESPROTEGIDAS

8. 5 – NÃO TOQUE
MÚSICA

9. 6 – BOTÃO VOLTAR SEMPRE
FUNCIONANDO E
NAVEGAÇÃO FACILITADA

10. 7 – LINKS COM COR E QUE
TROQUEM DE COR DEPOIS
QUE SÃO VISITADOS

11. TESTES

12. 1) FEEDBACK
até 0,1s: ideia de
continuidade
até 1s: delay
percebido, mas ok
depois de 10s: o
usuário muda de
tarefa.

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

14. Nome:
Endereço:
Telefone 1:
Celular:
Telefone da Mãe:
CPF:
RG:
Nome do Cachorro:
Estado Civil:
3) FORMULÁRIO

15. 3) 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?
Não use espaços ou hifens no
telefone. Utilize somente números.
13 6666-6666

16. 4) CAIXA DE BUSCA

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

18. Testes de
Usabilidade

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

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

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

22. 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, Nokia)
Ambiente do Usuário
Obter feedback rápido
Projetos com recursos
reduzidos
Testar conceitos e
interfaces em fases
iniciais de design

23. SÉRIES AMERICANAS
NOVELAS BRASILEIRAS

25. CASES

26. EFICÁCIA:
Novo Design e
Disposição:
Passou de 500
inscrições para
1200 por mês

27. EFICIÊNCIA:
35% da operação
do Call Center
existia apenas
para responder
uma demanda:
Onde encontrar a
2ª via do boleto.

28. Conversão
Fazer seu usuário agir da forma
desejada e mensurável

30. 1º Teste: Opções claras =
+ cadastros?

31. +55% de conversão!
Por que o dropdown
ganhou?

32. - Visão clara da ação
- Fazer várias combinações de
apartamentos

33. TESTANDO
A USABILIDADE

34. WHATSAPP:
1 – Adicione uma amiga que você não tem na agenda
2 – Criar um grupo de amigos para combinar um encontro
3 – Enviar uma foto para este grupo de amigos
4 – Alterar seu status

35. WHATSAPP:
1 – Adicione uma amiga que você não tem na agenda
1min20s
2 – Criar um grupo de amigos para combinar um encontro
1min14s
3 – Enviar uma foto para este grupo de amigos
42s
4 – Alterar seu status
37s

36. WHATSAPP:
1 – Adicione uma amiga que você não tem na agenda
Você não consegue adicionar pelo Whatsapp, tem que ir
até a agenda e adicionar a pessoa
2 – Criar um grupo de amigos para combinar um encontro
Apenas o admin pode incluir novas pessoas no grupo
3 – Enviar uma foto para este grupo de amigos
Botão de anexo é representado apenas por um ícone
4 – Alterar seu status
Alguns usuários não sabem que isso é possível

37. DIRETRIZES PARA
O TRABALHO
Entrega dia 14.04 até às 18h30 via e-mail:
•Site pronto e programado, compactado via zip;
•Alterar o título e colocar as suas imagens ;
•Relatório (1 a 2 páginas) descrevendo a pré-produção;
•Vídeo de até 1 minuto com making off da produção;
•Arquivo fonte:
renatomelo.com.br/esamc/webdesign/sustentabilidade.zip

38. FACEBOOK.COM/
RENATOMELOMKT
renato@iskadigital.com.br