UX Mobile - Testando com Usuários

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

1/178 Documents & Tips - Sharing is our passion

Share This Page

  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