Mini Curso de Design de Interfaces para Dispositivos Móveis

15,054 views
14,964 views

Published on

Apresentação do Mini Curso de Design de Interfaces para Dispositivos Móveis realizado em parceria Fisam e Instituto Faber-Ludens ministrado por Paolo Domenico Passeri.

Published in: Design

Mini Curso de Design de Interfaces para Dispositivos Móveis

  1. 1. Minicurso Design de Interfaces para Dispositivos Móveis Saturday, August 21, 2010
  2. 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!” Saturday, August 21, 2010
  3. 3. Quem vos fala? • Paolo Domenico Passeri • Curioso por natureza! • Engenheiro + Designer • Pensar em soluções • Antes: Aluno e Monitor de UxD no Faber-Ludens • Hoje: Desenvolvimento de Produtos na Positivo Informática Saturday, August 21, 2010
  4. 4. ...e vocês? Saturday, August 21, 2010
  5. 5. O curso 50% 50% 4 horas = Conceitos Atividades = 4 horas Saturday, August 21, 2010
  6. 6. Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS... Saturday, August 21, 2010
  7. 7. ...e o que eles BUSCAM • Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência” Saturday, August 21, 2010
  8. 8. 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? Saturday, August 21, 2010
  9. 9. Não é um computador TRADICIONAL! Saturday, August 21, 2010
  10. 10. A interface tem que ser REPENSADA... CTRL+C, CTRL+V NÃO funciona! Saturday, August 21, 2010
  11. 11. ...para ATENDER ao dispositivo móvel Somente os elementos CHAVE se mantém! Saturday, August 21, 2010
  12. 12. PROCESSO de desenvolvimento Conceito Design Desenvolvimento Distribuição Marketing Manutenção Saturday, August 21, 2010
  13. 13. Atividade vs. Tempo Test Debug Desenvolvimento Design DESENVOLVIMENTO > DESIGN = RESUTADOS Saturday, August 21, 2010
  14. 14. Atividade vs. Tempo Test Desenvolvimento Debug Design DESIGN > DESENVOLVIMENTO = RESUTADOS Saturday, August 21, 2010
  15. 15. Como vamos chegar lá? Ideia Processo Interface (Refinar) (Executar) (Desenhar) Saturday, August 21, 2010
  16. 16. Refinando a sua Ideia • 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” Saturday, August 21, 2010
  17. 17. “ Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.” - Mark Twain Saturday, August 21, 2010
  18. 18. EXERCÍCIO: Criando a sua 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 Saturday, August 21, 2010
  19. 19. Meetings for iPad Paolo Domenico Passeri Saturday, August 21, 2010
  20. 20. DESIGN como um DIFERENCIAL Saturday, August 21, 2010
  21. 21. Por que 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! Saturday, August 21, 2010
  22. 22. 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! Saturday, August 21, 2010
  23. 23. A importância dos ICONES • É 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 Saturday, August 21, 2010
  24. 24. Qual destes você escolheria (deixe 8)? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Saturday, August 21, 2010
  25. 25. EXERCÍCIO: Desenhando o ICONE • 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 45 minutos • Lápis/Caneta • Cores Saturday, August 21, 2010
  26. 26. 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 Saturday, August 21, 2010
  27. 27. INTERAGINDO COM DISPOSITIVOS MÓVEIS Saturday, August 21, 2010
  28. 28. 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” Saturday, August 21, 2010
  29. 29. 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 Saturday, August 21, 2010
  30. 30. 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 Saturday, August 21, 2010
  31. 31. Botões ou Links Listas ELEMENTOS Indicadores de Espera Entrada de Texto Limpa texto Saturday, August 21, 2010
  32. 32. 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 Saturday, August 21, 2010
  33. 33. 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 • Papel 1 hora • Lápis/Caneta Saturday, August 21, 2010
  34. 34. Meetings for iPad Paolo Domenico Passeri Saturday, August 21, 2010
  35. 35. INTERFACE DE USUÁRIO Saturday, August 21, 2010
  36. 36. 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! Saturday, August 21, 2010
  37. 37. Dispositivos Móveis Saturday, August 21, 2010
  38. 38. Entendendo cada dispositivo 3.5” / 2.6” → 5.8” / Tela / 9.7” / 3.5” → 4.5” / 480x320 e 240x320 → ? Resolução 1024x768 800x480 960x640 480x548 Auto-rotativa ✓ ✓ ✓ ✓ ? Touchscreen Touchscreen Touchscreen Touchscreen Touchscreen Acelerômetro Acelerômetro Acelerômetro Acelerômetro Acelerômetro Microfone Interface(s) Microfone Microfone Microfone Microfone Câmera Câmera Câmera Câmera GPS GPS GPS GPS GPS RFID Padronização ✓ ✓ ✗ ✓ ✗ Saturday, August 21, 2010
  39. 39. iPhone 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 Saturday, August 21, 2010
  40. 40. Diferentes ESTILOS de aplicativos São BASEADOS em: 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? Saturday, August 21, 2010
  41. 41. 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 Saturday, August 21, 2010
  42. 42. INTERFACE de Usuário Saturday, August 21, 2010
  43. 43. Status bar Navegation bar ELEMENTOS Tab bar Toolbar Saturday, August 21, 2010
  44. 44. Alertas, Ações e View Modal Saturday, August 21, 2010
  45. 45. Exemplo de “View Modal” MAL desenhada Saturday, August 21, 2010
  46. 46. Tabelas Simples Indexada Agrupada Saturday, August 21, 2010
  47. 47. Controles Busca Slider e Switch Segmentados Pickers Saturday, August 21, 2010
  48. 48. Android : User Interface Guidelines • Ainda em DESENVOLVIMENTO • Seta as GUIAS para INTERAÇÕES e VISUAL • Focado TOTALMENTE para DESENVOLVEDORES! CONTEMPLA • Criação de WIDGETS • ATIVIDADES e TAREFAS • Design de MENUS Saturday, August 21, 2010
  49. 49. INCONSISTÊNCIA Saturday, August 21, 2010
  50. 50. WIDGETS • Um WIDGET apresenta para o usuário as informações mais importantes na HOME SCREEN • Os PADRÕES de criação dependem da funcionalidade Tamanhos WIDGETS Moldura Saturday, August 21, 2010
  51. 51. ATIVIDADES Teclado Contatos Detalhes Edição Saturday, August 21, 2010
  52. 52. MENUS Menu de Opções Menu de Contexto Saturday, August 21, 2010
  53. 53. PDF Saturday, August 21, 2010
  54. 54. 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/guide/practices/ui_guidelines/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 Saturday, August 21, 2010
  55. 55. 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! Saturday, August 21, 2010
  56. 56. 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 • Papel • Lápis/Caneta 1 hora • Post-it’s • Stencil Saturday, August 21, 2010
  57. 57. Meetings for iPad Paolo Domenico Passeri Saturday, August 21, 2010
  58. 58. PROTOTIPAÇÃO RÁPIDA Saturday, August 21, 2010
  59. 59. 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 Saturday, August 21, 2010
  60. 60. Saturday, August 21, 2010
  61. 61. Saturday, August 21, 2010
  62. 62. Ferramentas e Links Saturday, August 21, 2010
  63. 63. LOOK & FEEL Saturday, August 21, 2010
  64. 64. 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! Saturday, August 21, 2010
  65. 65. Saturday, August 21, 2010
  66. 66. Busque o LÚDICO... Saturday, August 21, 2010
  67. 67. ...e o REAL Saturday, August 21, 2010
  68. 68. paolopasseri@gmail.com @paolopasseri paolopasseri Muito Obrigado! Saturday, August 21, 2010

×