Hacking Material Design

Nelson Vasconcelos Google UI/UX Expert, Lead Product Designer @ GuiaBolso Android Conference 2016

Indo além das guidelines

Quem sou?

Lead Product Designer no GuiaBolso

Membro do time de Experts de UI/UX do Google Experts Program

Certified Design Sprint Master

@nvasconcelos_

+NelsonVasconcelos

Agenda

• Vamos entender o que é Material Design

• Aprenda que guideline não é uma coisa só

• Vários exemplos legais :)

• Fechamento e dúvidas

http://material.google.com

Não custa lembrar, né?

Parte - I Entendendo o Material Design

Material Design? Por quê?

Não havia um padrão, nem mesmo dentro do Google

Design adaptativoDesenvolver um sistema que permita uma experiência unificada em todas as plataformas e tamanhos de dispositivos e formas de input

Design Clássico + Tecnologia

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

Como?

Princípios

Material é a metáfora Ousado, gráfico, intencional

O movimento cria significado

Material é a metáfora

Afinal, o material design é flat ou esqueumórfico?

R.: Nenhum dos dois.

O Material Design usa o princípio da realidade mista.

O mundo virtual INTERAGE com o mundo real.

"E se os pixels tivessem não apenas cor, mas também profundidade?"

Matias Duarte, Google I/0 2014

Apresentando, o papel:

Apresentando, o papel:

Usa conceitos existes no mundo real, como luz, sombra, gravidade.

Ultrapassa as limitações do mundo real, podendo esticar, separar e juntar-se novamente.

Essas superfícies reagem a sua interação

Por quê?

Criar affordances percebidasUma affordance é o potencial de um

objeto de ser usado como foi projetado para ser usado.

Don Norman - Autor do livro O design das coisas do dia-a-dia, livro RECOMENDADÍSSIMO.

Ou seja, eu consigo de forma intuitiva entender que consigo interagir com

essa superfície.

http://www.usabilidoido.com.br/propiciacao_e_clicabilidade.htmlEntenda mais aqui:

As superfícies possuem elevação

Tudo que vai na superfície, não

O material reage a sua interação

Superfície É atraído magneticamente ao seu dedo, elevando-se e criando uma sombra maior

Tinta Gera uma onda, como se você estivesse tocando um espelho d’água.

Ousado, gráfico e intencional

O que você vê?

Gestalt = psicologia cognitiva

Nosso cérebro reconhece padrões

Princípios da Gestalt

fonte: Wikipedia

Que tipo de app é esse?

Mapa

Fotos

Contatos✓

Lei da proximidade

“Esses objetos estão próximos, então devem estar

relacionados”

Lei da semelhança

“Esses objetos são semelhantes, então devem

estar relacionados”

Lei da experiência passada

“Hmm… isso me lembra um relógio, então deve estar

relacionado com algo sobre tempo”

Mantenha o layout coeso usando linhas-chave e o grid

Keyline Pushinghttps://goo.gl/mzKSRP

Opções do desenvolvedor / Exibir limites de layout

+

Faça o ajuste fino de grid

Área viva x área total dos ícones

Tenha em mente a área de toque (48dp)

Iconografia

Nunca use ícones que não são comuns e compreensíveis sem o auxílio de um label.

Seja explícito principalmente em seus call to

actions

O movimento cria significado

Use transições para criar fluidezNo mundo real, as coisas não aparecem simplesmente do nada.

Use animações para encantarAnimações, além de divertidas, incentivam as pessoas a fazer a mesma ação novamente.

Parte - II Entendendo as camadas da guideline

Guidelines não são REGRAS. São recomendações de uso e boas práticas que nem sempre

podem estar adequadas a todas as situações

Princípios de usabilidade

Metáfora do papel e tinta

Camada 1 - Ergonomia

NÃO MUDE

Como interagimos com o dispositivo?

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

Padrões de navegação

Sempre em evolução

Camada 2 - Convenções

MUDE SE NECESSÁRIO

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

Mudando de padrão de navegaçãoSempre tenha em mente que mudar o padrão de navegação vai causar estranheza e dificuldade para os usuários.

Por isso apenas mude com um propósito e teste com usuários para encontrar a melhor forma de ensinar esse novo padrão.

Cor, tipografia, transições, animações, etc

Camada 3 - Look and feel

MUDE E SEJA FELIZ! :)

Parte - III Exemplos

Explorando as superfícies

Brinque com as superfíciesO aplicativo RobinHood usa e abusa dos princípios das superfícies para tornar a experiência mais imersiva

Brinque com as superfíciesO aplicativo Plaid também brinca com os princípios de elevação das superfícies

Explorando componentes

Explore o uso do FABO aplicativo GroupMe usa um bela transição do FAB para uma folha de navegação.

Explore novas formas de interaçãoO aplicativo Primer usa gestos de arrasto para navegar entre cartões

Experimente atalhos de navegaçãoUma das ações mais realizadas dentro da lista de transações do app GuiaBolso é o de recategorizar uma transação.

Decidimos criar um atalho para facilitar essa ação.

Desvie com um propósitoNão possuindo uma quantidade suficiente de itens para um SideNav e ao mesmo possuindo um padrão de navegação que não combina com tabs, resolveram criar uma nova forma navegação

Explore a app bar

Não possuindo uma quantidade suficiente de itens para um SideNav e ao mesmo possuindo um padrão de navegação que não combina com tabs, resolveram criar uma nova forma navegação

Explorando sua marca

Expresse o brandingO aplicativo Skype usa o branding de forma bem sutil em seu FAB

Explorando imagens

Seja mais visualO aplicativo Indiegogo usa imagens para deixar seu filtro de categorias mais elegante.

Explore o movimento

Animações intencionaisO aplicativo B&H Photo usa uma bela animação quando o usuário adiciona um item ao carrinho. Esta animação é intencional e guia a visão do usuário até o ícone do carrinho na toolbar.

Explorando as cores

Use cores para distinguir conteúdoCada seção do aplicativo YPlan possui uma cor diferente de toolbar

Use cores para indicar um statusAinda no Robin Hood, a cor da app bar indica se a ação está em alta ou baixa, e a cor fundo fica preta quando a bolsa está fechada e branca quando aberta.

Crie cores dinâmicasUse a classe Palette para criar paletas de cores a partir de um bitmap, como faz o aplicativo Pocket Casts

https://www.bignerdranch.com/blog/extracting-colors-to-a-palette-with-android-lollipop/

Precisamos sempre usar cores?Se o seu aplicativo contém textos longos, talvez seja melhor explorar a tipografia ao invés de focar em cores que fortes que possam distrair o usuário, como no aplicativo Medium

Antes de terminar… O mais importante

Foque no usuário, não na tecnologia

“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”.

Foque no usuário, não na tecnologia

https://www.thinkwithgoogle.com/articles/principles-of-mobile-app-design-introduction.html

Evite erros comuns

https://www.thinkwithgoogle.com/intl/pt-br/articles/how-micromoments-are-changing-rules.html

Pense em como usam seu app

http://www.vysor.io/

https://lookback.io/

materialup.com

g.co/materialshowcase

Roman Nurik, Nick Butcher e James Williams

Material Design for Developers - Udacity

http://goo.gl/xSsH1m

Perguntas?

Mande um feedback: #hackingmaterial

@nvasconcelos_nelson@nvasconcelos.com