SlideShare uma empresa Scribd logo
1 de 48
USABILIDADE
Como aplicar no seus projetos
RENATO MELO - 2017
USABILIDADE
E sua importância
O QUE É USABILIDADE?
O QUE É USABILIDADE?
WHATSAPP:
Usuário Novo
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
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, isso
não fica claro para o usuário
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
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
NÃO É POR QUE DEU CERTO QUE ESTÁ
TUDO CERTO!
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?
SIMPLES E FUNCIONAL. DÁ PARA
MELHORAR?
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.
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.
RADARES
O motorista não recebe alertas chamativos, tem que
prestar atenção no caminho e na tela do aplicativo a todo
momento.
MUDANÇAS + SINAL SONORO
FORMULÁRIOS
Medida é MP/H ao invés de KM/H o que pode confundir o
usuário.
USABILIDADE
Testes
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!
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?
Não use espaços ou hifens no
telefone. Utilize somente números.
13 6666-6666
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
Testes de
Usabilidade
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, Nokia)
Ambiente do Usuário
Obter feedback rápido
Projetos com recursos
reduzidos
Testar conceitos e
interfaces em fases
iniciais de design
SÉRIES AMERICANAS
NOVELAS BRASILEIRAS
USABILIDADE
Pesquisas com Usuários
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
USABILIDADE
Soluções Nielsen
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
Roteiro
• 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
P1 – 02/10
PRÉVIA
Para 18/09 até às 18h30
renatomelo85@gmail.com ou renato.melo@esamc.br
Digite 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”?
FACEBOOK.COM/
RENATOMELOMKT
renato@iskadigital.com.br

Mais conteúdo relacionado

Mais procurados

Usabilidade em Aplicativos - Webdesign - 2021-02
Usabilidade em Aplicativos - Webdesign - 2021-02Usabilidade em Aplicativos - Webdesign - 2021-02
Usabilidade em Aplicativos - Webdesign - 2021-02Renato Melo
 
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02Renato Melo
 
Testes de usabilidade - Webdesign 2021-02
Testes de usabilidade - Webdesign 2021-02Testes de usabilidade - Webdesign 2021-02
Testes de usabilidade - Webdesign 2021-02Renato Melo
 
UX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioUX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioRenato Melo
 
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020Renato Melo
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webÍtalo Waxman
 

Mais procurados (6)

Usabilidade em Aplicativos - Webdesign - 2021-02
Usabilidade em Aplicativos - Webdesign - 2021-02Usabilidade em Aplicativos - Webdesign - 2021-02
Usabilidade em Aplicativos - Webdesign - 2021-02
 
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02
 
Testes de usabilidade - Webdesign 2021-02
Testes de usabilidade - Webdesign 2021-02Testes de usabilidade - Webdesign 2021-02
Testes de usabilidade - Webdesign 2021-02
 
UX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioUX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuário
 
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
 

Destaque

Projeto Web - Resumo P2
Projeto Web - Resumo P2Projeto Web - Resumo P2
Projeto Web - Resumo P2Renato Melo
 
Desbloqueio Criativo
Desbloqueio CriativoDesbloqueio Criativo
Desbloqueio CriativoRenato Melo
 
Proposta de Valor - Empreendedorismo
Proposta de Valor - EmpreendedorismoProposta de Valor - Empreendedorismo
Proposta de Valor - EmpreendedorismoRenato Melo
 
Conversão: Técnicas, vendas e landing pages
Conversão: Técnicas, vendas e landing pagesConversão: Técnicas, vendas e landing pages
Conversão: Técnicas, vendas e landing pagesRenato Melo
 
Academia Criativa
Academia CriativaAcademia Criativa
Academia CriativaRenato Melo
 
Empreendedorismo - P1 Resumo
Empreendedorismo - P1 ResumoEmpreendedorismo - P1 Resumo
Empreendedorismo - P1 ResumoRenato Melo
 
Design de Imagens para Anúncios no Facebook
Design de Imagens para Anúncios no FacebookDesign de Imagens para Anúncios no Facebook
Design de Imagens para Anúncios no FacebookRenato Melo
 
