Mobile User Experience: Compilando pessoas e codificando cores
Upcoming SlideShare
Loading in...5
×
 

Mobile User Experience: Compilando pessoas e codificando cores

on

  • 674 views

Palestra apresentada no palco Pitágoras na edição 2014 da Campus Party em São Paulo.

Palestra apresentada no palco Pitágoras na edição 2014 da Campus Party em São Paulo.

Statistics

Views

Total Views
674
Views on SlideShare
670
Embed Views
4

Actions

Likes
1
Downloads
12
Comments
1

2 Embeds 4

https://twitter.com 2
http://meem.greyshare.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile User Experience: Compilando pessoas e codificando cores Mobile User Experience: Compilando pessoas e codificando cores Presentation Transcript

    • 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!
    • POR QUÊ ESTOU AQUI?! 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.!
    • BOA NOTÍCIA :)! Com algum tempo e alguns truques você consegue, especialmente para aplicativos.!
    • 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!
    • 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.!
    • 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! INVASIVA! Estudo de ! privação! PESQUISADOR ! AUSENTE! Teste de ! protótipo! Estudo de ! diário! Entrevista ! contextual! Pesquisa online! Shadowing! Estudos de ! tráfego! Shop Alongs! MENOS INVASIVA! PESQUISADOR! PRESENTE!
    • 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! Sketch &! Storyboard! Baixa ! fidelidade! Prototipação ! no papel! Alta ! fidelidade!
    • Na prática:! Loop de prototipação! Validar! Construir/ Criar! 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!
    • Se você é um desenvolvedor, logo:! 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).!
    • 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/  
    • Explore as diversas possibildiades de identidade visual! h"p://p"rns.com/  
    • 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}!
    • Você escolheu a cor de fundo verde! E criou uma caixa. O  Texto  da  caixa  pode  ser  uma  versão  mais  clara   da  cor  do  background,  não  branca  nem  cinza.  
    • 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/!