Your SlideShare is downloading. ×
FrontinBH - Os dasafios do Design Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

FrontinBH - Os dasafios do Design Mobile

1,173
views

Published on

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

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

Published in: Design

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,173
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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