projetando mobile
DESCRIPTION
Palestra ministrada na área de exposições da Campus Party 2013. Apresentação feita em conjunto com Diana Medeiros Fournier e Natalia BatistaTRANSCRIPT
Projetando Mobile
P&D Concepção e Interface
13/04/2023 2
Por que MOBILE?
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.
313/04/2023
13/04/2023 4
86%Comunicação
61% manter-seinformado
92%Entretenimento
Usam redes sociais (atualizam status, verificam mensagem, visitam páginas de amigos)
72%
71%E-mails (enviaram ou receberam)
Leram notícias em jornais, portais e revistas.
57%
21%Analisaram websites, blogs e fóruns.
Navegaram na internet
79%
71%Ouviram música
46%Assistiram vídeos (Youtube)
39%Usaram jogos
Dados: Our Mobile Planet by Google
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.
513/04/2023 Dados: Our Mobile Planet by Google
Mobilidade possibilita: Interações
613/04/2023
“…88% usam
smartphones quando
…”
15%Ouvem Música
46%Assistem
TV
55%Usam aInternet
26%Leem
revistas ou jornais
15%Leem livros
29%Assistem a
filmes
18%Jogam
videogames
Dados: Our Mobile Planet by Google
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.
713/04/2023 Dados: Our Mobile Planet by Google
Mobilidade possibilita: VENDAS
• 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.
813/04/2023
Onde os anúncios para celular são mais notados
Dados: Our Mobile Planet by Google
913/04/2023
“…Ou seja! MOBILE É…”
1013/04/2023
“…Ou seja! MOBILE É…”
Pensando mobile
Contexto mobile é totalmente diferente do contexto desktop… por isso devemos pensar diferente também!
No mundo mobile (devido à limitações) todos somos daltônicos e sofremos 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.
1113/04/2023
Pensando mobile
1213/04/2023
Desktop
Pensando mobile
1313/04/2023
Desktop
Pensando mobile
1413/04/2023
Desktop
Pensando mobile
1513/04/2023
Desktop
Pensando mobile
1613/04/2023
Desktop
Pensando mobile
1713/04/2023
Desktop
Pensando mobile
1813/04/2023
Desktop
Pensando mobile
1913/04/2023
Desktop
Pensando mobile
2013/04/2023
Desktop
Pensando mobile
2113/04/2023
Desktop
Pensando mobile
2213/04/2023
Desktop
Pensando mobile
2313/04/2023
Mobile
Pensando mobile
2413/04/2023
Mobile
Pensando mobile
2513/04/2023
Mobile
Pensando mobile
2613/04/2023
Mobile
Pensando mobile
2713/04/2023
Mobile
Pensando mobile
2813/04/2023
Mobile
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!
2913/04/2023
13/04/2023 30
OK! Vamos ao projeto mobile! :D
13/04/2023 31
1Pesquisa, Pesquisa, Pesquisa!
Tipos de Pesquisas
• Benchmarking
• Questionários
• Entrevistas
• Pesquisa de opinião
3213/04/2023
Tipos de Pesquisas: Benchmarking
3313/04/2023
13/04/2023 34
2Concepção
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.
3513/04/2023
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.
3613/04/2023
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.
3713/04/2023
Concepção
3813/04/2023
13/04/2023 39
3Arquitetura
da Informação
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).
4013/04/2023
Arquitetura da Informação
Guidelines existentes:
• Android http://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/design
4113/04/2023
Arquitetura da Informação
4213/04/2023
Arquitetura da Informação
4313/04/2023
Arquitetura da Informação
4413/04/2023
13/04/2023 45
4DesignVisual
Design Visual: Processo
4613/04/2023
Diagrama: Jesse James Garrett
Design Visual: Processo
4713/04/2023
Design Visual: Processo
• Painel visual: Conceito
4813/04/2023
Design Visual: Processo
• Painel visual: Público Alvo
4913/04/2023
Design Visual: Processo
• Pesquisa de referências visuais
5013/04/2023
Design Visual: Processo
5113/04/2023
Forma
Design Visual: Processo
5213/04/2023
Forma Cor
Design Visual: Processo
5313/04/2023
Forma Cor Tipografia
Design Visual: Processo
5413/04/2023
?
Design Visual
5513/04/2023
Design Visual: Processo
5613/04/2023
Forma
Design Visual: Processo
5713/04/2023
Forma
Simbólico• Ícones
Design Visual: Processo
5813/04/2023
Forma
Simbólico
Físico
• Ícones
• Área de toque
Design Visual: Processo
5913/04/2023
Cor
Design Visual: Processo
6013/04/2023
Contraste
Cor
Design Visual: Processo
6113/04/2023
Contraste
Feedback
Cor
Design Visual: Processo
6213/04/2023
Tipografia
Design Visual: Processo
6313/04/2023
Legibilidade
Tipografia
Design Visual: Processo
6413/04/2023
Legibilidade
Hierarquia
Tipografia
Design Visual: Resoluções
• IOS: iPhone
6513/04/2023
iPhones 4 e 4s 640 px x 960 px iPhones 5: 640 px x 1136 px
Design Visual: Resoluções
• Android
6613/04/2023
Design Visual
6713/04/2023
“ 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
13/04/2023 68
5Implementação
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
6913/04/2023
Nativo vs HTML5
7013/04/2023
• É um assunto polêmico!!!
• As duas abordagens tem pontos positivos e negativos
• Vamos ver algumas comparações
Nativo vs HTML5: Custo
7113/04/2023
Nativo
HTML5
App Nativo vs HTML5
7213/04/2023
Nativo HTML5
Custo X
Nativo vs HTML5: Performance
7313/04/2023
Nativo
HTML5
Consegue aproveitar ao máximo os recursos do hardware
Acesso a recursos é limitado pela capacidade de processamento do Browser/Web View
App Nativo vs HTML5
7413/04/2023
Nativo HTML5
Custo X
Performance X
Nativo vs HTML5: Tempo de Desenvolvimento
7513/04/2023
Nativo
HTML5
App Nativo vs HTML5
7613/04/2023
Nativo HTML5
Custo X
Performance X
Tempo de Desenvolvimento X
Nativo vs HTML5: Divulgação
7713/04/2023
Nativo
HTML5
App Nativo vs HTML5
7813/04/2023
Nativo HTML5
Custo X
Performance X
Tempo de Desenvolvimento X
Divulgação (App Store) X
13/04/2023 79
OK…Então eu faço um aplicativo nativo ou em HTML5???
A resposta é:
8013/04/2023
• Não existe resposta certa!
• Existe o bom senso
• Escolher a tecnologia que melhor atenda sua necessidade, esta é a resposta correta
Exemplo 1
Eu 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
8113/04/2023
Exemplo 2:
8213/04/2023
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
Final do Final
8313/04/2023
“… Testar uma versão beta com os usuários
em pontencial…”
“… Corrigir eventuais bugs …”
“… Fazer atualizações para adicionar novas funcionalidades …”
Referências
8413/04/2023
https://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdf
http://www.slideshare.net/horacio.soares/mobile-first-w3c-webbr-2012
http://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/
8513/04/2023
WE L VE Diana Fournier@[email protected]
Natalia [email protected]
Thiago Tiveron@[email protected]
Av. Brig. Faria Lima, 1.384, 4º andarCEP 01452-002 . São Paulo/SP
Telefone: 11 3914.9559 www.uol.com.br
13/04/2023 86
Obrigado ;-)Equipe de Concepção & Interface de Produtos – P&D