LOGO E FECHAMENTO DE ARQUIVO
LOGO E FECHAMENTO DE ARQUIVOLOGO E FECHAMENTO DE ARQUIVO
LOGO E FECHAMENTO DE ARQUIVORenato Melo
 
Conteúdo para Conversão Pt2
Conteúdo para Conversão Pt2Conteúdo para Conversão Pt2
Conteúdo para Conversão Pt2Renato Melo
 
Criatividade e Inovação
Criatividade e InovaçãoCriatividade e Inovação
Criatividade e InovaçãoRenato Melo
 
Empreendedorismo: Montando meu negócio
Empreendedorismo: Montando meu negócioEmpreendedorismo: Montando meu negócio
Empreendedorismo: Montando meu negócioRenato Melo
 
Técnicas de Atendimento ao Novo Cliente
Técnicas de Atendimento ao Novo ClienteTécnicas de Atendimento ao Novo Cliente
Técnicas de Atendimento ao Novo ClienteRenato Melo
 
Design de Conteúdo: Conversão
Design de Conteúdo: ConversãoDesign de Conteúdo: Conversão
Design de Conteúdo: ConversãoRenato Melo
 
Cores no design gráfico - Illustrator
Cores no design gráfico - IllustratorCores no design gráfico - Illustrator
Cores no design gráfico - IllustratorRenato Melo
 
Tipografia no Design Impresso
Tipografia no Design ImpressoTipografia no Design Impresso
Tipografia no Design ImpressoRenato Melo
 
Eficiência nas Redes Sociais - Boca Jrs
Eficiência nas Redes Sociais - Boca JrsEficiência nas Redes Sociais - Boca Jrs
Eficiência nas Redes Sociais - Boca JrsRenato Melo
 
Social Canvas no Projeto Web
Social Canvas no Projeto WebSocial Canvas no Projeto Web
Social Canvas no Projeto WebRenato Melo
 
Empreendedorismo - Resumo P2
Empreendedorismo - Resumo P2Empreendedorismo - Resumo P2
Empreendedorismo - Resumo P2Renato Melo
 
Projeto WEB - Resumo P1
Projeto WEB - Resumo P1Projeto WEB - Resumo P1
Projeto WEB - Resumo P1Renato Melo
 
Storytelling e Estratégia de Titulos
Storytelling e Estratégia de Titulos Storytelling e Estratégia de Titulos
Storytelling e Estratégia de Titulos Renato Melo
 

Destaque (20)

Projeto Web - Resumo P2
Projeto Web - Resumo P2Projeto Web - Resumo P2
Projeto Web - Resumo P2
 
Desbloqueio Criativo
Desbloqueio CriativoDesbloqueio Criativo
Desbloqueio Criativo
 
Proposta de Valor - Empreendedorismo
Proposta de Valor - EmpreendedorismoProposta de Valor - Empreendedorismo
Proposta de Valor - Empreendedorismo
 
Conversão: Técnicas, vendas e landing pages
Conversão: Técnicas, vendas e landing pagesConversão: Técnicas, vendas e landing pages
Conversão: Técnicas, vendas e landing pages
 
Academia Criativa
Academia CriativaAcademia Criativa
Academia Criativa
 
Empreendedorismo - P1 Resumo
Empreendedorismo - P1 ResumoEmpreendedorismo - P1 Resumo
Empreendedorismo - P1 Resumo
 
Design de Imagens para Anúncios no Facebook
Design de Imagens para Anúncios no FacebookDesign de Imagens para Anúncios no Facebook
Design de Imagens para Anúncios no Facebook
 
LOGO E FECHAMENTO DE ARQUIVO
LOGO E FECHAMENTO DE ARQUIVOLOGO E FECHAMENTO DE ARQUIVO
LOGO E FECHAMENTO DE ARQUIVO
 
Conteúdo para Conversão Pt2
Conteúdo para Conversão Pt2Conteúdo para Conversão Pt2
Conteúdo para Conversão Pt2
 
