Your SlideShare is downloading. ×
  • Like
Projetando Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Projetando Mobile

  • 469 views
Published

Palestra ministrada na área de exposições da Campus Party 2013. …

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
469
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
19
Comments
0
Likes
1

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. P&D Concepção e InterfaceProjetando Mobile
  • 2. Por que MOBILE?7/3/2013 2
  • 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. 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. 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. 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. 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. 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. “…Ou seja!MOBILE É…” 7/3/2013 9
  • 10. “…Ou seja!MOBILE É…” 7/3/2013 10
  • 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. Pensando mobileDesktop 7/3/2013 12
  • 13. Pensando mobileDesktop 7/3/2013 13
  • 14. Pensando mobileDesktop 7/3/2013 14
  • 15. Pensando mobileDesktop 7/3/2013 15
  • 16. Pensando mobileDesktop 7/3/2013 16
  • 17. Pensando mobileDesktop 7/3/2013 17
  • 18. Pensando mobileDesktop 7/3/2013 18
  • 19. Pensando mobileDesktop 7/3/2013 19
  • 20. Pensando mobileDesktop 7/3/2013 20
  • 21. Pensando mobileDesktop 7/3/2013 21
  • 22. Pensando mobileDesktop 7/3/2013 22
  • 23. Pensando mobileMobile 7/3/2013 23
  • 24. Pensando mobileMobile 7/3/2013 24
  • 25. Pensando mobileMobile 7/3/2013 25
  • 26. Pensando mobileMobile 7/3/2013 26
  • 27. Pensando mobileMobile 7/3/2013 27
  • 28. Pensando mobileMobile 7/3/2013 28
  • 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. OK! Vamos ao projeto mobile! :D7/3/2013 30
  • 31. 1 Pesquisa, Pesquisa, Pesquisa!7/3/2013 31
  • 32. Tipos de Pesquisas• Benchmarking• Questionários• Entrevistas• Pesquisa de opinião 7/3/2013 32
  • 33. Tipos de Pesquisas: Benchmarking 7/3/2013 33
  • 34. 2 Concepção7/3/2013 34
  • 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. 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. 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. Concepção 7/3/2013 38
  • 39. 3 Arquitetura da Informação7/3/2013 39
  • 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. 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. Arquitetura da Informação 7/3/2013 42
  • 43. Arquitetura da Informação 7/3/2013 43
  • 44. Arquitetura da Informação 7/3/2013 44
  • 45. 4 Design Visual7/3/2013 45
  • 46. Design Visual: Processo Diagrama: Jesse James Garrett 7/3/2013 46
  • 47. Design Visual: Processo 7/3/2013 47
  • 48. Design Visual: Processo• Painel visual: Conceito 7/3/2013 48
  • 49. Design Visual: Processo• Painel visual: Público Alvo 7/3/2013 49
  • 50. Design Visual: Processo• Pesquisa de referências visuais 7/3/2013 50
  • 51. Design Visual: Processo Forma 7/3/2013 51
  • 52. Design Visual: Processo Forma Cor 7/3/2013 52
  • 53. Design Visual: Processo Forma Cor Tipografia 7/3/2013 53
  • 54. Design Visual: Processo 7/3/2013 54
  • 55. Design Visual 7/3/2013 55
  • 56. Design Visual: Processo Forma 7/3/2013 56
  • 57. Design Visual: Processo Simbólico • Ícones Forma 7/3/2013 57
  • 58. Design Visual: Processo Simbólico • Ícones Forma Físico • Área de toque 7/3/2013 58
  • 59. Design Visual: Processo Cor 7/3/2013 59
  • 60. Design Visual: Processo Contraste Cor 7/3/2013 60
  • 61. Design Visual: Processo Contraste Feedback Cor 7/3/2013 61
  • 62. Design Visual: ProcessoTipografia 7/3/2013 62
  • 63. Design Visual: Processo LegibilidadeTipografia 7/3/2013 63
  • 64. Design Visual: Processo Legibilidade HierarquiaTipografia 7/3/2013 64
  • 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. Design Visual: Resoluções• Android 7/3/2013 66
  • 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. 5 Implementação7/3/2013 68
  • 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. 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. Nativo vs HTML5: CustoNativoHTML5 7/3/2013 71
  • 72. App Nativo vs HTML5 Nativo HTML5 Custo X 7/3/2013 72
  • 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. App Nativo vs HTML5 Nativo HTML5 Custo X Performance X 7/3/2013 74
  • 75. Nativo vs HTML5: Tempo de DesenvolvimentoNativoHTML5 7/3/2013 75
  • 76. App Nativo vs HTML5 Nativo HTML5 Custo X Performance X Tempo de Desenvolvimento X 7/3/2013 76
  • 77. Nativo vs HTML5: DivulgaçãoNativoHTML5 7/3/2013 77
  • 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. OK… Então eu faço um aplicativo nativo ou em HTML5???7/3/2013 79
  • 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. 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. 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. 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. 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. 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. 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