P&D Concepção e InterfaceProjetando Mobile
Por que MOBILE?7/3/2013                     2
Números Gerais• 73% não saem de casa sem seus dispositivos móveis.• 27 milhões de Brasileiros tem smartphones.• 42% usam i...
61%    86%                                                                          92%                                   ...
O Uso de Aplicativos• 14 aplicativos em média instalados no smartphone.• 6 aplicativos usados nos últimos 30 dias.• 2 apli...
Mobilidade possibilita: Interações                                       “…                                     88% usam  ...
Mobilidade possibilita: Interações• 45% pesquisaram no smartphone e depois compraram pelo  computador.• 30% pesquisaram no...
Mobilidade possibilita: VENDASOnde os anúncios para celular são mais notados• 4% viram ao usar mecanismos de pesquisas.• 4...
“…Ou seja!MOBILE É…”     7/3/2013   9
“…Ou seja!MOBILE É…”     7/3/2013   10
Pensando mobileContexto mobile é totalmente diferente do contexto desktop… por issodevemos pensar diferente também!No mund...
Pensando mobileDesktop          7/3/2013   12
Pensando mobileDesktop          7/3/2013   13
Pensando mobileDesktop          7/3/2013   14
Pensando mobileDesktop          7/3/2013   15
Pensando mobileDesktop          7/3/2013   16
Pensando mobileDesktop          7/3/2013   17
Pensando mobileDesktop          7/3/2013   18
Pensando mobileDesktop          7/3/2013   19
Pensando mobileDesktop          7/3/2013   20
Pensando mobileDesktop          7/3/2013   21
Pensando mobileDesktop          7/3/2013   22
Pensando mobileMobile          7/3/2013   23
Pensando mobileMobile          7/3/2013   24
Pensando mobileMobile          7/3/2013   25
Pensando mobileMobile          7/3/2013   26
Pensando mobileMobile          7/3/2013   27
Pensando mobileMobile          7/3/2013   28
Pensando mobile• Espaço menor que do desktop…• Isso é um ponto positivo ao desenvolver um projeto de Design para  mobile.•...
OK! Vamos ao projeto           mobile! :D7/3/2013                          30
1           Pesquisa,           Pesquisa,           Pesquisa!7/3/2013      31
Tipos de Pesquisas• Benchmarking• Questionários• Entrevistas• Pesquisa de opinião           7/3/2013     32
Tipos de Pesquisas: Benchmarking       7/3/2013                    33
2           Concepção7/3/2013      34
Concepção• Momento VIAGEM!• Brainstorms• Uso e análises de produtos semelhantes• Definição do que vai ter de conteúdo, inf...
Concepção• Momento VIAGEM!• Brainstorms• Uso e análises de produtos semelhantes• Definição do que vai ter de conteúdo, inf...
Concepção• Momento VIAGEM!• Brainstorms• Uso e análises de produtos semelhantes• Definição do que vai ter de conteúdo, inf...
Concepção      7/3/2013   38
3           Arquitetura                da           Informação7/3/2013       39
Arquitetura da Informação• Desenvolver as melhores navegações e interações para usuários de  dispositivos móveis.• Prioriz...
Arquitetura da InformaçãoGuidelines existentes:• Android  http://developer.android.com/design/index.html• IOS  http://deve...
Arquitetura da Informação       7/3/2013             42
Arquitetura da Informação       7/3/2013             43
Arquitetura da Informação       7/3/2013             44
4           Design           Visual7/3/2013     45
Design Visual: Processo                    Diagrama: Jesse James Garrett       7/3/2013                                   ...
Design Visual: Processo       7/3/2013           47
Design Visual: Processo• Painel visual: Conceito            7/3/2013        48
Design Visual: Processo• Painel visual: Público Alvo            7/3/2013            49
Design Visual: Processo• Pesquisa de referências visuais            7/3/2013                50
Design Visual: Processo Forma       7/3/2013           51
Design Visual: Processo Forma             Cor       7/3/2013           52
Design Visual: Processo Forma             Cor    Tipografia       7/3/2013                   53
Design Visual: Processo       7/3/2013           54
Design Visual       7/3/2013   55
Design Visual: Processo Forma       7/3/2013           56
Design Visual: Processo                          Simbólico                          • Ícones Forma       7/3/2013         ...
Design Visual: Processo                          Simbólico                          • Ícones Forma                    Físi...
Design Visual: Processo   Cor       7/3/2013           59
Design Visual: Processo                          Contraste   Cor       7/3/2013                       60
Design Visual: Processo                          Contraste                          Feedback   Cor       7/3/2013         ...
Design Visual: ProcessoTipografia       7/3/2013           62
Design Visual: Processo                          LegibilidadeTipografia       7/3/2013                          63
Design Visual: Processo                          Legibilidade                          HierarquiaTipografia       7/3/2013...
Design Visual: Resoluções• IOS: iPhone   iPhones 4 e 4s 640 px x 960 px   iPhones 5: 640 px x 1136 px              7/3/201...
Design Visual: Resoluções• Android            7/3/2013        66
Design Visual“ Um objetivo geral do design de interação  é desenvolver sistemas interativos que provoquem respostas positi...
5           Implementação7/3/2013        68
Implementação• Planejar seu cronograma, pois além do desenvolvimento e testes,  seu aplicativo passará por revisão nas App...
Nativo vs HTML5• É um assunto polêmico!!!• As duas abordagens tem pontos positivos e negativos• Vamos ver algumas comparaç...
Nativo vs HTML5: CustoNativoHTML5         7/3/2013        71
App Nativo vs HTML5                      Nativo   HTML5           Custo                 X       7/3/2013                  ...
Nativo vs HTML5: PerformanceNativo              Consegue aproveitar ao máximo os recursos do hardware                    A...
App Nativo vs HTML5                      Nativo   HTML5           Custo                 X      Performance       X       7...
Nativo vs HTML5: Tempo de DesenvolvimentoNativoHTML5         7/3/2013                    75
App Nativo vs HTML5                              Nativo   HTML5             Custo                       X         Performa...
Nativo vs HTML5: DivulgaçãoNativoHTML5         7/3/2013             77
App Nativo vs HTML5                              Nativo   HTML5              Custo                      X         Performa...
OK…           Então eu faço um           aplicativo nativo ou em           HTML5???7/3/2013                             79
A resposta é:• Não existe resposta certa!• Existe o bom senso• Escolher a tecnologia que melhor atenda sua necessidade, es...
Exemplo 1Eu preciso de um aplicativo que:• Liste todos os eventos da Campus Party• Exiba as informações de todos os palest...
Exemplo 2:Eu preciso de um aplicativo que:• O usuário possa tirar uma foto com o dispositivo• Processe a imagem para aplic...
Final do Final“… Testar uma versão                               “… Fazer atualizações                           “… Corrig...
Referênciashttps://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdfhttp://www.slideshare.net/horacio....
WE L VE           Diana Fournier           @_superdidi           dfounier@uolinc.com           Natalia Batista           c...
Obrigado ;-)           Equipe de Concepção & Interface de Produtos – P&D                        Av. Brig. Faria Lima, 1.38...
Próximos SlideShares
Carregando em…5
×

