Carregado porfaberludens.pro
Design de Interfaces para Dispositivos Móveis
O minicurso aborda a criação de interfaces para dispositivos móveis, destacando a importância do design na experiência do usuário e no desenvolvimento de aplicativos. Enfatiza a necessidade de entender o público-alvo, as funcionalidades essenciais e o uso de prototipação para eficiência no processo de design. O documento inclui atividades práticas para a elaboração de uma declaração de definição de produto e desenho de ícones e interfaces.
Mais conteúdo relacionado
Semelhante a Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
- 1. Minicurso Design deInterfaces para Dispositivos Móveis
- 2. Tópicos • Entendendo DispositivosMó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 DomenicoPasseri • 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.
- 5.
- 6. Para ENTENDER osdispositivos 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áriosnão têm um PONTEIRO nos dedos
- 9. Entenda as LIMITAÇÕES Nemsão AGUIAS, com super-visão
- 10. Entenda as LIMITAÇÕES Geralmentevão interagir com UM aplicativos por vez
- 11. Aprenda TUDO sobreo 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 é umcomputador TRADICIONAL!
- 13. A interface temque ser REPENSADA... CTRL+C, CTRL+V NÃO funciona!
- 14. ...para ATENDER aodispositivo móvel Somente os elementos CHAVE se mantém!
- 15. PROCESSO de desenvolvimento ConceitoDesign 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 chegarlá? Ideia (Refinar) Processo (Executar) Interface (Desenhar)
- 19. X-Y: Tipo deAplicativo 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 suaIdeia “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 deDefiniçã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ãotive tempo de escrever uma carta curta, então mandei uma longa. - Mark Twain “ ”
- 23. EXERCÍCIO: Criando asua 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 PaoloDomenico Passeri
- 25. DESIGN como umDIFERENCIAL
- 26. • Maior apeloaos 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 dosICONES • É 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 entrarno 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 emuma 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 oICONE • 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 iOSToolbar 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.
- 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çãoLocalizaçã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 ouLinks Indicadores de Espera Entrada de Texto
- 40. Diagrama de FLUXOdas 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 PaoloDomenico Passeri
- 42. EXERCÍCIO: Traçando seuDIAGRAMA • 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
- 43.
- 44. Uma BOA interfacede 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.
- 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 deaplicativos • 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
- 50.
- 51. Status bar Navegation bar Toolbar Tabbar ELEMENTOS
- 52. Ações e ViewModal
- 53.
- 54. Exemplo de “ViewModal” MAL desenhada
- 55.
- 56. Controles Busca Slider eSwitch Segmentados Pickers
- 57.
- 58.
- 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 devofazer? 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.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 69.
- 70. Android: Design • Setaas 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.
- 72. Dispositivos e Displays •Seja FLEXÍVEL • OTIMIZE layouts para diferentes telas • Recursos para diferentes DPIs
- 73. Temas e Tipografia HoloDarkHolo Light Holo Light/Dark
- 74. Iconografia Icones Action BarNotificações
- 75. Padrões de UI ActionBar Multi-pane Selection
- 76. Exemplo: Navegação comUp 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 ScrollableTabs Fixed Tabs Spinners Buttons Action Overflow
- 79.
- 80.
- 81.
- 82. Links para osHIG’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 • Importanteiniciar 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 PaoloDomenico Passeri
- 85. EXERCÍCIO: Desenhando suaINTERFACE • 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
- 86.
- 87. • Utilizada paraPROTOTIPAR 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?
- 90.
- 91. EXERCÍCIO: Protoripando asua 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.
- 93. • Registro FORÇADOno 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.
- 95. • Muitos dosCONTROLES 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.
- 98.
- 99.
- 100.