Usabilidade - Como melhorar em sites e aplicativos
-
Upload
renato-melo -
Category
Design
-
view
172 -
download
5
Transcript of Usabilidade - Como melhorar em sites e aplicativos
![Page 1: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/1.jpg)
USABILIDADEComo aplicar no seus projetosRENATO MELO - 2016
![Page 2: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/2.jpg)
USABILIDADEE sua importância
![Page 3: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/3.jpg)
O QUE É USABILIDADE?
![Page 4: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/4.jpg)
O QUE É USABILIDADE?
![Page 5: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/5.jpg)
![Page 6: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/6.jpg)
WHATSAPP:Usuário Novo
1 – Adicione uma amiga que você não tem na agenda2 – Criar um grupo de amigos para combinar um encontro
3 – Enviar uma foto para este grupo de amigos4 – Alterar seu status
![Page 7: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/7.jpg)
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 encontroApenas o admin pode incluir novas pessoas no
grupo, isso não fica claro para o usuário3 – Enviar uma foto para este grupo de amigos
Botão de anexo é representado apenas por um ícone
4 – Alterar seu statusAlguns usuários não sabem que isso é possível
![Page 8: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/8.jpg)
WHATSAPP:1 – Adicione uma amiga que você não tem na agenda
1min20s2 – Criar um grupo de amigos para combinar um encontro
1min14s3 – Enviar uma foto para este grupo de amigos
42s4 – Alterar seu status
37s
![Page 9: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/9.jpg)
NÃO É POR QUE DEU CERTO QUE ESTÁ TUDO CERTO!
![Page 10: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/10.jpg)
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?
![Page 11: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/11.jpg)
SIMPLES E FUNCIONAL. DÁ PARA MELHORAR?
![Page 12: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/12.jpg)
WAZE: ROTAS SEGURAS
Muitas vezes o aplicativo induz o condutor a trafegar por ruas perigosas, expondo-os a riscos potenciais de
assaltos, violência e outros infortúnios.
![Page 13: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/13.jpg)
WAZE: ROTAS SEGURAS
API integrado com notícias ou cadastro de ocorrências ou a comunidade Waze poderia marcar alterações de
segurança e ganhar pontos.
![Page 14: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/14.jpg)
![Page 15: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/15.jpg)
RADARESO motorista não recebe alertas chamativos, tem que
prestar atenção no caminho e na tela do aplicativo a todo momento.
![Page 16: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/16.jpg)
MUDANÇAS + SINAL SONORO
![Page 17: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/17.jpg)
FORMULÁRIOSMedida é MP/H ao invés de KM/H o que pode confundir o
usuário.
![Page 18: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/18.jpg)
![Page 19: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/19.jpg)
USABILIDADETestes
![Page 20: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/20.jpg)
1) FEEDBACK
![Page 21: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/21.jpg)
até 0,1s: ideia de continuidade até 1s: delay percebido, mas okdepois de 10s: o usuário muda de tarefa.
O USUÁRIO NÃO QUER ESPERAR!
![Page 22: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/22.jpg)
A CADA 100 MILISSEGUNDOS DE TEMPO DE CARREGAMENTO DE PÁGINA REDUZ 1% DE VENDAS NA AMAZON.
AMAZON
![Page 23: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/23.jpg)
AO AUMENTAR O CARREGAMENTO DO SITE DE 0.4 PARA 0.9 SEGUNDOS, PERDEU 20% DA RECEITA EM PUBLICIDADE,
![Page 24: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/24.jpg)
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.
![Page 25: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/25.jpg)
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?Não use espaços ou hifens no telefone. Utilize somente números.
13 6666-6666
![Page 26: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/26.jpg)
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.
![Page 27: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/27.jpg)
4) CAIXA DE BUSCA
![Page 28: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/28.jpg)
5) ETAPAS DO SEU SITE
1. Escolhas dos produtos
2. Cadastro ou login
3. Entrega e embalagem
4. Pagamento
![Page 29: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/29.jpg)
Testes de Usabilidade
![Page 30: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/30.jpg)
TESTE COM USUÁRIOS!Nunca mencione a palavra teste, ela assusta as pessoas.
![Page 31: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/31.jpg)
Maior controle de dados e variáveis;Mais fácil de envolver o cliente;Maior custoUsuário pode se sentir desconfortávelComportamento distante do seu universo real
LABORATÓRIO
![Page 32: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/32.jpg)
Mais barato;Usuário se sente mais a vontade;Mais próximo de seu uso real;Menor controle dos dados e variáveisDificuldade de envolver o cliente (quem contrata)
AMBIENTE DO USUÁRIO
![Page 33: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/33.jpg)
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ápidoProjetos com recursos
reduzidosTestar conceitos e
interfaces em fases iniciais de design
![Page 34: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/34.jpg)
SÉRIES AMERICANASNOVELAS BRASILEIRAS
![Page 35: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/35.jpg)
USABILIDADEPesquisas com Usuários
![Page 36: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/36.jpg)
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
![Page 37: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/37.jpg)
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
![Page 38: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/38.jpg)
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
![Page 39: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/39.jpg)
USABILIDADESoluções Nielsen
![Page 40: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/40.jpg)
MUDANÇAS:De: A interface agiu como esperado?
Para: O que você esperava queacontecesse quando você ____?
![Page 41: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/41.jpg)
MUDANÇAS:De: Você encontrou o que procurava?
Para: Onde você encontrou o item?
![Page 42: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/42.jpg)
MUDANÇAS:De: Você acha que usaria esse
produto?
Para: Como você acha que esse produto se encaixaria no seu trabalho?
![Page 43: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/43.jpg)
MUDANÇAS:De: Você achou fácil de usar?
Para: Qual a parte mais confusa da experiência?
![Page 44: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/44.jpg)
USABILIDADERoteiro
![Page 45: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/45.jpg)
• Planejar o teste: com quantas pessoas?• Criar um roteiro: como devem ser as
perguntas?• Moderação do teste: o que fazer e o que
não fazer, exercício prático• Como analisar: o que observar, o que
fazer com as informações obtidas• Como adaptar: teste mobile, teste
caseiro, teste em contexto de uso
![Page 46: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/46.jpg)
P1 – 03/10
![Page 47: Usabilidade - Como melhorar em sites e aplicativos](https://reader031.fdocumentos.tips/reader031/viewer/2022030305/5871aaa11a28abda6a8b564d/html5/thumbnails/47.jpg)
PRÉVIAPara 19/09 até às [email protected] ou [email protected] no Google “perfume lacoste”, acesse 3 sites e escreva:-Cite os 3 sites que você pesquisou;-Qual site mais fácil para comprar e por que?-Qual site mais difícil para comprar e por que?-O que você mudaria neste site “mais difícil”?