projetando mobile

Download Projetando Mobile

If you can't read please download the document

Post on 06-Jun-2015

497 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. P&D Concepo e InterfaceProjetando Mobile

2. Por que MOBILE?7/3/2013 2 3. Nmeros Gerais 73% no saem de casa sem seus dispositivos mveis. 27 milhes de Brasileiros tem smartphones. 42% usam internet em seus smartphones pelo menos 1x ao diaDestes 59% para acessar redes sociais, 57% para acessar emails e55% mecanismos de pesquisas. 27% disseram preferir ficar sem TV do que seu celular. 50% pesquisam em seus smartphones todos os dias destes 48%procura informaes sobre produtos, 29% restaurantes, pubs ebares e 28% viagens.7/3/20133 4. 61%86%92%manter-se Comunicao Entretenimentoinformado72%57%79%Usam redes sociaisLeram notcias em Navegaram na internet(atualizam status, verificamjornais, portais e revistas.mensagem, visitam pginas71%de amigos)Ouviram msica71%21%E-mails (enviaram ouAnalisaram websites, blogs e 46%receberam)fruns. Assistiram vdeos (Youtube) 39%Usaram jogos7/3/2013 Dados: Our Mobile Planet by Google4 5. O Uso de Aplicativos 14 aplicativos em mdia instalados no smartphone. 6 aplicativos usados nos ltimos 30 dias. 2 aplicativos pagos instalados em mdia. 88% dos usurios acessam Redes Sociais via apps. 50% pesquisam em seus smartphones todos os dias destes 48%procura informaes sobre produtos, 29% restaurantes, pubs ebares e 28% viagens.7/3/2013 Dados: Our Mobile Planet by Google 5 6. Mobilidade possibilita: Interaes 88% usam smartphones quando15% 46% 55%18% 29% 15%26%OuvemAssistem Usam aJogam Assistem a LeemLeemMsica TV Internet videogames filmes livros revistas oujornais 7/3/2013 Dados: Our Mobile Planet by Google6 7. Mobilidade possibilita: Interaes 45% pesquisaram no smartphone e depois compraram pelocomputador. 30% pesquisaram no smartphone e depois compraram em lojasfsicas. 31% dos usurios de smartphones compraram produto ou servioem seus aparelhos. 54% desses compradores fizeram uma compra no ms passado. 7/3/2013 Dados: Our Mobile Planet by Google7 8. Mobilidade possibilita: VENDASOnde os anncios para celular so mais notados 4% viram ao usar mecanismos de pesquisas. 42% viram em um website. 31% viram em um aplicativo. 25% viram ao assistir um vdeo. 24% em um web site para vdeos. 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 tambm!No mundo mobile (devido limitaes) todos somos daltnicos esofremos mal de Parkinson.Atentar a: Interferncias de pessoas, sons, visuais, etc; Tempo dedicado quela interao; Culturas diferentes dos diversos usurios; Devices e sistemas operacionais diferentes. 7/3/201311 12. Pensando mobileDesktop7/3/2013 12 13. Pensando mobileDesktop7/3/2013 13 14. Pensando mobileDesktop7/3/2013 14 15. Pensando mobileDesktop7/3/2013 15 16. Pensando mobileDesktop7/3/2013 16 17. Pensando mobileDesktop7/3/2013 17 18. Pensando mobileDesktop7/3/2013 18 19. Pensando mobileDesktop7/3/2013 19 20. Pensando mobileDesktop7/3/2013 20 21. Pensando mobileDesktop7/3/2013 21 22. Pensando mobileDesktop7/3/2013 22 23. Pensando mobileMobile7/3/2013 23 24. Pensando mobileMobile7/3/2013 24 25. Pensando mobileMobile7/3/2013 25 26. Pensando mobileMobile7/3/2013 26 27. Pensando mobileMobile7/3/2013 27 28. Pensando mobileMobile7/3/2013 28 29. Pensando mobile Espao menor que do desktop Isso um ponto positivo ao desenvolver um projeto de Design paramobile. Pouco espao fora priorizar o que mais importante no contedoque deve ser exibido, solucionando de uma forma mais rpida oproblema. Ao desenvolver para mobile, menos mais!7/3/2013 29 30. OK! Vamos ao projeto mobile! :D7/3/201330 31. 1 Pesquisa, Pesquisa, Pesquisa!7/3/201331 32. Tipos de Pesquisas Benchmarking Questionrios Entrevistas Pesquisa de opinio 7/3/2013 32 33. Tipos de Pesquisas: Benchmarking 7/3/201333 34. 2 Concepo7/3/201334 35. Concepo Momento VIAGEM! Brainstorms Uso e anlises de produtos semelhantes Definio do que vai ter de contedo, informao e funcionalidades.7/3/201335 36. Concepo Momento VIAGEM! Brainstorms Uso e anlises de produtos semelhantes Definio do que vai ter de contedo, informao e funcionalidades.7/3/201336 37. Concepo Momento VIAGEM! Brainstorms Uso e anlises de produtos semelhantes Definio do que vai ter de contedo, informao e funcionalidades.7/3/201337 38. Concepo7/3/2013 38 39. 3 Arquiteturada Informao7/3/2013 39 40. Arquitetura da Informao Desenvolver as melhores navegaes e interaes para usurios dedispositivos mveis. Priorizar as informaes e contedo, organizando-os de maneiraclara e de fcil compreenso. Pensar nas plataformas e guidelines existentes. Desenvolver prottipos navegveis para visualizao dasnavegaes. Testar, testar e testar em prottipo (teste de usabilidade emprottipo, grupo de foco, etc).7/3/201340 41. Arquitetura da InformaoGuidelines existentes: Androidhttp://developer.android.com/design/index.html IOShttp://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html Windows Phonehttp://msdn.microsoft.com/en-us/library/windowsphone/design7/3/2013 41 42. Arquitetura da Informao 7/3/2013 42 43. Arquitetura da Informao 7/3/2013 43 44. Arquitetura da Informao 7/3/2013 44 45. 4 Design Visual7/3/2013 45 46. Design Visual: ProcessoDiagrama: Jesse James Garrett 7/3/2013 46 47. Design Visual: Processo 7/3/2013 47 48. Design Visual: Processo Painel visual: Conceito7/3/201348 49. Design Visual: Processo Painel visual: Pblico Alvo7/3/201349 50. Design Visual: Processo Pesquisa de referncias visuais7/3/201350 51. Design Visual: Processo Forma 7/3/2013 51 52. Design Visual: Processo Forma Cor 7/3/2013 52 53. Design Visual: Processo Forma CorTipografia 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: ProcessoSimblico cones Forma 7/3/2013 57 58. Design Visual: ProcessoSimblico cones FormaFsico rea de toque 7/3/2013 58 59. Design Visual: Processo Cor 7/3/2013 59 60. Design Visual: ProcessoContraste Cor 7/3/2013 60 61. Design Visual: ProcessoContrasteFeedback Cor 7/3/2013 61 62. Design Visual: ProcessoTipografia 7/3/2013 62 63. Design Visual: ProcessoLegibilidadeTipografia 7/3/201363 64. Design Visual: ProcessoLegibilidadeHierarquiaTipografia 7/3/201364 65. Design Visual: Resolues IOS: iPhone iPhones 4 e 4s 640 px x 960 px iPhones 5: 640 px x 1136 px7/3/201365 66. Design Visual: Resolues Android7/3/201366 67. Design Visual Um objetivo geral do design de interao desenvolver sistemas interativos que provoquem respostas positivas por partedos usurios, como sentir-se vontade, confortvel e apreciar aexperincia de estar utilizando taissistemas. Preece. Design de interao: Alm da interao homem-computador7/3/2013 67 68. 5 Implementao7/3/201368 69. Implementao Planejar seu cronograma, pois alm do desenvolvimento e testes,seu aplicativo passar por reviso nas App Stores ( Apple Store,Google Play, Windows Store) e estar sujeita a reprovao Definir qual a tecnologia que ser utilizada para odesenvolvimento do aplicativo. Nativo vs. HTML57/3/2013 69 70. Nativo vs HTML5 um assunto polmico!!! As duas abordagens tem pontos positivos e negativos Vamos ver algumas comparaes 7/3/2013 70 71. Nativo vs HTML5: CustoNativoHTML5 7/3/201371 72. App Nativo vs HTML5Nativo HTML5 Custo X 7/3/201372 73. Nativo vs HTML5: PerformanceNativoConsegue aproveitar ao mximo os recursos do hardwareAcesso a recursos limitado pela capacidade de processamento doHTML5 Browser/Web View 7/3/201373 74. App Nativo vs HTML5Nativo HTML5 Custo XPerformance X 7/3/201374 75. Nativo vs HTML5: Tempo de DesenvolvimentoNativoHTML5 7/3/201375 76. App Nativo vs HTML5Nativo HTML5 Custo X PerformanceX Tempo de DesenvolvimentoX 7/3/201376 77. Nativo vs HTML5: DivulgaoNativoHTML5 7/3/2013 77 78. App Nativo vs HTML5Nativo HTML5CustoX PerformanceX Tempo de DesenvolvimentoX Divulgao (App Store) X7/3/2013 78 79. OK Ento eu fao um aplicativo nativo ou em HTML5???7/3/2013 79 80. A resposta : No existe resposta certa! Existe o bom senso Escolher a tecnologia que melhor atenda sua necessidade, esta aresposta correta7/3/2013 80 81. Exemplo 1Eu preciso de um aplicativo que: Liste todos os eventos da Campus Party Exiba as informaes de todos os palestrantes, como foto edescrio Mostre as perguntas frequentes sobre o evento Exiba um mapa do evento e acampamento7/3/2013 81 82. Exemplo 2:Eu preciso de um aplicativo que: O usurio possa tirar uma foto com o dispositivo Processe a imagem para aplicar diversos filtros na foto O usurio tenha a possibilidade de compartilhar essa foto por redessociais ou bluetooth7/3/201382 83. Final do Final Testar uma verso Fazer atualizaes Corrigir eventuaisbeta com os usurios para adicionar novas bugs em pontencial funcionalidades 7/3/2013 83 84. Refernciashttps://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.comThiago Tiveron@tiverontfavaro@uolinc.com7/3/2013 85 86. Obrigado ;-) Equipe de Concepo & Interface de Produtos P&DAv. Brig. Faria Lima, 1.384, 4 andar CEP 01452-002 . So Paulo/SP Telefone: 11 3914.9559www.uol.com.br7/3/201386