O documento apresenta diretrizes e exemplos do Material Design. Resume os principais conceitos como superfícies e sombras, animação, cores, ícones e como criar uma experiência consistente em diferentes dispositivos. Inclui dicas para melhorar a usabilidade de apps com exemplos de empresas que tiveram sucesso ao aplicar os princípios do Material Design.
• Sobre o Workshop •
Tem como objetivo desmistificar o termo “UX Design” e oferecer contato com alguns processos-chave que fazem parte desse universo tão comentado atualmente.
Uma imersão em novos conceitos e ideias que irão iluminar a perspectiva sobre a experiência de interação humano-computador.
• Sobre o Workshop •
Tem como objetivo desmistificar o termo “UX Design” e oferecer contato com alguns processos-chave que fazem parte desse universo tão comentado atualmente.
Uma imersão em novos conceitos e ideias que irão iluminar a perspectiva sobre a experiência de interação humano-computador.
Ux design como estrategia conquistar clientes impactar negociostdc-globalcode
O "UX design" tem se tornado uma estratégia indispensável para o sucesso e conquista em diferentes mercados, principalmente nos digitais e inovadores, como é o caso de startups e empresas de tecnologia. Não faz muito tempo que negócios e produtos digitais eram quase todos feitos em cima de ideias e hipóteses de desenvolvedores, clientes ou designers em um cenário onde não fazia diferença a visão ou as necessidade daqueles que são os principais interessados na solução: os usuários. Com o aumento da competitividade e maturação do mercado foi ficando claro que grandes negócios hoje em destaque existem essencialmente para resolver problemas reais de pessoas reais.
As metodologias do user experience design que focam em entender a fundo esses usuários e suas "dores" acabam por gerar soluções muito mais coerentes e assertivas causando impactos significantes na proposta de valor das empresas. Dessa forma o UX design tem se tornado uma estratégia indispensável para o sucesso e conquista em diferentes mercados, principalmente os digitais e inovadores como startups e empresas de tecnologia. Descubra como e porque o processo do user experience design a partir do entendimento dos usuários e de suas "dores" consegue gerar propostas de valor muito mais impactantes.
Pensar e entender quem são os utilizadores e quais as suas necessidades permite-nos melhorar o relacionamento humano com a tecnologia; mais: reduz a distância entre quem desenvolve e quem utiliza. Estudar o utilizador nas suas limitações, capacidades e particularidades ajuda-nos a evitar erros e a obter, rapidamente, melhores resultados.
Centrar as questões no utilizador é a chave para desenvolver experiências… Boas experiências!
Ux design/Experiência do Usuário - Conexão KingHost 2015Luisa Ambros
MOMENTO 1: PALESTRA
U.X. Design/Experiência do Usuário: O que é e por que importa
— Conceito e origem
— Como o usuário, você e seu negócio se beneficiam
— O que faz um profissional de UX
MOMENTO 2: WORKSHOP
Entregáveis de UX & Teste de Usabilidade
http://www.luisaambros.com/blog/palestra-e-workshop-de-ux-designexperiencia-do-usuario-no-conexao-kinghost-2015/
Palestra realizada na SEMANA NACIONAL DE CIÊNCIA E TECNOLOGIA - Ano 2014
FATEC Mogi Mirim – Faculdade de Tecnologia “Arthur de Azevedo”
http://www.fatecmm.edu.br/index.php/noticias-da-fatec/98-noticias-e-eventos/noticias-da-fatec/360-semana-nacional-de-ciencia-e-tecnologia-2014
JoinCommunity 2 - Projetando um novo app usando user centered designFernando Camargo
Apresentação feita no evento JoinCommunity 2° edição.
Site do evento: http://www.joincommunity.com.br/
Arquivos mostrados durante a apresentação:
https://www.dropbox.com/s/j5cqi3njpnxqvtg/NathanWolff.pdf
https://www.dropbox.com/s/341r8hilqh8dz4k/SaphiraCardoso.pdf
A apresentação mostra a proposta de uma ferramenta que por meio do levantamentos de inputs do contexto a ser trabalhado apresenta outputs com informações para auxiliar a escolha dos métodos de pesquisa mais adequados a partir das características de cada projeto.
UX como estratégia para conquistar clientes e impactar negóciosPriscilla Albuquerque
Não faz muito tempo que negócios e produtos digitais eram quase todos feitos em cima de ideias e hipóteses de desenvolvedores, clientes ou designers, em um cenário onde não fazia diferença a visão ou o conhecimento das necessidade daqueles que são os principais interessados: os usuários. Com o aumento da competitividade e maturação do mercado foi ficando claro que grandes negócios que hoje se destacam existem essencialmente para resolver problemas reais de pessoas reais.
As metodologias do user experience design que focam em entender a fundo esses usuários e suas “dores” acabam por gerar soluções muito mais coerentes e assertivas causando impactos significantes na proposta de valor das empresas. Dessa forma o UX design tem se tornado uma estratégia indispensável para o sucesso e conquista em diferentes mercados, principalmente os digitais e inovadores como startups e empresas de tecnologia.
Focar nas necessidades e “dores” dos usuários em mercados altamente competitivos deixa de ser algo opcional para tornar-se indispensável para o sucesso de um negócio.
Palestra que conceitua alguns conceitos básicos relacionados a experiência do usuário e aborda os benefícios da aplicação das metodologias e recursos do UX nos projetos.
Palestra ministrada na Tableless Conference, no dia 16 de maio de 2013 em São Paulo, e no Front in Aracaju no dia 31/08, sobre o papel do desenvolvedor Front-End na experiência do usuário.
Deep Dive Material Design, e um pouquinho sobre mobile UXNelson Vasconcelos
Por que uma guideline? Quais são os benefícios? Quais são os erros mais comuns? Quais exemplos legais temos por aí?
A idéia dessa apresentação é a de aprofundar muito mais o conteúdo em relação das minhas anteriores, indo muito além da explicação sobre o que é Material Design.
Apresentação realizada em Maio/2016 no especial de 3 do meetup de Android, organizado pelo GDG-SP.
Vídeo da apresentação: https://www.youtube.com/watch?v=xyGFOFc_FlU
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...Nelson Vasconcelos
Apresentação sobre UX e Material Design, explicando o conceito de guidelines com exemplos, além de dúvidas e erros mais comuns ao projetar interfaces para Android.
Ux design como estrategia conquistar clientes impactar negociostdc-globalcode
O "UX design" tem se tornado uma estratégia indispensável para o sucesso e conquista em diferentes mercados, principalmente nos digitais e inovadores, como é o caso de startups e empresas de tecnologia. Não faz muito tempo que negócios e produtos digitais eram quase todos feitos em cima de ideias e hipóteses de desenvolvedores, clientes ou designers em um cenário onde não fazia diferença a visão ou as necessidade daqueles que são os principais interessados na solução: os usuários. Com o aumento da competitividade e maturação do mercado foi ficando claro que grandes negócios hoje em destaque existem essencialmente para resolver problemas reais de pessoas reais.
As metodologias do user experience design que focam em entender a fundo esses usuários e suas "dores" acabam por gerar soluções muito mais coerentes e assertivas causando impactos significantes na proposta de valor das empresas. Dessa forma o UX design tem se tornado uma estratégia indispensável para o sucesso e conquista em diferentes mercados, principalmente os digitais e inovadores como startups e empresas de tecnologia. Descubra como e porque o processo do user experience design a partir do entendimento dos usuários e de suas "dores" consegue gerar propostas de valor muito mais impactantes.
Pensar e entender quem são os utilizadores e quais as suas necessidades permite-nos melhorar o relacionamento humano com a tecnologia; mais: reduz a distância entre quem desenvolve e quem utiliza. Estudar o utilizador nas suas limitações, capacidades e particularidades ajuda-nos a evitar erros e a obter, rapidamente, melhores resultados.
Centrar as questões no utilizador é a chave para desenvolver experiências… Boas experiências!
Ux design/Experiência do Usuário - Conexão KingHost 2015Luisa Ambros
MOMENTO 1: PALESTRA
U.X. Design/Experiência do Usuário: O que é e por que importa
— Conceito e origem
— Como o usuário, você e seu negócio se beneficiam
— O que faz um profissional de UX
MOMENTO 2: WORKSHOP
Entregáveis de UX & Teste de Usabilidade
http://www.luisaambros.com/blog/palestra-e-workshop-de-ux-designexperiencia-do-usuario-no-conexao-kinghost-2015/
Palestra realizada na SEMANA NACIONAL DE CIÊNCIA E TECNOLOGIA - Ano 2014
FATEC Mogi Mirim – Faculdade de Tecnologia “Arthur de Azevedo”
http://www.fatecmm.edu.br/index.php/noticias-da-fatec/98-noticias-e-eventos/noticias-da-fatec/360-semana-nacional-de-ciencia-e-tecnologia-2014
JoinCommunity 2 - Projetando um novo app usando user centered designFernando Camargo
Apresentação feita no evento JoinCommunity 2° edição.
Site do evento: http://www.joincommunity.com.br/
Arquivos mostrados durante a apresentação:
https://www.dropbox.com/s/j5cqi3njpnxqvtg/NathanWolff.pdf
https://www.dropbox.com/s/341r8hilqh8dz4k/SaphiraCardoso.pdf
A apresentação mostra a proposta de uma ferramenta que por meio do levantamentos de inputs do contexto a ser trabalhado apresenta outputs com informações para auxiliar a escolha dos métodos de pesquisa mais adequados a partir das características de cada projeto.
UX como estratégia para conquistar clientes e impactar negóciosPriscilla Albuquerque
Não faz muito tempo que negócios e produtos digitais eram quase todos feitos em cima de ideias e hipóteses de desenvolvedores, clientes ou designers, em um cenário onde não fazia diferença a visão ou o conhecimento das necessidade daqueles que são os principais interessados: os usuários. Com o aumento da competitividade e maturação do mercado foi ficando claro que grandes negócios que hoje se destacam existem essencialmente para resolver problemas reais de pessoas reais.
As metodologias do user experience design que focam em entender a fundo esses usuários e suas “dores” acabam por gerar soluções muito mais coerentes e assertivas causando impactos significantes na proposta de valor das empresas. Dessa forma o UX design tem se tornado uma estratégia indispensável para o sucesso e conquista em diferentes mercados, principalmente os digitais e inovadores como startups e empresas de tecnologia.
Focar nas necessidades e “dores” dos usuários em mercados altamente competitivos deixa de ser algo opcional para tornar-se indispensável para o sucesso de um negócio.
Palestra que conceitua alguns conceitos básicos relacionados a experiência do usuário e aborda os benefícios da aplicação das metodologias e recursos do UX nos projetos.
Palestra ministrada na Tableless Conference, no dia 16 de maio de 2013 em São Paulo, e no Front in Aracaju no dia 31/08, sobre o papel do desenvolvedor Front-End na experiência do usuário.
Deep Dive Material Design, e um pouquinho sobre mobile UXNelson Vasconcelos
Por que uma guideline? Quais são os benefícios? Quais são os erros mais comuns? Quais exemplos legais temos por aí?
A idéia dessa apresentação é a de aprofundar muito mais o conteúdo em relação das minhas anteriores, indo muito além da explicação sobre o que é Material Design.
Apresentação realizada em Maio/2016 no especial de 3 do meetup de Android, organizado pelo GDG-SP.
Vídeo da apresentação: https://www.youtube.com/watch?v=xyGFOFc_FlU
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...Nelson Vasconcelos
Apresentação sobre UX e Material Design, explicando o conceito de guidelines com exemplos, além de dúvidas e erros mais comuns ao projetar interfaces para Android.
Como não ferrar com a user experience - Campus Party 2012 Juliana Gaiba
Você não pode contar com alguém específico para cuidar da user experience do seu site, aplicativo, produto, serviço ou foguete? Bem, não se desespere. Saiba técnicas para criar interfaces amigáveis sem ser necessariamente um expert no assunto, ou seja, torne a vida dos usuários de internet e aplicativos móveis mais fácil, com movimentos mais rápidos, diretos e baratos.
--
Oficina ministrada durante a Campus Party 2012
Área de Inovação, no palco "Desenvolvimento"
10/fev/2012
--
Vídeo da apresentação: http://youtu.be/-Cy0KKLfInI
➙ Conteúdo completo, texto e vídeo, em: https://www.thiengo.com.br/material-design
Apresentação da linguagem de design do Google: Material Design.
Vamos abordar: o que era utilizado anteriormente, origem, lançamento, objetivos, regras a serem seguidas, principais características e o que esperar para o futuro do Material Design.
➙ Para receber os conteúdos do blog em primeira mão, assine a lista de emails em: http://www.thiengo.com.br
*Obs. : os GIFs animados não funcionam no LinkedIn SlideShare.
Abraço.
▶ Treinamento oficial:
➙ Prototipagem Profissional de Aplicativos Android:
↳ https://www.udemy.com/android-prototipagem-profissional-de-aplicativos/?persist_locale&locale=pt_BR
▶ Livros oficiais:
➙ Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia:
↳ https://www.thiengo.com.br/livro-desenvolvedor-kotlin-android
➙ Receitas Para Desenvolvedores Android:
↳ https://www.thiengo.com.br/livro-receitas-para-desenvolvedores-android
➙ Refatorando Para Programas Limpos:
↳ https://www.thiengo.com.br/livro-refatorando-para-programas-limpos
▶ Redes:
➙ Udemy: https://www.udemy.com/user/vinicius-thiengo/?persist_locale&locale=pt_BR
➙ YouTube: https://www.youtube.com/user/thiengoCalopsita
➙ Facebook: https://www.facebook.com/thiengoCalopsita
➙ LinkedIn: https://www.linkedin.com/in/vin%C3%ADcius-thiengo-5179b180/
➙ GitHub: https://github.com/viniciusthiengo
➙ Twitter: https://twitter.com/thiengoCalops
➙ Google Plus: https://plus.google.com/+ThiengoCalopsita
▶ Blog App:
➙ https://play.google.com/store/apps/details?id=br.thiengocalopsita&hl=pt_BR
Apresentação sobre usabilidade no 12° Encontro de WebDesign. A partir de cases de sucesso e insucesso, abordamos os principais fundamentos da disciplina.
Saiba o que são plataformas próprias, de conteúdo e sociais. Como elas funcionam no ambiente digital e como sua empresa deve estar presente em cada uma delas. Autor: Henrique Donnabella
Criando produtos e serviços reais para o mundo virtual.Jane Vita
Objetivo do curso: ajudar com que profissionais e estudantes saibam como ser mais criativos, respeitar e conceitualizar ideias, aumentando as chances de sucesso de um produto ou serviço ao ser lançado no mercado.
O que é UX? Introdução, Ferramentas e ExperiênciasUXPA São Paulo
Nesse encontro a equipe da UXPA SP (www.uxpasp.com) falou sobre UX focando principalmente em quem está começando a desbravar essa área ou tem curiosidade sobre o que é essa atividade.
Partimos de uma introdução histórica e as principais ciências que compõem a rotina dos profissionais de UX, falamos sobre as ferramentas e os entregáveis mais comuns, e apresentamos algumas experiências aprendidas.
Workshop conducted with multidisciplinary teams, introducing Design Thinking and Lean UX techniques to lift teams communication, collaboration and user focus on product development.
2. 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
4. “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
5. “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
6. “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
7. - 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!”
8. 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?
9. Metáfora
substantivo feminino
estl 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)
10. Animação Bold, gráfico e
intencional
Superfícies e
sombras
Design adaptativo
Características
11. - 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
12. - 3D: 1dp
- Duas fontes de luz: ambiente e foco.
Superfícies e sombras
Ambiente
Foco Ambiente Foco e Ambiente
13. - 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
15. 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.
18. 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
19. - 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
22. 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
23. - 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
24. 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.
25. Um único design adaptativo
- mesmo usuário ;)
- experiência consistente
- mesma linguagem de comunicação
- interface adaptada ao device
- menor custo de manutenção
26.
27.
28. 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
30. 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
31. 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
32. 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
33. ● 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
34. 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
35. 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
36. 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
We’re seeing more and more developers adopt Material, especially since the launch of Lollipop and the announcements at Google I/O 2015. We’ll share some developer case studies highlighting the benefits early adopters have seen.
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
Within the material environment, virtual lights illuminate the scene. Key lights create directional shadows, while ambient light creates soft shadows from all angles.
Shadows in the material environment are cast by these two light sources. In Android development, shadows occur when light sources are blocked by sheets of material at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows the card with a height of 6dp.