Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (9)
Semelhante a Kluk design dispositivos moveis ufpb 20131025
Semelhante a Kluk design dispositivos moveis ufpb 20131025 (20)
Kluk design dispositivos moveis ufpb 20131025
- 1. Mini Curso Design 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 ! 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. ...e vocês?
- 6. Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS...
- 7. ...E O QUE ELES BUSCAM ! • Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência”
- 8. ENTENDA AS LIMITAÇÕES Usuários nã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 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. 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!
- 18. COMO VAMOS CHEGAR LÁ? Ideia (Refinar) Processo (Executar) Interface (Desenhar)
- 19. X-Y: TIPO DE APLICATIVO Sério 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 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. 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. Divertido Ferramenta Entretenimento 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. Eixo Y: Conteúdo
- 20. X-Y: TIPO DE APLICATIVO Eixo X: Uso Ferramenta Entretenimento Sério Divertido Eixo Y: Conteúdo
- 21. REFINANDO A SUA IDÉIA 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”
- 22. DECLARAÇÃO DE DEFINIÇÃO DO 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>>
- 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 30 MIN. Post-it Papel Lápis/caneta
- 24. DESIGN COMO UM DIFERENCIAL
- 25. PORQUE 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!
- 26. 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!
- 27. A IMPORTÂNCIA DOS ÍCONES • É 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
- 28. ANTES DE ENTRAR VOCÊ JULGA
- 29. 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.
- 30. EXERCÍCIO: DESENHANDO UM ÍCONE • 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” 30 MIN. Papel Lápis/caneta Cores
- 31. 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 • • • • • • •
- 33. 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”
- 35. 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
- 36. PADRÕES DE INTERAÇÃO 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
- 37. PADRÕES DE INTERAÇÃO Manipulação DIRETA/Touch/Haptic • Não existe 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
- 38. PADRÕES DE INTERAÇÃO Botões ou Links Indicadores de Espera Listas Limpa texto Entrada de Texto
- 39. 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
- 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. 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 30 min. 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!
- 47. iPhone (iOS) HIG : Introdução
- 48. 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 nativos
- 49. DIFERENTES ESTILOS DE APLICATIVOS Como ESCOLHER ? • 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? Comportamentos e USO • •
- 50. DIFERENTES ESTILOS DE APLICATIVOS organizar informações de forma HIERÁRQUICA PRODUTIVIDADE 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
- 51. DIFERENTES ESTILOS DE APLICATIVOS IMERSIVA TELA TODA, em ambientes ricos visualmente Muito peculiar Sem controles padrão Diversão, como jogos e rich-media
- 53. ELEMENTOS Status bar Navegation bar Navegation bar Toolbar
- 54. AÇÕES E VIEW MODAL
- 56. EXEMPLO DE VIEW MODAL MAL DESENHADA
- 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. O QUE DEVO FAZER • • • • • • • 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
- 62. GRID DE ÍCONES
- 63. GRID DE ÍCONES
- 64. Android: Design
- 65. MUITOS DEVICES
- 66. MUUUUITOS DEVICES 3997 resoluções disponíveis - 2012
- 67. DISPOSITIVOS E DISPLAYS • Seja Flexível OTIMIZE layouts para diferentes telas • Recursos para diferentes DPIs •
- 68. TEMAS E TIPOGRAFIA Holo Light Holo Dark Holo Light/Dark
- 69. ICONOGRAFIA Icones Action Bar Notificações
- 70. PADRÕES DE UI Action Bar Multi-pane Selection
- 71. EXEMPLO DE NAVEGAÇÃO: UP vs. BACK
- 72. 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
- 73. ACTION BAR: ELEMENTOS • Spinners • Action Overflow • Scrollable Tabs • Spinners • Fixed Tabs ! • Buttons
- 74. LAYOUTS MULTIPLANE Tablet Phone
- 76. 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
- 77. 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!
- 78. 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 1 HORA. Papel Lápis/caneta Post-it Stencil
- 80. 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
- 83. EXERCÍCIO: DESENHANDO 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 1 HORA. Computador
- 84. ALGUMAS DICAS
- 85. 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
- 86. Look & Feel
- 87. 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
- 88. Muito Obrigado!