mobile user experience: compilando pessoas e codificando cores

MOBILE USER EXPERIENCE!Compilando pessoas e codificando cores!

Pedro Albuquerque!UX Senior Visual Designer!Telefonica Digital UX Team!São Paulo, Brasil!

O que veremos hoje?!

01 // Vantagens e limitações dos dispositivos móveis!

02 // Atributos importantes para se criar uma boa ! experiência mobile.!

03 // Princípios do design para criação de aplicativos.!

04 // Exercícios de UX para criação de serviços mobile.!!05 // Dicas e melhores práticas de implementação de ! interface!

Você quer que seu aplicativo seja apresentável sem a intervenção de um “designer”.!!Você quer ser capaz de criar aplicativos por sua própria conta, ou somente com uma equipe de desenvolvedores.!

POR QUÊ ESTOU AQUI?!

Com algum tempo e alguns truques você consegue, especialmente para aplicativos.!

BOA NOTÍCIA :)!

Por onde começar?!

Um smartphone não é PC!

Um smartphone não é PC!

Sentado em um ambiente previsível.!!Tela maior favorece multi-tasking.!!Teclado e mouse como input.!

Um smartphone não é PC!

Meio ambiente com contextos variáveis.!!Tela menor e espaço limitado para input de texto.!!A interface do usuário ocupa a tela toda.!!Dificuldade em multi-task e fácil se perder.!

Um smartphone não é PC!

Smartphones não são mais apenas telefones!

Aplicativos móveis nos apresentam uma oportunidade de inventar novas formas das

pessoas interagirem com a informação.!

O que nos liberta para atuar fora dos limites das suas hipóteses!

Qual o primeiro passo?!

Saiba com quem você está falando!

Cultive uma mentalidade “móvel”!

Abrace o caos!

Como criar uma grande experiência mobile?!

1!Faça com seja essencialmente mobile!

Foque no que ele faz melhor!

Tecnologia pode guiar, mas não deve ser o foco!

Foco na necessidade!

Na prática:!

Técnicas de pesquisa!

Entrevista !contextual!

INVASIVA!

MENOS INVASIVA!

PESQUISADOR!PRESENTE!

PESQUISADOR !AUSENTE!

Estudo de !privação!

Pesquisa online!

Shop Alongs!

Teste de !protótipo!

Estudos de !tráfego!

Shadowing!

Estudo de !diário!

2!Faça com seja relacionada ao seu contexto!

Contexto é compreender as relações humanas que ocorrem entre pessoas,

lugares e objetos no mundo.!

Framework de contexto!

Orquestração e inflexão!

Como atingimos essa compreensão?!

Lembre-se de interrupções e atenção parcial!

Reduza a carga cognitiva!

Faça pesquisa de campo!

Na prática:!

Divida-se em grupos!

Na prática:!

Vá para a rua!

Na prática:!Crie 2-3 conceitos com base na necessidade que sua equipe identificou!

Na prática:!Faça sketchs das suas ideias!

3!Enfatize sua utilidade e funcionalidade!

Entenda as possíveis características de UI!

h"p://www.lukew.com/ff/entry.asp?1071  

Conheça as capacidades técnicas dos dispositivos!

Direção: através de um compasso digital!

Giroscópio: movimento 360o!

Áudio: microfone ou caixa de som!

Vídeo e Imagem: captura e download!

Dual camera: câmeras na frente e atrás!

Conexões do dispositivo: como Bluetooth!

Proximidade: proximidade com outros objetos!

Luz ambiente: percepçãp de claro/escuro no ambiente!

NFC: Near Field Communications através de frequência de rádio!

Amadureça sua capacidade de renúncia!

Diga adeus ao “tá pronto”!

Mostre de cara as possibilidades de tarefas da

sua aplicação.!

Dentro do aplicativo temos tarefas!

Mas também temos possibilidades de tarefas que podem ser realizadas!

X!

Como definir essas possibilidades?!

Na prática:!

Desenhando telas!

“O que as pessoas acham deste lugar?”

Na prática:!

Desenhando telas!

Agrupe os cards de maneira a responder a pergunta. Permita que as pessoas validem suas hipóteses de maneira rápida.

Na prática:!

Prototipe em cada estágio!

Prototipação !no papel!

Sketch &!Storyboard!

Baixa !fidelidade!

Alta !fidelidade!

Na prática:!

Loop de prototipação!

Construir/Criar!

Validar!

Refinar!

Na prática:!

Validando hipóteses!

Os usuários entendem isso?!!Está perceptível a função de cada tela?!!Posso simplificar isso?!!É intuitivo?!

Na prática:!

Dicas para prototipação!

Planeje fazer muitos protótipos!!Trabalhe em escala e imprima tudo.!!Teste no dispositivo o mais rápido o possível.!

Consistência visual!ou como deixar meu aplicativo bonito!

