Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UX MOBILE
TESTANDO COM USUÁRIOS
LEONARDO CAETANO HORÁCIO SOARES
Mobile Product OwnerMobile UX Designer
Hotel 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
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 E...
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?
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://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites/
An Exploration Of Car...
Hamburger or not?
Hamburger or not? @lukew
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
The dangers of FLAT design - @Lukew
https://twitter.com/lukew/status/505461084182953984/photo/1
The dangers of FLAT design - @Lukew
https://twitter.com/lukew/status/505461084182953984/photo/1
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 dife...
made with keynote by andrew haskin
Uma BREVE ANÁLISE de 

SITES de E-COMMERCE
made with keynote by andrew haskin
HAMBURGUER MOBILE
Sem Hamburguer
Hamburguer
Hamburguer a direita
made with keynote by andrew haskin
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…
made with keynote by andrew haskin
HEADER FIXO
made with keynote by andrew haskin
HEADER FIXO
made with keynote by andrew haskin
HEADER FIXO MOBILE
Header Fixo Mobile
made with keynote by andrew haskin
CARROSSEL
Em março, sem CARROSSEL automático
made with keynote by andrew haskin
CARROSSEL MOBILE
simplicidade
Paradoxo da escolha
made with keynote by andrew haskin
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...
made with keynote by andrew haskin
PERFORMANCE
PageSpeed
35/100
made with keynote by andrew haskin
PERFORMANCE
PageSpeed
36/100
made with keynote by andrew haskin
PERFORMANCE
PageSpeed
44/100
made with keynote by andrew haskin
PERFORMANCE Mobile
PageSpeed
42/100
made with keynote by andrew haskin
PERFORMANCE Mobile
PageSpeed
45/100
made with keynote by andrew haskin
PERFORMANCE
PageSpeed
85/100
made with keynote by andrew haskin
PERFORMANCE
PageSpeed
81/100
made with keynote by andrew haskin
PERFORMANCE
PageSpeed
74/100
made with keynote by andrew haskin
PERFORMANCE Mobile
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
made with keynote by andrew haskin
CONTEXTO MOBILE
TELA PEQUENA
LUZ DIRETA
LIMITE DE BANDA
MULTITAREFA
SOBRE PRESSÃO

