projetando mobile

86
Projetando Mobile P&D Concepção e Interface

Upload: thiago-tiveron

Post on 06-Jun-2015

501 views

Category:

Technology


1 download

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

Page 1: Projetando Mobile

Projetando Mobile

P&D Concepção e Interface

Page 2: Projetando Mobile

13/04/2023 2

Por que MOBILE?

Page 3: Projetando 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

Page 4: Projetando Mobile

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

Page 5: Projetando Mobile

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

Page 6: Projetando Mobile

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

Page 7: Projetando Mobile

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

Page 8: Projetando Mobile

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

Page 9: Projetando Mobile

913/04/2023

“…Ou seja! MOBILE É…”

Page 10: Projetando Mobile

1013/04/2023

“…Ou seja! MOBILE É…”

Page 11: Projetando 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

Page 12: Projetando Mobile

Pensando mobile

1213/04/2023

Desktop

Page 13: Projetando Mobile

Pensando mobile

1313/04/2023

Desktop

Page 14: Projetando Mobile

Pensando mobile

1413/04/2023

Desktop

Page 15: Projetando Mobile

Pensando mobile

1513/04/2023

Desktop

Page 16: Projetando Mobile

Pensando mobile

1613/04/2023

Desktop

Page 17: Projetando Mobile

Pensando mobile

1713/04/2023

Desktop

Page 18: Projetando Mobile

Pensando mobile

1813/04/2023

Desktop

Page 19: Projetando Mobile

Pensando mobile

1913/04/2023

Desktop

Page 20: Projetando Mobile

Pensando mobile

2013/04/2023

Desktop

Page 21: Projetando Mobile

Pensando mobile

2113/04/2023

Desktop

Page 22: Projetando Mobile

Pensando mobile

2213/04/2023

Desktop

Page 23: Projetando Mobile

Pensando mobile

2313/04/2023

Mobile

Page 24: Projetando Mobile

Pensando mobile

2413/04/2023

Mobile

Page 25: Projetando Mobile

Pensando mobile

2513/04/2023

Mobile

Page 26: Projetando Mobile

Pensando mobile

2613/04/2023

Mobile

Page 27: Projetando Mobile

Pensando mobile

2713/04/2023

Mobile

Page 28: Projetando Mobile

Pensando mobile

2813/04/2023

Mobile

Page 29: Projetando 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

Page 30: Projetando Mobile

13/04/2023 30

OK! Vamos ao projeto mobile! :D

Page 31: Projetando Mobile

13/04/2023 31

1Pesquisa, Pesquisa, Pesquisa!

Page 32: Projetando Mobile

Tipos de Pesquisas

• Benchmarking

• Questionários

• Entrevistas

• Pesquisa de opinião

3213/04/2023

Page 33: Projetando Mobile

Tipos de Pesquisas: Benchmarking

3313/04/2023

Page 34: Projetando Mobile

13/04/2023 34

2Concepção

Page 35: Projetando Mobile

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

Page 36: Projetando Mobile

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

Page 37: Projetando Mobile

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

Page 38: Projetando Mobile

Concepção

3813/04/2023

Page 39: Projetando Mobile

13/04/2023 39

3Arquitetura

da Informação

Page 40: Projetando Mobile

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

Page 41: Projetando Mobile

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

Page 42: Projetando Mobile

Arquitetura da Informação

4213/04/2023

Page 43: Projetando Mobile

Arquitetura da Informação

4313/04/2023

Page 44: Projetando Mobile

Arquitetura da Informação

4413/04/2023

Page 45: Projetando Mobile

13/04/2023 45

4DesignVisual

Page 46: Projetando Mobile

Design Visual: Processo

4613/04/2023

Diagrama: Jesse James Garrett

Page 47: Projetando Mobile

Design Visual: Processo

4713/04/2023

Page 48: Projetando Mobile

Design Visual: Processo

• Painel visual: Conceito

4813/04/2023

Page 49: Projetando Mobile

Design Visual: Processo

• Painel visual: Público Alvo

4913/04/2023

Page 50: Projetando Mobile

Design Visual: Processo

• Pesquisa de referências visuais

5013/04/2023

Page 51: Projetando Mobile

Design Visual: Processo

5113/04/2023

Forma

Page 52: Projetando Mobile

Design Visual: Processo

5213/04/2023

Forma Cor

Page 53: Projetando Mobile

Design Visual: Processo

5313/04/2023

Forma Cor Tipografia

Page 54: Projetando Mobile

Design Visual: Processo

5413/04/2023

?

Page 55: Projetando Mobile

Design Visual

5513/04/2023

Page 56: Projetando Mobile

Design Visual: Processo

5613/04/2023

Forma

Page 57: Projetando Mobile

Design Visual: Processo

5713/04/2023

Forma

Simbólico• Ícones

Page 58: Projetando Mobile

Design Visual: Processo

5813/04/2023

Forma

Simbólico

Físico

• Ícones

• Área de toque

Page 59: Projetando Mobile

Design Visual: Processo

5913/04/2023

Cor

Page 60: Projetando Mobile

Design Visual: Processo

6013/04/2023

Contraste

Cor

Page 61: Projetando Mobile

Design Visual: Processo

6113/04/2023

Contraste

Feedback

Cor

Page 62: Projetando Mobile

Design Visual: Processo

6213/04/2023

Tipografia

Page 63: Projetando Mobile

Design Visual: Processo

6313/04/2023

Legibilidade

Tipografia

Page 64: Projetando Mobile

Design Visual: Processo

6413/04/2023

Legibilidade

Hierarquia

Tipografia

Page 65: Projetando Mobile

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

Page 66: Projetando Mobile

Design Visual: Resoluções

• Android

6613/04/2023

Page 67: Projetando Mobile

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

Page 68: Projetando Mobile

13/04/2023 68

5Implementação

Page 69: Projetando Mobile

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

Page 70: Projetando Mobile

Nativo vs HTML5

7013/04/2023

• É um assunto polêmico!!!

• As duas abordagens tem pontos positivos e negativos

• Vamos ver algumas comparações

Page 71: Projetando Mobile

Nativo vs HTML5: Custo

7113/04/2023

Nativo

HTML5

Page 72: Projetando Mobile

App Nativo vs HTML5

7213/04/2023

Nativo HTML5

Custo X

Page 73: Projetando Mobile

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

Page 74: Projetando Mobile

App Nativo vs HTML5

7413/04/2023

Nativo HTML5

Custo X

Performance X

Page 75: Projetando Mobile

Nativo vs HTML5: Tempo de Desenvolvimento

7513/04/2023

Nativo

HTML5

Page 76: Projetando Mobile

App Nativo vs HTML5

7613/04/2023

Nativo HTML5

Custo X

Performance X

Tempo de Desenvolvimento X

Page 77: Projetando Mobile

Nativo vs HTML5: Divulgação

7713/04/2023

Nativo

HTML5

Page 78: Projetando Mobile

App Nativo vs HTML5

7813/04/2023

Nativo HTML5

Custo X

Performance X

Tempo de Desenvolvimento X

Divulgação (App Store) X

Page 79: Projetando Mobile

13/04/2023 79

OK…Então eu faço um aplicativo nativo ou em HTML5???

Page 80: Projetando Mobile

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

Page 81: Projetando Mobile

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

Page 82: Projetando Mobile

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

Page 83: Projetando Mobile

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 …”

Page 84: Projetando Mobile

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/

Page 85: Projetando Mobile

8513/04/2023

WE L VE Diana Fournier@[email protected]

Natalia [email protected]

Thiago Tiveron@[email protected]

Page 86: Projetando Mobile

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