Design Digital em Plataformas Móveis

2.839 visualizações

Publicada em

Apresntação da palestra sobre Design Digital em Plataformas Móveis dada para o curso de Design da Universidade Positivo em Março de 2011.

Publicada em: Design
2 comentários
9 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
2.839
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
148
Comentários
2
Gostaram
9
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Design Digital em Plataformas Móveis

  1. 1. Design Digital em Plataformas MóveisPaolo Domenico Passeri
  2. 2. Para ENTENDER o design de dispositivos móveis éimportante primeiro entender os seus USUÁRIOS...
  3. 3. ...e o que elesBUSCAM• Facilidade• Agilidade• Intuitividade• Algo “novo”• Se surpreender• “Transparência”• Resolver problemas
  4. 4. 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?
  5. 5. Não é um computador TRADICIONAL!
  6. 6. Entenda as LIMITAÇÕES Usuários não têm um PONTEIRO nos dedos
  7. 7. Entenda as LIMITAÇÕES Nem são AGUIAS, com super-visão
  8. 8. Entenda as LIMITAÇÕES Geralmente vão interagir com UM aplicativos por vez
  9. 9. A interface tem que ser REPENSADA... CTRL+C, CTRL+V NÃO funciona!
  10. 10. ...para ATENDER ao dispositivo móvel Somente os elementos CHAVE se mantém!
  11. 11. PROCESSO de desenvolvimento Conceito Design Desenvolvimento Distribuição Marketing Manutenção
  12. 12. Atividade vs. Tempo Test Debug Desenvolvimento Design DESENVOLVIMENTO > DESIGN = RESUTADOS
  13. 13. Atividade vs. Tempo Test Desenvolvimento Debug Design DESIGN > DESENVOLVIMENTO = RESUTADOS
  14. 14. Como se dá este processo? Ideia Processo Interface (Refinar) (Executar) (Desenhar)
  15. 15. 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”
  16. 16. FUNCIONALIDADESCada nova funcionalidade têm um CUSTO:• Peso para download• Velocidade de operação• A interface se torna mais complexa• Você perde tempo desenhando o novo, ao invés de refinar o essencial• Aumenta o risco de potenciais problemas• O usuário precisa de mais tempo para aprender e entender o valor. Em aplicativos móveis, uma ÚNICA funcionalidade é permitido, e até recomendado.
  17. 17. PÚBLICO ALVO FUNCIONALIDADES• Geralmente cozinham em casa ou preferem • Criação de listas comidas prontas • Pegar receitas• Gostam de buscar ingredientes exóticos ou • Comparar preços dificilmente se aventuram além do básico • Localizar mercados• Usam receitas para se inspirar ou seguem • Anotar receitas receitas a risca • Ver videos de cozinha• Compram pouca quantidade, aos poucos ou compram quantidades maiores, poucas • Aprender novas culinárias vezes • Substituir ingredientes• Querem manter diversas listas de compras ou somente querem lembrar de comprar algo à caminho de casa “Uma ferramenta para criação de listas de compra, para pessoas econômicas que amam cozinhar“
  18. 18. INTERAGINDO COM DISPOSITIVOS MÓVEIS
  19. 19. 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”
  20. 20. 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
  21. 21. 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
  22. 22. Botões ou Links ListasELEMENTOS Indicadores de Espera Entrada de Texto Limpa texto
  23. 23. 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 seus detalhes• Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de uma boa NAVEGAÇÃO Crie o diagrama nos ESTRÁGIOS INICIAIS do processo de design
  24. 24. INTERFACE DE USUÁRIO
  25. 25. 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 bem DESENHADA!
  26. 26. Dispositivos Móveis
  27. 27. Aprenda sobre 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 ✓ ✓ ✗ ✓ ✗
  28. 28. iPhone HIG• 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
  29. 29. Diferentes ESTILOS de aplicativosSã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?
  30. 30. 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
  31. 31. INTERFACE de Usuário
  32. 32. Status bar Navegation barELEMENTOS Tab bar Toolbar
  33. 33. Alertas, Ações e View Modal
  34. 34. Exemplo de interface MAL desenhada
  35. 35. Tabelas Simples Indexada Agrupada
  36. 36. Controles Busca Slider e Switch Segmentados Pickers
  37. 37. Android : User Interface Guidelines• Ainda em DESENVOLVIMENTO• Seta os GUIAS para INTERAÇÕES e VISUAL• Focado TOTALMENTE para DESENVOLVEDORES! CONTEMPLA • Criação de WIDGETS • ATIVIDADES e TAREFAS • Design de MENUS
  38. 38. 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
  39. 39. ATIVIDADES Teclado Contatos Detalhes Edição
  40. 40. MENUSMenu de Opções Menu de Contexto
  41. 41. INCONSISTÊNCIA
  42. 42. 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ê deve passar para o COMPUTADOR para testar!
  43. 43. Meetings for iPadPaolo Domenico Passeri
  44. 44. PROTOTIPAÇÃO RÁPIDA
  45. 45. 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
  46. 46. DESIGN como um DIFERENCIAL
  47. 47. Por que um bomDESIGN?• 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!
  48. 48. 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
  49. 49. 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 mesesMuitos concorrentes GRÁTIS já estabelecidos, porém COM DESIGN POBRE!
  50. 50. LOOK & FEEL
  51. 51. Sua IDENTIDADE visual• Muitos dos CONTROLES e elementos padrões 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 para chegar no MELHOR• Busque inspiração no MUNDO REAL!
  52. 52. Busque o LÚDICO...
  53. 53. ...e o REAL
  54. 54. paolopasseri@gmail.com @paolopasseri paolopasseriMuito Obrigado!
  55. 55. ANEXOS
  56. 56. Ferramentas e Links de Design de UI
  57. 57. 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
  58. 58. 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

×