MOBILE USER

EXPERIENCE!

Compilando pessoas e codificando cores!

Pedro Albuquerque!
UX Senior Visual Designer!
Telefonica...
O que veremos
hoje?!
01 // Vantagens e limitações dos dispositivos móveis!
02 // Atributos importantes para se criar uma boa !
experiência mobi...
POR QUÊ ESTOU AQUI?!
Você quer que seu aplicativo seja
apresentável sem a intervenção de um
“designer”.!
!
Você quer ser c...
BOA NOTÍCIA :)!
Com algum tempo e alguns
truques você consegue,
especialmente para
aplicativos.!
Por onde
começar?!
Um smartphone não é PC!
Um smartphone não é PC!

Sentado em um ambiente previsível.!
!
Tela maior favorece multi-tasking.!
!
Teclado e mouse como ...
Um smartphone não é PC!
Um smartphone não é PC!
Meio ambiente com contextos variáveis.!
!
Tela menor e espaço limitado para input de texto.!
!
A i...
Smartphones não são mais
apenas telefones!
Aplicativos móveis nos
apresentam uma oportunidade
de inventar novas formas das
pessoas interagirem com a
informação.!
O que nos liberta para atuar fora
dos limites das suas hipóteses!
Qual o primeiro
passo?!
Saiba com quem você está
falando!
Cultive uma mentalidade
“móvel”!
Abrace o caos!
Como criar uma
grande experiência
mobile?!
1!

Faça com seja
essencialmente
mobile!
Foque no que ele faz melhor!
Tecnologia pode guiar, mas não
deve ser o foco!
Foco na necessidade!
Na prática:!

Técnicas de pesquisa!
INVASIVA!
Estudo de !
privação!

PESQUISADOR !
AUSENTE!

Teste de !
protótipo!

Estudo...
2!

Faça com seja
relacionada ao seu
contexto!
Contexto é compreender as
relações humanas que
ocorrem entre pessoas,
lugares e objetos no mundo.!
Framework de contexto!
Orquestração e inflexão!
Como atingimos essa
compreensão?!
Lembre-se de interrupções e
atenção parcial!
Reduza a carga cognitiva!
Faça pesquisa de campo!
Na prática:!

Divida-se em grupos!
Na prática:!

Vá para a rua!
Na prática:!

Crie 2-3 conceitos com base na
necessidade que sua equipe identificou!
Na prática:!

Faça sketchs das suas ideias!
3!

Enfatize sua
utilidade e
funcionalidade!
Entenda as possíveis
características de UI!

h"p://www.lukew.com/ff/entry.asp?1071	
  
Conheça as capacidades
técnicas dos dispositivos!
Direção: através de um compasso digital!
Giroscópio: movimento 360o!
Áud...
Amadureça sua capacidade de
renúncia!
Diga adeus ao “tá pronto”!
Mostre de cara as
possibilidades de tarefas da
sua aplicação.!
Dentro do aplicativo temos
tarefas!
Mas também temos possibilidades
de tarefas que podem ser realizadas!
X!
Como definir essas
possibilidades?!
Na prática:!

Desenhando telas!

“O que as
pessoas acham
deste lugar?”
Na prática:!

Desenhando telas!
Agrupe os cards de
maneira a responder a
pergunta.

Permita que as
pessoas validem suas
hi...
Na prática:!

Prototipe em cada estágio!
Sketch &!
Storyboard!

Baixa !
fidelidade!

Prototipação !
no papel!

Alta !
fideli...
Na prática:!

Loop de prototipação!

Validar!
Construir/
Criar!

Refinar!
Na prática:!

Validando hipóteses!
Os usuários entendem isso?!
!

Está perceptível a função de cada tela?!
!
!

Posso simp...
Na prática:!

Dicas para prototipação!
Planeje fazer muitos protótipos!
!
!

