Mobile First - Palestra no MobileConf 2013

4,554 views

Published on

Palestra ministrada no MobileConf 2013, em São Paulo - abril.

Published in: Design
2 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
4,554
On SlideShare
0
From Embeds
0
Number of Embeds
168
Actions
Shares
0
Downloads
81
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide

Mobile First - Palestra no MobileConf 2013

  1. 1. Horácio Soares @horaciosoares 21 9925-5404Mobile First Outubro de 2012 – São Paulo!
  2. 2. Mobile First
  3. 3. Mobile First Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
  4. 4. Mas antes…
  5. 5. Qual é contexto do Mobile?
  6. 6. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - Slide 4
  7. 7. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 6
  8. 8. Os smartphones são indispensáveis no cotidiano
  9. 9. “In 2013, Mobile Phone will overtake PC’s as the mostcommon Web access device world wide.” — GARTNER
  10. 10. Slide 107http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-
  11. 11. Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
  12. 12. capacidades/ vantagens do mobile
  13. 13. GPS
  14. 14. Case Toyota
  15. 15. Acelerômetro
  16. 16. Giroscópio
  17. 17. Bluetooth
  18. 18. Áudio, vídeo e imagem
  19. 19. NFC
  20. 20. Sensores multitoque
  21. 21. Em qualquer hora e local.
  22. 22. Novas maneiras de interação e apresentação
  23. 23. Boa compatibilidade entrenavegadores Mobile e HTML5
  24. 24. Atualizações frequentes...
  25. 25. limitações/restrições do mobile
  26. 26. “fritando o peixe e olhando o gato”.
  27. 27. @lukew
  28. 28. ‘Desktop is like “diving”…
  29. 29. …while mobile is like “snorkling.”’ by Hinman at Nokia http://www.slideshare.net/Rachel_Hinman
  30. 30. O quetodos quando mergulham desejam?
  31. 31. desktop@lukew
  32. 32. tela grande@lukew
  33. 33. tela grande energia@lukew
  34. 34. tela grande energia rede consistente@lukew
  35. 35. tela grande energia rede consistente teclado@lukew
  36. 36. tela grande energia rede consistente teclado mouse@lukew
  37. 37. tela grande energia rede consistente teclado mouse cadeira@lukew
  38. 38. tela grande energia rede consistente teclado mouse cadeira mesa@lukew
  39. 39. tela grande energia rede consistente teclado mouse cadeira caneca de café mesa@lukew
  40. 40. mobile@lukew
  41. 41. tela pequena@lukew
  42. 42. tela pequena bateria@lukew
  43. 43. tela pequena bateria rede inconsistente@lukew
  44. 44. tela pequena bateria rede inconsistente dedo gordo@lukew
  45. 45. tela pequena bateria rede inconsistente dedo gordo sensores@lukew
  46. 46. Outras limitações:●  Capacidade de armazenamento e processamento reduzido.●  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
  47. 47. perda de 80% do espaço
  48. 48. @lukew
  49. 49. e isso pode ser ótimo para o negócio...
  50. 50. te força a priorizar...te força a manter o foco…
  51. 51. Alguém conhece algum siteque gostaria que 80% do seu conteúdo/itens/elementosfosse retirado da interface?
  52. 52. Flickr desktop60 opções de menu...
  53. 53. @lukew
  54. 54. Flickr mobile7 opções de menu...
  55. 55. Less is more...
  56. 56. @lukew
  57. 57. Restrições são boas para o design, pois te forçam a priorizar, a manter o foco
  58. 58. mas cuidado…
  59. 59. no ponto…
  60. 60. Os detalhes docomprador não podem servisualizados na versão mobile.
  61. 61. DesktopSite
  62. 62. Mobile Site
  63. 63. Ainda antes de focarno Mobile First, comoanda a qualidade dos nossos sites nas versões desktop?
  64. 64. Será?
  65. 65. Uma breve avaliaçãode conhecidos sites de notícias sobre TI
  66. 66. O Mobile Firstvem tirar os sites Desktop do CTI
  67. 67. Mobile First Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first
  68. 68. SIMPLICIDADE
  69. 69. Paradoxo da escolha
  70. 70. Elimine da interface itens que não sejam extremamente necessários...
  71. 71. Qual desses Desktops oferecia a melhor experiência?
  72. 72. Qual desses Desktops oferecia a melhor experiência?
  73. 73. E qual desses controles?
  74. 74. Case Extreme Booking with Hotels.com
  75. 75. http://www.youtube.com/watch?v=gcuFkiEORsE
  76. 76. Desktop first!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  77. 77. Mobile First!http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  78. 78. Mobile First!
  79. 79. Mobile First!
  80. 80. Mobile First!
  81. 81. Mas antes do Mobile First precisamos de estratégia...
  82. 82. Estratégia:”conspiração para o sucesso”
  83. 83. X
  84. 84. Projetos UX Mobile
  85. 85. O que osusuáriosesperam?
  86. 86. felicidade
  87. 87. felicidadeX
  88. 88. felicidade
  89. 89. felicidade X
  90. 90. experiência perfeita
  91. 91. felicidade
  92. 92. Experiência do“ Usuário (UX) é a qualidade daexperiência que uma pessoa tem ao interagir com algo projetado. uxnet.org ”
  93. 93. E o que as empresas esperam?
  94. 94. o melhor osso…
  95. 95. mas como
  96. 96. com qualidade...
  97. 97. acertandoo tiro certono alvo certo
  98. 98. para onde vamos?http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
  99. 99. onde devemos mirar?
  100. 100. Causo 1PrecisamosConstruiruma mesa. Liv O Tiro e o A
  101. 101. CAUSO 1 - A propósito, que mesa?Livro: O Tiro e o Alvo
  102. 102. De sinuca?
  103. 103. Ping-pong?
  104. 104. Futebol de botão?
  105. 105. Carteado?
  106. 106. Ou seria uma mesa para computador?
  107. 107. Reunião?
  108. 108. Escritório?
  109. 109. Mesa de centro?
  110. 110. Jantar?
  111. 111. Ou seria uma mesa de cirurgia?
  112. 112. De autópsia?
  113. 113. 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
  114. 114. Conclusão?Retrabalho, desgaste com ocliente e diminuição do lucro.
  115. 115. Como são nossas experiências?
  116. 116. •  A maioria das experiências ruins poderiam ser evitadas com a identificação do alvo certo e com avaliações com usuários...
  117. 117. By Bernard De Luna
  118. 118. 50%É a média do tempo gasto emrefação nos projetos de TI.Fonte:http://spectrum.ieee.org/computing/software/why-software-fails/0Via Curso AI Faber Ludens:http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
  119. 119. 15%Dos projetos são abandonadosdepois de uma primeira entregainadequada.Fonte:http://spectrum.ieee.org/computing/software/why-software-fails/0Via Curso AI Faber Ludens:http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
  120. 120. 83%É a média da melhoria dos KPI’s emprojetos com 10% do orçamentogasto em pesquisa de usabilidade.Fonte:http://spectrum.ieee.org/computing/software/why-software-fails/0Via Curso AI Faber Ludens:http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
  121. 121. Aumento de KPI’sConversões - Tráfego no site -Cadastros - Contatos de novosclientes - Vendas - Fatia de mercado -Transações - Taxa de sucesso emtarefas - Retenção - Produtividade -Pageviews - Uso do sistema - Visitaskey performance indicator (KPI)http://en.wikipedia.org/wiki/Key_performance_indicator
  122. 122. Diminuição de KPI’sCustos do projeto - Tempo dedesenvolvimento do projeto - Custo detreinamento - Erros no uso do sistema- Tempo do usuário - Chamadas emhelp desk - Refações – Manutenção.key performance indicator (KPI)http://en.wikipedia.org/wiki/Key_performance_indicator
  123. 123. desafio 1:identificar objetivos e necessidades…
  124. 124. 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!!
  125. 125. Uma proposta de briefing Baseado em perguntas:http://clearleft.s3.amazonaws.com/client- worksheet.doc http://bit.ly/a5tRzF
  126. 126. Desafio 2: Como atender ao mesmo tempo os objetivos e as necessidades? Marte VênusObjetivos e metas da empresa Necessidades dos usuários
  127. 127. Objetivose metasdo projeto
  128. 128. •  Precisa de novos clientes/usuários. •  Quer que os clientes atuais visitem seu site com maior frequencia.•  Quer aumentar a margem de lucro.•  Você precisa aumentar sua audiência, seu público.•  Quer diferenciar sua marca.•  Gostaria de melhorar o retorno sobre o investimento (ROI).•  Quer que seus clientes gastem mais a cada compra.•  Está à procura de novos canais de distribuição.•  Quer aumentar sua fatia do mercado (market share).•  ...
  129. 129. Reaisnecessidades dos usuários
  130. 130. •  Qualidade. •  Simplicidade.•  velocidade.•  Utilidade.•  Usabilidade.•  Acessibilidade.•  Portabilidade.•  Bom custo x benefício.•  Resolver seu problema.•  ...
  131. 131. Objetivos Reaise metas necessidadesdo projeto dos usuários
  132. 132. a buscado equilíbrio
  133. 133. empresa Objetivose metas do projeto Necessidades dos usuários usuários
  134. 134. um case em equilíbrio…
  135. 135. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  136. 136. Erico Fileno
  137. 137. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  138. 138. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  139. 139. Observação e identificação de um problema...
  140. 140. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  141. 141. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  142. 142. CSS HandHeld DesignNão fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App NativaQuais oscaminhos do Appdesign mobile? Híbrida
  143. 143. Não fazer nada…os caminhosdo designmobile@horaciosoares – Campus Party 2013
  144. 144. Nãofazernada!
  145. 145. CSS HandHeld Design Não fazer Líquido nada…os caminhosdo designmobile@horaciosoares – Campus Party 2013
  146. 146. CSSHandHeld Design Líquido
  147. 147. CSSmediaHANDHELD Como era em 2004, 2005, 2006...?
  148. 148. SiteAcesso Digital 2007
  149. 149. Portabilidade - design líquido (resolução 1024x768)
  150. 150. Portabilidade - design líquido ( resolução 640x480)
  151. 151. Portabilidade – CSS (Display PRINT)
  152. 152. Portabilidadecss para dispositivo móvel MOTO Q Acesso Digital: http://acessodigital.net
  153. 153. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivoos caminhosdo designmobile@horaciosoares – Campus Party 2013
  154. 154. DesignResponsivo
  155. 155. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobileos caminhosdo designmobile@horaciosoares – Campus Party 2013
  156. 156. Otimizado para Mobile
  157. 157. Otimizado para Mobile 2 v.Desktope Mobile
  158. 158. 2 v.Desktope Mobile
  159. 159. 2 v.Desktope Mobile
  160. 160. 2 v.Desktope Mobile
  161. 161. Site otimizado para MobileA maioria oferece apenas duas versões:
  162. 162. Site otimizado para MobileNormalmente a versão Mobile é projetada com foco nas atividades fins.
  163. 163. Otimizado para Mobile 3 v. Desktop, Tablet e Mobile
  164. 164. Site otimizado para MobileAlgumas empresas têm três versões diferentes:
  165. 165. Otimizado para Mobile 3 v. 2 v. Desktop,Desktop Tablet ee Mobile Mobile
  166. 166. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App Nativaos caminhosdo designmobile@horaciosoares – Campus Party 2013
  167. 167. AppNativa
  168. 168. App Nativa Blackbarry WindowsAndroid IOS Phone
  169. 169. CSS HandHeld Design Não fazer Design Líquido nada… Respon- sivo Otimizado para Mobile App Nativaos caminhosdo design Appmobile Híbrida@horaciosoares – Campus Party 2013
  170. 170. AppHíbrida
  171. 171. Via Thais Souza @tsouzamobile!
  172. 172. Qual melhor caminho?
  173. 173. Mobile First Luke WroblewskiLivro: http://www.abookapart.com/products/mobile-first

×