Os Desafios do Design Mobile - Jun/2012

7,309 views

Published on

Apresentação realizada no 14o Encontro Locaweb no Rio de Janeiro - 26/06/2012

Published in: Design

Os Desafios do Design Mobile - Jun/2012

  1. 1. EncontroLOCAWEBRio de Janeiro Junho 2012
  2. 2. ?
  3. 3. Horácio Soareshoracio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares
  4. 4. http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  5. 5. http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  6. 6. http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  7. 7. O que as pessoas esperam em umaexperiência em dispositivos móveis?
  8. 8. felicidade
  9. 9. felicidade
  10. 10. experiência perfeita
  11. 11. A experiênciaperfeita
  12. 12. felicidade
  13. 13. Entretanto, a experiência pertence as pessoas.O designer não projeta a experiência… Projeta para aexperiência do usuário.
  14. 14. Experiência do“ Usuário (UX) é a qualidade daexperiência que uma pessoa tem ao interagir com algo projetado. uxnet.org ”
  15. 15. Um caminho para umaexperiência perfeita vem da busca pelas melhores IDADES
  16. 16. IDADES?
  17. 17. Acessibil IDADE
  18. 18. Acessibil Usabil IDADE
  19. 19. Comercial Mercado Livre“Eu compro o que quiser, 2011senão quiser,não compro”Comercial do Mercado Livre 2011
  20. 20. Acessibil UsabilSimplic IDADE
  21. 21. ESPN Brasil– abril 2010
  22. 22. ESPN Brasil– abril 2010
  23. 23. 10 princípios de UX do GooglePrincípio 3. O simples é poderoso.
  24. 24. Em uma interface perfeita paraas pessoas, elas nunca deveriam errar, principalmente no mundo mobile…
  25. 25. Acessibil Usabil SimplicInterativ IDADE
  26. 26. Acessibil Usabil Simplic Interativ Veloc IDADE
  27. 27. 10 princípios de UX do GooglePrincípio 2 - cada milisegundo importa. Melhor definição de milisegundo?
  28. 28. Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil
  29. 29. Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ
  30. 30. 10 princípios de UX do GooglePrincípio 8 – agrade aos olhos sem distrair a mente
  31. 31. Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ Util
  32. 32. 10 princípios de UX do GooglePrincípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos.
  33. 33. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  34. 34. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  35. 35. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  36. 36. Observação e identificação de um problema...
  37. 37. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  38. 38. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  39. 39. Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ Util Facil
  40. 40. Acessibil UsabilSimplic
  41. 41. Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil Atrativ Util Facil Portabil …
  42. 42. A melhor idade vem da: Investigação Observação Colaboração Análise Avaliação Validação
  43. 43. Erico Fileno
  44. 44. Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
  45. 45. Por isso, em projetos mobile, precisamos estratégia,IDADE(n)(e design de verdade
  46. 46. E o que as empresas esperam?
  47. 47. Mulher com notebook em sinal de ok o melhor osso…
  48. 48. mas como
  49. 49. com qualidade...
  50. 50. acertandoo tiro certono alvo certo
  51. 51. com estratégia
  52. 52. “uma conspiração para o sucesso”
  53. 53. para onde vamos?http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
  54. 54. onde devemos mirar?
  55. 55. Causo 1PrecisamosConstruiruma mesa. Liv O Tiro e o A
  56. 56. CAUSO 1 - A propósito, que mesa?Livro: O Tiro e o Alvo
  57. 57. De sinuca?
  58. 58. Ping-pong?
  59. 59. Futebol de botão?
  60. 60. Carteado?
  61. 61. Ou seria uma mesa para computador?
  62. 62. Reunião?
  63. 63. Escritório?
  64. 64. Mesa de centro?
  65. 65. Jantar?
  66. 66. Ou seria uma mesa de cirurgia?
  67. 67. De autópsia?
  68. 68. 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
  69. 69. CAUSO 1 (continuação) Para uma mesa pode parecer exagero, mas não para sistemas e sites...Livro: O Tiro e o Alvo
  70. 70. Conclusão?Retrabalho, desgaste com ocliente e diminuição do lucro.
  71. 71. Desafio: Como atender ao mesmo tempo os objetivos e as necessidades? Marte VênusObjetivos e metas da empresa Necessidades dos usuários
  72. 72. Objetivos Reaise metas necessidadesdo projeto dos usuários
  73. 73. Um caminho: modelagem participativa
  74. 74. a buscado equilíbrio
  75. 75. empresa Objetivose metas do projeto Necessidades dos usuários usuários
  76. 76. Por que Mobile?
  77. 77. crescimento = oportunidade
  78. 78. no Brasil
  79. 79. http://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdf
  80. 80. 1Os smartphones são indispensáveis no cotidiano
  81. 81. 2Os smartphonestransformaram ocomportamento do consumidor
  82. 82. 3Os smartphones ajudamos usuários a navegarpelo mundo
  83. 83. 4Os smartphones mudam o modo como os consumidores fazem compras
  84. 84. 5Os smartphones ajudam os anunciantes a entrarem emcontato com os clientes
  85. 85. Estatísticas
  86. 86. Maio de 2012http://www.mobiletime.com.br/29/05/2012/brasil-tem-52-milhoes-de-acessos-de-banda-larga-movel-diz-estudo/280718/news.aspx
  87. 87. TIC Domicílios 2011outubro de 2011 – janeiro 2012 http://cetic.br/usuarios/tic/2011-total-brasil/
  88. 88. http://www1.folha.uol.com.br/tec/1098360-uso-de-internet-no-celular-cresce-340-em-um-ano.shtml
  89. 89. Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html
  90. 90. Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html
  91. 91. Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html
  92. 92. Maio 2012http://novasdigitais.blogspot.com.br/2012/05/o-uso-do-celular-no-brasil-infografico.html
  93. 93. No mundo
  94. 94. O ecosistema do Mobile.http://econsultancy.com/us/reports/mobile-ecosystem
  95. 95. Fevereiro 2012http://blog.nielsen.com/nielsenwire/online_mobile/smartphones-account-for-half-of-all-mobile-phones-dominate-new-phone-purchases-in-the-us/
  96. 96. Maio de 2012http://blog.nielsen.com/nielsenwire/online_mobile/how-us-smartphone-and-tablet-owners-use-their-devices-for-shopping/
  97. 97. comScore – dezembro de 2011
  98. 98. capacidades/va ntagens do mobile
  99. 99. GPS
  100. 100. Acelerômetro
  101. 101. Giroscópio
  102. 102. Bluetooth
  103. 103. Áudio, vídeo e imagem
  104. 104. NFC
  105. 105. Sensores multitoque
  106. 106. Em qualquer hora e local.
  107. 107. Novas maneiras de interação e apresentação
  108. 108. Boa compatibilidade entrenavegadores Mobile e HTML5
  109. 109. Atualizações frequentes...
  110. 110. Contexto: By: Thais Souza @_tsouza_
  111. 111. By: Thais Souza @_tsouza_
  112. 112. É sobre pessoas e não plataformas…
  113. 113. PaixãoBy: Thais Souza @_tsouza_
  114. 114. vaidadeBy: Thais Souza @_tsouza_
  115. 115. raiva
  116. 116. alegria
  117. 117. frustração
  118. 118. Otimização de tempo
  119. 119. Útil para esportes…. By: Thais Souza @_tsouza_
  120. 120. Funcionais…By: Thais Souza @_tsouza_
  121. 121. Para comprar… By: Thais Souza @_tsouza_
  122. 122. Inovador
  123. 123. Conhecimento…. By: Thais Souza @_tsouza_
  124. 124. Para novos gênios….
  125. 125. Para todos….By: Thais Souza @_tsouza_
  126. 126. limitações/restrições do mobile
  127. 127. 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...
  128. 128. @lukew
  129. 129. „Desktop is like “diving” while mobile is“snorkling.”‟ 
by Rachel Hinman at Nokia
  130. 130. desktop@lukew
  131. 131. tela grande energia rede consistente teclado mouse cadeira mesa@lukew
  132. 132. tela grande energia rede consistente teclado mouse cadeira caneca de café mesa@lukew
  133. 133. mobile@lukew
  134. 134. tela pequena bateria rede inconsistente dedo gordo sensores@lukew
  135. 135. Outras limitações:● Capacidade de processamento reduzida.● Uma aplicação em HTML5 para mobile pode ser até 100 vezes mais lenta que em desktop. http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf
  136. 136. perda de 80% do espaço
  137. 137. @lukew
  138. 138. Pode parecer uma tragédia, mas isso pode ser ótimo para o negócio...
  139. 139. te força a priorizar...te força a manter o foco…
  140. 140. Alguém conhece algum siteque gostaria que 80% do seu conteúdo/itens/elementosfosse retirado da interface?
  141. 141. Flickr desktop60 opções de menu...
  142. 142. @lukew
  143. 143. Flickr mobile7 opções de menu...
  144. 144. Less is more...
  145. 145. @lukew
  146. 146. Restrições são boas para o design, pois te forçam a priorizar, a manter o foco
  147. 147. Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  148. 148. Mobile FirstLuke Wroblewski
  149. 149. Mobile First!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  150. 150. Elimine da interface itens que não sejam extremamente necessários...
  151. 151. Paradoxo da escolha
  152. 152. mitos
  153. 153. as pessoas não vãose registrar via mobile
  154. 154. não vão comprar via mobile
  155. 155. não vão criar conteúdo, fazer reviews, dar opinião, etc.
  156. 156. sempre seremos surpreendidos pelo que as pessoas fazem na experiência mobile
  157. 157. http://midiaria.wordpress.com/2012/02/21/10pesquisa-sms-mavam-acision-brasil/
  158. 158. se as perguntas fizerem sentido e a interface tiver um bom design, as pessoas vão responder...
  159. 159. Algumas recomendações
  160. 160. - INPUTS(entrada de dados)
  161. 161. 1- LABELS no topo
  162. 162. LABEL no topo• Miniminiza o tempo para entrada de dados• Mais fácil de codificar: sem floats e tabelas• Acessibilidade: label, campos na ordem certa• Melhor formato para mobile• Suporte diferentes resoluções• Requer mais espaço
  163. 163. 2 – Confirmação de dados
  164. 164. Confirmação de senha?
  165. 165. Confirmação de e-mail?
  166. 166. 3 – Opção de senha sem mascara.
  167. 167. 4 – Cadastro obrigatório
  168. 168. Será que é mesmo necessário me cadastrar em um site dee-commerce para fazer uma compra?
  169. 169. - Navegação
  170. 170. Content First
  171. 171. - Botões de voltar...
  172. 172. - Espaços em branco...
  173. 173. - Web Standards
  174. 174. Toque...
  175. 175. Se o dispositivo épequeno, por que não tornar toda área interativa?
  176. 176. Toque seguro...
  177. 177. Recomendação AppleDeixe espaçosuficiente paratoqueacidentais By: Thais Souza @_tsouza_
  178. 178. Mas…a Microsoft pede 34px e a Nokia 28px? By: Thais Souza @_tsouza_
  179. 179. Mas…o dedo de um adulto vai de 45 a 57px E o dedão pode chegar até 72px By: Thais Souza @_tsouza_
  180. 180. Quantos dedos você usaem um smartphone? By: Thais Souza @_tsouza_
  181. 181. By: Thais Souza @_tsouza_
  182. 182. -Performance
  183. 183. -Performance-http://gtmetrix.com
  184. 184. Qual caminho mobile meu site deve seguir?
  185. 185. -Avaliação e validação
  186. 186. How To ConductA Usability TestOn A Mobile Devicehttp://www.measuringusability.com/blog/mobile-usability-test.php
  187. 187. -Como testar aqui?
  188. 188. Foto: Rosenfield Media
  189. 189. Prototipação
  190. 190. Obrigado!Horácio SoaresWorkshop Design Mobilefacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares

×