UX Mobile - Testando com Usuários

UX MOBILETESTANDO COM USUÁRIOS

LEONARDO CAETANO HORÁCIO SOARESMobile Product OwnerMobile UX DesignerHotel UrbanoHotel Urbano@horaciosoares@leocaetano

!

UX

User eXperience

ExU

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

X

Vídeo disponível em: https://youtu.be/eZRWesh1CQE

https://youtu.be/eZRWesh1CQE

Mas 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

“

”

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://www.sedentario.org/wp-content/uploads/2008/06/cachorrosempata2.jpg

X





Mas como são nossas experiências

no mundo digital?

Mas como os usuários são vistos?

Resumo da ópera

E o resultado não pode ser diferente:

experiência ruim

= resultado pior ainda

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

Mas o que funciona para uma empresa, pode não funcionar

para outra.

Por exemplo:

CAPTCHA

Ou ainda as mais recentes modinhas como paralax,

http://erikrunyon.com/2013/01/carousel-stats/

Carousel Interaction Stats - ND.edu (3 meses - 2012/13)

http://erikrunyon.com/2013/01/carousel-stats/

http://ND.edu

http://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites/

An Exploration Of Carousel Usage On Mobile E-Commerce Websites (2014)

(several mid-sized to large e-commerce websites over a period of 11 months ) !

http://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites/

Hamburger or not?

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

https://www.youtube.com/watch?v=Nl3OYHo2_b8

22.4%

+12.9%

+5.7%

-22,7%

Affordance

http://www.peachpit.com/articles/article.aspx?p=2209309

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://blog.booking.com/hamburger-menu.html

Mas cuidado… O teste A/B do Booking.com Hamburger x Menu

não apresentou diferenças significativas.

http://blog.booking.com/hamburger-menu.html

made with keynote by andrew haskin

Uma BREVE ANÁLISE de SITES de E-COMMERCE


HAMBURGUER MOBILE

Sem Hamburguer

Hamburguer

Hamburguer a direita


VERSÃO MOBILE

Em março de 2015, das 49 lojas avaliadas, 14 lojas não possuíam

versão mobile

Em maio/junho, apenas 6…


HEADER FIXO

made with keynote by andrew haskinHEADER FIXO


HEADER FIXO MOBILE

Header Fixo Mobile


CARROSSEL

Em março, sem CARROSSEL automático


CARROSSEL MOBILE

simplicidade

Paradoxo da escolha


PERFORMANCE

milésimo de segundo

Acelera Ayrton…

http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36

dos usuários Web dizem que esperam que um site mobile carregue em três segundos ou menos.60%

made with keynote by andrew haskinPERFORMANCE

PageSpeed 35/100


PageSpeed 36/100


PageSpeed 44/100

made with keynote by andrew haskinPERFORMANCE Mobile

PageSpeed 42/100


PageSpeed 45/100


PageSpeed 85/100


PageSpeed 81/100


PageSpeed 74/100


PageSpeed 74/100

Mas por quê?

Porque está na moda, todo mundo usa, porque não temos tempo e

somos reativos... !

REWORK: Business book from 37signals

Uma regra de ouro para os usuários

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

EntrarCancelarx

Uma regra de ouro para quem cria

CONTEXTO MOBILE


CONTEXTO MOBILE

TELA PEQUENA

LUZ DIRETA

LIMITE DE BANDA

MULTITAREFASOBRE PRESSÃO

(restrição de tempo)

CONFUSO e BARULHENTO


More Than 80% Of Facebook's Daily Users Are Mobile

http://www.businessinsider.com/facebook-daily-active-users-q4-2014-2015-1

http://www.businessinsider.com/facebook-daily-active-users-q4-2014-2015-1


http://www.webvenda.com/wp-content/uploads/2015/02/31_webshoppers.pdf



http://www.emarketer.com/Article/Brazil-Mobile-Continues-Expand-Share-of-Ecommerce-Transactions/1012487/6

http://www.emarketer.com/Article/Brazil-Mobile-Continues-Expand-Share-of-Ecommerce-Transactions/1012487/6





CONTEXTO BRASIL

23,9% da população brasileira possui pelo menos uma das deficiências investigadas

ACESSIBILIDADE

Idosos: 19 milhões (10%) - IBGE 2010

Analfabeto funcional

!

Um em cada cinco

brasileiros (38 milhões -

20,4%) é analfabeto

funcional, Pnad 2009 - IBGE.

Como o Luli disse no Digitalks no Rio:

“Nesse mundo Mobile, somostodos daltónicos e sofremos do

Mal de Parkinson”

Quer uma boa interface?

Teste com pessoas…

TESTES

POR QUETESTAR COM PESSOAS?

OBJETIVO

https://www.youtube.com/watch?v=uOHDkIxyu2A&list=PL45D56B9F8C601073&index=5

https://www.youtube.com/watch?v=uOHDkIxyu2A&list=PL45D56B9F8C601073&index=5

PERSONAS

FOCO NO USUÁRIO E NA TAREFA

MENOS CONVERSÃO, MAIS MULTICANAL

POR QUETESTAR COM PESSOAS?

TESTE DE USABILIDADE

Processo de teste de UX iterativoeMarketing 5th edition, Rob Stokes and The Minds of Quirk

IDENTIFICAR MELHORIAS

CRIAR NOVA VERSÃO

TESTAR COM USUÁRIO

ANALISAR RESULTADOS

TESTE DE USABILIDADE TRADICIONAL

Solicita-se que os usuários realizem tarefas no produto pensando em voz alta.

EXEMPLO DE CENÁRIO

Imagine que sua bela e inocente sobrinha está prestes a se casar. Porém, a família descobre que o noivo é membro do submundo. Pior - ele é um matador de aluguel! E mais - sua vida inteira é uma fraude e ele já é casado! Você é o único que possui essas evidências e precisa comprar uma passagem para Bangalore para ela e também para a esposa do noivo. O tempo é essencial!

Frederick van Amstelhttp://usabilidoido.com.br

EXEMPLO DE TAREFACompre duas passagens aéreas no próximo voo para a cidade de Bangalore.

Frederick van Amstelhttp://usabilidoido.com.br

REALIZANDO TESTES

PASSO 0 Planejamento

QUAL O PROPÓSITO?

O QUE TESTAR?

QUEM VAI PARTICIPAR?

COMO SERÁ O TESTE?

ONDE SERÁ O TESTE?

TESTE EM LABORATÓRIO?

TESTE DE CAMPO?

TESTE REMOTO?

PARTICIPANTES CHAVE

Facilitador

Ajudante

Participante(s)

Observador(es)

QUANDO TESTAR

O mais cedo possível!

PROTOTIPAÇÃO EM PAPEL

É UMA VARIAÇÃO DO TESTE DE USABILIDADE

Permite avaliar soluções parciais.

POSSIBILITA REFLEXÕES MAIS CONCEITUAIS

Usuários ficam mais à vontade para criticar, comentar e sugerir.

US$ 1 Prototype

Pesquisa de Guerrilha

FERRAMENTAS

PROTOTIPAÇÃO DIGITAL

Product Owner Mobile [email protected] (21) 9 9925-5404 - @horaciosoaresSkype: horacio.soaresslideshare.net/horacio.soares

Horácio Soares

Product Owner Mobile [email protected] (21) 9 9925-5404 - @horaciosoaresSkype: horacio.soaresslideshare.net/horacio.soares

Horácio SoaresMobile UX Designer

[email protected] (21) 98153-2023 - @leocaetano

Skype: leocaetanorj

Leonardo Caetano