(res...
made with keynote by andrew haskin
More Than 80% Of Facebook's
Daily Users Are Mobile
http://www.businessinsider.com/faceb...
made with keynote by andrew haskin
http://www.webvenda.com/wp-content/uploads/2015/02/31_webshoppers.pdf
made with keynote by andrew haskin
http://www.emarketer.com/Article/Brazil-Mobile-Continues-Expand-Share-of-Ecommerce-Tran...
made with keynote by andrew haskin
http://www.webvenda.com/wp-content/uploads/2015/02/31_webshoppers.pdf
made with keynote by andrew haskin
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, somos

todos daltónicos e sofremos do
Mal de Parkinson”
Quer uma boa interface? 



Teste com pessoas…
TESTES
POR QUE
TESTAR COM PESSOAS?
OBJETIVO
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 QUE
TESTAR COM PESSOAS?
TESTE DE
USABILIDADE
Processo de teste de UX iterativo
eMarketing 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...
EXEMPLO DE
TAREFA
Compre duas passagens aéreas no próximo voo para a
cidade de Bangalore.
Frederick van Amstel
http://usab...
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
horacio.soares@hotelurbano.com.br
(21) 9 9925-5404 - @horaciosoares

Skype: horacio.soares

slideshar...
Product Owner Mobile
horacio.soares@hotelurbano.com.br
(21) 9 9925-5404 - @horaciosoares

Skype: horacio.soares

slideshar...
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
UX Mobile - Testando com Usuários
Upcoming SlideShare
Loading in …5
×

UX Mobile - Testando com Usuários

2,184 views

Published on

Apresentação realizada no MobileConf 2015, no Rio de Janeiro, dia 30 de maio de 2015.

Horácio Soares e Leonardo Caetano

Published in: Mobile

UX Mobile - Testando com Usuários

  1. 1. UX MOBILE TESTANDO COM USUÁRIOS
  2. 2. LEONARDO CAETANO HORÁCIO SOARES Mobile Product OwnerMobile UX Designer Hotel UrbanoHotel Urbano @horaciosoares@leocaetano
  3. 3. ! UX
  4. 4. User eXperience
  5. 5. ExU
  6. 6. Experiências !
  7. 7. São uma nova oferta econômica.
  8. 8. Experiências que fazem esquecer o mundo a sua volta
  9. 9. Experiências que surpreendem
  10. 10. Como foi essa experiência?
  11. 11. E essa? O Simples é poderoso...
  12. 12. X
  13. 13. Vídeo disponível em: https://youtu.be/eZRWesh1CQE
  14. 14. Mas afinal, o que é eXperiência 
 do Usuário (UX) ?
  15. 15. eXperiência do Usuário (UX) é a qualidade da experiência que uma pessoa tem ao interagir com algo projetado.
 
 uxnet.org “ ”
  16. 16. eXperiência do Usuário (UX) é a qualidade da experiência que uma pessoa tem ao interagir com algo projetado.
 
 uxnet.org “ ”
  17. 17. http://semanticstudios.com/publications/semantics/000029.php Colmeia da experiência 
 do usuário? ! ! ! ! HoneyComb User Experience
  18. 18. http://www.sedentario.org/wp-content/uploads/2008/06/cachorrosempata2.jpg
  19. 19. X
  20. 20. http://semanticstudios.com/publications/semantics/000029.php
  21. 21. http://semanticstudios.com/publications/semantics/000029.php
  22. 22. Mas como são 
 nossas experiências no mundo digital?
  23. 23. Mas como os usuários são vistos?
  24. 24. Resumo da ópera
  25. 25. E o resultado não 
 pode ser diferente: experiência ruim = resultado pior ainda
  26. 26. Mas, na busca por soluções para os problemas, o que maioria dos sites faz?
  27. 27. Ctrl + C à Ctrl + V para quase tudo...
  28. 28. Resultado: replicamos tudo sem questionamentos... !
  29. 29. Selfie
  30. 30. Selfie
  31. 31. Mas o que funciona para uma empresa, pode não funcionar para outra.
  32. 32. Por exemplo:
  33. 33. 
 CAPTCHA

  34. 34. Ou ainda as mais recentes modinhas como paralax,
  35. 35. http://erikrunyon.com/2013/01/carousel-stats/ Carousel Interaction Stats - ND.edu 
 (3 meses - 2012/13)
  36. 36. 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 ) !
  37. 37. Hamburger or not?
  38. 38. Hamburger or not? @lukew https://www.youtube.com/watch?v=Nl3OYHo2_b8
  39. 39. 22.4%
  40. 40. +12.9%
  41. 41. +5.7%
  42. 42. -22,7%
  43. 43. Affordance http://www.peachpit.com/articles/article.aspx?p=2209309 Steve Krug on Things that Make Us Think
  44. 44. The dangers of FLAT design - @Lukew https://twitter.com/lukew/status/505461084182953984/photo/1
  45. 45. The dangers of FLAT design - @Lukew https://twitter.com/lukew/status/505461084182953984/photo/1
  46. 46. The dangers of FLAT design - @Lukew https://twitter.com/lukew/status/505461084182953984/photo/1
  47. 47. 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.
  48. 48. made with keynote by andrew haskin Uma BREVE ANÁLISE de 
 SITES de E-COMMERCE
  49. 49. made with keynote by andrew haskin HAMBURGUER MOBILE
  50. 50. Sem Hamburguer
  51. 51. Hamburguer
  52. 52. Hamburguer a direita
  53. 53. made with keynote by andrew haskin VERSÃO MOBILE
  54. 54. Em março de 2015, das 49 lojas avaliadas, 14 lojas não possuíam versão mobile
  55. 55. Em maio/junho, apenas 6…
  56. 56. made with keynote by andrew haskin HEADER FIXO
  57. 57. made with keynote by andrew haskin HEADER FIXO
  58. 58. made with keynote by andrew haskin HEADER FIXO MOBILE
  59. 59. Header Fixo Mobile
  60. 60. made with keynote by andrew haskin CARROSSEL
  61. 61. Em março, sem CARROSSEL automático
  62. 62. made with keynote by andrew haskin CARROSSEL MOBILE
  63. 63. simplicidade
  64. 64. Paradoxo da escolha
  65. 65. made with keynote by andrew haskin PERFORMANCE
  66. 66. milésimo de segundo
  67. 67. Acelera Ayrton…
  68. 68. 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%
  69. 69. made with keynote by andrew haskin PERFORMANCE PageSpeed 35/100
  70. 70. made with keynote by andrew haskin PERFORMANCE PageSpeed 36/100
  71. 71. made with keynote by andrew haskin PERFORMANCE PageSpeed 44/100
  72. 72. made with keynote by andrew haskin PERFORMANCE Mobile PageSpeed 42/100
  73. 73. made with keynote by andrew haskin PERFORMANCE Mobile PageSpeed 45/100
  74. 74. made with keynote by andrew haskin PERFORMANCE PageSpeed 85/100
  75. 75. made with keynote by andrew haskin PERFORMANCE PageSpeed 81/100
  76. 76. made with keynote by andrew haskin PERFORMANCE PageSpeed 74/100
  77. 77. made with keynote by andrew haskin PERFORMANCE Mobile PageSpeed 74/100
  78. 78. Mas por quê?
  79. 79. Porque está na moda, todo mundo usa, porque não temos tempo e somos reativos... ! REWORK: Business book from 37signals
  80. 80. Uma regra de ouro 
 para os usuários
  81. 81. DESAFIO 1:
 Você está no meio de um site e quer ir para a página inicial, o que você faz?
  82. 82. DESAFIO 2: O botão de confirmar fica na esquerda ou é o botão de cancelar que é posicionado à esquerda?
  83. 83. Santander 2014
  84. 84. Homebanking CAIXA 2014
  85. 85. Pagamento pela CIELO 2014
  86. 86. EntrarCancelarx
  87. 87. Uma regra de ouro 
 para quem cria
  88. 88. CONTEXTO MOBILE
  89. 89. made with keynote by andrew haskin CONTEXTO MOBILE TELA PEQUENA LUZ DIRETA LIMITE DE BANDA MULTITAREFA SOBRE PRESSÃO
 (restrição de tempo) CONFUSO e BARULHENTO
  90. 90. 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
  91. 91. made with keynote by andrew haskin http://www.webvenda.com/wp-content/uploads/2015/02/31_webshoppers.pdf
  92. 92. made with keynote by andrew haskin http://www.emarketer.com/Article/Brazil-Mobile-Continues-Expand-Share-of-Ecommerce-Transactions/1012487/6
  93. 93. made with keynote by andrew haskin http://www.webvenda.com/wp-content/uploads/2015/02/31_webshoppers.pdf
  94. 94. made with keynote by andrew haskin
  95. 95. CONTEXTO BRASIL
  96. 96. 23,9% da população brasileira possui pelo 
 menos uma das deficiências investigadas ACESSIBILIDADE
  97. 97. Idosos: 19 milhões (10%) - IBGE 2010
  98. 98. Analfabeto funcional ! Um em cada cinco brasileiros (38 milhões - 20,4%) é analfabeto funcional, 
 Pnad 2009 - IBGE.
  99. 99. Como o Luli disse no Digitalks no Rio:
 
 “Nesse mundo Mobile, somos
 todos daltónicos e sofremos do Mal de Parkinson”
  100. 100. Quer uma boa interface? 
 
 Teste com pessoas…
  101. 101. TESTES
  102. 102. POR QUE TESTAR COM PESSOAS?
  103. 103. OBJETIVO
  104. 104. https://www.youtube.com/watch?v=uOHDkIxyu2A&list=PL45D56B9F8C601073&index=5
  105. 105. PERSONAS
  106. 106. FOCO NO USUÁRIO E NA TAREFA
  107. 107. MENOS CONVERSÃO, MAIS MULTICANAL
  108. 108. POR QUE TESTAR COM PESSOAS?
  109. 109. TESTE DE USABILIDADE Processo de teste de UX iterativo eMarketing 5th edition, Rob Stokes and The Minds of Quirk
  110. 110. IDENTIFICAR MELHORIAS
  111. 111. CRIAR NOVA VERSÃO
  112. 112. TESTAR COM USUÁRIO
  113. 113. ANALISAR RESULTADOS
  114. 114. TESTE DE USABILIDADE TRADICIONAL Solicita-se que os usuários realizem tarefas no produto pensando em voz alta.
  115. 115. 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 Amstel http://usabilidoido.com.br
  116. 116. EXEMPLO DE TAREFA Compre duas passagens aéreas no próximo voo para a cidade de Bangalore. Frederick van Amstel http://usabilidoido.com.br
  117. 117. REALIZANDO TESTES PASSO 0 Planejamento
  118. 118. QUAL O PROPÓSITO?
  119. 119. O QUE TESTAR?
  120. 120. QUEM VAI PARTICIPAR?
  121. 121. COMO SERÁ O TESTE?
  122. 122. ONDE SERÁ O TESTE?
  123. 123. TESTE EM LABORATÓRIO?
  124. 124. TESTE DE CAMPO?
  125. 125. TESTE REMOTO?
  126. 126. PARTICIPANTES CHAVE Facilitador Ajudante Participante(s) Observador(es)
  127. 127. QUANDO TESTAR O mais cedo possível!
  128. 128. PROTOTIPAÇÃO EM PAPEL
  129. 129. É UMA VARIAÇÃO DO TESTE DE USABILIDADE Permite avaliar soluções parciais.
  130. 130. POSSIBILITA REFLEXÕES MAIS CONCEITUAIS Usuários ficam mais à vontade para criticar, comentar e sugerir.
  131. 131. US$ 1 Prototype
  132. 132. Pesquisa de Guerrilha
  133. 133. FERRAMENTAS
  134. 134. PROTOTIPAÇÃO DIGITAL
  135. 135. Product Owner Mobile horacio.soares@hotelurbano.com.br (21) 9 9925-5404 - @horaciosoares
 Skype: horacio.soares
 slideshare.net/horacio.soares Horácio Soares
  136. 136. Product Owner Mobile horacio.soares@hotelurbano.com.br (21) 9 9925-5404 - @horaciosoares
 Skype: horacio.soares
 slideshare.net/horacio.soares Horácio Soares Mobile UX Designer leonardo.caetano@hotelurbano.com.br (21) 98153-2023 - @leocaetano
 Skype: leocaetanorj
 Leonardo Caetano

×