Usa seu editor de código e provavelmente nunca abriu um Photoshop ou Illustrator (só obrigado).!!Você escreve scripts para resolver problemas.!!Você adora o seu terminal e seu banco de dados, mas nem tanto sua régua ou paleta de cores (se você tiver isso).!

Se você é um desenvolvedor, logo:!

Boa interface !

= !Mesmos princípios!

!Web developer / System developer / Java / Ruby / iOS / CSS!

Princípios de User Experience!

Simplicidade!!Consistência!!Navegação intuitiva!

Regra do dedão!

Orientação do dispositivo!

Conheça os padrões de interação!

Navegação / Abas / Galeria de imagens / Menu gaveta / Botão voltar / Botões de ação / Atalhos / Compartilhar / Busca / Listas / Caixa de diálogo / Notificações / Inseri dados / Gestos!

Diferentes estilos de interface!

Interface nativa x customizada?!

Explore as diversas possibildiades de identidade visual!

h"p://androidnice=es.tumblr.com/  

h"p://p"rns.com/  

Explore as diversas possibildiades de identidade visual!

Launch icon!

Android!

!

iOS!

!

Windows Phone!

Ícones dentro da aplicação!

Sobre o uso de ícones!

Invista em um bom set de ícones.!!Pixel icons são bons para aplicações web.!!FamFamFam é um bom começo.!!Somente use ícones quando este for familiar, do contrário utilize o ícone padrão, ou texto + ícone!

Grid: Android!

Grid: iOS!

Grid: Windows Phone!

Lei da Proximidade!

A proximidade espacial ou temporal de elementos pode induzir a mente a perceber um coletivo ou totalidade.!

Tipografia!

Legibilidade!Tamanho!Espaçamento!Entrelinha!Largura da coluna!Contraste!

Legibilidade e resolução!

Tamanho mínimo!

Cuidado ao escolher a fonte!

Por isso existem fontes padrão!

Tamanho mínimo: só testando!

h"p://type-­‐scale.com/  

h"p://www.google.com/fonts  

O segredo das cores!

Escolhendo cores!

h"p://www.colourlovers.com/  

Escolha 3 cores: menos é mais!

Títulos!H1, h2, h3, h4{ color: # 000} !

!Corpo de texto!Body { color: # 333}!

!Texto tênue!.muted { color: # 666}!

E criou uma caixa. O  Texto  da  caixa  pode  ser  uma  versão  mais  clara  da  cor  do  background,  não  branca  nem  cinza.  

Você escolheu a cor de fundo verde!

Combinando cores!

Títulos!H1, h2, h3, h4{ color: # 000} !

!Corpo de texto!Body { color: # 333}!

!Texto tênue!.muted { color: # 666}!

Combinando cores!

Título #000. Corpo de texto #333 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. #666 Copyright texto tênue

Combinando cores!

Título. Corpo de texto lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Copyright texto tênue

Grid + Tipografia + Cores = Hierarquia e contraste!

Detalhes tão pequenos…!

Escondidinho!

Interface animada!

Design reutilizável!

Assim como temos funções que reutilizamos em código, também temos ferramentas

que podemos utilizar para criar elementos visuais

consistentes. !

h"p://getbootstrap.com/  

h"p://founda=on.zurb.com/  

Considerações finais!Ufa!!

Seja consistente!

Não coloque tudo na mesma tela.!

O tom de voz faz toda diferença.!

Obrigado :)!

Pedro Albuquerque!@pedroaborges!pedro.albuquerque@gmail.com!www.pedroalbuca.com!

Referências úteis!This is Service Design Thinking:!http://thisisservicedesignthinking.com/!!Design Thinking - Inovação em Negócios:!http://livrodesignthinking.com.br/!!Mobile First:!http://www.abookapart.com/products/mobile-first!!Touch Gesture Reference Guide:!http://www.lukew.com/ff/entry.asp?1071!!Multi-device Layout Patterns:!http://www.lukew.com/ff/entry.asp?1514!!Designing Mobile Apps:!http://www.appdesignbook.com/!!Mobile UX Essentials:!http://www.slideshare.net/Rachel_Hinman/mobile-ux-essentials!!Hackdesign.org:!http://hackdesign.org/!

UX Archive:!http://www.uxarchive.com/!!Pttrns:!http://pttrns.com/!!Android Niceties:!http://androidniceties.tumblr.com/!!Android Pttrns:!http://androidpttrns.com/!!iOS Human Interface Guidelines:!https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/!!Design | Android Developers:!http://developer.android.com/design/index.html!!Android UI Design Kit for PS and GIMP:!http://androiduiux.com/2013/10/04/android-ui-design-kit-for-photoshop-and-gimp-4-3-free-download/!!iOS7 GUI PSD (iPhone):!http://www.teehanlax.com/tools/iphone/!!Colour lovers:!http://www.colourlovers.com/!!Adobe Kuler:!https://kuler.adobe.com/!!Color Scheme Designer:!http://colorschemedesigner.com/!!Flat design vs. Realism:!http://www.flatvsrealism.com/!