launchpad build-bh - migrando para um mundo material
TRANSCRIPT
Case AppProvaMIGRANDO PARA UM MUNDO MATERIAL
https://thomas.vanhoutte.be/miniblog/material-design-gif-examples/
Ana Paula BatistaGoogle Expert - UX/UI
http://www.cutedrop.com.br/2015/07/os-stickers-animados-e-lindos-do-novo-aplicativo-google-messenger/
Guilherme Castro Lucas Ferraz Tássio MendesBárbara TomazAna Paula Batista
https://dribbble.com/shots/2167068-Man-s-best-friend
Desenvolvimento interno
Bug Fixes
Maior estabilidade
Aumentar o engajamento
Potencializar a retenção
Facilitar o uso
Janeiro, 2016
Maio, 2015
>800K
Apps feitos com MaterialGoogle Play Store
200K
http://www.cutedrop.com.br/2015/07/os-stickers-animados-e-lindos-do-novo-aplicativo-google-messenger/
App: Trello
Aumentando o engajamento dos usuários pelo Material
10%
mais sessões por usuário por
semana
42%
mais boards criados por sessão
63%
mais pessoas adicionadas a
boards, por sessão
App: Unni’s Pouch
Potencializar o engajamento do usuário através do FAB
31%
aumento de posts do usuário após
utilizar FAB para novos posts
62 segundos
de aumento do time spent por sessão
App: B&H Photo Video
“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!”
Surpreendendo usuários e aumentando vendas pelo app
5x
aumento de
compras no app
700%
aumento de vendas
geral
App: Ebabcha
Aumentando a exploração de conteúdos através de animações.
66%
aumento nas page views diárias
do app
53%
aumento nas sessões do app
Uma interface forte, bonita econsistente em todas as plataformas.
Uma interface forte, bonita e consistente por todos os devices.
Uma interface forte, bonita e consistente para todos os usuários.
É só aplicar a guideline do Material Design!
1. Necessidades dos usuários
2. Especificação Funcional
3. Design de interação
4. Arquitetura da informação
5. Design de interface
Especificação Funcional
Design Visual
Design da Informação
Design da interação
Necessidades dos usuários
http://goo.gl/E4D94Z
Necessidades dos usuários
Entrevistas não estruturadas
Customer Success Team
Testes de Usabilidade
[fulano] é um [caracteristicas do usuário] que precisa (um meio de) [necessidade do usuário] por que ele valoriza [insight].
Converse com seus usuários:
- por telefone- site- visitas presenciais- email- até um café!
O mais importanteé ouvir!
Como entender as necessidades do meu usuário?
Problemas- Falta de identidade e identificação com o usuário;
- Editar perfil pouco intuitivo;
- Dificuldade de acompanhamento das questões já
respondidas durante a execução do simulado;
- Comunicação inadequada para utilização do app;
- Destaque para informações pouco relevantes para os
usuários;
- Dificuldade de acesso à principal funcionalidade
(simulados);
- Dificuldade de navegação entre os diferentes status de
simulados.
Design da interação
Fluxo e priorização
Usuário entra Busca/Navega
Disciplina ou simulado
Responde questões
Acompanha o desenvolvimento
Aprovação no ENEM
Edita Perfi/ QR Codel
Onboarding
Cadastro/ LoginSuporte
Verifica questões feitas
Design da informação
Mapeamento de Conteúdo/ Funcionalidades
Login
QR Code
Cadastro
Busca
Editar Perfil Suporte
Simulados
Visualizar questões respondidas
Jogos Questões
Onboarding
Pontuação
Pontuação
QuestõesVisualizar questões
respondidas
Cadastro
Editar Perfil
QR Code
Suporte
Onboarding
Agrupamento (categorização)
Simulados JogosBusca Login
ApoioIdentificação do
usuárioSimulados Jogo
- Papel é seu melhor amigo
- Utilize as categorias como base, mas tudo bem
se você quiser dar destaque para algo em um
nível abaixo
- Novas ideias de conteúdos vão surgir!
Estruturando o aplicativo
Visual design
Paleta de Cores
https://material.google.com/style/color.html#color-color-palette
Accent Color
Primary Color
#E91E63 #C93C4D #E0415A #FE4760 #FF4A69
#3F51B5 #85D1CE #98DEDB #AAEAE7
Cor no material é inspirada por tons ousados justapostos com ambientes suaves, sombras profundas, e os destaques brilhantes.
ÍconesUtilizam formas geométricas para representar visualmente ideias centrais, capacidades, ou tópicos.
https://material.google.com/style/icons.html
Tipografia
Roboto Noto
https://material.google.com/style/typography.html#typography-styles
Especificação funcional
E a identificação com o usuário?
E a priorização de simulados?
Agora vai!
Teste de Usabilidade
Precisamos melhorar a forma de login...
Menu tá muito escondido...
Navegação de simulados ainda estava confusa.
Botão de responder questão deveria estar acessível
Explorar mais nosso mascote
http://www.cutedrop.com.br/2015/07/os-stickers-animados-e-lindos-do-novo-aplicativo-google-messenger/
Craft details
Próximos passos
Testes de Usabilidade
Firebase
Atualizar interface do iOS
Lançamento: 01/09
Sim, você pode utilizar Material Design no iOS!!
- Elementos podem ser utilizados,
mas seja coerente com o
sistema operacional
- Foque mais no conceito do
Material, do que nos elementos
visuais
- Have fun!
Bônus 1
Adaptive Layouts: Pocket
Crafted Simplicity: Weather Timeline
Delightful Animation: Tumblr
Elegant Typography: NY Times - Latest News
Immersive Imagery: B&H Photo Video Pro Audio
Seamless Browsing: Pocket Casts
Material Design AwardsBônus 2
Learn material design in ~2 hours
Medium 30 minFor more advanced material designersRead: Meaningful transitions from AnimationRead: Imagery from StyleRead: Adaptive UI from Layout
Medium 60 minWatch [30 min]: Adaptive UI with Material Design
Watch [30 min]: What’s New in Android UI Engineering
Advanced 30 minReview: Android design support library
Easy 7 min
Watch: 6 min videoWatch: 1 min video
Easy 20 min
From the home page of the material design specRead: EnvironmentRead: Material properties Read: Elevation and shadows
Bônus 3
Resources
- google.com/design- Icons tool- Devices tool- Android Design Support Library
Spec Updates
- adaptive layouts- elevation- splash screens- settings- FAB expansion- navigation- empty states
Obrigada! :)[email protected]@anapaulazambuja
Visual Design: Bárbara Tomaz ([email protected])
https://dribbble.com/shots/1192777-Purrrification