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

Melhorando a Usabilidade

  • 1.
    USABILIDADE Como aplicar noseus projetos RENATO MELO - 2017
  • 2.
  • 3.
    O QUE ÉUSABILIDADE?
  • 4.
    O QUE ÉUSABILIDADE?
  • 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 – Adicioneuma 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 – Adicioneuma 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 É PORQUE 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 Muitasvezes 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 APIintegrado com notícias ou cadastro de ocorrências ou a comunidade Waze poderia marcar alterações de segurança e ganhar pontos.
  • 15.
    RADARES O motorista nãorecebe alertas chamativos, tem que prestar atenção no caminho e na tela do aplicativo a todo momento.
  • 16.
  • 17.
    FORMULÁRIOS Medida é MP/Hao invés de KM/H o que pode confundir o usuário.
  • 19.
  • 20.
  • 21.
    até 0,1s: ideiade 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 100MILISSEGUNDOS DE TEMPO DE CARREGAMENTO DE PÁGINA REDUZ 1% DE VENDAS NA AMAZON. AMAZON
  • 23.
    AO AUMENTAR OCARREGAMENTO DO SITE DE 0.4 PARA 0.9 SEGUNDOS, PERDEU 20% DA RECEITA EM PUBLICIDADE, GOOGLE
  • 24.
    2) PÁGINAS DEERRO 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 DEFORMULÁ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 DOFORMULÁ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.
  • 28.
    5) ETAPAS DOSEU SITE 1. Escolhas dos produtos 2. Cadastro ou login 3. Entrega e embalagem 4. Pagamento
  • 29.
  • 30.
    TESTE COM USUÁRIOS! Nuncamencione a palavra teste, ela assusta as pessoas.
  • 31.
    Maior controle dedados 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 sesente 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úmerode 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
  • 34.
  • 35.
  • 36.
    Perguntas abertas sãoaquelas 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ãoaquelas que podem ser respondidas com um “Sim? ou “Não”, ou outra opção sugerida. Perguntas abertas vs. Perguntas fechadas
  • 38.
    Perguntas fechadas funcionammelhor para questionários quantitativos (porcentagem de sim ou não). Já para usabilidade, o melhor é utilizar questões abertas. Perguntas abertas vs. Perguntas fechadas
  • 39.
  • 40.
    MUDANÇAS: De: A interfaceagiu como esperado? Para: O que você esperava que acontecesse quando você ____?
  • 41.
    MUDANÇAS: De: Você encontrouo que procurava? Para: Onde você encontrou o item?
  • 42.
    MUDANÇAS: De: Você achaque usaria esse produto? Para: Como você acha que esse produto se encaixaria no seu trabalho?
  • 43.
    MUDANÇAS: De: Você achoufácil de usar? Para: Qual a parte mais confusa da experiência?
  • 44.
  • 45.
    • Planejar oteste: 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
  • 46.
  • 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”?
  • 48.