Post on 26-Jan-2017
Deep dive em Material Design e mais um pouquinho sobre UX…
Nelson Vasconcelos - Google UI/UX Expert Maio 2016 - Especial Android Meetup 3 Anos
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
tl;dr Material Design
Primeiro objetivo
Primeiro objetivo
Sintetizar os princípios clássicos do bom design com a inovação e possibilidades da ciência e tecnologia
Segundo objetivo
Segundo objetivo
Desenvolver um sistema que permita uma experiência unificada em todas as plataformas e tamanhos de dispositivos
Princípios
Material é a metáfora Audacioso, gráfico, intencional
O movimento traz significado
Material é a metáfora
As superfícies possuem elevação
Tudo que vai na superfície, não
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.
Audacioso, inconfundível, intencional
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.
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.
Grid de Colunas Grid Modular
O movimento gera significado
Use transições para proporcionar fluidez de navegação
Use animações para encantar e engajar seu usuário
Por que uma guideline?
t
Dentro do próprio Google não havia convenções
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.
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
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
A guideline pode ser dividida em 3 camadas
Interação humano-computador
Convenções
Personalidade
Interação humano-computador
Como interagimos com o dispositivo?
NÃO MUDE, A NÃO SER QUE…
https://www.youtube.com/watch?v=0QNiZfSsPc0
Project Soli
Mude a tecnologia Mude o fator humano :)
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
Não mude o conceito de superfície e elevação
Convenções
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ê?
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
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.
Personalidade
É exatamente onde você pode inovar e tornar seu produto diferenciado
• Cores • Tipografia • Uso de imagens • Tom de comunicação • Animações e transições
Benefícios
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
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.
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
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!
Erros mais comuns
Cores
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!!!
Cards ou Lista?
• 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
• 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
• 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
Alinhamento de Grid
Alinhamento faz diferença
Módulo: 8x8 dp
Tamanho dos ícones
https://www.google.com/design/spec/style/icons.html#icons-system-icons
Conteúdo escondido (Hamburger Menu, FAB etc…)
Evite misturar tabs de conteúdo importante com outros menos relevantes, como configurações e ajuda.
Desvie com um propósito
Use a toolbar estendida para deixar os filtros visíveis, por exemplo.
Explore a toolbar
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?
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.
Branding
https://g-design.storage.googleapis.com/production/v5/assets/renditions/article_brand_carousel_4-667f89c1-ee2fcb46-1240@2x.jpg
https://design.google.com/articles/expressing-brand-in-material/
Foque no usuário, não na tecnologia
Teste sempre seu app com usuários!
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.
Onde achar usuários?
http://www.vysor.io/
https://lookback.io/
https://www.thinkwithgoogle.com/intl/pt-br/articles/how-micromoments-are-changing-rules.html
Pense nos micro-momentos
Seja data-informed
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.
http://arquiteturadeinformacao.com/pesquisa-com-usuarios-2/pesquisa-com-usuarios-como-escolher-a-tecnica-certa/
https://www.thinkwithgoogle.com/collections/principles-of-mobile-app-design-engage-users-and-drive-conversions.html
Heurísticas para apps nativosEstudo qualitativo realizados com diversos apps identificou 25 heurísticas com que ajudam a melhorar a experiência de uso de aplicativos nativos.
#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.
Inspiração
Pocket Casts
Plaid
Vurb
Fabulous
Kitchen Stories
Bring
Perguntas?
Envie seu feedback para:
nelson@userandpixels.com
OBRIGADO!!! :)
@nvasconcelos_