Oficina Design de Interface para Dispositivos Móveis

3,181 views

Published on

Oficina Design de Interface para Dispositivos Moveis, de Paolo Passeri, ministradas em 2012.

Published in: Design
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total views
3,181
On SlideShare
0
From Embeds
0
Number of Embeds
785
Actions
Shares
0
Downloads
0
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Oficina Design de Interface para Dispositivos Móveis

  1. 1. Minicurso Design de Interfaces para Dispositivos Móveis
  2. 2. Tópicos• Entendendo Dispositivos Móveis e o Processo de Desenvolvimento de UI’s• Definindo as Funcionalidades do seu Aplicativo• Por que um “bom” Design é um diferencial?• A apresentação começa com o Ícone• Padrões de Interação e a Importância do Fluxo de uma Interface• Guias (HIG’s) e a Interface de Usuário• Prototipação Rápida• Identidade Visual, criando seu próprio “Look and Feel!”
  3. 3. Quem sou eu?• Paolo Domenico Passeri• Curioso por natureza!• Engenheiro + Designer + MKT• Pensar em soluções• Antes: Aluno, Monitor e Professor do Faber-Ludens• Hoje: Gerente de Desenvolvimento de Produtos na Positivo Informática
  4. 4. ...e vocês?
  5. 5. O curso 40% Conceitos 60% Atividades
  6. 6. Para ENTENDER os dispositivos móveis é importanteentender os seus USUÁRIOS...
  7. 7. ...e o que elesBUSCAM• Facilidade• Agilidade• Intuitividade• Algo “novo”• Se surpreender• “Transparência”
  8. 8. Entenda as LIMITAÇÕES Usuários não têm um PONTEIRO nos dedos
  9. 9. Entenda as LIMITAÇÕES Nem são AGUIAS, com super-visão
  10. 10. Entenda as LIMITAÇÕES Geralmente vão interagir com UM aplicativos por vez
  11. 11. Você tem que ser O USUÁRIO!Aprenda TUDO sobre o dispositivo• como ele funciona?• é pesado ou leve?• é confortável de segurar?• como acesso suas funções?• quais botões ele possui?• quais aplicativos são “legais”?• quais não são?
  12. 12. Não é um computador TRADICIONAL!
  13. 13. A interface tem que ser REPENSADA... CTRL+C, CTRL+V NÃO funciona!
  14. 14. ...para ATENDER ao dispositivo móvel Somente os elementos CHAVE se mantém!
  15. 15. PROCESSO de desenvolvimento Conceito Design Desenvolvimento Distribuição Marketing Manutenção
  16. 16. Atividade vs. Tempo Test Debug Desenvolvimento Design DESENVOLVIMENTO > DESIGN = RESUTADOS
  17. 17. Atividade vs. Tempo Test Desenvolvimento Debug Design DESIGN > DESENVOLVIMENTO = RESUTADOS
  18. 18. Como vamos chegar lá? Ideia Processo Interface (Refinar) (Executar) (Desenhar)
  19. 19. X-Y: Tipo de Aplicativo Sério Mais função menos forma Eficiência para Entreter Um app de produtividade, como uma O principal foco de um aplicativo de Ferramenta Séria, cumpre uma tarefa bem entretenimento sério, é permitir que o específica. Seu aplicativo deve rapidamente usuário consuma mídia. Usuários esperam e de maneira fácil, realizar o que 80% das uma interface com customizações porém pessoas vão fazer com ele. Vá direto ao fácil de navegar. A interface é o conteúdo. ponto. Entretenimento Ferramenta Jogar e se Divertir Elementos inovadores Tipo de aplicativo que vai entreter o usuário resolvendo problemas ou jogos. Seu foco deve ser somente um, Uma Ferramenta Divertida, têm o foco em dar um momento de diversão. Vá direto ao resolver ou alcançar algo porém incentiva a ponto e não use muito hierarquia. A história, exploração entregando informações experiência e jogabilidade são cruciais. relevantes. DivertidoEixo X: uso Eixo Y: conteúdo
  20. 20. Refinando a sua Ideia• Quem é o seu PÚBLICO ALVO? • Pessoas de negócios ou usuários finais • Jovens ou idosos • Homens ou Mulheres • Vão usar diariamente ou ocasionalmente• Quais são as principais FUNCIONALIDADES? • Consumir ou produzir conteúdo? • É necessário já possuir algum serviço? • O que realmente o usuário vai querer? “DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”
  21. 21. A Declaração de Definição de ProdutoResuma a ideia em uma frase:<<Diferenciação>> <<Solução>> para<<Público>>Exemplo:<<Uma maneira rápida e fácil>> de se <<criarATA’s de reunião>> para <<profissionais de todasas áreas>>
  22. 22. “ Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.” - Mark Twain
  23. 23. EXERCÍCIO: Criando a sua DECLARAÇÃO• ESCOLHAM uma categoria de aplicativo• DEFINAM o tipo do seu aplicativo (eixo x-y) e quem será o público alvo• LEVANTEM todas as funcionalidades que consigam pensar (brainstorm)• CORTEM funcionalidades que não fazem parte do core (menos importantes)• JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES criando a declaração • Post-It 1:30 horas • Papel • Lápis/Caneta
  24. 24. Meetings for iPadPaolo Domenico Passeri
  25. 25. DESIGN como um DIFERENCIAL
  26. 26. Por que ter DESIGN?• Maior apelo aos usuários• Mais atenção da mídia• Diferencial vs. Concorrência• Da vontade de “voltar”• Incentiva a exploração• VENDE MAIS!
  27. 27. Estudo de Caso: CONVERT• Aplicativo para conversão de unidades • Unidades vendidas: 197,424• Preço: U$0.99 • Faturamento bruto: $195,450• Lançado em Agosto de 2009 • Faturamento liquido: $137,065 2 meses Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN!
  28. 28. A importância dos ICONES • É a porta de ENTRADA de seu aplicativo • Se bem desenhado pode REPRESENTAR seu produto • “Eu nem entro se o ICONE for RUIM”! • Apresenta FUNÇÕES de maneira VISUAL para o usuário
  29. 29. Antes de entrar no app você já o julga...
  30. 30. Qual destes você escolheria (deixe 8)? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
  31. 31. Como?• Foco em uma forma padrão, não em diversos elementos que deixam o icone “sujo”.• Escolha cores com cuidado, use cores da interface.• Evite usar fotos e muito texto.• Se usar uma marca, deixe somente o necessário para dar representatividade.
  32. 32. EXERCÍCIO: Desenhando o ICONE• LEIAM novamente a “Declaração de Definição do Produto” (DDP)• BUSQUEM elementos que possam inspirar o icone, considerando a DDP• DESENHEM 5 conceitos de icone• SELECIONEM 1 conceito• DESENHEM o icone “final” • Papel 1 hora • Lápis/Caneta • Cores
  33. 33. Fontes de íconesiOS Toolbar IconsGlyphish’/>iOS Toolbar Icon SetiOS Toolbar Icons 230 Free Vector IconsiconSweetsThe Android Developer Common Icon Set II30 Free Android Menu IconsFree Android 2.x Monster Icons
  34. 34. INTERAGINDO COM DISPOSITIVOS MÓVEIS
  35. 35. Métodos de Interação• Lembre-se que existem diferentes meios de interagir com o dispositivo• Antes de desenhar a UI, é necessário avaliar qual destes estão disponíveis e serão utilizados• Analise se não existe outra maneira de usuários entrarem com “dados”• Seja criativo e não se limite ao “tradicional”
  36. 36. Exemplo de Aplicativo Anotação Localização Lembrete
  37. 37. Padrões de Interação• Definem alguns CONTROLES e ELEMENTOS padrões para o design de interfaces para dispositivos móveis• É uma maneira de aprendermos com soluções que foram bem APLICADAS e DOCUMENTADAS por outros designers• Ótimo ponto de PARTIDA para DESENHARMOS e entendermos partes específicas de um aplicativo
  38. 38. Manipulação INDIRETA Manipulação DIRETA/Touch/Haptic • É necessário aprender o • Não existe mapeamento pois mapeamento das teclas as teclas são “virtuais” • Deve ser muito consistente • Difícil aprender todos os meios • Não são muito flexíveis de entrada • São muito flexíveis • Joystick Direcional • Toques curtos e longos • Botões Alfa-numéricos • Arrastar • Soft-keys • Deslizar • Rodas • Girar • Pinçar e ExpandirManipulação por GESTOS• Utilizada através de sensores• Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando
  39. 39. Botões ou Links ListasELEMENTOS Indicadores de Espera Entrada de Texto Limpa texto
  40. 40. Diagrama de FLUXO das telas• Um diagrama SIMPLES que mostra como uma TELA é ligada a outra• Te obriga a pensar na FLUIDEZ da sua interface, sem considerar os detalhes dela• Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de uma boa NAVEGAÇÃOTOOLS
  41. 41. Meetings for iPadPaolo Domenico Passeri
  42. 42. EXERCÍCIO: Traçando seu DIAGRAMA• LEIAM novamente a “Declaração de Definição do Produto” (DDP)• CONSIDEREM as interações que você vai utilizar para navegação e inputs• TRACEM o seu DIAGRAMA, considerando os GESTOS efetuados• DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a funcionalidade • Papel 2:00 horas • Lápis/Caneta
  43. 43. INTERFACE DE USUÁRIO
  44. 44. Uma BOA interface de usuário• Vai além : ENCANTADORA e ATRAENTE• Boa anfitriã : CONVIDATIVA e CATIVANTE• Te ajuda : FACÍL de usar• Traz o novo : INOVADORA ... “Eu NUNCA fiz isso!”• Não está atoa : entrega SOLUÇÕES e não somente FUNÇÕES• É NOVA e DESENHADA!
  45. 45. Dispositivos Móveis
  46. 46. Entendendo cada dispositivo 3.5” / 9.7” / 2.6” → 10.1” / Tela / 3.5” → 4.5” / 480x320 e 1024x768 e 240x320 → ? Resolução 800x480 960x640 2048x1536 1280x800+ Auto-rotativa ✓ ✓ ✓ ✓ ? Touchscreen Touchscreen Touchscreen Touchscreen Touchscreen Acelerômetro Acelerômetro Acelerômetro Acelerômetro Acelerômetro Microfone Microfone Interface(s) Microfone Microfone Câmeras Microfone Câmeras Câmeras Câmeras GPS Câmeras GPS GPS GPS RFID GPS RFID Padronização ✓ ✓ ✗ ✓ ✗
  47. 47. iPhone (iOS) HIG : Introdução• CARACTERÍSTICAS do iPhone • Tamanho da tela é COMPACTA • Memória é LIMITADA • Usuários visualizam e interagem com UM APLICATIVO de cada vez.• TIPOS de aplicativos • NATIVO: desenvolvidos com o SDK • WEB: abertos pelo browser • HÍBRIDOS: tem como predominância uma webview, porém possuem controles de aplicativos natívos
  48. 48. Diferentes ESTILOS de aplicativosComo ESCOLHER ? • Comportamentos e USO • Qual a motivação do usuário para usar este aplicativo? • Características VISUAIS • Qual a experiência de usuário que • Modelo dos DADOS você quer proporcionar? • EXPERIÊNCIA de usuário • Qual o seu objetivo para o aplicativo?
  49. 49. PRODUTIVIDADE UTILITÁRIOS organizar informações de forma HIERÁRQUICA UMA TAREFA com pouco input do usuário • Usuários abrem o aplicativo e a informação já é apresentada • Pouca interação TELA TODA, em ambientes ricos visualmente IMERSIVA • Muito peculiar• Organizar listas • Sem controles• Adicionar ou remover itens padrão• Entrar até o nível de • Diversão, como informação desejada e realizar jogos e rich-media atividades com ela
  50. 50. INTERFACE de Usuário
  51. 51. Status bar Navegation barELEMENTOS Tab bar Toolbar
  52. 52. Ações e View Modal
  53. 53. Alertas e Notificações
  54. 54. Exemplo de “View Modal” MAL desenhada
  55. 55. Tabelas Simples Indexada Agrupada
  56. 56. Controles Busca Slider e Switch Segmentados Pickers
  57. 57. iPad Toolbar Pop-overs
  58. 58. Android: Design• Seta as GUIAS para INTERAÇÕES e VISUAL• Nova Versão para PHONES e TABLETS CONTEMPLA • Princípios de DESIGN • Overview da UI • Padrões para Android • Elementos de UI
  59. 59. Muitos Devices
  60. 60. Dispositivos e Displays• Seja FLEXÍVEL• OTIMIZE layouts para diferentes telas• Recursos para diferentes DPIs
  61. 61. Temas e Tipografia Holo Light Holo Dark Holo Light/Dark
  62. 62. Iconografia Icones Action Bar Notificações
  63. 63. Padrões de UI Action Bar Multi-pane Selection
  64. 64. Exemplo: Navegação com Up vs. Back
  65. 65. Action Bar: Geral• Talvez o elemento MAIS IMPORTANTE• ADAPTÁVEL a rotação e diferentes telas• Pode ser CONTEXTUAL (ex.seleção)• COMPOSTA por: • Top Action Bar • Middle Action Bar • Bottom Action Bar
  66. 66. Action Bar: Elementos SpinnersScrollable Tabs ActionFixed Tabs Overflow Buttons
  67. 67. Layouts Multiplane Phone Tablet
  68. 68. Elementoshttp://developer.android.com/design/downloads/index.html
  69. 69. Web Apps Conteúdo Web Browser Aplicativo com Web view
  70. 70. PDF
  71. 71. Links para os HIG’s http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/Introduction/ Introduction.html http://developer.apple.com/iphone/library/documentation/general/conceptual/ipadhig/Introduction/ Introduction.html http://developer.android.com/design/index.html UI Design and Interaction Guide for Windows Phone 7 v2.0 http://wiki.forum.nokia.com/index.php/Guidelines_for_Mobile_Interface_Design
  72. 72. Desenhando Interfaces• Importante iniciar com o NÍVEL mais BAIXO o possível• NÃO se apegue a DETALHES : use círculos, quadrados, retângulos• Capturar visualmente a lista de FUNCIONALIDADES considerando a ORDEM definida pelo DIAGRAMA• Use ELEMENTOS conhecidos, e considere o HIG da plataforma escolhida• SOMENTE após estes desenhos prontos você pode passar para o COMPUTADOR para testar!
  73. 73. Meetings for iPadPaolo Domenico Passeri
  74. 74. EXERCÍCIO: Desenhando sua INTERFACE• LEIAM novamente a “Declaração de Definição do Produto” (DDP)• ANALISEM o diagrama de fluxo e ESCOLHAM as telas a serem desenhadas• DESENHEM as interfaces das telas no stencil• USEM Post-It’s para mostrar as interações • Papel • Lápis/Caneta 2 horas • Post-it’s • Stencil
  75. 75. ALGUMAS DICAS
  76. 76. O que não fazer?• Registro FORÇADO no primeiro uso• Usar textos de DIFÍCIL LEITURA e evite misturar diferentes FONTES• Passar ALERTAS ambíguos ao usuário. Use “labels” que representam o resultado (Vizualizar vs. OK). Coloque afirmativa a direita.• Usar LINGUAGEM técnica que o usuário não entende.• Botões de voltar sem CONTEXTO
  77. 77. LOOK & FEEL
  78. 78. Sua IDENTIDADE visual• Muitos dos CONTROLES e elementos padrão das plataformas, podem ser customizados• Pequenas mudanças podem dar um POLIMENTO especial para sua interface• EVITE mudar radicalmente os controles que fazem ações PADRÃO• CRIE temas diferentes, com cores, texturas, e imagens e teste o MELHOR• Busque inspiração no MUNDO REAL!
  79. 79. Inspiração
  80. 80. Busque o LÚDICO...
  81. 81. ...e o REAL
  82. 82. PROTOTIPAÇÃO RÁPIDA
  83. 83. O que é PROTOTIPAÇÃO Rápida?• Utilizada para PROTOTIPAR objetos, conceitos, serviços e interfaces• Serve para se ter algo PALPÁVEL de maneira rápida que possam ser testados• Visualizar as INTERFACES e USAR-LAS de maneira simples• Traz RESULTADOS e agiliza o processo de ITERAÇÃO• Podem ser utilizadas FERRAMENTAS físicas, computacionais ou uma combinação de ambas• DETALHES são irrelevantes, ou até PROIBIDOS
  84. 84. Ferramentas e Links
  85. 85. EXERCÍCIO: Protoripando a sua INTERFACE• REVISEM as interfaces desenhadas• LEVEM as interfaces uma a uma para o computador• UTILIZEM formas padrão (circulos, quadrados, etc.) para representar elementos como botões, caixas de texto, etc.• CRIEM os links definidos no “Diagrama de Fluxo da Telas”• TESTEM o protótipo para avaliar a usabilidade com outras equipes 2:00 horas • Coputador
  86. 86. ALGUMAS DICAS
  87. 87. O que não fazer?• Registro FORÇADO no primeiro uso• Usar textos de DIFÍCIL LEITURA e evite misturar diferentes FONTES• Passar ALERTAS ambíguos ao usuário. Use “labels” que representam o resultado (Vizualizar vs. OK). Coloque afirmativa a direita.• Usar LINGUAGEM técnica que o usuário não entende.• Botões de voltar sem CONTEXTO
  88. 88. LOOK & FEEL
  89. 89. Sua IDENTIDADE visual• Muitos dos CONTROLES e elementos padrão das plataformas, podem ser customizados• Pequenas mudanças podem dar um POLIMENTO especial para sua interface• EVITE mudar radicalmente os controles que fazem ações PADRÃO• CRIE temas diferentes, com cores, texturas, e imagens e teste o MELHOR• Busque inspiração no MUNDO REAL!
  90. 90. Inspiração
  91. 91. Busque o LÚDICO...
  92. 92. ...e o REAL
  93. 93. paolopasseri@gmail.com @paolopasseri paolopasseriMuito Obrigado!

×