Your SlideShare is downloading. ×
0
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Oficina Design de Interface para Dispositivos Móveis
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Oficina Design de Interface para Dispositivos Móveis

2,645

Published on

Oficina Design de Interface para Dispositivos Moveis, de Paolo Passeri, ministradas em 2012.

Oficina Design de Interface para Dispositivos Moveis, de Paolo Passeri, ministradas em 2012.

Published in: Design
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,645
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Minicurso Design de Interfaces 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. 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. ...e vocês?
  • 5. O curso 40% Conceitos 60% Atividades
  • 6. Para ENTENDER os dispositivos móveis é importanteentender os seus USUÁRIOS...
  • 7. ...e o que elesBUSCAM• 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 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!
  • 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 chegar lá? Ideia Processo Interface (Refinar) (Executar) (Desenhar)
  • 19. X-Y: Tipo de Aplicativo 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. DivertidoEixo X: uso Eixo Y: conteúdo
  • 20. 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”
  • 21. A Declaração de Definição de ProdutoResuma a ideia em uma frase:<<Diferenciação>> <<Solução>> para<<Público>>Exemplo:<<Uma maneira rápida e fácil>> de se <<criarATA’s de reunião>> para <<profissionais de todasas áreas>>
  • 22. “ Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.” - Mark Twain
  • 23. EXERCÍCIO: Criando a sua 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 iPadPaolo Domenico Passeri
  • 25. DESIGN como um DIFERENCIAL
  • 26. 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!
  • 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 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
  • 29. Antes de entrar no 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 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.
  • 32. 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 1 hora • Lápis/Caneta • Cores
  • 33. Fontes de íconesiOS Toolbar IconsGlyphish’/>iOS Toolbar Icon SetiOS Toolbar Icons 230 Free Vector IconsiconSweetsThe Android Developer Common Icon Set II30 Free Android Menu IconsFree Android 2.x Monster Icons
  • 34. INTERAGINDO COM DISPOSITIVOS MÓVEIS
  • 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 ExpandirManipulação por GESTOS• Utilizada através de sensores• Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando
  • 39. Botões ou Links ListasELEMENTOS Indicadores de Espera Entrada de Texto Limpa texto
  • 40. 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ÇÃOTOOLS
  • 41. Meetings for iPadPaolo Domenico Passeri
  • 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 • Papel 2:00 horas • Lápis/Caneta
  • 43. INTERFACE DE USUÁRIO
  • 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!
  • 45. Dispositivos Móveis
  • 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 de aplicativosComo 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. INTERFACE de Usuário
  • 51. Status bar Navegation barELEMENTOS Tab bar Toolbar
  • 52. Ações e View Modal
  • 53. Alertas e Notificações
  • 54. Exemplo de “View Modal” MAL desenhada
  • 55. Tabelas Simples Indexada Agrupada
  • 56. Controles Busca Slider e Switch Segmentados Pickers
  • 57. iPad Toolbar Pop-overs
  • 58. Android: Design• Seta as 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. Muitos Devices
  • 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 com Up 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 SpinnersScrollable Tabs ActionFixed Tabs Overflow Buttons
  • 67. Layouts Multiplane Phone Tablet
  • 68. Elementoshttp://developer.android.com/design/downloads/index.html
  • 69. Web Apps Conteúdo Web Browser Aplicativo com Web view
  • 70. PDF
  • 71. 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
  • 72. 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!
  • 73. Meetings for iPadPaolo Domenico Passeri
  • 74. 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 2 horas • Post-it’s • Stencil
  • 75. ALGUMAS DICAS
  • 76. 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
  • 77. LOOK & FEEL
  • 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!
  • 79. Inspiração
  • 80. Busque o LÚDICO...
  • 81. ...e o REAL
  • 82. PROTOTIPAÇÃO RÁPIDA
  • 83. 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
  • 84. Ferramentas e Links
  • 85. EXERCÍCIO: Protoripando a 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 2:00 horas • Coputador
  • 86. ALGUMAS DICAS
  • 87. 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
  • 88. LOOK & FEEL
  • 89. 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!
  • 90. Inspiração
  • 91. Busque o LÚDICO...
  • 92. ...e o REAL
  • 93. paolopasseri@gmail.com @paolopasseri paolopasseriMuito Obrigado!

×