Criatividade e Inovação
Criatividade e InovaçãoCriatividade e Inovação
Criatividade e Inovação
 
Empreendedorismo: Montando meu negócio
Empreendedorismo: Montando meu negócioEmpreendedorismo: Montando meu negócio
Empreendedorismo: Montando meu negócio
 
Técnicas de Atendimento ao Novo Cliente
Técnicas de Atendimento ao Novo ClienteTécnicas de Atendimento ao Novo Cliente
Técnicas de Atendimento ao Novo Cliente
 
Design de Conteúdo: Conversão
Design de Conteúdo: ConversãoDesign de Conteúdo: Conversão
Design de Conteúdo: Conversão
 
Cores no design gráfico - Illustrator
Cores no design gráfico - IllustratorCores no design gráfico - Illustrator
Cores no design gráfico - Illustrator
 
Tipografia no Design Impresso
Tipografia no Design ImpressoTipografia no Design Impresso
Tipografia no Design Impresso
 
Eficiência nas Redes Sociais - Boca Jrs
Eficiência nas Redes Sociais - Boca JrsEficiência nas Redes Sociais - Boca Jrs
Eficiência nas Redes Sociais - Boca Jrs
 
Social Canvas no Projeto Web
Social Canvas no Projeto WebSocial Canvas no Projeto Web
Social Canvas no Projeto Web
 
Empreendedorismo - Resumo P2
Empreendedorismo - Resumo P2Empreendedorismo - Resumo P2
Empreendedorismo - Resumo P2
 
Projeto WEB - Resumo P1
Projeto WEB - Resumo P1Projeto WEB - Resumo P1
Projeto WEB - Resumo P1
 
Storytelling e Estratégia de Titulos
Storytelling e Estratégia de Titulos Storytelling e Estratégia de Titulos
Storytelling e Estratégia de Titulos
 

Semelhante a Melhorando a Usabilidade

USABILIDADE NA INTERNET: TESTES, DICAS E CONVERSÃO!
USABILIDADE NA INTERNET: TESTES, DICAS E CONVERSÃO!USABILIDADE NA INTERNET: TESTES, DICAS E CONVERSÃO!
USABILIDADE NA INTERNET: TESTES, DICAS E CONVERSÃO!Renato Melo
 
Teste de Usabilidade - Webdesign - Aula 10
Teste de Usabilidade - Webdesign - Aula 10Teste de Usabilidade - Webdesign - Aula 10
Teste de Usabilidade - Webdesign - Aula 10Renato Melo
 
Melhorando a Usabilidade - Webdesign - Aula 09 - 2019
Melhorando a Usabilidade - Webdesign - Aula 09 - 2019Melhorando a Usabilidade - Webdesign - Aula 09 - 2019
Melhorando a Usabilidade - Webdesign - Aula 09 - 2019Renato Melo
 
O UX e usabilidade no Webdesign
O UX e usabilidade no WebdesignO UX e usabilidade no Webdesign
O UX e usabilidade no WebdesignRenato Melo
 
Melhorando a Usabilidade - Webdesign - Aula 09
Melhorando a Usabilidade - Webdesign - Aula 09Melhorando a Usabilidade - Webdesign - Aula 09
Melhorando a Usabilidade - Webdesign - Aula 09Renato Melo
 
UX e usabilidade
UX e usabilidadeUX e usabilidade
UX e usabilidadeRenato Melo
 
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01Testes de Usabilidade - Webdesign - Aula 9 - 2020-01
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01Renato Melo
 
Teste de Usabilidade - Webdesign - Aula 4 2020-02
Teste de Usabilidade - Webdesign - Aula 4 2020-02Teste de Usabilidade - Webdesign - Aula 4 2020-02
Teste de Usabilidade - Webdesign - Aula 4 2020-02Renato Melo
 
Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022Renato Melo
 
Workshop sobre Métricas para Aplicativos Mobile
Workshop sobre Métricas para Aplicativos MobileWorkshop sobre Métricas para Aplicativos Mobile
Workshop sobre Métricas para Aplicativos MobileAmure Pinho
 
