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

Like this? Share it with your network

Share

FrontinBH - Os dasafios do Design Mobile

on

  • 1,587 views

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

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

Statistics

Views

Total Views
1,587
Views on SlideShare
1,558
Embed Views
29

Actions

Likes
5
Downloads
26
Comments
0

4 Embeds 29

https://twitter.com 14
http://us-w1.rockmelt.com 10
https://si0.twimg.com 3
https://twimg0-a.akamaihd.net 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

FrontinBH - Os dasafios do Design Mobile Presentation 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