Baixado 21 vezes
Carregado porPedro de Albuquerque Borges
Mobile User Experience: Compilando pessoas e codificando cores
O documento apresenta um resumo sobre experiência do usuário em dispositivos móveis, abordando tópicos como: vantagens e limitações dos dispositivos móveis; atributos importantes para criar uma boa experiência mobile; princípios de design para aplicativos; e dicas de interface para desenvolvedores criarem aplicativos com boa usabilidade. O apresentador destaca a importância de entender o contexto do usuário e criar soluções essencialmente móveis.
![[Palestra UNICAP] UX Design - Projetando Soluções e Experiências](https://cdn.slidesharecdn.com/ss_thumbnails/palestrauxunicap-140909213939-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?](https://cdn.slidesharecdn.com/ss_thumbnails/gdgspandroidmeetup67-atech-realmenteprecisodeuxnoprojetomobile-190318131917-thumbnail.jpg?width=640&height=640&fit=bounds)
Mobile User Experience: Compilando pessoas e codificando cores
- 1. MOBILE USER EXPERIENCE! Compilando pessoase codificando cores! Pedro Albuquerque! UX Senior Visual Designer! Telefonica Digital UX Team! São Paulo, Brasil!
- 2.
- 3. 01 // Vantagense 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Ê ESTOUAQUI?! 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 :)! Comalgum tempo e alguns truques você consegue, especialmente para aplicativos.!
- 6.
- 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ãomais apenas telefones!
- 12. Aplicativos móveis nos apresentamuma oportunidade de inventar novas formas das pessoas interagirem com a informação.!
- 13. O que nosliberta para atuar fora dos limites das suas hipóteses!
- 14.
- 15. Saiba com quemvocê está falando!
- 16.
- 17.
- 18. Como criar uma grandeexperiência mobile?!
- 19.
- 20. Foque no queele faz melhor!
- 21. Tecnologia pode guiar,mas não deve ser o foco!
- 22.
- 23. Na prática:! Técnicas depesquisa! 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 relacionadaao seu contexto!
- 25. Contexto é compreenderas relações humanas que ocorrem entre pessoas, lugares e objetos no mundo.!
- 26.
- 27.
- 28.
- 29. Lembre-se de interrupçõese atenção parcial!
- 30. Reduza a cargacognitiva!
- 31. Faça pesquisa decampo!
- 32. Na prática:! Divida-se emgrupos!
- 33. Na prática:! Vá paraa rua!
- 34. Na prática:! Crie 2-3conceitos com base na necessidade que sua equipe identificou!
- 35. Na prática:! Faça sketchsdas suas ideias!
- 36.
- 37. Entenda as possíveis característicasde UI! h"p://www.lukew.com/ff/entry.asp?1071
- 38. Conheça as capacidades técnicasdos 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 capacidadede renúncia!
- 40. Diga adeus ao“tá pronto”!
- 41. Mostre de caraas possibilidades de tarefas da sua aplicação.!
- 42. Dentro do aplicativotemos tarefas!
- 43. Mas também temospossibilidades de tarefas que podem ser realizadas!
- 44.
- 45.
- 48. Na prática:! Desenhando telas! “Oque as pessoas acham deste lugar?”
- 49. Na prática:! Desenhando telas! Agrupeos cards de maneira a responder a pergunta. Permita que as pessoas validem suas hipóteses de maneira rápida.
- 50. Na prática:! Prototipe emcada estágio! Sketch &! Storyboard! Baixa ! fidelidade! Prototipação ! no papel! Alta ! fidelidade!
- 51. Na prática:! Loop deprototipação! Validar! Construir/ Criar! Refinar!
- 52. Na prática:! Validando hipóteses! Osusuários entendem isso?! ! Está perceptível a função de cada tela?! ! ! Posso simplificar isso?! É intuitivo?!
- 53. Na prática:! Dicas paraprototipaçã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 deixarmeu 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 ! =! Mesmosprincípios! ! Web developer / System developer / Java / Ruby / iOS / CSS!
- 60. Princípios de UserExperience! Simplicidade! ! Consistência! ! Navegação intuitiva!
- 61.
- 62.
- 63. Conheça os padrõesde 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 deinterface!
- 65. Interface nativa xcustomizada?!
- 66. Explore as diversaspossibildiades de identidade visual! h"p://androidnice=es.tumblr.com/
- 67. Explore as diversaspossibildiades de identidade visual! h"p://p"rns.com/
- 68.
- 69. Ícones dentro daaplicação!
- 70. Sobre o usode í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.
- 72.
- 73.
- 74. Lei da Proximidade! Aproximidade espacial ou temporal de elementos pode induzir a mente a perceber um coletivo ou totalidade.!
- 75.
- 76.
- 77.
- 78. Cuidado ao escolhera fonte!
- 79. Por isso existemfontes padrão!
- 80. Tamanho mínimo: sótestando!
- 81.
- 82.
- 83. O segredo dascores!
- 84.
- 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 acor 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. Corpode 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 detexto 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!
- 91.
- 92.
- 93.
- 94.
- 95. Assim como temosfunções que reutilizamos em código, também temos ferramentas que podemos utilizar para criar elementos visuais consistentes. !
- 96.
- 97.
- 98.
- 99.
- 100. Não coloque tudona mesma tela.!
- 101. O tom devoz faz toda diferença.!
- 102.
- 103. Referências úteis! This isService 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/! ! AndroidPttrns:! 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/!