Transferir como PDF, PPTX
Carregado porfaberludens.pro
Design de Interfaces para Dispositivos Móveis
Este documento fornece uma introdução a um minicurso sobre design de interfaces para dispositivos móveis. O minicurso abordará tópicos como entender os dispositivos móveis e o processo de desenvolvimento de interfaces, definindo as funcionalidades do aplicativo, a importância de um bom design, padrões de interação, prototipação rápida e identidade visual. O instrutor é Paolo Domenico Passeri, engenheiro, designer e gerente de produto. O curso será composto por 50% de conceitos e 50% de atividades práticas
Mais conteúdo relacionado
Semelhante a Design de Interfaces para Dispositivos Móveis
![[dig2012] 12 - Interfaces mobile](https://cdn.slidesharecdn.com/ss_thumbnails/interfacesmobile-120421103739-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Design de Interfaces para Dispositivos Móveis
- 1. Minicurso Design de Interfaces 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. 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.
- 5. O curso 50% 50% 4 horas = Conceitos Atividades = 4 horas
- 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á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. 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. PROCESSO de desenvolvimento Conceito Design Desenvolvimento Distribuição Marketing Manutenção
- 16. Atividade vs. Tempo Test Debug Desenvolvimento Design DESENVOLVIMENTO > DESIGN = RESUTADOS
- 17. Atividade vs. Tempo Test Desenvolvimento Debug Design DESIGN > DESENVOLVIMENTO = RESUTADOS
- 18. Como vamos chegarlá? Ideia Processo Interface (Refinar) (Executar) (Desenhar)
- 19. Refinando a suaIdeia • 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. “ Desculpe porémnão tive tempo de escrever uma carta curta, então mandei uma longa.” - Mark Twain
- 21. EXERCÍCIO: Criando asua 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. Meetings for iPad PaoloDomenico Passeri
- 23. DESIGN como umDIFERENCIAL
- 24. Por que terDESIGN? • 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. 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. 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
- 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. 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” • Papel 30 minutos • Lápis/Caneta • Cores
- 29. 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
- 30.
- 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. Exemplo de Aplicativo Anotação Localização Lembrete
- 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. 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 Expandir Manipulação por GESTOS • Utilizada através de sensores • Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando
- 35. Botões ou Links Listas ELEMENTOS Indicadores de Espera Entrada de Texto Limpa texto
- 36. 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
- 37. Meetings for iPad PaoloDomenico Passeri
- 38. 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 • Papel 45 minutos • Lápis/Caneta
- 39.
- 40. 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!
- 41.
- 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. 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. Diferentes ESTILOS deaplicativos Como 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. 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.
- 47. Status bar Navegation bar ELEMENTOS Tab bar Toolbar
- 48. Ações e ViewModal
- 49.
- 50. Exemplo de “ViewModal” MAL desenhada
- 51. Tabelas Simples Indexada Agrupada
- 52. Controles Busca Slider e Switch Segmentados Pickers
- 53. iPad Toolbar Pop-overs
- 54. 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
- 55.
- 56. Dispositivos e Displays •Seja FLEXÍVEL • OTIMIZE layouts para diferentes telas • Recursos para diferentes DPIs
- 57. Temas e Tipografia Holo Light Holo Dark Holo Light/Dark
- 58. Iconografia Icones Action Bar Notificações
- 59. Padrões de UI Action Bar Multi-pane Selection
- 60. Exemplo: Navegação comUp vs. Back
- 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. Action Bar: Elementos Spinners Scrollable Tabs Action Fixed Tabs Overflow Buttons
- 63. Layouts Multiplane Phone Tablet
- 64.
- 65. Web Apps Conteúdo Web Browser Aplicativo com Web view
- 66.
- 67. Links para osHIG’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. 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!
- 69. Meetings for iPad PaoloDomenico Passeri
- 70. 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 • Papel • Lápis/Caneta 1 hora • Post-it’s • Stencil
- 71.
- 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
- 75.
- 76. 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 45 minutos • Coputador
- 77.
- 78. 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!
- 80.
- 81.
- 82. [email protected] @paolopasseri paolopasseri Muito Obrigado!