Transferir como PDF, PPTX
Carregado porfaberludens.pro
Workshop Design para Dispositivos Móveis
O mini curso aborda conceitos essenciais de design para dispositivos móveis, enfatizando a importância de entender os usuários e suas necessidades ao desenvolver interfaces. Através de uma combinação de teoria e prática, os participantes aprendem sobre funcionalidades, prototipação rápida e padrões de interação para criar aplicações funcionais e atraentes. O curso também destaca a relevância de uma boa identidade visual e design como diferenciais competitivos no mercado de aplicativos.
Workshop Design para Dispositivos Móveis
- 1. Mini Curso Design paraDispositivos Móveis
- 2. TÓPICOS ! • EntendendoDispositivos 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 ! Hanry Marcel Kluk ! •Curioso por natureza! • Co-fundador do da Iniciativa Startup Curitiba • Co-fundador da Snowman Labs • Designer, ilustrador, fotógrafo amador, cozinheiro...
- 4.
- 5.
- 6. Para ENTENDER osdispositivos móveis é importante entender os seus USUÁRIOS...
- 7. ...E O QUEELES BUSCAM ! • Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência”
- 8. ENTENDA AS LIMITAÇÕES Usuáriosnão têm um PONTEIRO nos dedos
- 9. ENTENDA AS LIMITAÇÕES Nem são águias com super VISÃO
- 10. ENTENDA AS LIMITAÇÕES Geralmente interagem com um aplicativo POR VEZ.
- 11. VOCÊ TEM QUESER 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. 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. Manutenção PROCESSO DE DESENVOLVIMENTO ConceitoDesign Desenvolvimento Distribuição Marketing
- 16. DESENVOLVIMENTO > DESIGN= ATIVIDADE X TEMPO Debug Teste Design Desenvolvimento
- 17. DESENVOLVIMENTO > DESIGN= ATIVIDADE X TEMPO Debug Teste Design Desenvolvimento
- 18. COMO VAMOS CHEGARLÁ? Ideia (Refinar) Processo (Executar) Interface (Desenhar)
- 19. 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. Eficiência para Entreter 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. 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. 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. X-Y: TIPO DE APLICATIVO Eixo X: Uso Eixo Y: ConteúdoDivertido Sério Entretenimento Ferramenta
- 20. Eixo X: UsoEixo Y: ConteúdoDivertido Sério Entretenimento Ferramenta X-Y: TIPO DE APLICATIVO
- 21. Quem é oseu 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” REFINANDO A SUA IDÉIA
- 22. Resuma a ideiaem 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>> DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO
- 23. • ESCOLHAM umacategoria 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 EXERCÍCIO: CRIANDO A SUA DECLARAÇÃO 30 MIN. Post-it Papel Lápis/caneta
- 24. DESIGN COMO UMDIFERENCIAL
- 25. PORQUE TER DESIGN? ! • Maiorapelo aos usuários • Mais atenção da mídia • Diferencial vs. Concorrência • Da vontade de “voltar” • Incentiva a exploração • VENDE MAIS!
- 26. • Aplicativo paraconversã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! ESTUDO DE CASO: CONVERT
- 27. • É aporta 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 A IMPORTÂNCIA DOS ÍCONES
- 28. ANTES DE ENTRARVOCÊ JULGA
- 29. • 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. COMO?
- 30. • LEIAM novamentea “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” EXERCÍCIO: DESENHANDO UM ÍCONE 30 MIN. Papel Lápis/caneta Cores
- 31. • iOS ToolbarIcons • 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 FONTES DE ÍCONES
- 32.
- 33. • Lembre-se queexistem 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” MÉTODOS DE INTERAÇÃO
- 34. EXEMPLO DE APLICATIVO AnotaçãoLocalização Lembrete
- 35. • Definem algunsCONTROLES 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 PADRÕES DE INTERAÇÃO
- 36. 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 por GESTOS • Utilizada através de sensores • Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando PADRÕES DE INTERAÇÃO
- 37. Manipulação DIRETA/Touch/Haptic • Nãoexiste mapeamento pois as teclas são “virtuais” • Difícil aprender todos os meios de entrada • São muito flexíveis • Toques curtos e longos • Arrastar • Deslizar • Girar • Pinçar e Expandir PADRÕES DE INTERAÇÃO
- 38. Botões ou Links Indicadores de Espera Entrada de Texto Limpa texto PADRÕES DE INTERAÇÃO Listas
- 39. • Um diagramaSIMPLES 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 DIAGRAMA DE FLUXO DAS TELAS Tools
- 40. MEU DIAGRAMA • Vocêpode criar a sua própria forma de diagramar o fluxo.
- 41. EXERCI'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
- 42. • LEIAM novamentea “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 EXERCÍCIO: TRAÇANDO SEU DIAGRAMA 30 min. Papel Lápis/caneta
- 43.
- 44. • 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! UMA BOA INTERFACE DE USUÁRIO
- 45.
- 46.
- 47. iPhone (iOS) HIG: Introdução
- 48. 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 nativos iPhone (iOS) HIG: INTRODUÇÃO
- 49. Como ESCOLHER ? •Comportamentos e USO • Características VISUAIS • Modelo dos DADOS • EXPERIÊNCIA de usuário DIFERENTES ESTILOS DE APLICATIVOS • 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?
- 50. PRODUTIVIDADE organizarinformaçõesdeformaHIERÁRQUICA UTILITÁRIOS UMA TAREFAcom pouco input do usuário • Usuários abrem o aplicativo e a informação já é apresentada • Pouca interação Organizar listas Adicionar ou remover itens Entrar até o nível de informação desejada e realizar atividades com ela DIFERENTES ESTILOS DE APLICATIVOS
- 51. TELA TODA, emambientes ricos visualmente Muito peculiar Sem controles padrão Diversão, como jogos e rich-media IMERSIVA DIFERENTES ESTILOS DE APLICATIVOS
- 52.
- 53. Status bar Navegationbar Navegation bar Toolbar ELEMENTOS
- 54. AÇÕES E VIEWMODAL
- 55.
- 56. EXEMPLO DE VIEWMODAL MAL DESENHADA
- 57. Simples Indexada Agrupada TABELAS
- 58.
- 59.
- 60. ATUALIZAÇÃO iOS 7 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 ousuário, porém não compete • com o conteúdo Profundidade • camadas visuais e movimento • auxilia entendimento e prazer • de usar o app.
- 61. • 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). iOS 7 UI Transition Guide https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/ Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-‐CH6-‐SW1 O QUE DEVO FAZER
- 62.
- 63.
- 64.
- 65.
- 66. MUUUUITOS DEVICES 3997 resoluçõesdisponíveis - 2012
- 67. • Seja Flexível •OTIMIZE layouts para diferentes telas • Recursos para diferentes DPIs DISPOSITIVOS E DISPLAYS
- 68. Holo Light HoloDark Holo Light/Dark TEMAS E TIPOGRAFIA
- 69. Icones Action Bar Notificações ICONOGRAFIA
- 70. Action Bar Multi-pane Selection PADRÕES DE UI
- 71. EXEMPLO DE NAVEGAÇÃO:UP vs. BACK
- 72. • Talvez oelemento 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 ACTION BAR GERAL
- 73. • Scrollable Tabs •Spinners • Fixed Tabs ! • Spinners • Action Overflow • Buttons ACTION BAR: ELEMENTOS
- 74. Phone Tablet LAYOUTSMULTIPLANE
- 75.
- 76. • 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 LINKS PARA OS HIG´S
- 77. • Importante iniciarcom 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! DESENHANDO INTERFACES
- 78. • LEIAM novamentea “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 EXERCÍCIO: DESENHANDO SUA INTERFACE 1 HORA. Papel Lápis/caneta Post-it Stencil
- 79.
- 80. • 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
- 82.
- 83. • REVISEM asinterfaces 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 EXERCÍCIO: DESENHANDO SUA INTERFACE 1 HORA. Computador
- 84.
- 85. • 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
- 86.
- 87. • 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 SUA IDENTIDADE VISUAL
- 88.
- 89.