1. Horcio Soares @horaciosoares 21 9925-5404 Campus Party 2013Os Caminhos do Design MobileOutubro de 2012 So Paulo!

2. Por que Mobile? 3. h"p://thenextweb.com/apple/2012/01/25/there-are-now-more-iphones-sold-than-babies-born-in-the-world-every-day/ 4. h"p://zeldman.com/2012/07/09/mobile-to-the-future-luke-wroblewski/ 5. crescimento = oportunidade 6. h"p://www.slideshare.net/HubSpot/50-mobilefactsdeck 7. h"p://www.slideshare.net/HubSpot/50-mobilefactsdec 8. no Brasil 9. h"p://services.google.com/J/les/blogs/ 10. 1Os smartphones soindispensveis nocotidiano 11. 2Os smartphonestransformaram ocomportamento do consumidor 12. 3Os smartphones ajudamos usurios a navegarpelo mundo 13. Mas cuidado... 14. 2 - Os smartphones transformaram o comportamento do consumidor 15. 5Os smartphones ajudam os anunciantes aentrarem emcontato com osclientes 16. Estatsticas Brasil 17. GIFanimado... 18. http://www1.folha.uol.com.br/mercado/1184861-venda-de-tablets-dispara-267-no-brasil-em-2012-e-de-smartphones-55.shtml 19. No mundo 20. Vrios GIFsanimados... 21. h"p://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 35 22. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 18 23. capacidades/ vantagensdo mobile 24. GPS 25. Backseat Driver Toyota ToyToyotahttp://www.youtube.com/watch?v=-mjudtrwdS4 26. Acelermetro 27. Giroscpio 28. Bluetooth 29. udio, vdeo e imagem 30. NFC 31. Sensores multitoque 32. Em qualquer hora e local. 33. Novas maneiras de interao e apresentao 34. Boa compatibilidade entrenavegadores Mobile e HTML5 35. Atualizaes frequentes... 36. limitaes/restriesdo mobile 37. @lukew 38. Desktop is like diving 39. while mobile is like snorkling. by Hinman at Nokia h"p://www.slideshare.net/Rache 40. desktop @lukew 41. tela grande @lukew 42. tela grande energia @lukew 43. tela grande energia rede consistente @lukew 44. tela grande energia rede consistente teclado @lukew 45. tela grande energia rede consistente teclado mouse @lukew 46. tela grande energia rede consistente teclado mouse cadeira @lukew 47. tela grande energia rede consistente teclado mouse cadeira mesa @lukew 48. tela grande energia rede consistente teclado mouse cadeira caneca de caf mesa @lukew 49. mobile @lukew 50. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36 51. tela pequena @lukew 52. tela pequena bateria @lukew 53. tela pequena bateria rede inconsistente @lukew 54. tela pequena bateria rede inconsistente dedo gordo @lukew 55. tela pequena bateria rede inconsistente dedo gordo sensores @lukew 56. Slide 107 http://www.slideshare.net/cxpartners/web-and-mobile-forms-design- 57. Como o Luli disse no Digitalks no Rio:Nesse mundo Mobile, somos todos daltnicos e sofremosdo Mal de Parkinson 58. Outras limitaes: Capacidade de armazenamento e processamento reduzido. Uma aplicao em HTML5 para mobile pode ser at 100 vezes mais lenta que em desktop.http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf 59. perda de 80% do espao 60. @lukew 61. e isso pode ser timo para o negcio... 62. te fora a priorizar...te fora a manter o foco 63. Algum conhece algum siteque gostaria que 80% do seu contedo/itens/elementosfosse retirado da interface? 64. Flickr desktop60 opes de menu... 65. @lukew 66. Flickr mobile7 opes de menu... 67. Less is more... 68. @lukew 69. Conhecimento profundo daaudincia, o que fazem, porque vieram e por que seimportam com o Flickr... 70. Restries so boas para odesign, pois te foram a priorizar, a manter o foco 71. mas cuidado 72. no ponto 73. Os detalhes docomprador no podem servisualizados na verso mobile. 74. DesktopSite 75. Mobile Site 76. CSS HandHeld Design No fazer Design Lquido nada Respon-sivo OYmizado para Mobile App NaYva os caminhosdo design App mobile Hbrida 77. Antes deescolher omelhorcaminho 78. Projetos UX Mobile 79. O que osusuriosesperam? 80. felicidade 81. felicidadeX 82. felicidade 83. felicidade X 84. experincia perfeita 85. felicidade 86. Entretanto, a experincia pertence as pessoas.O designer no projeta a experincia Projeta para aexperincia do usurio. 87. Experincia do Usurio (UX) a qualidade da experincia que uma pessoa tem ao interagir com algo projetado.uxnet.org 88. E o que as empresas esperam? 89. o melhor osso 90. mas como 91. com qualidade... 92. acertandoo tiro certono alvo certo 93. com estratgia 94. uma conspiraopara o sucesso 95. falta de estratgia eplanejamento resulta em 96. para onde vamos?h"p://voluntariadomococa.les.wordpress.com/ 97. onde devemos mirar? 98. Causo 1PrecisamosConstruiruma mesa.Liv O Tiro e o A 99. CAUSO 1 - A propsito, que mesa?Livro: O Tiro e o Alvo 100. De sinuca? 101. Ping-pong? 102. Futebol de boto? 103. Carteado? 104. Ou seria uma mesa para computador? 105. Reunio? 106. Escritrio? 107. Mesa de centro? 108. Jantar? 109. Ou seria uma mesa de cirurgia? 110. De autpsia? 111. CAUSO 1 (continuao) - Isso no interessa, meu filho. Depois a gente v. Vamos comear logo o trabalho. O prazo Livro: rework curto, ento, mos 37 Signals obra!Livro: O Tiro e o Alvo 112. CAUSO 1 (continuao) Para uma mesa pode parecer exagero, mas no para sistemas e sites...Livro: O Tiro e o Alvo 113. Concluso?Retrabalho, desgaste com ocliente e diminuio do lucro. 114. desafio 1:identificar objetivos e necessidades 115. Investigao Baseada em PerguntasPrecisamos automa0zar a Contabilidade Preciso do Balancete dia 5 e no 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 no informarmos as Reservas seremos multados!! 116. Uma proposta de briefing Baseado em perguntas:http://clearleft.s3.amazonaws.com/client-worksheet.doc http://bit.ly/a5tRzF 117. Desafio 2: Como atender ao mesmo tempo os objetivos e as necessidades? Marte VnusObjetivos e metas da empresa Necessidades dos usurios 118. Objetivose metasdo projeto 119. Precisa de novos clientes/usurios. Quer que os clientes atuais visitem seu site commaior frequencia. Quer aumentar a margem de lucro. Voc precisa aumentar sua audincia, seu pblico. Quer diferenciar sua marca. Gostaria de melhorar o retorno sobre o investimento(ROI). Quer q. seus clientes gastem mais a cada compra. Est procura de novos canais de distribuio. Quer aumentar sua fatia do mercado (market share). ... 120. Reaisnecessidades dos usurios 121. Qualidade. Simplicidade. velocidade. Utilidade. Usabilidade. Acessibilidade. Portabilidade. Bom custo x benefcio. Resolver seu problema. ... 122. ObjetivosReaise metasnecessidadesdo projetodos usurios 123. a buscado equilbrio 124. empresa Objetivose metas doprojeto Necessidades dos usurios usurios 125. Um caminho: modelagem participativa 126. um case em equilbrio 127. Case apresentado por Rodrigo Tigre, POPULIS - Content Marke0ng Digitalks Rio de Janeiro Abril2012 128. Erico Fileno 129. Case apresentado por Rodrigo Tigre, POPULIS - Content Marke0ng Digitalks Rio de Janeiro Abril2012 130. Case apresentado por Rodrigo Tigre, POPULIS - Content Marke0ng Digitalks Rio de Janeiro Abril2012 131. Observao e identificaode um problema... 132. Case apresentado por Rodrigo Tigre, POPULIS - Content Marke0ng Digitalks Rio de Janeiro Abril2012 133. Case apresentado por Rodrigo Tigre, POPULIS - Content Marke0ng Digitalks Rio de Janeiro Abril2012 134. Como anda a qualidade dosnossos sites nasverses desktop? 135. h"p://www.theonion.com/arYcles/internet-users-demand-less-interacYvity,30920/ 136. Ser? 137. Uma breve avaliaode conhecidos sites de notcias sobre TI 138. CSS HandHeld Design No fazer Design Lquido nada Respon-sivo OYmizado para Mobile App NaYva os caminhosdo design App mobile Hbrida 139. No fazer nada os caminhosdo designmobile@horaciosoares Campus Party 2013 140. Nofazernada! 141. Google Survey Reveals What UsersWant From Mobile Sites (Julho 2012) http://marketingland.com/google-survey-what-users-want-from-mobile-sites-22606http://googlemobileads.blogspot.com.br/2012/09/mobile-friendly-sites-turn-visitors.html 142. CSS HandHeld Design Lquido os caminhosdo designmobile@horaciosoares Campus Party 2013 143. CSSHandHeld Design Lquido 144. CSSmediaHANDHELDComo era em 2004,2005, 2006...? 145. SiteAcesso Digital2007 146. Portabilidade - design lquido (resoluo 1024x768) 147. Portabilidade - design lquido ( resoluo 640x480) 148. Portabilidadecss para dispositivo mvel MOTO QAcesso Digital: http://acessodigital.net 149. Design Respon- sivo os caminhosdo designmobile@horaciosoares Campus Party 2013 150. DesignResponsivo 151. Design ResponsivoIdeal para: Web sites informativos/institucionais Portfolios Sites com muito contedo como jornais, revistas, blogs. 152. Prs do Design Responsivo Future Proof (vai funcionar nos dispositivos que ainda no foram criados). Baixo custo quando comparado com as outras opes. Manuteno mais simples e sem duplicao. Um nico link (indicado pelo Google SEO). Melhora a experincia do desktop. 153. Desvantagens Design Responsivo No tem modelo para Ads nos dispositivos mveis. Necessita do Mobile First para funcionar adequadamente. Redesign da verso desktop CrossBrowser Requer testes em muitos dispositivos, ambientes e navegadores. Todos os contedos e funcionalidades da verso clssica devem carregar na verso Mobile. Pode apresentar problemas de performance. 154. Solues de Navegao Design Responsivo 155. Problema:Como fazemos wireframes? 156. Design ResponsivoMenu no topo, com do nothing. 157. Design Responsivo Menu no topo 158. Content First Navigation second @Lukew (mobile first)Quebra de paradigma:Design de Epicentro (caindo na real 37 Signals) 159. Design Responsivo salto para o rodap Menu inserido no final do documento.No desktop, via CSS, posicionado no topo. 160. Por que colocar o menu no final? 161. Design ResponsivoMenu inserido no incio (topo) do documento.No Mobile, via CSS, posicionado no rodap, com salto. 162. Design ResponsivoMenu duplicado, em cima e em baixo da pgina. 163. One single page, sem saltos na verso mobile. 164. One single page, com saltos. 165. Design ResponsivoMenu duplicado, em cima e em baixo na pgina,ambos mostra. 166. h"p://thecoppertree.org/ 167. h"p://thecoppertree.org/ 168. Design Responsivo Link no topo que abre o menu do tipoDropDown (opes em uma nova camada) ou expansvel (abre e fecha) 169. DropDown (opes em uma nova camada) 170. Expansvel (abre e fecha) 171. Design ResponsivoNo topo, poucos links, sendo que um ltimo abre mais opes. 172. Design Responsivo Side NavigationNavegao esquerda, via flutuao 173. Design ResponsivoMenu com menos opes 174. Design ResponsivoEscondendo menus na verso mobile 175. Design ResponsivoMenu via uma Combo box (menu select)na verso mvel. 176. OYmizado para Mobile os caminhosdo designmobile@horaciosoares Campus Party 2013 177. Otimizado para Mobile 178. OtimizadoparaMobile2 v.Desktope Mobile 179. 2 v.Desktope Mobile 180. 2 v.Desktope Mobile 181. 2 v.Desktope Mobile 182. Site otimizado para MobileA maioria oferece apenas duas verses: 183. Otimizado para Mobile3 v.Desktop,Tablet e Mobile 184. Site otimizado para MobileAlgumas empresas tm trs verses diferentes: 185. OtimizadoparaMobile 3 v.2 v. Desktop,Desktop Tablet ee MobileMobile 186. Site otimizado para MobileIdeal para:- Vendas a varejo- Sites de busca- SaaS Software as a Software- Outras aplicaes Web 187. Prs do site otimizado para mobile- Foco na atividade fim- Mais otimizado do que o Responsivo e com boaperformance.- Melhor UX do que o Responsivo.- Mais em conta que as APPs.- Funciona em todos os dispositivos com umnavegador e acesso a internet.- No necessita de uma Store. 188. Desvantagens do site Mobile- Requer duas URLs, uma para verso clssica eMobile.- Se tiver menos contedo e funcionalidade temque indicar a verso clssica.- Problemas com indexao pelos rbos- Precisa de conexo via internet 189. Exemplos de navegao via mobile Web 190. Youtube em dezembro 2012 191. Globo.com em dezembro 2012 192. App NaYva os caminhosdo designmobile@horaciosoares Campus Party 2013 193. AppNativa 194. AppNativa Windows BlackbarryAndroid IOS Phone 195. Iphone3GS, Iphone4 e Ipad Objec0ve C Resolues: Iphone3GS 320x480 pixels Iphone4 e 4S 640x960 pixels Iphone 5 640 x1136 pixels Ipad 768x1024 pixels Ipad 2 2048x1536 pixels UI Guidelines Via Thais Souza @tsouzamobile! 196. Android Java Based Eclipse Pacote SDK (Android) UI Guidelines MlYplas telas Orientao do aplicaYvo? Verses? Via Thais Souza @tsouzamobile! 197. Blackberry Java Based / C/C++ Eclipse - NaYvo Pacote SDK (Blackberry) UI Guidelines por verso Mdia de 55 aparelhos diferentes 240x260 320x240 1024x600 324 x 352 240x320 240x160 480x360 Verses diferentes interfaces Via Thais Souza @tsouzamobile! 198. Windows Phone Objec0ve C# baseada C++ Resolues: WVGA 800x480 WXGA- 1280 x 768 720P 1280x720 Widows Phone 7 e WP8 - Limitaes de uma verso para outra Via Thais Souza @tsouzamobile!h"ps://www.microsoovirtualacademy.com/tracks/entendendo-desenvolvimento-para-o-windows-phone-7 199. Aplicaes nativasIdeal para:- Vendas a varejo- Softwares financeiros- Jogos- Aplicaes corporativas 200. Prs das Apps nativas- Melhor experincia do usurio e interface grfica.- Interface customizada para cada ambiente.- Mais indicado para aplicaes com clculoscomplexos, relatrios, grficos, jogos, etc.- tima performance- Acesso offline (no necessita internet)- Pode utilizar todos os recursos do dispositivo, comoNFC, GPS, udio, vdeo, botes.- Visvel nas Stores- Diferentes maneires de monetizar. 201. Desvantagens das APPs nativas- Cliente-servidor- Custo do desenvolvimento.- Alta complexidade e custo da manuteno paradiferentes dispositivos, telas, verses de SO eambientes.- Equipes diferentes de desenvolvimento- Requer aprovao nas Stores.- Tempo de espera pela aprovao pode ser demorado- Atualizaes necessitam aprovao em alguns SO- Download e atualizaes consomem banda e espaoem disco.- S para smartphones. 202. Exemplos de navegao em APPs 203. Navegao Primria - Splashscreen Nike/ Vimeo Via Thais Souza @tsouzamobile! 204. Navegao Primria - Dashboard Landing Page Rio Show / Google Plus Problemas: Pode no passar claramente o objeYvo do aplicaYvo Solues: cone claros e nomenclatura objeYva Via Thais Souza @tsouzamobile! 205. Navegao Primria List Menu Cielo / Bradesco Problemas: Pode no passar claramente o objeYvo do aplicaYvo Solues: cone claros e nomenclatura objeYva Via Thais Souza @tsouzamobile! 206. Navegao Primria Tab Menu Jamie Oliver / Starbucks Everything cofee Free Problemas: No conseguir colocar todos os itens visveis Solues: cone claros, uso do ... para deixar claro que tem mais opes Via Thais Souza @tsouzamobile! 207. Navegao Primria Gallery BBC News / Flickr Problemas: Necessidade de Ytulo claro, distoro de imagens Solues: Padronizao tamanho das imagens, vtulo objeYvo Via Thais Souza @tsouzamobile! 208. Fonte: h"p://inspiraYon.appo.ws/orozpotk/this-years-iphone-design-trend-side-navigaYon Navegao Primria Side NavigaYon Green Kitchen Download from the App Store 209. Navegao Primria Side NavigaYon Youtube 210. Navegao Primria Side NavigaYon Youtube 211. Navegao Primria Side NavigaYon Youtube 212. Navegao Secundria Page Indicator Lacing shoes / Cielo Problemas: No deve ser usado em processos longo, componente default de slide Solues: Usar somente em processos curtos, levando em considerao seu padro Via Thais Souza @tsouzamobile! 213. Navegao Secundria Image Carousel # Slideshow IMDb / Cielo Problemas: distoro de imagens, Falta de paginao Solues: manter tamanho original das imagens Via Thais Souza @tsouzamobile! 214. os caminhosdo design App mobile Hbrida @horaciosoares Campus Party 2013 215. AppHbrida 216. Aplicaes HbridasIdeal para:- Aplicaes corporativas- Players de vdeo- Venda a varejo- Software (ferramentas de produtividade)) 217. Prs das APPs Hbridas- No necessita de Store e nem de aprovaopara publicao.- Boa performance com uso adequado do cache.- Mais em conta que as APP nativas.- Pode utilizar alguns recursos do dispositivo.- Atualizaes constantes de navegadores- Utiliza recursos de HTML5, CSS e JavaScript- Uma nica equipe para todos os ambientes. 218. Desvantagens- Performance inferior as APPs nativas- No utiliza todos os recursos dos dispositivoscomo as APPs.- No est disponvels nas Stores- Pode ou no utilizar os recursos de navegaodos dispositivos e aproveitar experincias dosusurios de cada plataforma. 219. Para app Android, os controles devem car no topo. Reverso do Iphone onde o boto Home no criar o mesmo 0po de compe0o como no Android. Compare o aplica0vo para Android e Iphone Via Thais Souza @tsouzamobile! 220. Via Thais Souza @tsouzamobile! 221. CSS HandHeld Design No fazer Design Lquido nada Respon- sivo OYmizado para Mobile App NaYva os caminhosdo designApp mobileHbrida @horaciosoares Campus Party 2013 222. No fazer nada OYmizado para Mobile os caminhosdo designmobile@horaciosoares Campus Party 2013 223. Design Respon- sivo OYmizado para Mobile os caminhosdo designmobile@horaciosoares Campus Party 2013 224. CSS HandHeld Design Lquido OYmizado para Mobile os caminhosdo designmobile@horaciosoares Campus Party 2013 225. Design Respon- sivo App NaYva os caminhosdo designmobile@horaciosoares Campus Party 2013 226. Design Respon- sivo OYmizado para Mobile App NaYva os caminhosdo designmobile@horaciosoares Campus Party 2013 227. Design Respon- sivo OYmizado para Mobile App NaYva os caminhosdo designApp mobileHbrida @horaciosoares Campus Party 2013 228. Qual o futuro? 229. Qual o chute para fora? 230. Um nico caminho servindo e se ajustando a todos as escolhas com experincias diferentes ecustomizadas pelo usurio/design?