Mini Curso Design de Dispositivo Moveis
12 gostaram•4,342 visualizações
Este minicurso aborda os principais tópicos para o desenvolvimento de interfaces para dispositivos móveis, incluindo entendimento dos dispositivos e usuários, definição das funcionalidades do aplicativo, padrões de interação, guias de interface do usuário, prototipação rápida e identidade visual. O curso é dividido em 60% de atividades práticas e 40% de conceitos teóricos.
Mini Curso Design de Dispositivo Moveis
- 1. Minicurso Design de Interfaces para Dispositivos Móveis
- 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. Eu... • Paolo Domenico Passeri • Curioso por natureza! • Engenheiro + Designer + MKT • Antes: Co-Fundador, Aluno e Professor do Faber-Ludens, Gerente de Desenvolvimento de Produtos na Positivo Informática • Hoje: me preparando para voltar a estudar.
- 4. ...e vocês?
- 6. Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS...
- 7. • Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência” ...e o que eles BUSCAM
- 8. Entenda as LIMITAÇÕES Usuários não têm um PONTEIRO nos dedos
- 9. Entenda as LIMITAÇÕES Nem são AGUIAS, com super-visão
- 10. Entenda as LIMITAÇÕES Geralmente vão interagir com UM aplicativos por vez
- 11. 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? Você tem que ser O USUÁRIO!
- 12. Não é um computador TRADICIONAL!
- 13. A interface tem que ser REPENSADA... CTRL+C, CTRL+V NÃO funciona!
- 14. ...para ATENDER ao dispositivo móvel Somente os elementos CHAVE se mantém!
- 15. PROCESSO de desenvolvimento Conceito Design Desenvolvimento Distribuição Marketing Manutenção
- 16. Atividade vs. Tempo Desenvolvimento Design Debug Test DESENVOLVIMENTO > DESIGN = RESUTADOS
- 17. Atividade vs. Tempo Desenvolvimento Design Debug Test DESIGN > DESENVOLVIMENTO = RESUTADOS
- 18. Como vamos chegar lá? Ideia (Refinar) Processo (Executar) Interface (Desenhar)
- 19. X-Y: Tipo de Aplicativo Sério Divertido Ferramenta Entretenimento Mais função menos forma Um app de produtividade, como uma Ferramenta Séria, cumpre uma tarefa bem específica. Seu aplicativo deve rapidamente e de maneira fácil, realizar o que 80% das pessoas vão fazer com ele. Vá direto ao ponto. Eficiência para Entreter O principal foco de um aplicativo de entretenimento sério, é permitir que o usuário consuma mídia. Usuários esperam uma interface com customizações porém fácil de navegar. A interface é o conteúdo. Elementos inovadores resolvendo problemas Uma Ferramenta Divertida, têm o foco em resolver ou alcançar algo porém incentiva a exploração entregando informações relevantes. Jogar e se Divertir Tipo de aplicativo que vai entreter o usuário ou jogos. Seu foco deve ser somente um, dar um momento de diversão. Vá direto ao ponto e não use muito hierarquia. A história, experiência e jogabilidade são cruciais. Eixo X: uso Eixo Y: conteúdo
- 20. Refinando a sua Ideia “DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO” • 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?
- 21. A Declaração de Definição de Produto Resuma a ideia em uma frase: <<Diferenciação>> <<Solução>> para <<Público>> Exemplo: <<Uma maneira rápida e fácil>> para <<criação de ATA’s de reunião>> para <<profissionais de todas as áreas>>
- 22. Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa. - Mark Twain “ ”
- 23. EXERCÍCIO: Criando a sua DECLARAÇÃO • ESCOLHAM uma categoria de aplicativo dos Post-It`s • DEFINAM quem será o público alvo e o tipo do seu aplicativo (eixo x-y) • 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 1:30 horas • Post-It • Papel • Lápis/Caneta
- 24. Meetings for iPad Paolo Domenico Passeri
- 25. DESIGN como um DIFERENCIAL
- 26. • 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! Por que ter DESIGN?
- 27. Estudo de Caso: CONVERT • Aplicativo para conversão de unidades • Preço: U$0.99 • Lançado em Agosto de 2009 • Unidades vendidas: 197,424 • Faturamento bruto: $195,450 • Faturamento liquido: $137,065 Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN! 2 meses
- 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. Antes de entrar no app você já o julga...
- 30. Qual destes você escolheria (deixe 8)? 1 8 15 2 9 16 3 10 17 4 11 18 5 12 6 13 7 14
- 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. 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” 1 hora • Papel • Lápis/Caneta • Cores
- 33. Fontes de ícones iOS Toolbar Icons Glyphish’/> iOS Toolbar Icon Set iOS Toolbar Icons 2 30 Free Vector Icons iconSweets The Android Developer Common Icon Set II 30 Free Android Menu Icons Free Android 2.x Monster Icons
- 34. INTERAGINDO COM DISPOSITIVOS MÓVEIS
- 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. Exemplo de Aplicativo Anotação Localização Lembrete
- 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. Manipulação INDIRETA • É necessário aprender o mapeamento das teclas • Deve ser muito consistente • Não são muito flexíveis • Joystick Direcional • Botões Alfa-numéricos • Soft-keys • Rodas Manipulação DIRETA/Touch/Haptic • Toques curtos e longos • Arrastar • Deslizar • Girar • Pinçar e Expandir • Não existe mapeamento pois as teclas são “virtuais” • Difícil aprender todos os meios de entrada • São muito flexíveis Manipulação por GESTOS • Utilizada através de sensores • Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando
- 39. ELEMENTOS Limpa texto ListasBotões ou Links Indicadores de Espera Entrada de Texto
- 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ÇÃO TOOLS
- 41. Meetings for iPad Paolo Domenico Passeri
- 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 1:30 horas • Papel • Lápis/Caneta
- 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!
- 46. Entendendo cada dispositivo Tela / Resolução 3.5” e 4” / 480x320, 960x640 e 1136x640 7,9” e 9.7” / 1024x768 e 2048x1536 2.6” → 10.1” / 240x320 → 1280x800+ 3.5” → 4.5” / 800x480 Auto-rotativa ✓ ✓ ✓ ✓ Interface(s) Touchscreen Acelerômetro Microfone Câmeras GPS Touchscreen Acelerômetro Microfone Câmeras GPS Touchscreen Acelerômetro Microfone Câmeras GPS RFID Touchscreen Acelerômetro Microfone Câmeras GPS Padronização ✓ ✓ ✗ ✓
- 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. Diferentes ESTILOS de aplicativos • Comportamentos e USO • Características VISUAIS • Modelo dos DADOS • EXPERIÊNCIA de usuário • Qual a motivação do usuário para usar este aplicativo? • Qual a experiência de usuário que você quer proporcionar? • Qual o seu objetivo para o aplicativo? Como ESCOLHER ?
- 49. PRODUTIVIDADE organizarinformaçõesdeformaHIERÁRQUICA • Organizar listas • Adicionar ou remover itens • Entrar até o nível de informação desejada e realizar atividades com ela UTILITÁRIOS UMA TAREFA com pouco input do usuário • Usuários abrem o aplicativo e a informação já é apresentada • Pouca interação IMERSIVATELA TODA, em ambientes ricos visualmente • Muito peculiar • Sem controles padrão • Diversão, como jogos e rich-media
- 51. Status bar Navegation bar Toolbar Tab bar ELEMENTOS
- 52. Ações e View Modal
- 54. Exemplo de “View Modal” MAL desenhada
- 56. Controles Busca Slider e Switch Segmentados Pickers
- 59. Filosofia • Clareza texto é sempre legível, icones são precisos, adornos são sutís e foco em funcionalidade é a inspiração. • Deferência a UI ajuda o usuário, porém não compete com o conteúdo • Profundidade camadas visuais e movimento auxilia entendimento e prazer de usar o app.
- 60. O que devo fazer? https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-CH6-SW1 iOS 7 UI Transition Guide • App NOVO: já pense em usar elementos e UI para o iOS 7 • App LANÇADO: começem a pensar como re-desenar a interface para iOS 7 • Fontes: Helvetica Neue (a fonte desta apresentação) • Icone: Use o Grid • Elementos: já use e se adapte aos novos • UI Dynamics: uma engine física para dar movimento, fluidez e realidade ao app (não somente animação).
- 61. Paleta de Cores
- 62. Icones “in app”
- 63. iOS7vs.iOS6
- 64. Icones
- 65. GriddosIcones
- 66. ElementosiOS7
- 67. ElementosiOS7
- 69. Video
- 70. 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
- 71. MuitosDevices
- 72. Dispositivos e Displays • Seja FLEXÍVEL • OTIMIZE layouts para diferentes telas • Recursos para diferentes DPIs
- 73. Temas e Tipografia Holo DarkHolo Light Holo Light/Dark
- 74. Iconografia Icones Action Bar Notificações
- 75. Padrões de UI Action Bar Multi-pane Selection
- 76. Exemplo: Navegação com Up vs. Back
- 77. 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
- 78. Action Bar: Elementos Scrollable Tabs Fixed Tabs Spinners Buttons Action Overflow
- 81. PDF
- 82. Links para os HIG’s http://wiki.forum.nokia.com/index.php/Guidelines_for_Mobile_Interface_Design http://developer.android.com/design/index.html UI Design and Interaction Guide for Windows Phone 7 v2.0 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
- 83. 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!
- 84. Meetings for iPad Paolo Domenico Passeri
- 85. 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 2 horas • Papel • Lápis/Caneta • Post-it’s • Stencil
- 87. • 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 O que é PROTOTIPAÇÃO Rápida?
- 91. 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
- 92. ALGUMAS DICAS
- 93. • 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 O que não fazer?
- 94. LOOK & FEEL
- 95. • 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! Sua IDENTIDADE visual
- 97. Inspiração
- 99. ...e o REAL