Trabalhe em escala e imprima tudo.!
Teste no ...
Consistência
visual!
ou como deixar meu aplicativo bonito!
Se você é um desenvolvedor,
logo:!
Usa seu editor de código e provavelmente nunca
abriu um Photoshop ou Illustrator (só ob...
Boa interface !

=!
Mesmos princípios!
!
Web developer / System developer / Java / Ruby / iOS / CSS!
Princípios de User Experience!

Simplicidade!
!
Consistência!
!
Navegação intuitiva!
Regra do dedão!
Orientação do dispositivo!
Conheça os padrões de
interação!
Navegação / Abas / Galeria de
imagens / Menu gaveta / Botão
voltar / Botões de ação / Ata...
Diferentes estilos de interface!
Interface nativa x customizada?!
Explore as diversas possibildiades
de identidade visual!

h"p://androidnice=es.tumblr.com/	
  
Explore as diversas possibildiades
de identidade visual!

h"p://p"rns.com/	
  
Launch icon!
Android!
!
iOS!
!
Windows Phone!
Ícones dentro da aplicação!
Sobre o uso de ícones!
Invista em um bom set de ícones.!
!
Pixel icons são bons para aplicações web.!
!
FamFamFam é um bom...
Grid: Android!
Grid: iOS!
Grid: Windows Phone!
Lei da Proximidade!

A proximidade espacial ou temporal de elementos pode
induzir a mente a perceber um coletivo ou totali...
Tipografia!
Legibilidade!
Tamanho!
Espaçamento!
Entrelinha!
Largura da coluna!
Contraste!
Legibilidade e resolução!
Tamanho mínimo!
Cuidado ao escolher a fonte!
Por isso existem fontes padrão!
Tamanho mínimo: só testando!
h"p://type-­‐scale.com/	
  
h"p://www.google.com/fonts	
  
O segredo das cores!
Escolhendo cores!

h"p://www.colourlovers.com/	
  
Escolha 3 cores: menos é mais!

Títulos!

H1, h2, h3, h4{ color: # 000} !

!
Corpo de texto!
Body { color: # 333}!

!
Text...
Você escolheu a cor de fundo
verde!

E criou uma caixa.

O	
  Texto	
  da	
  caixa	
  pode	
  ser	
  uma	
  versão	
  mais...
Combinando cores!

Títulos!

H1, h2, h3, h4{ color: # 000} !

!
Corpo de texto!
Body { color: # 333}!

!
Texto tênue!
.mut...
Combinando cores!
Título #000.

Corpo de texto #333 Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do
eiusm...
Combinando cores!
Título.

Corpo de texto lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod
tempor ...
Grid + Tipografia + Cores =
Hierarquia e contraste!
Detalhes tão pequenos…!
Escondidinho!
Interface animada!
Design reutilizável!
Assim como temos funções
que reutilizamos em código,
também temos ferramentas
que podemos utilizar para criar
elementos vi...
h"p://getbootstrap.com/	
  
h"p://founda=on.zurb.com/	
  
Considerações
finais!
Ufa!!
Seja consistente!
Não coloque tudo na mesma
tela.!
O tom de voz faz toda
diferença.!
Obrigado :)!

Pedro Albuquerque!
@pedroaborges!
pedro.albuquerque@gmail.com!
www.pedroalbuca.com!
Referências úteis!
This is Service Design Thinking:!
http://thisisservicedesignthinking.com/!
!

Design Thinking - Inovaçã...
UX Archive:!
http://www.uxarchive.com/!
!

Pttrns:!
http://pttrns.com/!
!

Android Niceties:!
http://androidniceties.tumbl...
Mobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando cores
Próximos SlideShares
Carregando em…5
×

Mobile User Experience: Compilando pessoas e codificando cores

1.086 visualizações

Publicada em

Palestra apresentada no palco Pitágoras na edição 2014 da Campus Party em São Paulo.

Publicada em: Design
1 comentário
1 gostou
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
1.086
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
18
Comentários
1
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Mobile User Experience: Compilando pessoas e codificando cores

  1. 1. MOBILE USER EXPERIENCE! Compilando pessoas e codificando cores! Pedro Albuquerque! UX Senior Visual Designer! Telefonica Digital UX Team! São Paulo, Brasil!
  2. 2. O que veremos hoje?!
  3. 3. 01 // Vantagens e limitações dos dispositivos móveis! 02 // Atributos importantes para se criar uma boa ! experiência mobile.! 03 // Princípios do design para criação de aplicativos.! 04 // Exercícios de UX para criação de serviços mobile.! ! 05 // Dicas e melhores práticas de implementação de ! interface!
  4. 4. POR QUÊ ESTOU AQUI?! Você quer que seu aplicativo seja apresentável sem a intervenção de um “designer”.! ! Você quer ser capaz de criar aplicativos por sua própria conta, ou somente com uma equipe de desenvolvedores.!
  5. 5. BOA NOTÍCIA :)! Com algum tempo e alguns truques você consegue, especialmente para aplicativos.!
  6. 6. Por onde começar?!
  7. 7. Um smartphone não é PC!
  8. 8. Um smartphone não é PC! Sentado em um ambiente previsível.! ! Tela maior favorece multi-tasking.! ! Teclado e mouse como input.!
  9. 9. Um smartphone não é PC!
  10. 10. Um smartphone não é PC! Meio ambiente com contextos variáveis.! ! Tela menor e espaço limitado para input de texto.! ! A interface do usuário ocupa a tela toda.! ! Dificuldade em multi-task e fácil se perder.!
  11. 11. Smartphones não são mais apenas telefones!
  12. 12. Aplicativos móveis nos apresentam uma oportunidade de inventar novas formas das pessoas interagirem com a informação.!
  13. 13. O que nos liberta para atuar fora dos limites das suas hipóteses!
  14. 14. Qual o primeiro passo?!
  15. 15. Saiba com quem você está falando!
  16. 16. Cultive uma mentalidade “móvel”!
  17. 17. Abrace o caos!
  18. 18. Como criar uma grande experiência mobile?!
  19. 19. 1! Faça com seja essencialmente mobile!
  20. 20. Foque no que ele faz melhor!
  21. 21. Tecnologia pode guiar, mas não deve ser o foco!
  22. 22. Foco na necessidade!
  23. 23. Na prática:! Técnicas de pesquisa! INVASIVA! Estudo de ! privação! PESQUISADOR ! AUSENTE! Teste de ! protótipo! Estudo de ! diário! Entrevista ! contextual! Pesquisa online! Shadowing! Estudos de ! tráfego! Shop Alongs! MENOS INVASIVA! PESQUISADOR! PRESENTE!
  24. 24. 2! Faça com seja relacionada ao seu contexto!
  25. 25. Contexto é compreender as relações humanas que ocorrem entre pessoas, lugares e objetos no mundo.!
  26. 26. Framework de contexto!
  27. 27. Orquestração e inflexão!
  28. 28. Como atingimos essa compreensão?!
  29. 29. Lembre-se de interrupções e atenção parcial!
  30. 30. Reduza a carga cognitiva!
  31. 31. Faça pesquisa de campo!
  32. 32. Na prática:! Divida-se em grupos!
  33. 33. Na prática:! Vá para a rua!
  34. 34. Na prática:! Crie 2-3 conceitos com base na necessidade que sua equipe identificou!
  35. 35. Na prática:! Faça sketchs das suas ideias!
  36. 36. 3! Enfatize sua utilidade e funcionalidade!
  37. 37. Entenda as possíveis características de UI! h"p://www.lukew.com/ff/entry.asp?1071  
  38. 38. Conheça as capacidades técnicas dos dispositivos! Direção: através de um compasso digital! Giroscópio: movimento 360o! Áudio: microfone ou caixa de som! Vídeo e Imagem: captura e download! Dual camera: câmeras na frente e atrás! Conexões do dispositivo: como Bluetooth! Proximidade: proximidade com outros objetos! Luz ambiente: percepçãp de claro/escuro no ambiente! NFC: Near Field Communications através de frequência de rádio!
  39. 39. Amadureça sua capacidade de renúncia!
  40. 40. Diga adeus ao “tá pronto”!
  41. 41. Mostre de cara as possibilidades de tarefas da sua aplicação.!
  42. 42. Dentro do aplicativo temos tarefas!
  43. 43. Mas também temos possibilidades de tarefas que podem ser realizadas!
  44. 44. X!
  45. 45. Como definir essas possibilidades?!
  46. 46. Na prática:! Desenhando telas! “O que as pessoas acham deste lugar?”
  47. 47. Na prática:! Desenhando telas! Agrupe os cards de maneira a responder a pergunta. Permita que as pessoas validem suas hipóteses de maneira rápida.
  48. 48. Na prática:! Prototipe em cada estágio! Sketch &! Storyboard! Baixa ! fidelidade! Prototipação ! no papel! Alta ! fidelidade!
  49. 49. Na prática:! Loop de prototipação! Validar! Construir/ Criar! Refinar!
  50. 50. Na prática:! Validando hipóteses! Os usuários entendem isso?! ! Está perceptível a função de cada tela?! ! ! Posso simplificar isso?! É intuitivo?!
  51. 51. Na prática:! Dicas para prototipação! Planeje fazer muitos protótipos! ! ! Trabalhe em escala e imprima tudo.! Teste no dispositivo o mais rápido o possível.!
  52. 52. Consistência visual! ou como deixar meu aplicativo bonito!
  53. 53. Se você é um desenvolvedor, logo:! Usa seu editor de código e provavelmente nunca abriu um Photoshop ou Illustrator (só obrigado).! ! Você escreve scripts para resolver problemas.! ! Você adora o seu terminal e seu banco de dados, mas nem tanto sua régua ou paleta de cores (se você tiver isso).!
  54. 54. Boa interface ! =! Mesmos princípios! ! Web developer / System developer / Java / Ruby / iOS / CSS!
  55. 55. Princípios de User Experience! Simplicidade! ! Consistência! ! Navegação intuitiva!
  56. 56. Regra do dedão!
  57. 57. Orientação do dispositivo!
  58. 58. Conheça os padrões de interação! Navegação / Abas / Galeria de imagens / Menu gaveta / Botão voltar / Botões de ação / Atalhos / Compartilhar / Busca / Listas / Caixa de diálogo / Notificações / Inseri dados / Gestos!
  59. 59. Diferentes estilos de interface!
  60. 60. Interface nativa x customizada?!
  61. 61. Explore as diversas possibildiades de identidade visual! h"p://androidnice=es.tumblr.com/  
  62. 62. Explore as diversas possibildiades de identidade visual! h"p://p"rns.com/  
  63. 63. Launch icon! Android! ! iOS! ! Windows Phone!
  64. 64. Ícones dentro da aplicação!
  65. 65. Sobre o uso de ícones! Invista em um bom set de ícones.! ! Pixel icons são bons para aplicações web.! ! FamFamFam é um bom começo.! ! Somente use ícones quando este for familiar, do contrário utilize o ícone padrão, ou texto + ícone!
  66. 66. Grid: Android!
  67. 67. Grid: iOS!
  68. 68. Grid: Windows Phone!
  69. 69. Lei da Proximidade! A proximidade espacial ou temporal de elementos pode induzir a mente a perceber um coletivo ou totalidade.!
  70. 70. Tipografia! Legibilidade! Tamanho! Espaçamento! Entrelinha! Largura da coluna! Contraste!
  71. 71. Legibilidade e resolução!
  72. 72. Tamanho mínimo!
  73. 73. Cuidado ao escolher a fonte!
  74. 74. Por isso existem fontes padrão!
  75. 75. Tamanho mínimo: só testando!
  76. 76. h"p://type-­‐scale.com/  
  77. 77. h"p://www.google.com/fonts  
  78. 78. O segredo das cores!
  79. 79. Escolhendo cores! h"p://www.colourlovers.com/  
  80. 80. Escolha 3 cores: menos é mais! Títulos! H1, h2, h3, h4{ color: # 000} ! ! Corpo de texto! Body { color: # 333}! ! Texto tênue! .muted { color: # 666}!
  81. 81. Você escolheu a cor de fundo verde! E criou uma caixa. O  Texto  da  caixa  pode  ser  uma  versão  mais  clara   da  cor  do  background,  não  branca  nem  cinza.  
  82. 82. Combinando cores! Títulos! H1, h2, h3, h4{ color: # 000} ! ! Corpo de texto! Body { color: # 333}! ! Texto tênue! .muted { color: # 666}!
  83. 83. Combinando cores! Título #000. Corpo de texto #333 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. #666 Copyright texto tênue
  84. 84. Combinando cores! Título. Corpo de texto lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Copyright texto tênue
  85. 85. Grid + Tipografia + Cores = Hierarquia e contraste!
  86. 86. Detalhes tão pequenos…!
  87. 87. Escondidinho!
  88. 88. Interface animada!
  89. 89. Design reutilizável!
  90. 90. Assim como temos funções que reutilizamos em código, também temos ferramentas que podemos utilizar para criar elementos visuais consistentes. !
  91. 91. h"p://getbootstrap.com/  
  92. 92. h"p://founda=on.zurb.com/  
  93. 93. Considerações finais! Ufa!!
  94. 94. Seja consistente!
  95. 95. Não coloque tudo na mesma tela.!
  96. 96. O tom de voz faz toda diferença.!
  97. 97. Obrigado :)! Pedro Albuquerque! @pedroaborges! pedro.albuquerque@gmail.com! www.pedroalbuca.com!
  98. 98. Referências úteis! This is Service Design Thinking:! http://thisisservicedesignthinking.com/! ! Design Thinking - Inovação em Negócios:! http://livrodesignthinking.com.br/! ! Mobile First:! http://www.abookapart.com/products/mobile-first! ! Touch Gesture Reference Guide:! http://www.lukew.com/ff/entry.asp?1071! ! Multi-device Layout Patterns:! http://www.lukew.com/ff/entry.asp?1514! ! Designing Mobile Apps:! http://www.appdesignbook.com/! ! ! Mobile UX Essentials:! http://www.slideshare.net/Rachel_Hinman/mobile-ux-essentials! Hackdesign.org:! http://hackdesign.org/!
  99. 99. UX Archive:! http://www.uxarchive.com/! ! Pttrns:! http://pttrns.com/! ! Android Niceties:! http://androidniceties.tumblr.com/! ! Android Pttrns:! http://androidpttrns.com/! ! iOS Human Interface Guidelines:! https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/! ! Design | Android Developers:! http://developer.android.com/design/index.html! ! Android UI Design Kit for PS and GIMP:! http://androiduiux.com/2013/10/04/android-ui-design-kit-for-photoshop-and-gimp-4-3-free-download/! ! iOS7 GUI PSD (iPhone):! http://www.teehanlax.com/tools/iphone/! ! Colour lovers:! http://www.colourlovers.com/! ! Adobe Kuler:! https://kuler.adobe.com/! ! ! Color Scheme Designer:! http://colorschemedesigner.com/! Flat design vs. Realism:! http://www.flatvsrealism.com/!

×