Os Caminhos do Design Mobile - Campus Party 2013

5,256 views
5,467 views

Published on

Os Caminhos do Design Mobile, apresentação realizada no dia 29 de janeiro de 2013 no Campus Party Brasil.

Published in: Design

Os Caminhos do Design Mobile - Campus Party 2013

  1. 1. Horácio Soares @horaciosoares 21 9925-5404 Campus Party 2013Os Caminhos do Design Mobile Outubro de 2012 – São Paulo!
  2. 2. Por que Mobile?
  3. 3. h"p://thenextweb.com/apple/2012/01/25/there-­‐are-­‐now-­‐more-­‐iphones-­‐sold-­‐than-­‐babies-­‐born-­‐in-­‐the-­‐world-­‐every-­‐day/  
  4. 4. h"p://zeldman.com/2012/07/09/mobile-­‐to-­‐the-­‐future-­‐luke-­‐wroblewski/  
  5. 5. crescimento = oportunidade
  6. 6. h"p://www.slideshare.net/HubSpot/50-­‐mobilefactsdeck
  7. 7. h"p://www.slideshare.net/HubSpot/50-­‐mobilefactsdec
  8. 8. no Brasil
  9. 9. h"p://services.google.com/J/files/blogs/
  10. 10. 1Os smartphones são indispensáveis no cotidiano
  11. 11. 2Os smartphonestransformaram ocomportamento do consumidor
  12. 12. 3Os smartphones ajudamos usuários a navegarpelo mundo
  13. 13. Mas cuidado...
  14. 14. 2 - Os smartphones transformaram o comportamento do consumidor
  15. 15. 5Os smartphones ajudam os anunciantes a entrarem emcontato com os clientes
  16. 16. Estatísticas Brasil
  17. 17. GIFanimado...
  18. 18. http://www1.folha.uol.com.br/mercado/1184861-venda-de-tablets-dispara-267-no-brasil-em-2012-e-de-smartphones-55.shtml
  19. 19. No mundo
  20. 20. Vários GIFsanimados...
  21. 21. h"p://www.slideshare.net/HubSpot/50-­‐mobilefactsdeck62812    -­‐  slide  35  
  22. 22. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 18
  23. 23. capacidades/ vantagens do mobile
  24. 24. GPS
  25. 25. Backseat Driver – Toyota ToyToyotahttp://www.youtube.com/watch?v=-mjudtrwdS4
  26. 26. Acelerômetro
  27. 27. Giroscópio
  28. 28. Bluetooth
  29. 29. Áudio, vídeo e imagem
  30. 30. NFC
  31. 31. Sensores multitoque
  32. 32. Em qualquer hora e local.
  33. 33. Novas maneiras de interação e apresentação
  34. 34. Boa compatibilidade entrenavegadores Mobile e HTML5
  35. 35. Atualizações frequentes...
  36. 36. limitações/restrições do mobile
  37. 37. @lukew
  38. 38. ‘Desktop is like “diving”…
  39. 39. …while mobile is like “snorkling.”’ by Hinman at Nokia h"p://www.slideshare.net/Rache
  40. 40. desktop  @lukew
  41. 41. tela grande  @lukew
  42. 42. tela grande   energia  @lukew
  43. 43. tela grande   energia   rede consistente  @lukew
  44. 44. tela grande   energia   rede consistente   teclado  @lukew
  45. 45. tela grande   energia   rede consistente   teclado   mouse  @lukew
  46. 46. tela grande   energia   rede consistente   teclado   mouse   cadeira  @lukew
  47. 47. tela grande   energia   rede consistente   teclado   mouse   cadeira   mesa  @lukew
  48. 48. tela grande   energia   rede consistente   teclado   mouse   cadeira   caneca de café   mesa  @lukew
  49. 49. mobile  @lukew
  50. 50. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36
  51. 51. tela pequena  @lukew
  52. 52. tela pequena   bateria  @lukew
  53. 53. tela pequena   bateria   rede inconsistente  @lukew
  54. 54. tela pequena   bateria   rede inconsistente   dedo gordo  @lukew
  55. 55. tela pequena   bateria   rede inconsistente   dedo gordo   sensores  @lukew
  56. 56. Slide  107    http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-
  57. 57. Como o Luli disse no Digitalks no Rio:“Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
  58. 58. 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
  59. 59. perda de 80% do espaço
  60. 60. @lukew
  61. 61. e isso pode ser ótimo para o negócio...
  62. 62. te força a priorizar...te força a manter o foco…
  63. 63. Alguém conhece algum siteque gostaria que 80% do seu conteúdo/itens/elementosfosse retirado da interface?
  64. 64. Flickr desktop60 opções de menu...
  65. 65. @lukew
  66. 66. Flickr mobile7 opções de menu...
  67. 67. Less is more...
  68. 68. @lukew
  69. 69. Conhecimento profundo daaudiência, o que fazem, por que vieram e por que se importam com o Flickr...
  70. 70. Restrições são boas para o design, pois te forçam a priorizar, a manter o foco
  71. 71. mas cuidado…
  72. 72. no ponto…
  73. 73. Os detalhes docomprador não podem servisualizados na versão mobile.
  74. 74. DesktopSite
  75. 75. Mobile Site
  76. 76. CSS   HandHeld   Design  Não  fazer   Design   Líquido   nada…   Respon-­‐ sivo   OYmizado   para   Mobile   App   NaYva  os caminhosdo design App  mobile Híbrida  
  77. 77. Antes deescolher o melhorcaminho…
  78. 78. Projetos UX Mobile
  79. 79. O que osusuáriosesperam?
  80. 80. felicidade
  81. 81. felicidadeX
  82. 82. felicidade
  83. 83. felicidade X
  84. 84. experiência perfeita
  85. 85. felicidade
  86. 86. Entretanto, a experiência pertence as pessoas.O designer não projeta a experiência… Projeta para aexperiência do usuário.
  87. 87. “Experiência do Usuário (UX) é a qualidade da experiência que uma pessoa tem ao interagir com algo projetado. uxnet.org ”
  88. 88. E o que as empresas esperam?
  89. 89. o melhor osso…
  90. 90. mas como
  91. 91. com qualidade...
  92. 92. acertandoo tiro certono alvo certo
  93. 93. com estratégia
  94. 94. “uma conspiração para o sucesso”
  95. 95. falta de estratégia eplanejamento resulta em…
  96. 96. para onde vamos?h"p://voluntariadomococa.files.wordpress.com/
  97. 97. onde devemos mirar?
  98. 98. Causo 1PrecisamosConstruiruma mesa. Liv O Tiro e o A
  99. 99. CAUSO 1 - A propósito, que mesa?Livro: O Tiro e o Alvo
  100. 100. De sinuca?
  101. 101. Ping-pong?
  102. 102. Futebol de botão?
  103. 103. Carteado?
  104. 104. Ou seria uma mesa para computador?
  105. 105. Reunião?
  106. 106. Escritório?
  107. 107. Mesa de centro?
  108. 108. Jantar?
  109. 109. Ou seria uma mesa de cirurgia?
  110. 110. De autópsia?
  111. 111. CAUSO 1 (continuação) - Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é Livro: rework curto, então, mãos à 37 Signals obra!Livro: O Tiro e o Alvo
  112. 112. CAUSO 1 (continuação) Para uma mesa pode parecer exagero, mas não para sistemas e sites...Livro: O Tiro e o Alvo
  113. 113. Conclusão?Retrabalho, desgaste com ocliente e diminuição do lucro.
  114. 114. desafio 1:identificar objetivos e necessidades…
  115. 115. Investigação Baseada em Perguntas Precisamos  automa0zar     a  Contabilidade   Preciso  do  Balancete  dia  5     e  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ão    informarmos  as  Reservas     seremos  multados!!  
  116. 116. Uma proposta de briefing Baseado em perguntas:http://clearleft.s3.amazonaws.com/client- worksheet.doc http://bit.ly/a5tRzF
  117. 117. Desafio 2: Como atender ao mesmo tempo os objetivos e as necessidades? Marte VênusObjetivos e metas da empresa Necessidades dos usuários
  118. 118. Objetivose metasdo projeto
  119. 119. •  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 q. seus clientes gastem mais a cada compra.•  Está à procura de novos canais de distribuição.•  Quer aumentar sua fatia do mercado (market share).•  ...
  120. 120. Reaisnecessidades dos usuários
  121. 121. •  Qualidade. •  Simplicidade.•  velocidade.•  Utilidade.•  Usabilidade.•  Acessibilidade.•  Portabilidade.•  Bom custo x benefício.•  Resolver seu problema.•  ...
  122. 122. Objetivos Reaise metas necessidadesdo projeto dos usuários
  123. 123. a buscado equilíbrio
  124. 124. empresa   Objetivose metas do projeto Necessidades dos usuários usuários  
  125. 125. Um caminho: modelagem participativa
  126. 126. um case em equilíbrio…
  127. 127. Case  apresentado  por  Rodrigo  Tigre,  POPULIS  -­‐  Content  Marke0ng  Digitalks  Rio  de  Janeiro  Abril2012  
  128. 128. Erico Fileno  
  129. 129. Case  apresentado  por  Rodrigo  Tigre,  POPULIS  -­‐  Content  Marke0ng  Digitalks  Rio  de  Janeiro  Abril2012  
  130. 130. Case  apresentado  por  Rodrigo  Tigre,  POPULIS  -­‐  Content  Marke0ng  Digitalks  Rio  de  Janeiro  Abril2012  
  131. 131. Observação e identificação de um problema...
  132. 132. Case  apresentado  por  Rodrigo  Tigre,  POPULIS  -­‐  Content  Marke0ng  Digitalks  Rio  de  Janeiro  Abril2012  
  133. 133. Case  apresentado  por  Rodrigo  Tigre,  POPULIS  -­‐  Content  Marke0ng  Digitalks  Rio  de  Janeiro  Abril2012  
  134. 134. Como anda a qualidade dosnossos sites nasversões desktop?
  135. 135. h"p://www.theonion.com/arYcles/internet-­‐users-­‐demand-­‐less-­‐interacYvity,30920/    
  136. 136. Será?
  137. 137. Uma breve avaliaçãode conhecidos sites de notícias sobre TI
  138. 138. CSS   HandHeld   Design  Não  fazer   Design   Líquido   nada…   Respon-­‐ sivo   OYmizado   para   Mobile   App   NaYva  os caminhosdo design App  mobile Híbrida  
  139. 139. Não  fazer   nada…  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
  140. 140. Nãofazernada!
  141. 141. Google Survey Reveals What Users Want 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. 142. CSS   HandHeld   Design   Líquido  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
  143. 143. CSSHandHeld Design Líquido
  144. 144. CSSmediaHANDHELD Como era em 2004, 2005, 2006...?
  145. 145. SiteAcesso Digital 2007
  146. 146. Portabilidade - design líquido (resolução 1024x768)
  147. 147. Portabilidade - design líquido ( resolução 640x480)
  148. 148. Portabilidadecss para dispositivo móvel MOTO Q Acesso Digital: http://acessodigital.net
  149. 149. Design   Respon-­‐ sivo  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
  150. 150. DesignResponsivo
  151. 151. Design ResponsivoIdeal para:•  Web sites informativos/institucionais•  Portfolios•  Sites com muito conteúdo como jornais, revistas, blogs.
  152. 152. Prós do Design Responsivo•  Future Proof (vai funcionar nos dispositivos que ainda não foram criados).•  Baixo custo quando comparado com as outras opções.•  Manutenção mais simples e sem duplicação.•  Um único link (indicado pelo Google SEO).•  Melhora a experiência do desktop.
  153. 153. Desvantagens Design Responsivo•  Não tem modelo para Ads nos dispositivos móveis.•  Necessita do Mobile First para funcionar adequadamente.•  Redesign da versão desktop•  CrossBrowser•  Requer testes em muitos dispositivos, ambientes e navegadores.•  Todos os conteúdos e funcionalidades da versão clássica devem carregar na versão Mobile.•  Pode apresentar problemas de performance.
  154. 154. Soluções de Navegação Design Responsivo
  155. 155. Problema:Como fazemos wireframes?
  156. 156. Design ResponsivoMenu no topo, com “do nothing”.
  157. 157. Design Responsivo Menu no topo
  158. 158. Content First Navigation second @Lukew (mobile first) Quebra de paradigma:Design de Epicentro (caindo na real – 37 Signals)
  159. 159. Design Responsivo – salto para o rodapé Menu inserido no final do documento. No desktop, via CSS, é posicionado no topo.
  160. 160. Por que colocar o menu no final?
  161. 161. Design Responsivo Menu inserido no início (topo) do documento.No Mobile, via CSS, é posicionado no rodapé, com salto.
  162. 162. Design ResponsivoMenu duplicado, em cima e em baixo da página.
  163. 163. One single page, sem saltos na versão mobile.
  164. 164. One single page, com saltos.
  165. 165. Design ResponsivoMenu duplicado, em cima e em baixo na página, ambos à mostra.
  166. 166. h"p://thecoppertree.org/  
  167. 167. h"p://thecoppertree.org/  
  168. 168. Design Responsivo Link no topo que abre o menu do tipoDropDown (opções em uma nova “camada”) ou expansível (abre e fecha)
  169. 169. DropDown (opções em uma nova “camada”)
  170. 170. Expansível (abre e fecha)
  171. 171. Design ResponsivoNo topo, poucos links, sendo que um último abre mais opções.
  172. 172. Design Responsivo Side NavigationNavegação à esquerda, via flutuação
  173. 173. Design ResponsivoMenu com menos opções
  174. 174. Design ResponsivoEscondendo menus na versão mobile
  175. 175. Design ResponsivoMenu via uma Combo box (menu select) na versão móvel.
  176. 176. OYmizado   para   Mobile  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
  177. 177. Otimizado para Mobile
  178. 178. Otimizado para Mobile 2 v.Desktope Mobile
  179. 179. 2 v.Desktope Mobile
  180. 180. 2 v.Desktope Mobile
  181. 181. 2 v.Desktope Mobile
  182. 182. Site otimizado para MobileA maioria oferece apenas duas versões:
  183. 183. Otimizado para Mobile 3 v. Desktop, Tablet e Mobile
  184. 184. Site otimizado para MobileAlgumas empresas têm três versões diferentes:
  185. 185. Otimizado para Mobile 3 v. 2 v. Desktop,Desktop Tablet ee Mobile Mobile
  186. 186. Site otimizado para MobileIdeal para:- Vendas a varejo- Sites de busca- SaaS – Software as a Software- Outras aplicações Web
  187. 187. Prós 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.- Não necessita de uma Store.
  188. 188. Desvantagens do site Mobile- Requer duas URLs, uma para versão clássica eMobile.- Se tiver menos conteúdo e funcionalidade temque indicar a versão clássica.- Problemas com indexação pelos róbos- Precisa de conexão via internet
  189. 189. Exemplos de navegação via mobile Web
  190. 190. Youtube em dezembro 2012
  191. 191. Globo.com em dezembro 2012
  192. 192. App   NaYva  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
  193. 193. AppNativa
  194. 194. App Nativa Windows BlackbarryAndroid IOS Phone
  195. 195. Iphone3GS,  Iphone4  e  Ipad  –  Objec0ve  C   Resoluções:   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. 196. Android  –  Java  Based   Eclipse  –  Pacote  SDK  (Android)   UI  Guidelines     MúlYplas  telas     Orientação  do  aplicaYvo?   Versões?  Via Thais Souza @tsouzamobile!
  197. 197. Blackberry  –  Java  Based  /  C/C++   Eclipse  -­‐  NaYvo  –  Pacote  SDK  (Blackberry)   UI  Guidelines  por  versão       Média  de  55  aparelhos  diferentes   240x260              320x240                1024x600   324  x  352          240x320   240x160              480x360     Versões  –  diferentes  interfaces  Via Thais Souza @tsouzamobile!
  198. 198. Windows  Phone–  Objec0ve  C#  baseada  C++   Resoluções:   WVGA  –  800x480   WXGA-­‐  1280  x  768   720P  –  1280x720     Widows  Phone  7  e  WP8  -­‐       Limitações  de  uma  versão  para  outra     Via Thais Souza @tsouzamobile! h"ps://www.microsoovirtualacademy.com/tracks/entendendo-­‐desenvolvimento-­‐para-­‐o-­‐windows-­‐phone-­‐7    
  199. 199. Aplicações nativasIdeal para:- Vendas a varejo- Softwares financeiros- Jogos- Aplicações corporativas
  200. 200. Prós das Apps nativas- Melhor experiência do usuário e interface gráfica.- Interface customizada para cada ambiente.- Mais indicado para aplicações com cálculoscomplexos, relatórios, gráficos, jogos, etc.- Ótima performance- Acesso offline (não necessita internet)- Pode utilizar todos os recursos do dispositivo, comoNFC, GPS, áudio, vídeo, botões.- Visível nas Stores- Diferentes maneires de monetizar.
  201. 201. Desvantagens das APPs nativas- Cliente-servidor- Custo do desenvolvimento.- Alta complexidade e custo da manutenção paradiferentes dispositivos, telas, versões de SO eambientes.- Equipes diferentes de desenvolvimento- Requer aprovação nas Stores.- Tempo de espera pela aprovação pode ser demorado- Atualizações necessitam aprovação em alguns SO- Download e atualizações consomem banda e espaçoem disco.- Só para smartphones.
  202. 202. Exemplos de navegação em APPs
  203. 203. Navegação  Primária  -­‐  Splashscreen   Nike/  Vimeo  Via Thais Souza @tsouzamobile!
  204. 204. Navegação  Primária  -­‐  Dashboard  –  Landing  Page   Rio  Show  /  Google  Plus   Problemas:  Pode  não  passar  claramente  o  objeYvo  do  aplicaYvo     Soluções:  ícone  claros  e  nomenclatura  objeYva   Via Thais Souza @tsouzamobile!
  205. 205. Navegação  Primária  –  List  Menu   Cielo  /  Bradesco   Problemas:  Pode  não  passar  claramente  o  objeYvo  do  aplicaYvo     Soluções:  ícone  claros  e  nomenclatura  objeYva   Via Thais Souza @tsouzamobile!
  206. 206. Navegação  Primária  –  Tab  Menu   Jamie  Oliver  /    Starbucks  –  Everything  cofee  Free   Problemas:  Não  conseguir  colocar  todos  os  itens  visíveis     Soluções:  ícone  claros,  uso  do  “...”  para  deixar  claro  que  tem  mais  opções   Via Thais Souza @tsouzamobile!
  207. 207. Navegação  Primária  –  Gallery   BBC  News  /  Flickr   Problemas:  Necessidade  de  Ytulo  claro,  distorção  de  imagens     Soluções:  Padronização  tamanho  das  imagens,  vtulo  objeYvo   Via Thais Souza @tsouzamobile!
  208. 208. Fonte:  h"p://inspiraYon.appflo.ws/orozpotk/this-­‐years-­‐iphone-­‐design-­‐trend-­‐side-­‐navigaYon   Navegação  Primária  –  Side  NavigaYon   Green Kitchen Download  from  the  App  Store  
  209. 209. Navegação  Primária  –  Side  NavigaYon  Youtube
  210. 210. Navegação  Primária  –  Side  NavigaYon  Youtube
  211. 211. Navegação  Primária  –  Side  NavigaYon  Youtube
  212. 212. Navegação  Secundária  –  Page  Indicator   Lacing  shoes  /  Cielo   Problemas:  Não  deve  ser  usado  em  processos  longo,  componente  default  de  slide     Soluções:  Usar  somente  em  processos  curtos,  levando  em  consideração  seu  padrão   Via Thais Souza @tsouzamobile!
  213. 213. Navegação  Secundária  –  Image  Carousel  #  Slideshow   IMDb  /  Cielo   Problemas:  distorção  de  imagens,  Falta  de  paginação     Soluções:  manter  tamanho  original  das  imagens   Via Thais Souza @tsouzamobile!
  214. 214. os caminhosdo design App  mobile Híbrida  @horaciosoares – Campus Party 2013  
  215. 215. AppHíbrida
  216. 216. Aplicações HíbridasIdeal para:- Aplicações corporativas- Players de vídeo- Venda a varejo- Software (ferramentas de produtividade))
  217. 217. Prós das APPs Híbridas- Não necessita de Store e nem de aprovaçãopara publicação.- Boa performance com uso adequado do cache.- Mais em conta que as APP nativas.- Pode utilizar alguns recursos do dispositivo.- Atualizações constantes de navegadores- Utiliza recursos de HTML5, CSS e JavaScript- Uma única equipe para todos os ambientes.
  218. 218. Desvantagens- Performance inferior as APPs nativas- Não utiliza todos os recursos dos dispositivoscomo as APPs.- Não está disponívels nas Stores- Pode ou não utilizar os recursos de navegaçãodos dispositivos e aproveitar experiências dosusuários de cada plataforma.
  219. 219. Para  app  Android,  os  controles  devem  ficar  no  topo.    Reverso  do  Iphone  onde  o  botão  Home  não  criar  o  mesmo  0po  de  compe0ção  como  no  Android.    Compare  o  aplica0vo  para  Android  e  Iphone   Via Thais Souza @tsouzamobile!
  220. 220. Via Thais Souza @tsouzamobile!
  221. 221. CSS   HandHeld   Design   Não  fazer   Design   Líquido   nada…   Respon-­‐ sivo   OYmizado   para   Mobile   App   NaYva  os caminhosdo design App  mobile Híbrida  @horaciosoares – Campus Party 2013  
  222. 222. Não  fazer   nada…   OYmizado   para   Mobile  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
  223. 223. Design   Respon-­‐ sivo   OYmizado   para   Mobile  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
  224. 224. CSS   HandHeld   Design   Líquido   OYmizado   para   Mobile  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
  225. 225. Design   Respon-­‐ sivo   App   NaYva  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
  226. 226. Design   Respon-­‐ sivo   OYmizado   para   Mobile   App   NaYva  os caminhosdo designmobile@horaciosoares – Campus Party 2013  
  227. 227. Design   Respon-­‐ sivo   OYmizado   para   Mobile   App   NaYva  os caminhosdo design App  mobile Híbrida  @horaciosoares – Campus Party 2013  
  228. 228. Qual é o futuro?
  229. 229. Qual é o chute para fora?
  230. 230. Um único caminho servindo e se ajustando a todos as escolhas com experiências diferentes e customizadas pelo usuário/ design?…

×