Mobile User Experience: Compilando pessoas e codificando cores
•
1 gostou•1,311 visualizações
Palestra apresentada no palco Pitágoras na edição 2014 da Campus Party em São Paulo.
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a Mobile User Experience: Compilando pessoas e codificando cores
Semelhante a Mobile User Experience: Compilando pessoas e codificando cores (20)
Mobile User Experience: Compilando pessoas e codificando cores
- 1. MOBILE USER EXPERIENCE! Compilando pessoas e codificando cores! Pedro Albuquerque! UX Senior Visual Designer! Telefonica Digital UX Team! São Paulo, Brasil!
- 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. 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. BOA NOTÍCIA :)! Com algum tempo e alguns truques você consegue, especialmente para aplicativos.!
- 7. Um smartphone não é PC!
- 8. Um smartphone não é PC! Sentado em um ambiente previsível.! ! Tela maior favorece multi-tasking.! ! Teclado e mouse como input.!
- 9. Um smartphone não é PC!
- 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. Smartphones não são mais apenas telefones!
- 12. Aplicativos móveis nos apresentam uma oportunidade de inventar novas formas das pessoas interagirem com a informação.!
- 13. O que nos liberta para atuar fora dos limites das suas hipóteses!
- 15. Saiba com quem você está falando!
- 17. Abrace o caos!
- 18. Como criar uma grande experiência mobile?!
- 20. Foque no que ele faz melhor!
- 21. Tecnologia pode guiar, mas não deve ser o foco!
- 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. 2! Faça com seja relacionada ao seu contexto!
- 25. Contexto é compreender as relações humanas que ocorrem entre pessoas, lugares e objetos no mundo.!
- 29. Lembre-se de interrupções e atenção parcial!
- 30. Reduza a carga cognitiva!
- 31. Faça pesquisa de campo!
- 32. Na prática:! Divida-se em grupos!
- 33. Na prática:! Vá para a rua!
- 34. Na prática:! Crie 2-3 conceitos com base na necessidade que sua equipe identificou!
- 35. Na prática:! Faça sketchs das suas ideias!
- 37. Entenda as possíveis características de UI! h"p://www.lukew.com/ff/entry.asp?1071
- 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. Amadureça sua capacidade de renúncia!
- 40. Diga adeus ao “tá pronto”!
- 41. Mostre de cara as possibilidades de tarefas da sua aplicação.!
- 42. Dentro do aplicativo temos tarefas!
- 43. Mas também temos possibilidades de tarefas que podem ser realizadas!
- 44. X!
- 48. Na prática:! Desenhando telas! “O que as pessoas acham deste lugar?”
- 49. 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.
- 50. Na prática:! Prototipe em cada estágio! Sketch &! Storyboard! Baixa ! fidelidade! Prototipação ! no papel! Alta ! fidelidade!
- 51. Na prática:! Loop de prototipação! Validar! Construir/ Criar! Refinar!
- 52. Na prática:! Validando hipóteses! Os usuários entendem isso?! ! Está perceptível a função de cada tela?! ! ! Posso simplificar isso?! É intuitivo?!
- 53. 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.!
- 54. Consistência visual! ou como deixar meu aplicativo bonito!
- 55. 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).!
- 56. Boa interface ! =! Mesmos princípios! ! Web developer / System developer / Java / Ruby / iOS / CSS!
- 60. Princípios de User Experience! Simplicidade! ! Consistência! ! Navegação intuitiva!
- 61. Regra do dedão!
- 63. 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!
- 64. Diferentes estilos de interface!
- 65. Interface nativa x customizada?!
- 66. Explore as diversas possibildiades de identidade visual! h"p://androidnice=es.tumblr.com/
- 67. Explore as diversas possibildiades de identidade visual! h"p://p"rns.com/
- 69. Ícones dentro da aplicação!
- 70. 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!
- 71. Grid: Android!
- 72. Grid: iOS!
- 74. Lei da Proximidade! A proximidade espacial ou temporal de elementos pode induzir a mente a perceber um coletivo ou totalidade.!
- 77. Tamanho mínimo!
- 78. Cuidado ao escolher a fonte!
- 79. Por isso existem fontes padrão!
- 80. Tamanho mínimo: só testando!
- 83. O segredo das cores!
- 85. 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}!
- 86. 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.
- 87. Combinando cores! Títulos! H1, h2, h3, h4{ color: # 000} ! ! Corpo de texto! Body { color: # 333}! ! Texto tênue! .muted { color: # 666}!
- 88. 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
- 89. 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
- 90. Grid + Tipografia + Cores = Hierarquia e contraste!
- 92. Escondidinho!
- 95. Assim como temos funções que reutilizamos em código, também temos ferramentas que podemos utilizar para criar elementos visuais consistentes. !
- 100. Não coloque tudo na mesma tela.!
- 101. O tom de voz faz toda diferença.!
- 102. Obrigado :)! Pedro Albuquerque! @pedroaborges! pedro.albuquerque@gmail.com! www.pedroalbuca.com!
- 103. 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/!
- 104. 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/!