Deep Dive Material Design, e um pouquinho sobre mobile UX

download Deep Dive Material Design, e um pouquinho sobre mobile UX

of 106

  • date post

    26-Jan-2017
  • Category

    Design

  • view

    738
  • download

    1

Embed Size (px)

Transcript of Deep Dive Material Design, e um pouquinho sobre mobile UX

  • Deep dive em Material Design e mais um pouquinho sobre UX

    Nelson Vasconcelos - Google UI/UX Expert Maio 2016 - Especial Android Meetup 3 Anos

  • @nvasconcelos_

    http://www.twitter.com/nvasconcelos_

  • Agenda

    TL;DR Material Design

    Por que uma guideline?

    Benefcios

    Erros mais comuns

    Desvie com um propsito

    Branding

    Usurio em primeiro lugar

    Inspirao

    Q&A

  • tl;dr Material Design

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

    http://google.com/design/spec

  • Primeiro objetivo

  • Primeiro objetivo

    Sintetizar os princpios clssicos do bom design com a inovao e possibilidades da cincia e tecnologia

  • Segundo objetivo

  • Segundo objetivo

    Desenvolver um sistema que permita uma experincia unificada em todas as plataformas e tamanhos de dispositivos

  • Princpios

    Material a metfora Audacioso, grfico, intencional

    O movimento traz significado

  • Material a metfora

  • As superfcies possuem elevao

  • Tudo que vai na superfcie, no

  • As superfcies so intuitivas e naturais

    flexibilidade do material cria novas affordances/significantes, que substituem aquelas do mundo fsico, sem quebrar as regras da fsica.

    Ao ser tocada, uma superfcie se eleva como se o seu dedo a atrasse.

  • Audacioso, inconfundvel, intencional

  • Cores, superfcies, e iconografia enfatizam as aes

    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 proporo e consistncia, voc reduz a quantidade de informao

    no essencial e deixa o contedo mais claro e objetivo.

  • Grid de Colunas Grid Modular

  • O movimento gera significado

  • Use transies para proporcionar fluidez de navegao

  • Use animaes para encantar e engajar seu usurio

  • Por que uma guideline?

  • t

    Dentro do prprio Google no havia convenes

  • UMA GUIDELINE APENAS UM GUIA DE BOAS PRTICAS.

    No um cdigo 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 evoluo

    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 esto atualizando todo ms

  • Uma guideline est sempre em constante evoluo

    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 esto atualizando todo ms

  • A guideline pode ser dividida em 3 camadas

    Interao humano-computador

    Convenes

    Personalidade

  • Interao humano-computador

  • Como interagimos com o dispositivo?

  • NO MUDE, A NO SER QUE

    https://www.youtube.com/watch?v=0QNiZfSsPc0

    Project Soli

    Mude a tecnologia Mude o fator humano :)

  • Fora de alcance

    Esticando

    Confortvel

    Seja amigo do dedo Evite deixar aes

    importantes fora da zona de conforto do dedo

    Respeite a rea mnima de toque de um dedo (aprox. 48dp)

    Arraste para mudar de tab

  • No mude o conceito de superfcie e elevao

  • Convenes

  • Em uma guideline geralmente escolhemos uma das solues e definimos ela como a melhor recomendao

    H mais de uma soluo 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 consistncia cria uma familiaridade imediata.

    Mesmo que o usurio 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 comunicao Animaes e transies

  • Benefcios

  • Trello: aumento do engajamentoUm 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 sesses por usurio por semana

    42% mais boards criadas por sesso 63% mais pessoas adicionadas a

    boards por sesso

  • The Hunt: primeiro uso e o FABO Material Design foi uma tima forma de

    comear 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 usurios criando hunts em comparao com plataformas sem Material Design.

  • Aumentando o lucro: Pocket CastsO investimento no redesign para Material Design deu retorno e fez nosso app ficar

    muito melhor a recepo 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 usurios e aumentando vendas: B&H Photo Video

    No poderia ser melhor, esse app certamente um dos melhores que j usei.

    Melhor que o site - Eu uso a loja com frequncia e este app realmente til.

    Tudo est to bem organizado que fica at divertido passear pelas diferentes sesses 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 secundrias no so cinzas, so transparentes!!!

  • Cards ou Lista?

  • Servem para contedo variado

    Podem ter mltiplas aes

    Tem cantos arredondados (2dp)

    Possuem elevao

    Podem ser descartados e reorganizados

    8dps de espaamento

    Cards

  • Servem para contedo uniforme

    Podem ter no mximo duas aes

    No tem cantos arrendodados

    No possui elevao

    No devem ter mais de 3 linhas de contedo

    Listas

  • Soluo ideal quando a imagem o contedo mais importante

    No possui cantos arredondados

    Tem 1dp ou 4dps de espaamento

    Grid lists

  • Alinhamento de Grid

  • Alinhamento faz diferena

  • Mdulo: 8x8 dp

  • Keyline Pushing

    https://goo.gl/mzKSRP

    https://goo.gl/mzKSRP

  • Tamanho dos cones

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

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

  • Contedo escondido (Hamburger Menu, FAB etc)

  • Evite misturar tabs de contedo importante com outros menos relevantes, como configuraes e ajuda.

  • Desvie com um propsito

  • Use a toolbar estendida para deixar os filtros visveis, por exemplo.

    Explore a toolbar

  • Apps de leitura prolongada se focam menos em cores e muito mais em tipografia, para prover a melhor experincia

    de leitura possvel

    Precisamos sempre usar cores?

  • No se limite a apenas o que a guideline oferece. Se voc possui algum tipo de

    interao que no solucionado com os componentes da guideline, crie o seu, desde

    que respeite os princpios fundamentais.

    No achou uma soluo? 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 usurio, no na tecnologia

  • Teste sempre seu app com usurios!

  • Muito mais importante que um app que siga guidelines um app que seja fcil de usar e que cumpra aquilo que o usurio

    espera dele.

  • Onde achar usurios?

  • 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 polmica Bottom Navigation bar do Google +

    A deciso de colocar bottom tabs foi baseada em anlise do comportamento dos usurios. Eles se tornavam mais engajados quando participavam de comunidades mais ativamente e quando viam colees.

  • 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

    Heursticas para apps nativosEstudo qualitativo realizados com diversos apps identificou 25 heursticas com que ajudam a melhorar a experincia de uso de aplicativos nativos.

    https://www.thinkwithgoogle.com/collections/principles-of-mobile-app-design-engage-users-and-drive-conversions.html

  • #4 Facilit