UX e testes de usabilidade mobile

Testes de usabilidade para
mobile e desenvolvimento
centrado no usuário

Product Owner Mobile
horacio.soares@hotelurbano.com
(21) 9 9925-5404 - @horaciosoares 
Skype: horacio.soares
Horácio Soares

Mobile?
Duas palavras mágicas…

O que os
nossos
clientes
esperam?

Como são as
experiências
dos clientes?

Mulher com notebook em sinal de ok
Todos querem o melhor osso…
Cachorrinho caregando um enorme osso.

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

E essa? O Simples é poderoso...

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

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…

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

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.
• ...

empresa
usuários
Objetivos 
e metas do 
projeto
Necessidades
dos 
usuários

Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

Como o cliente explicou
o que queria
O que o cliente
realmente precisava

Design is the 
 
PROBLEM
!
(não apenas a solução)

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...
!

O que funciona para um
empresa, pode não funcionar
para outra.

Artigo  
CAPTCHA: herói ou vilão?
!
http://acessodigital.net/art_captcha-heroi-ou-vilao.html

“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

Hamburger or not? @lukew
https://www.youtube.com/watch?v=Nl3OYHo2_b8

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

CADASTRO
OBRIGATÓRIO

CADASTRO
OBRIGATÓRIO
18 sites
Com exceção de:

HEADER FIXO

POP UP
Newsletter

CADASTRO
Via Redes Sociais
Facebook e Google Facebook e Twitter

CARROSSEL
!
!

CARROSSEL
Estático
!
1 Carrossel estático, abaixo da dobra

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

PERFORMANCE

PERFORMANCE
Piores
GTMETRIX
C/E
257 requests
4,71Mb
GTMETRIX
C/E
365 requests
2,48 Mb

PERFORMANCE
Melhores
GTMETRIX
A/B
22 requests
428 Kb
GTMETRIX
B/B
82 requests
2,24 Mb

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?

Uma regra de ouro  
para quem cria

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.

Participantes chave:
!
- Facilitador
- Guia dos observadores
- Observadores
- Participantes

Desafio:
Como testar
nos contextos
mobile?

More Than 80% Of Facebook's
Daily Users Are Mobile
http://www.businessinsider.com/facebook-daily-active-users-q4-2014-2015-1

CONTEXTO MOBILE

CONTEXTO MOBILE
TELA PEQUENA
LUZ DIRETA
LIMITE DE BANDA
MULTITAREFA
SOBRE PRESSÃO 
(restrição de tempo)
CONFUSO e BARULHENTO

NESSE 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, somos 
todos daltónicos e sofremos do
Mal de Parkinson”

Teste de
usabilidade
com papel

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!!

UX e testes de usabilidade mobile

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a UX e testes de usabilidade mobile

Mais de Horácio Soares

UX e testes de usabilidade mobile