ux e testes de usabilidade mobile
TRANSCRIPT
Testes de usabilidade para mobile e desenvolvimento
centrado no usuário
Product Owner Mobile [email protected] (21) 9 9925-5404 - @horaciosoares Skype: horacio.soares
Horácio Soares
Mobile?
Duas palavras mágicas…
Uma delas te rouba tempo:
A outra te faz ganhar tempo
Entretenimento
Utilidade
O que os nossos clientes esperam?
felicidade
experiência perfeita
felicidade
Como são as experiências dos clientes?
e o que as empresas
esperam?
Mulher com notebook em sinal de ok
Todos querem o melhor osso…
Cachorrinho caregando um enorme osso.
mas como?
com qualidade...
com uma experiência de
qualidade...
Experiências são uma
!
!
!
!
!
nova oferta econômica.
Experiências que fazem esquecer o mundo a sua volta
Experiências que surpreendem
Como foi essa experiência?
E essa? O Simples é poderoso...
E qual desses controles?
Design the PRODUCT
Design the PRODUCT
Design the EXPERIENCEX
Afinal, o que é eXperiência do Usuário (UX) ?
eXperiência do Usuário (UX) é a qualidade da experiência que uma
pessoa tem ao interagir com algo projetado.
uxnet.org
“
”
http://semanticstudios.com/publications/semantics/000029.php
Colmeia da experiência do usuário? !
!
!
!
HoneyComb User Experience
http://www.sedentario.org/wp-content/uploads/2008/06/cachorrosempata2.jpg
X
http://semanticstudios.com/publications/semantics/000029.php
http://semanticstudios.com/publications/semantics/000029.php
Mas como são nossas experiências
no mundo digital?
Como os usuários são vistos?
Para alguns desenvolvedores e designers, é assim
que os usuários deveriam ser
tratados…
Usuário bom é usuário m…
Usuário bom é usuário m…
Resumo da ópera
E o resultado não poderia ser diferente:
experiência ruim
= resultado pior ainda
“Estratégia
= uma conspiração para o
sucesso” !
Luiz Fernando da Silva Pinto
Além da falta de objetivos claros e da falta comunicação e trabalho
em equipe, um outro grave problema:
Objetivos e metas do projeto
Reais necessidades dos
usuários
Falta de equilíbrio
Marte Objetivos e metas da empresa
Vênus Necessidades dos usuários
Desafio 2:
Como atender ao mesmo tempo os objetivos e as necessidades?
Objetivos e metas do projeto
• Precisa de novos clientes/usuários.
• Quer que os clientes atuais visitem seu site com
maior frequencia.
• Quer aumentar a margem de lucro.
• Você precisa aumentar sua audiência, seu público.
• Quer diferenciar sua marca.
• Gostaria de melhorar o retorno sobre o investimento
(ROI).
• Quer q. seus clientes gastem mais a cada compra.
• Está à procura de novos canais de distribuição.
• Quer aumentar sua fatia do mercado (market share).
• ...
Reais necessidades dos
usuários
• Qualidade.
• Simplicidade.
• velocidade.
• Utilidade.
• Usabilidade.
• Acessibilidade.
• Portabilidade.
• Bom custo x benefício.
• Resolver seu problema.
• ...
Objetivos e metas do projeto
Reais necessidades dos
usuários
a busca do equilíbrio
empresa
usuários
Objetivos e metas do
projeto Necessidades dos
usuários
um case em equilíbrio…
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
By Erico Fileno
Como o cliente explicou o que queria
O que o cliente realmente precisava
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Observação = Descoberta
Design is the
PROBLEM !
(não apenas a solução)
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
http://www.charmin.com/find-public-restrooms.aspx http://www.youtube.com/watch?v=2Qh3Mk9JVp8
Mas, na busca por soluções para os problemas, o que
maioria dos sites faz?
Ctrl + C à Ctrl + V para quase tudo...
Resultado: replicamos tudo sem questionamentos...
!
Selfie
Selfie
X
O que funciona para um empresa, pode não funcionar
para outra.
Código de barras
X
CAPTCHA
Artigo CAPTCHA: herói ou vilão?
!
http://acessodigital.net/art_captcha-heroi-ou-vilao.html
Menu DropDown
X
Clique aqui!
Clique aqui!
“Clique aqui”, “Saiba mais”, “veja
Mais”… 41.700.000 respostas
para “clique aqui” no Google.
Ou ainda as mais recentes modinhas como paralax,
http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
http://uxmovement.com/navigation/why-users-arent-clicking-your-home-page-carousel
Why Users Aren’t Clicking Your Home Page Carousel
http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
Hamburger or not?
Hamburger or not? @lukew https://www.youtube.com/watch?v=Nl3OYHo2_b8
22.4%
+12.9%
+5.7%
-22,7%
Affordance Steve Krug on Things that Make Us Think
http://www.peachpit.com/articles/article.aspx?p=2209309
The dangers of FLAT design - @Lukew https://twitter.com/lukew/status/505461084182953984/photo/1
http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
Kill The Hamburger Button
http://exisweb.net/mobile-menu-abtest
Mobile Menu AB Tested: Hamburger Not the Best
Choice?
http://blog.booking.com/hamburger-menu.html
Mas cuidado… O teste A/B do Booking.com Hamburger x Menu
não apresentou diferenças significativas.
made with keynote by andrew haskin
ANÁLISE de 20 SITES NACIONAIS
de E-COMMERCE
made with keynote by andrew haskin
CADASTRO OBRIGATÓRIO
made with keynote by andrew haskin
CADASTRO OBRIGATÓRIO
18 sites Com exceção de:
made with keynote by andrew haskin
HEADER FIXO
made with keynote by andrew haskin
POP UP Newsletter
made with keynote by andrew haskin
POP UP Newsletter
made with keynote by andrew haskin
CADASTRO Via Redes Sociais
Facebook e Google Facebook e Twitter
made with keynote by andrew haskinCARROSSEL
!
!
made with keynote by andrew haskinCARROSSEL
Estático !1 Carrossel estático, abaixo da dobra
SIMPLICIDADE
Paradoxo da escolha
made with keynote by andrew haskin
Versões Mobile
5 e-commerces não possuem versão responsiva, nem Mobile.
15 sites possuem versão
otimizada, mas
nenhum uma versão
responsiva
made with keynote by andrew haskin
PERFORMANCE
made with keynote by andrew haskinPERFORMANCE
Piores
GTMETRIX C/E
257 requests 4,71Mb
GTMETRIX C/E
365 requests 2,48 Mb
made with keynote by andrew haskinPERFORMANCE
Melhores
GTMETRIX A/B
22 requests 428 Kb
GTMETRIX B/B
82 requests 2,24 Mb
Mas por quê?
Porque está na moda, todo mundo usa, porque não temos tempo e
somos reativos... !
REWORK: Business book from 37signals
E porque somos preguiçosos…
Uma regra de ouro para os usuários
O que você pensa ao dirigir seu carro de casa pro trabalho?
DESAFIO 1 Você está no meio de um site e quer ir para a página inicial, o
que você faz?
DESAFIO 2 O botão de confirmar fica na
esquerda ou é o botão de cancelar que é posicionado à
esquerda?
Santander 2014
Homebanking CAIXA 2014
Pagamento pela CIELO 2014
x Cancelar Confirmar
Entrarx Cancelar
Uma regra de ouro para quem cria
Usabilidade?O que é
Quer uma boa interface? Teste…
Vídeo disponível em: http://www.youtube.com/watch?v=KQBFcWQficQ
E os testes podem ser mais simples do que se imagina…
Exemplo:
Designer propõem e o desenvolvedor concorda em:
trocar na página de vídeo do usuário:
- texto “exibições”por
- um ícone de um olho estilizado
Avaliação de Usabilidade
First clic test.
(um tipo de teste rápido)
First clic test.
Se o usuário não clicar certo a primeira vez, a chance de
clicar certo depois será muito baixa.
A técnica muito boa e rápida para testar se os seus links/botões/arquitetura estão funcionando.
Chame o usuário e crie alguns cenários para testar a
homepage, como, por exemplo: “Sua senha foi clonada e você precisa mudá-la com urgência... Onde você clicaria para mudar a senha?”
E observe o usuário.
ESPN Brasil– abril 2010
ESPN Brasil– abril 2010
X
Testes de Usabilidade
!
O que vai testar?
!
Quem vai participar?
Como será o teste?
Onde será o teste?
Teste em laboratorio?
Teste de campo?
Teste remoto?
Participantes chave:
!
- Facilitador - Guia dos observadores
- Observadores - Participantes
Desafio: Como testar nos contextos mobile?
made with keynote by andrew haskin
More Than 80% Of Facebook's Daily Users Are Mobile
http://www.businessinsider.com/facebook-daily-active-users-q4-2014-2015-1
made with keynote by andrew haskin
CONTEXTO MOBILE
made with keynote by andrew haskin
CONTEXTO MOBILE
TELA PEQUENA
LUZ DIRETA
LIMITE DE BANDA
MULTITAREFASOBRE PRESSÃO
(restrição de tempo)
CONFUSO e BARULHENTO
made with keynote by andrew haskinNESSE CONTEXTO…
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36
Dos usuários esperam que um site mobile carregue em três
segundos ou menos.
60%Estão dispostos a esperar até cinco
segundos ou menos antes de abandonar a
experiência.
74%
Como o Luli disse no Digitalks no Rio:
“Nesse mundo Mobile, somostodos daltónicos e sofremos do
Mal de Parkinson”
Teste de usabilidade com papel
$1 Prototype
Oportunidades QUEREMOS(VOCÊ(AO(NOSSO(LADO(O(ANO(INTEIRO...((E(NÃO(APENAS(DURANTE(AS(SUAS(VIAGENS(;7)(
Este%é%apenas%o%começo%da%nossa%viagem.%%Para%o%HU,%o%céu%é%o%limite!%\o/%
%
“Always%day%one”%
OBRIGADO!!