Projetando Mobile

P&D Concepção e Interface

Projetando 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 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

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 jogos

7/3/2013 Dados: Our Mobile Planet by Google 4

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.


Mobilidade possibilita: Interações

“…
88% usam
smartphones
quando
…”

15% 46% 55% 18% 29% 15% 26%
Ouvem Assistem Usam a Jogam Assistem a Leem Leem
Música TV Internet videogames filmes livros revistas ou
jornais


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.


Mobilidade possibilita: VENDAS
Onde 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.


“…Ou seja!
MOBILE É…”

7/3/2013 9

“…Ou seja!
MOBILE É…”

7/3/2013 10

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.

7/3/2013 11

Pensando mobile

Desktop

7/3/2013 12

Pensando mobile

Desktop

7/3/2013 13

Pensando mobile

Desktop

7/3/2013 14

Pensando mobile

Desktop

7/3/2013 15

Pensando mobile

Desktop

7/3/2013 16

Pensando mobile

Desktop

7/3/2013 17

Pensando mobile

Desktop

7/3/2013 18

Pensando mobile

Desktop

7/3/2013 19

Pensando mobile

Desktop

7/3/2013 20

Pensando mobile

Desktop

7/3/2013 21

Pensando mobile

Desktop

7/3/2013 22

Pensando mobile

Mobile

7/3/2013 23

Pensando mobile

Mobile

7/3/2013 24

Pensando mobile

Mobile

7/3/2013 25

Pensando mobile

Mobile

7/3/2013 26

Pensando mobile

Mobile

7/3/2013 27

Pensando mobile

Mobile

7/3/2013 28

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

OK! Vamos ao projeto
mobile! :D

7/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ção

7/3/2013 34

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

Concepção

• Momento VIAGEM!

• Brainstorms



7/3/2013 36

Concepção

• Momento VIAGEM!

• Brainstorms



7/3/2013 37

Concepção

7/3/2013 38

3
Arquitetura
da
Informação

7/3/2013 39

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


Guidelines 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


7/3/2013 42


7/3/2013 43


7/3/2013 44

4
Design
Visual

7/3/2013 45

Design Visual: Processo

Diagrama: Jesse James Garrett
7/3/2013 46


7/3/2013 47

• Painel visual: Conceito

7/3/2013 48

• Painel visual: Público Alvo

7/3/2013 49

• Pesquisa de referências visuais

7/3/2013 50


Forma

7/3/2013 51


Forma Cor

7/3/2013 52


Forma Cor Tipografia

7/3/2013 53


7/3/2013 54

Design Visual

7/3/2013 55


Forma

7/3/2013 56


Simbólico
• Ícones

Forma

7/3/2013 57


Simbólico
• Ícones

Forma Físico
• Área de toque

7/3/2013 58


Cor

7/3/2013 59


Contraste

Cor

7/3/2013 60


Contraste

Feedback
Cor

7/3/2013 61


Tipografia

7/3/2013 62


Legibilidade

Tipografia

7/3/2013 63


Legibilidade

Hierarquia
Tipografia

7/3/2013 64

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

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

5
Implementação

7/3/2013 68

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

Nativo vs HTML5

• É um assunto polêmico!!!

• As duas abordagens tem pontos positivos e negativos

• Vamos ver algumas comparações

7/3/2013 70

Nativo vs HTML5: Custo

Nativo

HTML5

7/3/2013 71

App Nativo vs HTML5

Nativo HTML5
Custo X

7/3/2013 72

Nativo vs HTML5: Performance

Nativo Consegue aproveitar ao máximo os recursos do hardware

Acesso a recursos é limitado pela capacidade de processamento do
HTML5 Browser/Web View

7/3/2013 73

App Nativo vs HTML5

Nativo HTML5
Custo X

Performance X

7/3/2013 74

Nativo vs HTML5: Tempo de Desenvolvimento

Nativo

HTML5

7/3/2013 75

App Nativo vs HTML5

Nativo HTML5
Custo X

Performance X

Tempo de Desenvolvimento X

7/3/2013 76

Nativo vs HTML5: Divulgação

Nativo

HTML5

7/3/2013 77

App Nativo vs HTML5

Nativo HTML5
Custo X

Performance X

Tempo de Desenvolvimento X

Divulgação (App Store) X

7/3/2013 78

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, esta é a
resposta correta

7/3/2013 80

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

7/3/2013 81

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

Final do Final

“… Testar uma versão “… Fazer atualizações
“… Corrigir eventuais
beta com os usuários para adicionar novas
bugs …”
em pontencial funcionalidades …”
…”

7/3/2013 83

Referências

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/

7/3/2013 84

WE L VE
Diana Fournier
@_superdidi
dfounier@uolinc.com

Natalia Batista
cad_nbatista@uolinc.com

Thiago Tiveron
@tiveron
tfavaro@uolinc.com

7/3/2013 85

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.br

7/3/2013 86

Projetando Mobile

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Projetando Mobile

Semelhante a Projetando Mobile (20)

Último

Último (8)

Projetando Mobile