Design de Interfaces para Dispositivos Móveis

10,338 views
10,121 views

Published on

Apresentação do curso pelo Prof. Paolo Passeri em 07 de Abril de 2012.

Published in: Design
2 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total views
10,338
On SlideShare
0
From Embeds
0
Number of Embeds
1,705
Actions
Shares
0
Downloads
388
Comments
2
Likes
22
Embeds 0
No embeds

No notes for slide

Design de Interfaces 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 vos fala?• 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 50% 50% 4 horas = Conceitos Atividades = 4 horas
  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. 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”
  20. 20. “ Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.” - Mark Twain
  21. 21. EXERCÍCIO: Criando a sua DECLARAÇÃO• ESCOLHAM uma categoria de aplicativo dos Post-It`s• DEFINAM quem será o público alvo para o seu aplicativo• LEVANTEM todas as funcionalidades que consigam pensar• CORTEM funcionalidades que não fazem parte do core (menos importantes)• JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES • Post-It 45 minutos • Papel • Lápis/Caneta
  22. 22. Meetings for iPadPaolo Domenico Passeri
  23. 23. DESIGN como um DIFERENCIAL
  24. 24. 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!
  25. 25. 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!
  26. 26. 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
  27. 27. Qual destes você escolheria (deixe 8)? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
  28. 28. 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 30 minutos • Lápis/Caneta • Cores
  29. 29. 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
  30. 30. INTERAGINDO COM DISPOSITIVOS MÓVEIS
  31. 31. 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”
  32. 32. Exemplo de Aplicativo Anotação Localização Lembrete
  33. 33. 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
  34. 34. 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
  35. 35. Botões ou Links ListasELEMENTOS Indicadores de Espera Entrada de Texto Limpa texto
  36. 36. 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
  37. 37. Meetings for iPadPaolo Domenico Passeri
  38. 38. 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 45 minutos • Lápis/Caneta
  39. 39. INTERFACE DE USUÁRIO
  40. 40. 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!
  41. 41. Dispositivos Móveis
  42. 42. 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 ✓ ✓ ✗ ✓ ✗
  43. 43. 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
  44. 44. 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?
  45. 45. 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
  46. 46. INTERFACE de Usuário
  47. 47. Status bar Navegation barELEMENTOS Tab bar Toolbar
  48. 48. Ações e View Modal
  49. 49. Alertas e Notificações
  50. 50. Exemplo de “View Modal” MAL desenhada
  51. 51. Tabelas Simples Indexada Agrupada
  52. 52. Controles Busca Slider e Switch Segmentados Pickers
  53. 53. iPad Toolbar Pop-overs
  54. 54. 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
  55. 55. Muitos Devices
  56. 56. Dispositivos e Displays• Seja FLEXÍVEL• OTIMIZE layouts para diferentes telas• Recursos para diferentes DPIs
  57. 57. Temas e Tipografia Holo Light Holo Dark Holo Light/Dark
  58. 58. Iconografia Icones Action Bar Notificações
  59. 59. Padrões de UI Action Bar Multi-pane Selection
  60. 60. Exemplo: Navegação com Up vs. Back
  61. 61. 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
  62. 62. Action Bar: Elementos SpinnersScrollable Tabs ActionFixed Tabs Overflow Buttons
  63. 63. Layouts Multiplane Phone Tablet
  64. 64. Elementoshttp://developer.android.com/design/downloads/index.html
  65. 65. Web Apps Conteúdo Web Browser Aplicativo com Web view
  66. 66. PDF
  67. 67. 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
  68. 68. 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!
  69. 69. Meetings for iPadPaolo Domenico Passeri
  70. 70. 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 1 hora • Post-it’s • Stencil
  71. 71. PROTOTIPAÇÃO RÁPIDA
  72. 72. 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
  73. 73. Ferramentas e Links
  74. 74. 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 45 minutos • Coputador
  75. 75. LOOK & FEEL
  76. 76. 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!
  77. 77. Busque o LÚDICO...
  78. 78. ...e o REAL
  79. 79. paolopasseri@gmail.com @paolopasseri paolopasseriMuito Obrigado!

×