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.

FrontinBH - Os dasafios do Design Mobile

1,825 views

Published on

Apresentação realizada no FrontinBH dia 14 de julho de 2012.

Published in: Design

FrontinBH - Os dasafios do Design Mobile

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

×