melhorando a usabilidade
TRANSCRIPT
![Page 1: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/1.jpg)
USABILIDADEComo aplicar no seus projetosRENATO MELO - 2016
![Page 2: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/2.jpg)
USABILIDADEE sua importância
![Page 3: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/3.jpg)
O QUE É USABILIDADE?
![Page 4: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/4.jpg)
O QUE É USABILIDADE?
![Page 5: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/5.jpg)
![Page 6: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/9.jpg)
NÃO É POR QUE DEU CERTO QUE ESTÁ TUDO CERTO!
![Page 10: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/11.jpg)
SIMPLES E FUNCIONAL. DÁ PARA MELHORAR?
![Page 12: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/14.jpg)
![Page 15: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/16.jpg)
MUDANÇAS + SINAL SONORO
![Page 17: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/17.jpg)
FORMULÁRIOSMedida é MP/H ao invés de KM/H o que pode confundir o
usuário.
![Page 18: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/18.jpg)
![Page 19: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/19.jpg)
USABILIDADETestes
![Page 20: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/20.jpg)
1) FEEDBACK
![Page 21: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/22.jpg)
A CADA 100 MILISSEGUNDOS DE TEMPO DE CARREGAMENTO DE PÁGINA REDUZ 1% DE VENDAS NA AMAZON.
AMAZON
![Page 23: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/27.jpg)
4) CAIXA DE BUSCA
![Page 28: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/29.jpg)
Testes de Usabilidade
![Page 30: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/30.jpg)
TESTE COM USUÁRIOS!Nunca mencione a palavra teste, ela assusta as pessoas.
![Page 31: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/34.jpg)
SÉRIES AMERICANASNOVELAS BRASILEIRAS
![Page 35: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/35.jpg)
USABILIDADEPesquisas com Usuários
![Page 36: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/39.jpg)
USABILIDADESoluções Nielsen
![Page 40: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/40.jpg)
MUDANÇAS:De: A interface agiu como esperado?
Para: O que você esperava queacontecesse quando você ____?
![Page 41: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/41.jpg)
MUDANÇAS:De: Você encontrou o que procurava?
Para: Onde você encontrou o item?
![Page 42: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/43.jpg)
MUDANÇAS:De: Você achou fácil de usar?
Para: Qual a parte mais confusa da experiência?
![Page 44: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/44.jpg)
USABILIDADERoteiro
![Page 45: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/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: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/46.jpg)
#TRABALHO30.11
![Page 47: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/47.jpg)
1) 2 GRUPOS
![Page 48: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/48.jpg)
2) ESCOLHA UMA EMPRESA DA BAIXADA QUE TENHA UM SITE RUIM OU NÃO POSSUA SITE
![Page 49: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/49.jpg)
3) NOVO SITE:-Projeto com checklist: TAMANHO DA TELA CONECTIVIDADE OBJETIVOS DO USUÁRIO AMBIENTES DO USUÁRIO CAPACIDADE DO USUÁRIO CONVERSÃO
![Page 50: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/50.jpg)
4) REDES SOCIAIS:-Criar fanpage e perfil no Insta-Imagem de capa-Imagem de perfil-Pelo menos 15 publicações (somando Facebook e Instagram)
![Page 51: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/51.jpg)
4) PARTE ESCRITA (VIA E-MAIL):
4.1 PROPOSTA TÉCNICA:-PESQUISA;- DESCRIÇÃO;- APRESENTAÇÃO DAS PEÇAS;
4.2 PROPOSTA FINANCEIRA-CÁLCULO FINANCEIRO;
![Page 52: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/52.jpg)
5) APRESENTAÇÃO:- COMO SE FOSSE UMA AGÊNCIA (CRIAR NOME E LOGO);- APRESENTAÇÃO DA CAMPANHA;- AÇÕES CRIATIVAS;
![Page 53: Melhorando a Usabilidade](https://reader033.vdocuments.mx/reader033/viewer/2022052308/5871aa8d1a28abda6a8b55a1/html5/thumbnails/53.jpg)
PRÉVIAPara 09/11 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”?