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

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

2. @nvasconcelos_

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

4. tl;dr Material Design

5. http://google.com/design/spec

6. Primeiro objetivo

7. Primeiro objetivo
Sintetizar os princípios
clássicos do bom design
com a inovação e
possibilidades da ciência
e tecnologia

8. Segundo objetivo

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.

15. Audacioso, inconfundível,
intencional

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

22. O movimento gera
significado

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

33. Interação humano-computador

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!

51. Erros mais comuns

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

59. Alinhamento de Grid

60. Alinhamento faz
diferença

61. Módulo: 8x8 dp

62. Keyline Pushing
https://goo.gl/mzKSRP

63. Tamanho dos ícones

65. https://www.google.com/design/spec/style/icons.html#icons-system-icons

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.

70. Desvie com um
propósito

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

80. https://g-design.storage.googleapis.com/production/v5/assets/renditions/
article_brand_carousel_4-667f89c1-ee2fcb46-1240@2x.jpg

83. https://design.google.com/articles/expressing-brand-in-material/

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.

87. Onde achar usuários?

88. http://www.vysor.io/
https://lookback.io/

89. https://www.thinkwithgoogle.com/intl/pt-br/articles/how-micromoments-are-changing-rules.html
Pense nos micro-momentos

90. Seja data-informed

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.

93. http://arquiteturadeinformacao.com/pesquisa-com-usuarios-2/pesquisa-com-usuarios-como-escolher-a-tecnica-certa/

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

103. g.co/materialshowcase

104. materialup.com

105. Perguntas?

106. Envie seu feedback para:
nelson@userandpixels.com
OBRIGADO!!! :)
@nvasconcelos_