Webdesign: Conversao, UX e Usabilidade
Webdesign: Conversao, UX e UsabilidadeWebdesign: Conversao, UX e Usabilidade
Webdesign: Conversao, UX e UsabilidadeRenato Melo
 
USABILIDADE - A IMPORTÂNCIA
USABILIDADE - A IMPORTÂNCIAUSABILIDADE - A IMPORTÂNCIA
USABILIDADE - A IMPORTÂNCIARenato Melo
 
Aplicativo siga manaus
Aplicativo siga manausAplicativo siga manaus
Aplicativo siga manausGustavo Cruz
 
Teste de Usabilidade e Percurso Cognitivo
Teste de Usabilidade e Percurso CognitivoTeste de Usabilidade e Percurso Cognitivo
Teste de Usabilidade e Percurso CognitivoLaís Berlatto
 
Estudo SolarWinds de AppStack
Estudo SolarWinds de AppStackEstudo SolarWinds de AppStack
Estudo SolarWinds de AppStackSolarWinds
 
[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
 
Teste de usabilidade - WhatsApp
Teste de usabilidade - WhatsAppTeste de usabilidade - WhatsApp
Teste de usabilidade - WhatsAppLuiz Agner
 
Meetup Métricas de UX – Ladies That UX Florianópolis
Meetup Métricas de UX – Ladies That UX FlorianópolisMeetup Métricas de UX – Ladies That UX Florianópolis
Meetup Métricas de UX – Ladies That UX FlorianópolisLadies That UX Florianópolis
 
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
 

Semelhante a Melhorando a Usabilidade (20)

USABILIDADE NA INTERNET: TESTES, DICAS E CONVERSÃO!
USABILIDADE NA INTERNET: TESTES, DICAS E CONVERSÃO!USABILIDADE NA INTERNET: TESTES, DICAS E CONVERSÃO!
USABILIDADE NA INTERNET: TESTES, DICAS E CONVERSÃO!
 
Teste de Usabilidade - Webdesign - Aula 10
Teste de Usabilidade - Webdesign - Aula 10Teste de Usabilidade - Webdesign - Aula 10
Teste de Usabilidade - Webdesign - Aula 10
 
Melhorando a Usabilidade - Webdesign - Aula 09 - 2019
Melhorando a Usabilidade - Webdesign - Aula 09 - 2019Melhorando a Usabilidade - Webdesign - Aula 09 - 2019
Melhorando a Usabilidade - Webdesign - Aula 09 - 2019
 
O UX e usabilidade no Webdesign
O UX e usabilidade no WebdesignO UX e usabilidade no Webdesign
O UX e usabilidade no Webdesign
 
Melhorando a Usabilidade - Webdesign - Aula 09
Melhorando a Usabilidade - Webdesign - Aula 09Melhorando a Usabilidade - Webdesign - Aula 09
Melhorando a Usabilidade - Webdesign - Aula 09
 
UX e usabilidade
UX e usabilidadeUX e usabilidade
UX e usabilidade
 
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01Testes de Usabilidade - Webdesign - Aula 9 - 2020-01
Testes de Usabilidade - Webdesign - Aula 9 - 2020-01
 
Teste de Usabilidade - Webdesign - Aula 4 2020-02
Teste de Usabilidade - Webdesign - Aula 4 2020-02Teste de Usabilidade - Webdesign - Aula 4 2020-02
Teste de Usabilidade - Webdesign - Aula 4 2020-02
 
Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022Testes de usabilidade - Webdesign 2022
Testes de usabilidade - Webdesign 2022
 
Workshop sobre Métricas para Aplicativos Mobile
Workshop sobre Métricas para Aplicativos MobileWorkshop sobre Métricas para Aplicativos Mobile
Workshop sobre Métricas para Aplicativos Mobile
 
Webdesign: Conversao, UX e Usabilidade
Webdesign: Conversao, UX e UsabilidadeWebdesign: Conversao, UX e Usabilidade
Webdesign: Conversao, UX e Usabilidade
 
USABILIDADE - A IMPORTÂNCIA
USABILIDADE - A IMPORTÂNCIAUSABILIDADE - A IMPORTÂNCIA
USABILIDADE - A IMPORTÂNCIA
 
Aplicativo siga manaus
Aplicativo siga manausAplicativo siga manaus
Aplicativo siga manaus
 
Teste de Usabilidade e Percurso Cognitivo
Teste de Usabilidade e Percurso CognitivoTeste de Usabilidade e Percurso Cognitivo
Teste de Usabilidade e Percurso Cognitivo
 
Estudo SolarWinds de AppStack
Estudo SolarWinds de AppStackEstudo SolarWinds de AppStack
Estudo SolarWinds de AppStack
 
[GUTS-RS] Testar Interfaces com UX
[GUTS-RS] Testar Interfaces com UX[GUTS-RS] Testar Interfaces com UX
[GUTS-RS] Testar Interfaces com UX
 
Teste de usabilidade - WhatsApp
Teste de usabilidade - WhatsAppTeste de usabilidade - WhatsApp
Teste de usabilidade - WhatsApp
 
Meetup Métricas de UX – Ladies That UX Florianópolis
Meetup Métricas de UX – Ladies That UX FlorianópolisMeetup Métricas de UX – Ladies That UX Florianópolis
Meetup Métricas de UX – Ladies That UX Florianópolis
 
Apresentação instagram
Apresentação instagramApresentação instagram
Apresentação instagram
 
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
 

Mais de 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
 

Mais de 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
 

Melhorando a Usabilidade

  • 1. USABILIDADE Como aplicar no seus projetos RENATO MELO - 2017
  • 3. O QUE É USABILIDADE?
  • 4. O QUE É USABILIDADE?
  • 5.
  • 6. WHATSAPP: Usuário Novo 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
  • 7. 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, isso não fica claro para o usuário 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
  • 8. 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
  • 9. NÃO É POR QUE DEU CERTO QUE ESTÁ TUDO CERTO!
  • 10. 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?
  • 11. SIMPLES E FUNCIONAL. DÁ PARA MELHORAR?
  • 12. 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.
  • 13. 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.
  • 14.
  • 15. RADARES O motorista não recebe alertas chamativos, tem que prestar atenção no caminho e na tela do aplicativo a todo momento.
  • 17. FORMULÁRIOS Medida é MP/H ao invés de KM/H o que pode confundir o usuário.
  • 18.
  • 21. 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!
  • 22. A CADA 100 MILISSEGUNDOS DE TEMPO DE CARREGAMENTO DE PÁGINA REDUZ 1% DE VENDAS NA AMAZON. AMAZON
  • 23. AO AUMENTAR O CARREGAMENTO DO SITE DE 0.4 PARA 0.9 SEGUNDOS, PERDEU 20% DA RECEITA EM PUBLICIDADE, GOOGLE
  • 24. 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.
  • 25. 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
  • 26. 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.
  • 27. 4) CAIXA DE BUSCA
  • 28. 5) ETAPAS DO SEU SITE 1. Escolhas dos produtos 2. Cadastro ou login 3. Entrega e embalagem 4. Pagamento
  • 30. TESTE COM USUÁRIOS! Nunca mencione a palavra teste, ela assusta as pessoas.
  • 31. 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
  • 32. 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
  • 33. 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
  • 36. 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
  • 37. 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
  • 38. 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
  • 40. MUDANÇAS: De: A interface agiu como esperado? Para: O que você esperava que acontecesse quando você ____?
  • 41. MUDANÇAS: De: Você encontrou o que procurava? Para: Onde você encontrou o item?
  • 42. MUDANÇAS: De: Você acha que usaria esse produto? Para: Como você acha que esse produto se encaixaria no seu trabalho?
  • 43. MUDANÇAS: De: Você achou fácil de usar? Para: Qual a parte mais confusa da experiência?
  • 45. • 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
  • 47. PRÉVIA Para 18/09 até às 18h30 renatomelo85@gmail.com ou renato.melo@esamc.br Digite 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”?