Material DesignDezembro 2015

Ana Paula BatistaGoogle Developer Expert - UX/UI

your face here

Ana Paula Batista

Amante do “coletivo”, viagens, vegetariana, 2 gatos, anda a pé ou de bicicleta.

- UX Designer- 34 anos- São Paulo - SP

Principais Características

- UXLead na B2W Digital- Google Developer Expert em UX/UI- Membro da Diretoria da UXPA-SP- 14 anos de experiência no desenvolvimento e projetos de

interface- Formação Multimídia Digital- 6 anos de estudos em Ciências da Computação/

Sistemas de Informação

Objetivos e Necessidades- Projetos com valores sociais- Construção coletiva

Comportamento do Usuário- Online todo o tempo- Utiliza wear mas não tem um laptop- Wakerboarder wannabe- Não usa facebook- Curiosity-Driven

200K+40%+

Material Apps

Desde Lollipop

Crescendo em mundo material

“One of our guiding themes during the Material redesign was simplicity, and we think this paid off nicely.”

- Hamid, Mobile Lead

- 10% aumento de sessões por usuário por semana

- 42% mais boards criados por sessão- 63% mais pessoas aderiram a boards,

por sessão

Aumento de engajamento da ação primária via Material: Trello

“Material design was a great way to start building our Android app, it was like having a team of design experts, helping you build the best product for an Android device.”

- Jenny Davis, Product Designer

- 30% mais usuários iniciaram “hunts” relativa a plataformas non-Material.

Incrementando o engajamento de novos usuários com FAB: The Hunt

“Material design has really paid off and made our app much better..the reception we had was amazing. People love it.”

- Philip Simpson, Co-founder & Android Developer

- 30% aumento nas vendas, desde o redesign app em Material.

Incentivando vendas: Pocket Casts

- 5x aumento de vendas pelo app desde o material design update

- 700% aumento nas vendas

Surpreendendo usuários e aumentando as vendas pelo app: B&H Photo V

“Couldn’t be better, seriously this app has to be one of the best apps I have ever used.”

“Better than the website - I use the app/retail store quite often and this app is really helpful.

“Everything is very well organized so it makes it actually fun just to look through the items in the app!”

Expresse sua marca● Principalmente através do uso das cores● Mais flexibilidade nos padrões de interface do usuário

Agrade seus usuários :)● Mantem consistente com a linguagem natural do Android● Possibilita uma melhor experiência multi-plataforma

Potencialize o aumento do crescimento e engajamento● Acompanhe o sucesso de desenvolvedores que têm adotado

material● Tornam-se elegíveis para os destaques da Play Store

Porquê usar Material?

Metáfora

substantivo femininoestl ling ret designação de um objeto ou qualidade mediante uma palavra que designa outro objeto ou qualidade que tem com o primeiro uma relação de semelhança (p.ex., ele tem uma vontade de ferro, para designar uma vontade forte, como o ferro)

Animação Bold, gráfico e intencional

Superfícies e sombras

Design adaptativo

Características

- Intuitivas e naturais,

- organizam espaço,

- racionalizam interfaces,

- conceito intrínseco do que está certo ( o que a mente trabalha menos?).

Superfícies e sombras

- 3D: 1dp- Duas fontes de luz: ambiente e foco.

Superfícies e sombras

Ambiente

Foco Ambiente Foco e Ambiente

- sólido: elementos não podem transpassar uma superfície- altura e largura podem mudar- pode mudar de forma- nunca dobra- pode mover por qualquer eixo- Z: interação do usuário

Superfícies e sombras

Propriedades

Superfícies e sombras

Elevação e sombra

Animação

- Reforça a ideia que o usuário é quem tem o controle da interface,

- Objetos são iniciados e apresentados mantendo a continuidade da experiência,

- Servem para focar a atenção do usuário,

- Tornam os feedbacks naturais.

Animação

Aceleração natural

- aceleração e desaceleração natural

Animação

Aceleração natural

- mudanças na aceleração e movimentos atraem atenção do usuário

