Deep Dive Material Design, e um pouquinho sobre mobile UX
•
6 likes•1,198 views
O documento resume os principais pontos do Material Design da Google. Em três frases: 1) O Material Design tem como objetivos sintetizar princípios clássicos de design e permitir experiências unificadas em diferentes plataformas e dispositivos. 2) As guidelines do Material Design fornecem boas práticas para interação, convenções e personalidade, beneficiando usuários e empresas. 3) Seguir as guidelines trás benefícios como aumento de engajamento e vendas, mas é importante também testar com usuários e inovar dentro dos princípios
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Deep Dive Material Design, e um pouquinho sobre mobile UX
Similar to Deep Dive Material Design, e um pouquinho sobre mobile UX (20)
Deep Dive Material Design, e um pouquinho sobre mobile UX
- 1. Deep dive em Material Design e mais um pouquinho sobre UX… Nelson Vasconcelos - Google UI/UX Expert Maio 2016 - Especial Android Meetup 3 Anos
- 3. Agenda TL;DR Material Design Por que uma guideline? Benefícios Erros mais comuns Desvie com um propósito Branding Usuário em primeiro lugar Inspiração Q&A
- 7. Primeiro objetivo Sintetizar os princípios clássicos do bom design com a inovação e possibilidades da ciência e tecnologia
- 9. Segundo objetivo Desenvolver um sistema que permita uma experiência unificada em todas as plataformas e tamanhos de dispositivos
- 10. Princípios Material é a metáfora Audacioso, gráfico, intencional O movimento traz significado
- 11. Material é a metáfora
- 12. As superfícies possuem elevação
- 13. Tudo que vai na superfície, não
- 14. As superfícies são intuitivas e naturais flexibilidade do material cria novas affordances/ significantes, que substituem aquelas do mundo físico, sem quebrar as regras da física. Ao ser tocada, uma superfície se eleva como se o seu dedo a atraísse.
- 16. Cores, superfícies, e iconografia enfatizam as ações Estes elementos fazem muito mais do que agradar aos olhos. Eles criam hierarquia, significado e foco.
- 17. Quando você relaciona os elementos de uma interface de usando proporção e consistência, você reduz a quantidade de informação não essencial e deixa o conteúdo mais claro e objetivo.
- 18. Grid de Colunas Grid Modular
- 23. Use transições para proporcionar fluidez de navegação
- 24. Use animações para encantar e engajar seu usuário
- 25. Por que uma guideline?
- 27. t Dentro do próprio Google não havia convenções
- 28. UMA GUIDELINE É APENAS UM GUIA DE BOAS PRÁTICAS. Não é um código de leis. http://devcommunitycast.com.br/faaala-neto-guideline-nao-e-regra/ Podcast do Alê Borba e Neto Marin onde eles se aprofundam no assunto.
- 29. Uma guideline está sempre em constante evolução BOTTOM TABS Steppers Chips Notifications Navigation UI color application Buttons Tabs Fingerprint Cards Launch screens Settings Adaptive UI Empty states Permissions Elevation and shadows Authentic motion Writing Data tables App structure Bottom sheets Typography Dialogs Snackbars Scrolling techniques Floating action button E mais… Algumas das coisas que foram adicionadas nesses últimos 2 anos: Ultimamente estão atualizando todo mês
- 30. Uma guideline está sempre em constante evolução BOTTOM TABS Steppers Chips Notifications Navigation UI color application Buttons Tabs Fingerprint Cards Launch screens Settings Adaptive UI Empty states Permissions Elevation and shadows Authentic motion Writing Data tables App structure Bottom sheets Typography Dialogs Snackbars Scrolling techniques Floating action button E mais… Algumas das coisas que foram adicionadas nesses últimos 2 anos: Ultimamente estão atualizando todo mês
- 32. A guideline pode ser dividida em 3 camadas Interação humano-computador Convenções Personalidade
- 34. Como interagimos com o dispositivo?
- 36. NÃO MUDE, A NÃO SER QUE… https://www.youtube.com/watch?v=0QNiZfSsPc0 Project Soli Mude a tecnologia Mude o fator humano :)
- 37. Fora de alcance Esticando Confortável Seja amigo do dedão • Evite deixar ações importantes fora da zona de conforto do dedão • Respeite a área mínima de toque de um dedo (aprox. 48dp) • Arraste para mudar de tab
- 38. Não mude o conceito de superfície e elevação
- 39. Convenções
- 40. Em uma guideline geralmente escolhemos uma das soluções e definimos ela como a melhor recomendação Há mais de uma solução para o mesmo problema. Por quê?
- 41. O que faz o aplicativo ser intuitivo? Modelo conceitual Como ele realmente funciona? Modelo mental Como eu imagino que aplicativo funciona? Um bom aplicativo une o modelo mental com o conceitual
- 42. Uma ampla consistência cria uma familiaridade imediata. Mesmo que o usuário nunca tenha usado seu aplicativo, ele vai saber como usar os componentes.
- 44. Personalidade
- 45. É exatamente onde você pode inovar e tornar seu produto diferenciado • Cores • Tipografia • Uso de imagens • Tom de comunicação • Animações e transições
- 46. Benefícios
- 47. Trello: aumento do engajamento “Um de nossos principais temas durante o redesign para Material Design foi simplicidade, e achamos que conseguimos isso bem.” - Hamid, Mobile Lead • 10% de aumento nas sessões por usuário por semana • 42% mais boards criadas por sessão • 63% mais pessoas adicionadas a boards por sessão
- 48. The Hunt: primeiro uso e o FAB “O Material Design foi uma ótima forma de começar a construir nosso app para Android, e foi como ter um time de design experts ajudando você a criar o melhor app.” - Jenny Davis, Product Designer • 30% de aumento de usuários criando “hunts” em comparação com plataformas sem Material Design.
- 49. Aumentando o lucro: Pocket Casts “O investimento no redesign para Material Design deu retorno e fez nosso app ficar muito melhor… a recepção que tivemos foi impressionante. As pessoas amaram.” - Philip Simpson, Co-founder e dev Android • 30% de aumento em vendas desde o redesign para Material Design
- 50. Encantando usuários e aumentando vendas: B&H Photo Video “Não poderia ser melhor, esse app certamente é um dos melhores que já usei.” “Melhor que o site - Eu uso a loja com frequência e este app é realmente útil.” “Tudo está tão bem organizado que fica até divertido passear pelas diferentes sessões do app!” • 5x de aumento de pedidos pelo app desde o redesign • 700% de aumento em vendas!
- 52. Cores
- 53. Cinza (#727272) com 1.0 de opacidade Preto (#000000) com 0.54 de opacidade Cores secundárias não são cinzas, são transparentes!!!
- 54. Cards ou Lista?
- 56. • Servem para conteúdo variado • Podem ter múltiplas ações • Tem cantos arredondados (2dp) • Possuem elevação • Podem ser descartados e reorganizados • 8dps de espaçamento Cards
- 57. • Servem para conteúdo uniforme • Podem ter no máximo duas ações • Não tem cantos arrendodados • Não possui elevação • Não devem ter mais de 3 linhas de conteúdo Listas
- 58. • Solução ideal quando a imagem é o conteúdo mais importante • Não possui cantos arredondados • Tem 1dp ou 4dps de espaçamento Grid lists
- 61. Módulo: 8x8 dp
- 67. Conteúdo escondido (Hamburger Menu, FAB etc…)
- 69. Evite misturar tabs de conteúdo importante com outros menos relevantes, como configurações e ajuda.
- 71. Use a toolbar estendida para deixar os filtros visíveis, por exemplo. Explore a toolbar
- 73. Apps de leitura prolongada se focam menos em cores e muito mais em tipografia, para prover a melhor experiência de leitura possível Precisamos sempre usar cores?
- 75. Não se limite a apenas o que a guideline oferece. Se você possui algum tipo de interação que não é solucionado com os componentes da guideline, crie o seu, desde que respeite os princípios fundamentais. Não achou uma solução? Crie.
- 76. Branding
- 84. Foque no usuário, não na tecnologia
- 85. Teste sempre seu app com usuários!
- 86. Muito mais importante que um app que siga guidelines é um app que seja fácil de usar e que cumpra aquilo que o usuário espera dele.
- 92. A polêmica Bottom Navigation bar do Google + A decisão de colocar bottom tabs foi baseada em análise do comportamento dos usuários. Eles se tornavam mais engajados quando participavam de comunidades mais ativamente e quando viam coleções.
- 94. https://www.thinkwithgoogle.com/collections/principles-of-mobile-app-design-engage-users-and-drive-conversions.html Heurísticas para apps nativos Estudo qualitativo realizados com diversos apps identificou 25 heurísticas com que ajudam a melhorar a experiência de uso de aplicativos nativos.
- 95. #4 Facilite a edição manual da localização. Usar o GPS para localização ajuda a salvar tempo das pessoas. Entretanto, sempre deixe a opção de inserir um local manualmente.
- 96. Inspiração
- 97. Pocket Casts
- 98. Plaid
- 99. Vurb
- 100. Fabulous
- 101. Kitchen Stories
- 102. Bring
- 104. materialup.com
- 105. Perguntas?
- 106. Envie seu feedback para: nelson@userandpixels.com OBRIGADO!!! :) @nvasconcelos_