UX Mobile - Testando com Usuários

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

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

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

Recent Reviews

  1. Riadis Dornelles
    Riadis Dornelles
    3/5,
    Version: 04/06/2015
    sempre bom!
  2. cristianoweb
    cristianoweb
    5/5,
    Version: 04/06/2015
    Slides do Horácio são SEMPRE uma p*rrada no jeito preguiçoso e irresponsável de criar projetos web. É sempre bom rever conceitos e argumentos que nos mantém sempre no foco, ou melhor, focando no usuário. Parabéns meu amigo!
  3. Marcelo Mattos
    Marcelo Mattos
    5/5,
    Version: 04/06/2015
    Horácio gostei muito! De forma clara você nos dá os pontos que mais necessitam de atenção. [ ]s