Palestra adaptada da apresentação feita pela DevMob no RDesign Sampa. Ministrada por Diana Fournier, Natalia Batista e Thiago Tiveron no stand do UOL no Campus Party 2013! #UOLParty

1. P&D Concepção e Interface
Projetando Mobile

2. Por que MOBILE?
4/2/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.
4/2/2013 3

4. 61%
86% 92%
manter-se
Comunicação Entretenimento
informado
72% 57% 79%
Usam redes sociais Leram notícias em jornais, Navegaram na internet
(atualizam status, verificam 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
4/2/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.
4/2/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 Leem
Música TV Internet videogames filmes livros revistas ou
jornais
4/2/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.
4/2/2013 Dados: Our Mobile Planet by Google 7

8. 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.
4/2/2013 Dados: Our Mobile Planet by Google 8

9. “…Ou seja!
MOBILE É…”
4/2/2013 9

10. “…Ou seja!
MOBILE É…”
4/2/2013 10

11. 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.
4/2/2013 11

12. Pensando mobile
Desktop
4/2/2013 12

13. Pensando mobile
Desktop
4/2/2013 13

14. Pensando mobile
Desktop
4/2/2013 14

15. Pensando mobile
Desktop
4/2/2013 15

16. Pensando mobile
Desktop
4/2/2013 16

17. Pensando mobile
Desktop
4/2/2013 17

18. Pensando mobile
Desktop
4/2/2013 18

19. Pensando mobile
Desktop
4/2/2013 19

20. Pensando mobile
Desktop
4/2/2013 20

21. Pensando mobile
Desktop
4/2/2013 21

22. Pensando mobile
Desktop
4/2/2013 22

23. Pensando mobile
Mobile
4/2/2013 23

24. Pensando mobile
Mobile
4/2/2013 24

25. Pensando mobile
Mobile
4/2/2013 25

26. Pensando mobile
Mobile
4/2/2013 26

27. Pensando mobile
Mobile
4/2/2013 27

28. Pensando mobile
Mobile
4/2/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!
4/2/2013 29

30. OK! Vamos ao projeto
mobile! :D
4/2/2013 30

31. 1
Pesquisa,
Pesquisa,
Pesquisa!
4/2/2013 31

32. Tipos de Pesquisas
• Benchmarking
• Questionários
• Entrevistas
• Pesquisa de opinião
4/2/2013 32

33. Tipos de Pesquisas: Benchmarking
4/2/2013 33

34. 2
Concepção
4/2/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.
4/2/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.
4/2/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.
4/2/2013 37

38. Concepção
4/2/2013 38

39. 3
Arquitetura
da
Informação
4/2/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).
4/2/2013 40

41. Arquitetura da Informação
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
4/2/2013 41

42. Arquitetura da Informação
4/2/2013 42

43. Arquitetura da Informação
4/2/2013 43

44. Arquitetura da Informação
4/2/2013 44

45. 4
Design
Visual
4/2/2013 45

46. Design Visual: Processo
Diagrama: Jesse James Garrett
4/2/2013 46

47. Design Visual: Processo
4/2/2013 47

48. Design Visual: Processo
• Painel visual: Conceito
4/2/2013 48

49. Design Visual: Processo
• Painel visual: Público Alvo
4/2/2013 49

50. Design Visual: Processo
• Pesquisa de referências visuais
4/2/2013 50

51. Design Visual: Processo
Forma
4/2/2013 51

52. Design Visual: Processo
Forma Cor
4/2/2013 52

53. Design Visual: Processo
Forma Cor Tipografia
4/2/2013 53

54. Design Visual: Processo
4/2/2013 54

55. Design Visual
4/2/2013 55

56. Design Visual: Processo
Forma
4/2/2013 56

57. Design Visual: Processo
Simbólico
• Ícones
Forma
4/2/2013 57

58. Design Visual: Processo
Simbólico
• Ícones
Forma Físico
• Área de toque
4/2/2013 58

59. Design Visual: Processo
Cor
4/2/2013 59

60. Design Visual: Processo
Contraste
Cor
4/2/2013 60

61. Design Visual: Processo
Contraste
Feedback
Cor
4/2/2013 61

62. Design Visual: Processo
Tipografia
4/2/2013 62

63. Design Visual: Processo
Legibilidade
Tipografia
4/2/2013 63

64. Design Visual: Processo
Legibilidade
Hierarquia
Tipografia
4/2/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
4/2/2013 65

66. Design Visual: Resoluções
• Android
4/2/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
4/2/2013 67

68. 5
Implementação
4/2/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
4/2/2013 69

70. Nativo vs HTML5
• É um assunto polêmico!!!
• As duas abordagens tem pontos positivos e negativos
• Vamos ver algumas comparações
4/2/2013 70

71. Nativo vs HTML5: Custo
Nativo
HTML5
4/2/2013 71

72. App Nativo vs HTML5
Nativo HTML5
Custo X
4/2/2013 72

73. 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
4/2/2013 73

74. App Nativo vs HTML5
Nativo HTML5
Custo X
Performance X
4/2/2013 74

75. Nativo vs HTML5: Tempo de Desenvolvimento
Nativo
HTML5
4/2/2013 75

76. App Nativo vs HTML5
Nativo HTML5
Custo X
Performance X
Tempo de Desenvolvimento X
4/2/2013 76

77. Nativo vs HTML5: Divulgação
Nativo
HTML5
4/2/2013 77

78. App Nativo vs HTML5
Nativo HTML5
Custo X
Performance X
Tempo de Desenvolvimento X
Divulgação (App Store) X
4/2/2013 78

79. OK…
Então eu faço um
aplicativo nativo ou em
HTML5???
4/2/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
4/2/2013 80

81. 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
4/2/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
4/2/2013 82

83. Final do Final
“… Testar uma versão “… Fazer atualizações
“… Corrigir eventuais
beta com os usuários para adicionar novas
bugs …”
em pontencial funcionalidades …”
…”
4/2/2013 83

84. 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/
4/2/2013 84

85. WE L VE
Diana Fournier
@_superdidi
dfounier@uolinc.com
Natalia Batista
cad_nbatista@uolinc.com
Thiago Tiveron
@tiveron
tfavaro@uolinc.com
4/2/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.br
4/2/2013 86