Animação

Interações com feedback- utilize animação para cada input do usuário,- devem partir do ponto de interação

Superfície Material Radial

- como os objetos entram? como saem? quais elementos são mantidos?

- qual elemento é mais importante e deve iniciar a animação?

- qual caminho eles devem seguir?

Animação

Transições com significado

Animação

Surpreenda nos detalhes

Bold, gráfico e intencional

- Estética baseada em impressos- Grids, tipografias, gráficos, espaços, cores,- Linguagem unificada,- Cria hierarquia, significado, foco.

Bold, gráfico e intencional

Cores

- tons ousados, justapostos com ambientes suaves, sombras profundas, e os destaques brilhantes.

- A cor deve ser inesperada e vibrante.

Cor primária

Cor de apoio

- inspirado pelo tátil e qualidade física do material.

- interage com a luz através de destaques sutis e sombras consistentes.

- simples, intuitivo, demonstra a ação clara e consistente.

Bold, gráfico e intencional

Bold, gráfico e intencional

Ícones

Bold, gráfico e intencional

Imagens

- valoriza o contexto- pessoal- traduz informação- constrói narrativas- dá foco à intenção

esqueça fundos falsos, cenas confusas e analogias indevidas.

Um único design adaptativo

- mesmo usuário ;)- experiência consistente- mesma linguagem de comunicação- interface adaptada ao device- menor custo de manutenção

http://www.youtube.com/watch?v=Iye8hNgzmRg

Resources- google.com/design- Icons tool- Devices tool- Android Design Support

Library

Como?: updates Maio 2015

Spec Updates- adaptive layouts- elevation- splash screens- settings- FAB expansion- navigation- empty states

Tips

Evite login ou cadastro obrigatório de cara. Ofereça uma amostra interativa de conteúdo público antes do usuário autenticar. Novos usuários podem não conhecer as propostas de valor do seu serviço e podem não querer registrar antes de saber como são os conteúdos e interações do seu app.

Dê uma “amostra grátis” de seu app

EasyTaxi

Evite pedir login usando apenas midias sociais; apps devem oferecer um login por e-mail como uma alternativa.

Não esqueça das minorias

Headspace

Quando uma coleção importante está vazia, evite mostrar uma mensagem de erro simples como “Sem itens.” Considere oferecer maneiras de popular a coleção, como mostrar itens recomendados ou permitir que os usuários criem novos itens.

Aproveite todos os momentos

Submarino.com

● intermitente, idealmente deveria tentar reconectar ou permitir que o usuário possa tentar novamente.

● permanente, mostre um lembrete útil se está em modo avião, em vez de um erro de rede. Permita um timeout sensível antes que o app decida que a perda de conexão é permanente.

Verifique sua conexão e tente novamente

Skina

Quando apropriado, o app deve ter a ação chave na tela usando um botão de ação flutuante (BAF). O BAF é circular, de superfície elevada, assim deve ter uma sombra. Ele deve ter uma cor brilhante. Deve fazer a ação principal como criar, adicionar ou buscar. Tem que flutuar sobre outras superfícies, normalmente com 8dp de elevação. Frequentemente aparece no canto inferior direito da tela, ou centralizado na borda onde duas superfícies se encontram.

Alow ação principal!

Evernote

A barra do app não deve incluir o ícone do app (ao invés disto utilize a nova apresentação de barras do app de acordo com as diretrizes do material design). A cor e a tipografia podem ser usadas da marca.

Identificação

Medisafe

O sidebar menu deve conter apenas elementos de navegação primários. Evite mostrar itens que seriam colocados como ação em uma barra de ferramentas, como por exemplo Buscar. Além disso, evite incluir itens secundários como Sobre, Compartilhe este App, ou Avalie este App - estes tipos de itens devem aparecer na barra do App, possivelmente agrupados na tela Sobre.

Sidebar menu

HD Wallpaper

Obrigada! :)

@anapaulazambujaanapaulaazambuja@gmail.com