Carregado porfaberludens.pro
Oficina Design de Interface para Dispositivos Móveis
Este documento fornece um resumo de um minicurso sobre design de interfaces para dispositivos móveis. O minicurso aborda tópicos como entender os dispositivos móveis, definir as funcionalidades do aplicativo, a importância do design, prototipação rápida e identidade visual. O minicurso é apresentado por Paolo Domenico Passeri e inclui discussões, atividades práticas e exemplos.
Mais conteúdo relacionado
Semelhante a Oficina Design de Interface para Dispositivos Móveis
![[Palestra UNICAP] UX Design - Projetando Soluções e Experiências](https://cdn.slidesharecdn.com/ss_thumbnails/palestrauxunicap-140909213939-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Oficina Design de Interface 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 sou eu? •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 40% Conceitos 60% Atividades
- 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. X-Y: Tipo deAplicativo Sério Mais função menos forma Eficiência para Entreter Um app de produtividade, como uma O principal foco de um aplicativo de Ferramenta Séria, cumpre uma tarefa bem entretenimento sério, é permitir que o específica. Seu aplicativo deve rapidamente usuário consuma mídia. Usuários esperam e de maneira fácil, realizar o que 80% das uma interface com customizações porém pessoas vão fazer com ele. Vá direto ao fácil de navegar. A interface é o conteúdo. ponto. Entretenimento Ferramenta Jogar e se Divertir Elementos inovadores Tipo de aplicativo que vai entreter o usuário resolvendo problemas ou jogos. Seu foco deve ser somente um, Uma Ferramenta Divertida, têm o foco em dar um momento de diversão. Vá direto ao resolver ou alcançar algo porém incentiva a ponto e não use muito hierarquia. A história, exploração entregando informações experiência e jogabilidade são cruciais. relevantes. Divertido Eixo X: uso Eixo Y: conteúdo
- 20. 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”
- 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>> de se <<criar ATA’s de reunião>> para <<profissionais de todas as áreas>>
- 22. “ Desculpe porémnão tive 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 • DEFINAM o tipo do seu aplicativo (eixo x-y) e quem será o público alvo • 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 • Post-It 1:30 horas • Papel • Lápis/Caneta
- 24. Meetings for iPad PaoloDomenico Passeri
- 25. DESIGN como umDIFERENCIAL
- 26. 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!
- 27. 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!
- 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
- 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” • Papel 1 hora • 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çã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 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
- 39. Botões ou Links Listas ELEMENTOS Indicadores de Espera Entrada de Texto Limpa 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 • Papel 2:00 horas • 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 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 ✓ ✓ ✗ ✓ ✗
- 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 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?
- 49. 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
- 50.
- 51. Status bar Navegation bar ELEMENTOS Tab bar Toolbar
- 52. Ações e ViewModal
- 53.
- 54. Exemplo de “ViewModal” MAL desenhada
- 55. Tabelas Simples Indexada Agrupada
- 56. Controles Busca Slider e Switch Segmentados Pickers
- 57. iPad Toolbar Pop-overs
- 58. 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
- 59.
- 60. Dispositivos e Displays •Seja FLEXÍVEL • OTIMIZE layouts para diferentes telas • Recursos para diferentes DPIs
- 61. Temas e Tipografia Holo Light Holo Dark Holo Light/Dark
- 62. Iconografia Icones Action Bar Notificações
- 63. Padrões de UI Action Bar Multi-pane Selection
- 64. Exemplo: Navegação comUp vs. Back
- 65. 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
- 66. Action Bar: Elementos Spinners Scrollable Tabs Action Fixed Tabs Overflow Buttons
- 67. Layouts Multiplane Phone Tablet
- 68.
- 69. Web Apps Conteúdo Web Browser Aplicativo com Web view
- 70.
- 71. 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
- 72. 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!
- 73. Meetings for iPad PaoloDomenico Passeri
- 74. 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 2 horas • Post-it’s • Stencil
- 75.
- 76. O que nãofazer? • 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
- 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.
- 83.
- 84. 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
- 87.
- 88. 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
- 89.
- 90. O que nãofazer? • 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
- 91.
- 92. 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!
- 94.
- 95.
- 96.
- 97. paolopasseri@gmail.com @paolopasseri paolopasseri Muito Obrigado!