Projetando Mobile

741 visualizações

Publicada em

Palestra ministrada na área de exposições da Campus Party 2013.
Apresentação feita em conjunto com Diana Medeiros Fournier e Natalia Batista

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Projetando Mobile

  1. 1. P&D Concepção e InterfaceProjetando Mobile
  2. 2. Por que MOBILE?7/3/2013 2
  3. 3. Números Gerais• 73% não saem de casa sem seus dispositivos móveis.• 27 milhões de Brasileiros tem smartphones.• 42% usam internet em seus smartphones pelo menos 1x ao dia… Destes 59% para acessar redes sociais, 57% para acessar emails e 55% mecanismos de pesquisas.• 27% disseram preferir ficar sem TV do que seu celular.• 50% pesquisam em seus smartphones todos os dias… destes 48% procura informações sobre produtos, 29% restaurantes, pubs e bares e 28% viagens. 7/3/2013 3
  4. 4. 61% 86% 92% manter-se Comunicação Entretenimento informado 72% 57% 79%Usam redes sociais Leram notícias em Navegaram na internet(atualizam status, verificam jornais, portais e revistas.mensagem, visitam páginas 71%de amigos) Ouviram música 71% 21%E-mails (enviaram ou Analisaram websites, blogs e 46%receberam) fóruns. Assistiram vídeos (Youtube) 39% Usaram jogos7/3/2013 Dados: Our Mobile Planet by Google 4
  5. 5. O Uso de Aplicativos• 14 aplicativos em média instalados no smartphone.• 6 aplicativos usados nos últimos 30 dias.• 2 aplicativos pagos instalados em média.• 88% dos usuários acessam Redes Sociais via apps.• 50% pesquisam em seus smartphones todos os dias… destes 48% procura informações sobre produtos, 29% restaurantes, pubs e bares e 28% viagens. 7/3/2013 Dados: Our Mobile Planet by Google 5
  6. 6. Mobilidade possibilita: Interações “… 88% usam smartphones quando …”15% 46% 55% 18% 29% 15% 26%Ouvem Assistem Usam a Jogam Assistem a Leem LeemMúsica TV Internet videogames filmes livros revistas ou jornais 7/3/2013 Dados: Our Mobile Planet by Google 6
  7. 7. Mobilidade possibilita: Interações• 45% pesquisaram no smartphone e depois compraram pelo computador.• 30% pesquisaram no smartphone e depois compraram em lojas físicas.• 31% dos usuários de smartphones compraram produto ou serviço em seus aparelhos.• 54% desses compradores fizeram uma compra no mês passado. 7/3/2013 Dados: Our Mobile Planet by Google 7
  8. 8. Mobilidade possibilita: VENDASOnde os anúncios para celular são mais notados• 4% viram ao usar mecanismos de pesquisas.• 42% viram em um website.• 31% viram em um aplicativo.• 25% viram ao assistir um vídeo.• 24% em um web site para vídeos.• 16% em um website varejista. 7/3/2013 Dados: Our Mobile Planet by Google 8
  9. 9. “…Ou seja!MOBILE É…” 7/3/2013 9
  10. 10. “…Ou seja!MOBILE É…” 7/3/2013 10
  11. 11. Pensando mobileContexto mobile é totalmente diferente do contexto desktop… por issodevemos pensar diferente também!No mundo mobile (devido à limitações) todos somos daltônicos esofremos mal de Parkinson.Atentar a: Interferências de pessoas, sons, visuais, etc; Tempo dedicado àquela interação; Culturas diferentes dos diversos usuários; Devices e sistemas operacionais diferentes. 7/3/2013 11
  12. 12. Pensando mobileDesktop 7/3/2013 12
  13. 13. Pensando mobileDesktop 7/3/2013 13
  14. 14. Pensando mobileDesktop 7/3/2013 14
  15. 15. Pensando mobileDesktop 7/3/2013 15
  16. 16. Pensando mobileDesktop 7/3/2013 16
  17. 17. Pensando mobileDesktop 7/3/2013 17
  18. 18. Pensando mobileDesktop 7/3/2013 18
  19. 19. Pensando mobileDesktop 7/3/2013 19
  20. 20. Pensando mobileDesktop 7/3/2013 20
  21. 21. Pensando mobileDesktop 7/3/2013 21
  22. 22. Pensando mobileDesktop 7/3/2013 22
  23. 23. Pensando mobileMobile 7/3/2013 23
  24. 24. Pensando mobileMobile 7/3/2013 24
  25. 25. Pensando mobileMobile 7/3/2013 25
  26. 26. Pensando mobileMobile 7/3/2013 26
  27. 27. Pensando mobileMobile 7/3/2013 27
  28. 28. Pensando mobileMobile 7/3/2013 28
  29. 29. Pensando mobile• Espaço menor que do desktop…• Isso é um ponto positivo ao desenvolver um projeto de Design para mobile.• Pouco espaço força priorizar o que é mais importante no conteúdo que deve ser exibido, solucionando de uma forma mais rápida o “problema”.• Ao desenvolver para mobile, menos é mais! 7/3/2013 29
  30. 30. OK! Vamos ao projeto mobile! :D7/3/2013 30
  31. 31. 1 Pesquisa, Pesquisa, Pesquisa!7/3/2013 31
  32. 32. Tipos de Pesquisas• Benchmarking• Questionários• Entrevistas• Pesquisa de opinião 7/3/2013 32
  33. 33. Tipos de Pesquisas: Benchmarking 7/3/2013 33
  34. 34. 2 Concepção7/3/2013 34
  35. 35. Concepção• Momento VIAGEM!• Brainstorms• Uso e análises de produtos semelhantes• Definição do que vai ter de conteúdo, informação e funcionalidades. 7/3/2013 35
  36. 36. Concepção• Momento VIAGEM!• Brainstorms• Uso e análises de produtos semelhantes• Definição do que vai ter de conteúdo, informação e funcionalidades. 7/3/2013 36
  37. 37. Concepção• Momento VIAGEM!• Brainstorms• Uso e análises de produtos semelhantes• Definição do que vai ter de conteúdo, informação e funcionalidades. 7/3/2013 37
  38. 38. Concepção 7/3/2013 38
  39. 39. 3 Arquitetura da Informação7/3/2013 39
  40. 40. Arquitetura da Informação• Desenvolver as melhores navegações e interações para usuários de dispositivos móveis.• Priorizar as informações e conteúdo, organizando-os de maneira clara e de fácil compreensão.• Pensar nas plataformas e guidelines existentes.• Desenvolver protótipos navegáveis para visualização das navegações.• Testar, testar e testar em protótipo (teste de usabilidade em protótipo, grupo de foco, etc). 7/3/2013 40
  41. 41. Arquitetura da InformaçãoGuidelines existentes:• Android http://developer.android.com/design/index.html• IOS http://developer.apple.com/library/ios/#documentation/userexperi ence/conceptual/mobilehig/Introduction/Introduction.html• Windows Phone http://msdn.microsoft.com/en-us/library/windowsphone/design 7/3/2013 41
  42. 42. Arquitetura da Informação 7/3/2013 42
  43. 43. Arquitetura da Informação 7/3/2013 43
  44. 44. Arquitetura da Informação 7/3/2013 44
  45. 45. 4 Design Visual7/3/2013 45
  46. 46. Design Visual: Processo Diagrama: Jesse James Garrett 7/3/2013 46
  47. 47. Design Visual: Processo 7/3/2013 47
  48. 48. Design Visual: Processo• Painel visual: Conceito 7/3/2013 48
  49. 49. Design Visual: Processo• Painel visual: Público Alvo 7/3/2013 49
  50. 50. Design Visual: Processo• Pesquisa de referências visuais 7/3/2013 50
  51. 51. Design Visual: Processo Forma 7/3/2013 51
  52. 52. Design Visual: Processo Forma Cor 7/3/2013 52
  53. 53. Design Visual: Processo Forma Cor Tipografia 7/3/2013 53
  54. 54. Design Visual: Processo 7/3/2013 54
  55. 55. Design Visual 7/3/2013 55
  56. 56. Design Visual: Processo Forma 7/3/2013 56
  57. 57. Design Visual: Processo Simbólico • Ícones Forma 7/3/2013 57
  58. 58. Design Visual: Processo Simbólico • Ícones Forma Físico • Área de toque 7/3/2013 58
  59. 59. Design Visual: Processo Cor 7/3/2013 59
  60. 60. Design Visual: Processo Contraste Cor 7/3/2013 60
  61. 61. Design Visual: Processo Contraste Feedback Cor 7/3/2013 61
  62. 62. Design Visual: ProcessoTipografia 7/3/2013 62
  63. 63. Design Visual: Processo LegibilidadeTipografia 7/3/2013 63
  64. 64. Design Visual: Processo Legibilidade HierarquiaTipografia 7/3/2013 64
  65. 65. Design Visual: Resoluções• IOS: iPhone iPhones 4 e 4s 640 px x 960 px iPhones 5: 640 px x 1136 px 7/3/2013 65
  66. 66. Design Visual: Resoluções• Android 7/3/2013 66
  67. 67. Design Visual“ Um objetivo geral do design de interação é desenvolver sistemas interativos que provoquem respostas positivas por parte dos usuários, como sentir-se à vontade, confortável e apreciar a experiência de estar utilizando tais sistemas. ” Preece. Design de interação: Além da interação homem-computador 7/3/2013 67
  68. 68. 5 Implementação7/3/2013 68
  69. 69. Implementação• Planejar seu cronograma, pois além do desenvolvimento e testes, seu aplicativo passará por revisão nas App Stores ( Apple Store, Google Play, Windows Store) e estará sujeita a reprovação• Definir qual é a tecnologia que será utilizada para o desenvolvimento do aplicativo. Nativo vs. HTML5 7/3/2013 69
  70. 70. Nativo vs HTML5• É um assunto polêmico!!!• As duas abordagens tem pontos positivos e negativos• Vamos ver algumas comparações 7/3/2013 70
  71. 71. Nativo vs HTML5: CustoNativoHTML5 7/3/2013 71
  72. 72. App Nativo vs HTML5 Nativo HTML5 Custo X 7/3/2013 72
  73. 73. Nativo vs HTML5: PerformanceNativo Consegue aproveitar ao máximo os recursos do hardware Acesso a recursos é limitado pela capacidade de processamento doHTML5 Browser/Web View 7/3/2013 73
  74. 74. App Nativo vs HTML5 Nativo HTML5 Custo X Performance X 7/3/2013 74
  75. 75. Nativo vs HTML5: Tempo de DesenvolvimentoNativoHTML5 7/3/2013 75
  76. 76. App Nativo vs HTML5 Nativo HTML5 Custo X Performance X Tempo de Desenvolvimento X 7/3/2013 76
  77. 77. Nativo vs HTML5: DivulgaçãoNativoHTML5 7/3/2013 77
  78. 78. App Nativo vs HTML5 Nativo HTML5 Custo X Performance X Tempo de Desenvolvimento X Divulgação (App Store) X 7/3/2013 78
  79. 79. OK… Então eu faço um aplicativo nativo ou em HTML5???7/3/2013 79
  80. 80. A resposta é:• Não existe resposta certa!• Existe o bom senso• Escolher a tecnologia que melhor atenda sua necessidade, esta é a resposta correta 7/3/2013 80
  81. 81. Exemplo 1Eu preciso de um aplicativo que:• Liste todos os eventos da Campus Party• Exiba as informações de todos os palestrantes, como foto e descrição• Mostre as perguntas frequentes sobre o evento• Exiba um mapa do evento e acampamento 7/3/2013 81
  82. 82. Exemplo 2:Eu preciso de um aplicativo que:• O usuário possa tirar uma foto com o dispositivo• Processe a imagem para aplicar diversos filtros na foto• O usuário tenha a possibilidade de compartilhar essa foto por redes sociais ou bluetooth 7/3/2013 82
  83. 83. Final do Final“… Testar uma versão “… Fazer atualizações “… Corrigir eventuaisbeta com os usuários para adicionar novas bugs …” em pontencial funcionalidades …” …” 7/3/2013 83
  84. 84. Referênciashttps://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdfhttp://www.slideshare.net/horacio.soares/mobile-first-w3c-webbr-2012http://www.thinkwithgoogle.com/mobileplanet/pt-br/http://arquiteturadeinformacao.com/2012/08/07/usando-o-axure-para-criar-prototipos-mobile/http://arquiteturadeinformacao.com/2012/07/09/voce-nao-vai-ter-audiencia-mobile-enquanto-voce-nao-incorporar-de-verdade-o-que-significa-ser-mobile/http://arquiteturadeinformacao.com/2012/10/26/27-guidelines-para-ux-design-em-dispositivos-moveis/ 7/3/2013 84
  85. 85. WE L VE Diana Fournier @_superdidi dfounier@uolinc.com Natalia Batista cad_nbatista@uolinc.com Thiago Tiveron @tiveron tfavaro@uolinc.com7/3/2013 85
  86. 86. Obrigado ;-) Equipe de Concepção & Interface de Produtos – P&D Av. Brig. Faria Lima, 1.384, 4º andar CEP 01452-002 . São Paulo/SP Telefone: 11 3914.9559 www.uol.com.br7/3/2013 86

×