Mobile first - W3C WEB.BR 2012

3,473 views
3,279 views

Published on

Apresentação realizada na conferência do W3C WEB.BR 2012, em São Paulo, no dia 19 de outubro.

Published in: Design

Mobile first - W3C WEB.BR 2012

  1. 1. Horácio Soares @horaciosoares 21 9925-5404 W3C - web.br 2012mobile first Outubro de 2012 – São Paulo!
  2. 2. mundo mobile
  3. 3. GPS
  4. 4. Backseat Driver – Toyota ToyToyotahttp://www.youtube.com/watch?v=-mjudtrwdS4
  5. 5. Acelerômetro
  6. 6. Giroscópio
  7. 7. http://www.youtube.com/watch?v=0X-kmUhPC4Q
  8. 8. Bluetooth
  9. 9. Áudio, vídeo e imagem
  10. 10. NFC
  11. 11. Sensores multitoque
  12. 12. Em qualquer hora e local.
  13. 13. Novas maneiras de interação e apresentação
  14. 14. Boa compatibilidade entrenavegadores Mobile e HTML5
  15. 15. Atualizações frequentes...
  16. 16. estastísticas
  17. 17. http://thenextweb.com/apple/2012/01/25/there-are-now-more-iphones-sold-than-babies-born-in-the-world-every-day/
  18. 18. http://zeldman.com/2012/07/09/mobile-to-the-future-luke-wroblewski/
  19. 19. crescimento = oportunidade
  20. 20. Estatísticas Brasil
  21. 21. Fonte: Onnaweb (IBOPE – agosto 2012)http://www.onnaweb.com.br/blog/mobile/estudo-aponta-quando-e-o-que-os-brasileiros-fazem-na-internet-pelo-smartphone/
  22. 22. GIFanimado... By Luli
  23. 23. TIC Domicílios 2011outubro de 2011 – janeiro 2012 http://cetic.br/usuarios/tic/2011-total-brasil/
  24. 24. Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html
  25. 25. Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html
  26. 26. mais dados...
  27. 27. http://www.slideshare.net/dmolsenwvu/everything-you-know-is-not-quite-right-anymore-rethinking-best-practices-to-respond-to-the-future
  28. 28. http://www.slideshare.net/dmolsenwvu/everything-you-know-is-not-quite-right-anymore-rethinking-best-practices-to-respond-to-the-future
  29. 29. http://www.slideshare.net/dmolsenwvu/everything-you-know-is-not-quite-right-anymore-rethinking-best-practices-to-respond-to-the-future
  30. 30. http://www.slideshare.net/dmolsenwvu/everything-you-know-is-not-quite-right-anymore-rethinking-best-practices-to-respond-to-the-future
  31. 31. http://www.slideshare.net/dmolsenwvu/everything-you-know-is-not-quite-right-anymore-rethinking-best-practices-to-respond-to-the-future
  32. 32. limitaçõesdo mobile
  33. 33. Muitas vezes, ao interagir com mobile, as pessoas estão em modo: “fritando o peixe e olhando o gato” e com apenas um dos dedos...
  34. 34. @lukew
  35. 35. ‘Desktop is like “diving”…
  36. 36. …while mobile is like “snorkling.”’ by Hinman at Nokia http://www.slideshare.net/Rachel_Hinman
  37. 37. desktop@lukew
  38. 38. tela grande@lukew
  39. 39. tela grande energia@lukew
  40. 40. tela grande energia rede consistente@lukew
  41. 41. tela grande energia rede consistente teclado@lukew
  42. 42. tela grande energia rede consistente teclado mouse@lukew
  43. 43. tela grande energia rede consistente teclado mouse cadeira@lukew
  44. 44. tela grande energia rede consistente teclado mouse cadeira mesa@lukew
  45. 45. tela grande energia rede consistente teclado mouse cadeira caneca de café mesa@lukew
  46. 46. mobile@lukew
  47. 47. tela pequena@lukew
  48. 48. tela pequena bateria@lukew
  49. 49. tela pequena bateria rede inconsistente@lukew
  50. 50. tela pequena bateria rede inconsistente dedo gordo@lukew
  51. 51. tela pequena bateria rede inconsistente dedo gordo sensores@lukew
  52. 52. Slide 107http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-
  53. 53. Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
  54. 54. "Context is about understanding human relationships to thepeople, places and things in the world". Rachel Hinman
  55. 55. Artigo: http://uxmag.com/articles/excerpt-from-the-new-book-the-mobile-frontierLivro: http://www.amazon.com/Mobile-Frontier-Rachel-Hinman/dp/1933820551?tag=651998669-20Video: http://vimeo.com/39230026Apresentações: http://www.slideshare.net/Rachel_Hinman
  56. 56. perda de 80% do espaço
  57. 57. @lukew
  58. 58. e isso pode ser ótimo para o negócio...
  59. 59. te força a priorizar...te força a manter o foco…
  60. 60. Alguém conhece algum siteque gostaria que 80% do seu conteúdo/itens/elementosfosse retirado da interface?
  61. 61. Flickr desktop60 opções de menu...
  62. 62. @lukew
  63. 63. Flickr mobile7 opções de menu...
  64. 64. Less is more...
  65. 65. @lukew
  66. 66. Conhecimento profundo daaudiência, o que fazem, por que vieram e por que se importam com o Flickr...
  67. 67. Restrições são boas para o design, pois te forçam a priorizar, a manter o foco
  68. 68. mas cuidado…
  69. 69. no ponto…
  70. 70. Os detalhes docomprador não podem servisualizados na versão mobile.
  71. 71. Como os brasileiros estão lidando comseus smartphones?
  72. 72. http://wpuploads.appadvice.com/wp-content/uploads/2011/07/joliescottiphone-642x481.jpg
  73. 73. http://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdf
  74. 74. 1Os smartphones são indispensáveis no cotidiano
  75. 75. 2 - Os smartphones transformaram o comportamento do consumidor
  76. 76. 3Os smartphones ajudamos usuários a navegarpelo mundo
  77. 77. 4Os smartphones mudam o modo como os consumidores fazem compras
  78. 78. 5Os smartphones ajudam os anunciantes a entrarem emcontato com os clientes
  79. 79. Projetos UX Mobile
  80. 80. O que osusuáriosesperam?
  81. 81. O que as pessoas esperam em umaexperiência em dispositivos móveis?
  82. 82. felicidade
  83. 83. felicidadeX
  84. 84. felicidade
  85. 85. experiência perfeita
  86. 86. A experiênciaperfeita
  87. 87. felicidade
  88. 88. Entretanto, a experiência pertence as pessoas.O designer não projeta a experiência… Projeta para aexperiência do usuário.
  89. 89. Experiência do“ Usuário (UX) é a qualidade daexperiência que uma pessoa tem ao interagir com algo projetado. uxnet.org ”
  90. 90. E o que as empresas esperam?
  91. 91. o melhor osso…
  92. 92. mas como
  93. 93. com qualidade...
  94. 94. acertandoo tiro certono alvo certo
  95. 95. com estratégia
  96. 96. “uma conspiração para o sucesso”
  97. 97. falta de estratégia eplanejamento resulta em…
  98. 98. X
  99. 99. para onde vamos?http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
  100. 100. onde devemos mirar?
  101. 101. Causo 1PrecisamosConstruiruma mesa. Liv O Tiro e o A
  102. 102. CAUSO 1 - A propósito, que mesa?Livro: O Tiro e o Alvo
  103. 103. De sinuca?
  104. 104. Ping-pong?
  105. 105. Futebol de botão?
  106. 106. Carteado?
  107. 107. Ou seria uma mesa para computador?
  108. 108. Reunião?
  109. 109. Escritório?
  110. 110. Mesa de centro?
  111. 111. Jantar?
  112. 112. Ou seria uma mesa de cirurgia?
  113. 113. De autópsia?
  114. 114. CAUSO 1 (continuação) - Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é Livro: rework 37 Signals curto, então, mãos à obra!Livro: O Tiro e o Alvo
  115. 115. CAUSO 1 (continuação) Para uma mesa pode parecer exagero, mas não para sistemas e sites...Livro: O Tiro e o Alvo
  116. 116. Conclusão?Retrabalho, desgaste com ocliente e diminuição do lucro.
  117. 117. desafio 1:identificar objetivos e necessidades…
  118. 118. Investigação Baseada em Perguntas Precisamos automatizar a Contabilidade Preciso do Balancete dia 5e não dia 15 como atualmente! Por Quê? Por Quê? Por Quê? Necessito da Conta X do Balancete até o dia 5.Preciso do valor da Conta X para calcular até o dia 7 o valor das Reservas. Precisamos informar o valor das Reservas ao Banco Central até o dia 8! Por que se nãoinformarmos as Reservas seremos multados!!
  119. 119. Uma proposta de briefing Baseado em perguntas:http://clearleft.s3.amazonaws.com/client- worksheet.doc http://bit.ly/a5tRzF
  120. 120. Desafio 2: Como atender ao mesmo tempo os objetivos e as necessidades? Marte VênusObjetivos e metas da empresa Necessidades dos usuários
  121. 121. Objetivos Reaise metas necessidadesdo projeto dos usuários
  122. 122. a buscado equilíbrio
  123. 123. empresa Objetivose metas do projeto Necessidades dos usuários usuários
  124. 124. Um caminho: modelagem participativa
  125. 125. um case em equilíbrio…
  126. 126. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  127. 127. Erico Fileno
  128. 128. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  129. 129. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  130. 130. Observação e identificação de um problema...
  131. 131. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  132. 132. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  133. 133. Quais são os caminhos do mobile?
  134. 134. Como era em 2004, 2005, 2006...?
  135. 135. SiteAcesso Digital 2007
  136. 136. Portabilidade - design líquido (resolução 1024x768)
  137. 137. Portabilidade - design líquido ( resolução 640x480)
  138. 138. Portabilidade – css para impressão
  139. 139. Portabilidadecss para dispositivo móvel MOTO Q Acesso Digital: http://acessodigital.net
  140. 140. Quais são os caminhos do mobile hoje?
  141. 141. WEBNão fazer nada…
  142. 142. design responsivo
  143. 143. site mobile (uma versão)
  144. 144. site mobile(duas versões – smartphone e tablet)
  145. 145. Lufthansa
  146. 146. InstalledAplicações nativas
  147. 147. InstalledAplicações Hibridas HTML5
  148. 148. Qual melhor caminho?
  149. 149. Depende!•  do problema que será resolvido•  do orçamento•  público-alvo•  …
  150. 150. Como anda a qualidade dosnossos sites nasversões desktop?
  151. 151. Será?
  152. 152. Independente docaminho escolhido deve-se…
  153. 153. Mobile First Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
  154. 154. SIMPLICIDADE
  155. 155. Paradoxo da escolha
  156. 156. Elimine da interface itens que não sejam extremamente necessários...
  157. 157. Case Extreme Booking with Hotels.com http://www.youtube.com/watch?v=gcuFkiEORsE
  158. 158. Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  159. 159. Mobile First!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  160. 160. Mobile First!
  161. 161. Mobile First!
  162. 162. Mobile First!
  163. 163. - Site mobile: Netshoes
  164. 164. Prototipação
  165. 165. - Não economize nos protótipos… 37 Signals (design de epicentro) Content First Cuidado com Wireframe…
  166. 166. “Erre logo para ser bem sucedido mais cedo.” IDEOFaber Ludens – Érico Fileno
  167. 167. How To ConductA Usability TestOn A Mobile Devicehttp://www.measuringusability.com/blog/mobile-usability-test.php
  168. 168. - Desafio…Como testar aqui?
  169. 169. Foto: Rosenfield Media
  170. 170. - Como o homem da maça fazia?
  171. 171. protótipos testesavaliações
  172. 172. ...e evolua sempre.
  173. 173. ...e evolua sempre. = Melhoria contínua
  174. 174. Horácio Soares @horaciosoares 21 9925-5404Obrigado! Outubro de 2012 – São Paulo!

×