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…

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

http://www.uistencils.com/

https://popapp.in/

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