Mini Curso
Design para Dispositivos Móveis
TÓPICOS  
!
•	 Entendendo Dispositivos Móveis e o Processo de
Desenvolvimento de UI’s
•	 Definindo as Funcionalidades do s...
EU

!
Hanry Marcel Kluk
!
• Curioso por natureza!
• Co-fundador do da Iniciativa
Startup Curitiba
• Co-fundador da Snowman...
...e vocês?
O CURSO
40%
Conceitos
60%
Atividades
Para ENTENDER os dispositivos móveis é
importante entender os seus USUÁRIOS...
...E O QUE ELES
BUSCAM

!
• Facilidade
• Agilidade
• Intuitividade
• Algo “novo”
• Se surpreender
• “Transparência”
ENTENDA AS LIMITAÇÕES



Usuários não têm um PONTEIRO nos dedos
ENTENDA AS LIMITAÇÕES  


Nem são águias com super VISÃO
ENTENDA AS LIMITAÇÕES  


Geralmente interagem com   
um aplicativo POR VEZ.
VOCÊ TEM QUE SER O USUÁRIO!



Aprenda TUDO sobre o
dispositivo
• como ele funciona?
• é pesado ou leve?
• é confortável d...
NÃO É UM COMPUTADOR TRADICIONAL!
A INTERFACE TEM QUE SER REPENSADA
Ctrl+C, Ctrl+V
NÃO FUNCIONA
...PARA ATENDER AO DISPOSITIVO MÓVEL
Somente os elementos CHAVE se mantém!
Manutenção
PROCESSO DE DESENVOLVIMENTO
Conceito Design Desenvolvimento
Distribuição Marketing
DESENVOLVIMENTO > DESIGN =
ATIVIDADE X TEMPO
Debug
Teste
Design
Desenvolvimento
DESENVOLVIMENTO > DESIGN =
ATIVIDADE X TEMPO
Debug
Teste
Design
Desenvolvimento
COMO VAMOS CHEGAR LÁ?
Ideia
(Refinar)
Processo
(Executar)
Interface
(Desenhar)
Eficiência para Entreter 

O principal foco de um aplicativo de
entretenimento sério, é permitir que o
usuário consuma míd...
Eixo X: Uso Eixo Y: ConteúdoDivertido
Sério
Entretenimento
Ferramenta
X-Y: TIPO DE APLICATIVO
Quem é o seu PÚBLICO ALVO?
• Pessoas de negócios ou usuários finais
• Jovens ou idosos
• Homens ou Mulheres
• Vão usar dia...
Resuma a ideia em uma frase:
<<Diferenciação>> <<Solução>> para <<Público>>
!
Exemplo:
!
<<Uma maneira rápida e fácil>> pa...
• ESCOLHAM uma categoria de aplicativo dos Post-It`s
• DEFINAM quem será o público alvo e o tipo do seu aplicativo
(eixo x...
DESIGN COMO UM DIFERENCIAL
PORQUE TER

DESIGN?

!
• Maior apelo aos usuários
• Mais atenção da mídia
• Diferencial vs. Concorrência
• Da vontade de “...
• Aplicativo para conversão de
unidades
• Preço: U$0.99
• Lançado em Agosto de 2009
• Unidades vendidas: 197,424
• Faturam...
• É a porta de ENTRADA de seu aplicativo
• Se bem desenhado pode REPRESENTAR seu produto
• “Eu nem entro se o ICONE for RU...
ANTES DE ENTRAR VOCÊ JULGA
• Foco em uma forma padrão,
não em diversos elementos que
deixam o icone “sujo”.
• Escolha cores com cuidado,
use cores da...
• LEIAM novamente a “Declaração de Definição do
Produto” (DDP)
• BUSQUEM elementos que possam inspirar o icone,
consideran...
• iOS Toolbar Icons
• Glyphish’/>
• iOS Toolbar Icon Set
• iOS Toolbar Icons 2
• 30 Free Vector Icons
• iconSweets
• The A...
INTERAGINDO COM
DISPOSITIVOS MÓVEIS
• Lembre-se que existem
diferentes meios de interagir
com o dispositivo
• Antes de desenhar a UI, é
necessário avaliar qua...
EXEMPLO DE APLICATIVO
Anotação Localização Lembrete
• Definem alguns CONTROLES e
ELEMENTOS padrões para o
design de interfaces para
dispositivos móveis   
• É uma maneira de ...
Manipulação INDIRETA 

• É necessário aprender o
mapeamento das teclas
• Deve ser muito consistente
• Não são muito flexív...
Manipulação DIRETA/Touch/Haptic
• Não existe mapeamento
pois as teclas são
“virtuais”  
• Difícil aprender todos os
meios ...
Botões ou Links 

Indicadores de Espera   
Entrada de Texto   Limpa texto   
PADRÕES DE INTERAÇÃO
Listas
• Um diagrama SIMPLES que mostra como uma TELA é ligada a outra
• Te obriga a pensar na FLUIDEZ da sua interface, sem cons...
MEU DIAGRAMA
• Você pode criar a sua própria
forma de diagramar o fluxo.
EXERCI'CIO:  Traçando  seu  DIAGRAMA



• LEIAM novamente a “Declaração de Definição do
Produto” (DDP)
• CONSIDEREM as int...
• LEIAM novamente a “Declaração de Definição do
Produto” (DDP)
• CONSIDEREM as interações que você vai utilizar para
naveg...
INTERFACE DE USUÁRIO 

• Vai além : ENCANTADORA e
ATRAENTE
• Boa anfitriã : CONVIDATIVA e
CATIVANTE
• Te ajuda : FACÍL de usar
• Traz o novo : IN...
DISPOSITIVOS MÓVEIS
ENTENDENDO CADA DISPOSITIVO
iPhone (iOS) HIG : Introdução 

CARACTERÍSTICAS do iPhone
• Tamanho da tela é COMPACTA
• Memória é LIMITADA
• Usuários visualizam e interagem com UM
APLIC...
Como ESCOLHER ?
• Comportamentos e USO
• Características VISUAIS
• Modelo dos DADOS
• EXPERIÊNCIA de usuário
DIFERENTES ES...
PRODUTIVIDADE 

organizarinformaçõesdeformaHIERÁRQUICA
UTILITÁRIOS
UMA TAREFA com pouco input do usuário
• Usuários abrem ...
TELA TODA, em ambientes ricos
visualmente
Muito peculiar   Sem controles padrão   Diversão, como jogos e rich-media
IMERSI...
INTERFACE DO USUÁRIO
Status bar 

Navegation bar
Navegation bar
Toolbar
ELEMENTOS
AÇÕES E VIEW MODAL
ALERTAS E NOTIFICAÇÕES
EXEMPLO DE VIEW MODAL MAL
DESENHADA
Simples	 	 	 	 Indexada	 	 	 	 Agrupada
TABELAS
Pickers
CONTROLES
Busca Slider
e Switch
Segmentados
Toolbar
Pop-overs   
iPad
ATUALIZAÇÃO iOS 7
Clareza   
• texto é sempre legível, icones são   
precisos,  
• adornos são sutís e foco em  
• funcion...
• App NOVO: já pense em usar elementos e UI para o iOS 7
• App LANÇADO: começem a pensar como re-desenar a interface para
...
GRID DE ÍCONES
GRID DE ÍCONES
Android: Design 

MUITOS DEVICES
MUUUUITOS DEVICES
3997 resoluções disponíveis - 2012
• Seja Flexível
• OTIMIZE layouts para diferentes
telas
• Recursos para diferentes DPIs
DISPOSITIVOS E DISPLAYS
Holo Light		 	Holo Dark 	 	 	 Holo Light/Dark
TEMAS E TIPOGRAFIA
Icones           Action  Bar             Notificações  
ICONOGRAFIA
Action Bar
Multi-pane   
Selection   
PADRÕES DE UI
EXEMPLO DE NAVEGAÇÃO: UP vs. BACK
• Talvez o elemento MAIS IMPORTANTE

• ADAPTÁVEL a rotação e diferentes telas
• Pode ser CONTEXTUAL
(ex.seleção)
• COMPOST...
• Scrollable Tabs
• Spinners
• Fixed Tabs   
!
• Spinners
• Action Overflow   
• Buttons
ACTION BAR: ELEMENTOS
Phone
Tablet   
LAYOUTS MULTIPLANE
http://developer.android.com/design/downloads/index.html
ELEMENTOS
• http://developer.apple.com/iphone/library/documentation/
userexperience/conceptual/mobilehig/Introduction/
Introduction....
• Importante iniciar com o NÍVEL mais BAIXO o
possível
• NÃO se apegue a DETALHES : use círculos,
quadrados, retângulos
• ...
• LEIAM novamente a “Declaração de Definição do
Produto” (DDP)
• ANALISEM o diagrama de fluxo e ESCOLHAM as telas a
serem ...
PROTOTIPAÇÃO RÁPIDA
• Utilizada para PROTOTIPAR objetos, conceitos,
serviços e   
• interfaces   
• Serve para se ter algo PALPÁVEL de maneira...
FERRAMENTAS E LINKS
https://gomockingbird.com/
http://www.mobilesketchbook.com/
http://keynotopia.com/
http://mockapp.com/...
• REVISEM as interfaces desenhadas
• LEVEM as interfaces uma a uma para o computador
• UTILIZEM formas padrão (circulos, q...
ALGUMAS DICAS
• Registro FORÇADO no primeiro uso   
• Usar textos de DIFÍCIL LEITURA e evite   
• misturar diferentes FONTES   
• Passar...
Look & Feel
• Muitos dos CONTROLES e elementos
padrão das plataformas, podem ser
customizados   
• Pequenas mudanças podem dar um
POLI...
Muito Obrigado!
hanrykluk@gmail.com
Workshop Design para Dispositivos Móveis
Upcoming SlideShare
Loading in …5
×

Workshop Design para Dispositivos Móveis

317
-1

Published on

Slides do workshop Design de Interfaces para Dispositivos Móveis realizado na Wealth Systems em Cascavel pelo professor Hanry Marcel Kluk. Junho de 2014.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
317
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Workshop Design para Dispositivos Móveis

  1. 1. Mini Curso Design para Dispositivos Móveis
  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!”
  3. 3. EU ! Hanry Marcel Kluk ! • Curioso por natureza! • Co-fundador do da Iniciativa Startup Curitiba • Co-fundador da Snowman Labs • Designer, ilustrador, fotógrafo amador, cozinheiro...
  4. 4. ...e vocês?
  5. 5. O CURSO 40% Conceitos 60% Atividades
  6. 6. Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS...
  7. 7. ...E O QUE ELES BUSCAM ! • Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência”
  8. 8. ENTENDA AS LIMITAÇÕES 
 Usuários não têm um PONTEIRO nos dedos
  9. 9. ENTENDA AS LIMITAÇÕES   
 Nem são águias com super VISÃO
  10. 10. ENTENDA AS LIMITAÇÕES   
 Geralmente interagem com   um aplicativo POR VEZ.
  11. 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. 12. NÃO É UM COMPUTADOR TRADICIONAL!
  13. 13. A INTERFACE TEM QUE SER REPENSADA Ctrl+C, Ctrl+V NÃO FUNCIONA
  14. 14. ...PARA ATENDER AO DISPOSITIVO MÓVEL Somente os elementos CHAVE se mantém!
  15. 15. Manutenção PROCESSO DE DESENVOLVIMENTO Conceito Design Desenvolvimento Distribuição Marketing
  16. 16. DESENVOLVIMENTO > DESIGN = ATIVIDADE X TEMPO Debug Teste Design Desenvolvimento
  17. 17. DESENVOLVIMENTO > DESIGN = ATIVIDADE X TEMPO Debug Teste Design Desenvolvimento
  18. 18. COMO VAMOS CHEGAR LÁ? Ideia (Refinar) Processo (Executar) Interface (Desenhar)
  19. 19. Eficiência para Entreter O principal foco de um aplicativo de entretenimento sério, é permitir que o usuário consuma mídia. Usuários esperam uma interface com customizações porém fácil de navegar. A interface é o conteúdo. Eficiência para Entreter   Um app de produtividade, como uma Ferramenta Séria, cumpre uma tarefa bem específica. Seu aplicativo deve rapidamente e de maneira fácil, realizar o que 80% das pessoas vão fazer com ele. Vá direto ao ponto. Jogar e se Divertir Tipo de aplicativo que vai entreter o usuário ou jogos. Seu foco deve ser somente um, dar um momento de diversão. Vá direto ao ponto e não use muito hierarquia. A história, experiência e jogabilidade são cruciais. Elementos inovadores resolvendo problemas Uma Ferramenta Divertida, têm o foco em resolver ou alcançar algo porém incentiva a exploração entregando informações relevantes. X-Y: TIPO DE APLICATIVO Eixo X: Uso Eixo Y: ConteúdoDivertido Sério Entretenimento Ferramenta
  20. 20. Eixo X: Uso Eixo Y: ConteúdoDivertido Sério Entretenimento Ferramenta X-Y: TIPO DE APLICATIVO
  21. 21. 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” REFINANDO A SUA IDÉIA
  22. 22. Resuma a ideia em uma frase: <<Diferenciação>> <<Solução>> para <<Público>> ! Exemplo: ! <<Uma maneira rápida e fácil>> para <<criação de ATA’s de reunião>> para <<profissionais de todas as áreas>> DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO
  23. 23. • ESCOLHAM uma categoria de aplicativo dos Post-It`s • DEFINAM quem será o público alvo e o tipo do seu aplicativo (eixo x-y) • 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 EXERCÍCIO: CRIANDO A SUA DECLARAÇÃO 30 MIN. Post-it Papel Lápis/caneta
  24. 24. DESIGN COMO UM DIFERENCIAL
  25. 25. PORQUE 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!
  26. 26. • Aplicativo para conversão de unidades • Preço: U$0.99 • Lançado em Agosto de 2009 • Unidades vendidas: 197,424 • Faturamento bruto: $195,450 • Faturamento liquido: $137,065 Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN! ESTUDO DE CASO: CONVERT
  27. 27. • É 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 A IMPORTÂNCIA DOS ÍCONES
  28. 28. ANTES DE ENTRAR VOCÊ JULGA
  29. 29. • 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. COMO?
  30. 30. • 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” EXERCÍCIO: DESENHANDO UM ÍCONE 30 MIN. Papel Lápis/caneta Cores
  31. 31. • 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 FONTES DE ÍCONES
  32. 32. INTERAGINDO COM DISPOSITIVOS MÓVEIS
  33. 33. • 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” MÉTODOS DE INTERAÇÃO
  34. 34. EXEMPLO DE APLICATIVO Anotação Localização Lembrete
  35. 35. • 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 PADRÕES DE INTERAÇÃO
  36. 36. Manipulação INDIRETA 
 • É necessário aprender o mapeamento das teclas • Deve ser muito consistente • Não são muito flexíveis Joystick Direcional • Botões Alfa-numéricos • Soft-keys
 Rodas Manipulação por GESTOS • Utilizada através de sensores   • Através do dispositivo por completo   • Inclinando • Asoprando • Chacoalhando PADRÕES DE INTERAÇÃO
  37. 37. Manipulação DIRETA/Touch/Haptic • Não existe mapeamento pois as teclas são “virtuais”   • Difícil aprender todos os meios de entrada   • São muito flexíveis   • Toques curtos e longos   • Arrastar
 • Deslizar
 • Girar   • Pinçar e Expandir   PADRÕES DE INTERAÇÃO
  38. 38. Botões ou Links 
 Indicadores de Espera   Entrada de Texto  Limpa texto   PADRÕES DE INTERAÇÃO Listas
  39. 39. • 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 DIAGRAMA DE FLUXO DAS TELAS Tools
  40. 40. MEU DIAGRAMA • Você pode criar a sua própria forma de diagramar o fluxo.
  41. 41. EXERCI'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
  42. 42. • 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 EXERCÍCIO: TRAÇANDO SEU DIAGRAMA 30 min. Papel Lápis/caneta
  43. 43. INTERFACE DE USUÁRIO 

  44. 44. • 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! UMA BOA INTERFACE DE USUÁRIO
  45. 45. DISPOSITIVOS MÓVEIS
  46. 46. ENTENDENDO CADA DISPOSITIVO
  47. 47. iPhone (iOS) HIG : Introdução 

  48. 48. 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 nativos iPhone (iOS) HIG: INTRODUÇÃO
  49. 49. Como ESCOLHER ? • Comportamentos e USO • Características VISUAIS • Modelo dos DADOS • EXPERIÊNCIA de usuário DIFERENTES ESTILOS DE APLICATIVOS • Qual a motivação do usuário para usar este aplicativo?   • Qual a experiência de usuário que você quer proporcionar?   • Qual o seu objetivo para o aplicativo?
  50. 50. PRODUTIVIDADE 
 organizarinformaçõesdeformaHIERÁRQUICA UTILITÁRIOS UMA TAREFA com pouco input do usuário • Usuários abrem o aplicativo e a informação já é apresentada  • Pouca interação Organizar listas  Adicionar ou remover itens  Entrar até o nível de informação desejada e realizar atividades com ela DIFERENTES ESTILOS DE APLICATIVOS
  51. 51. TELA TODA, em ambientes ricos visualmente Muito peculiar  Sem controles padrão  Diversão, como jogos e rich-media IMERSIVA DIFERENTES ESTILOS DE APLICATIVOS
  52. 52. INTERFACE DO USUÁRIO
  53. 53. Status bar 
 Navegation bar Navegation bar Toolbar ELEMENTOS
  54. 54. AÇÕES E VIEW MODAL
  55. 55. ALERTAS E NOTIFICAÇÕES
  56. 56. EXEMPLO DE VIEW MODAL MAL DESENHADA
  57. 57. Simples Indexada Agrupada TABELAS
  58. 58. Pickers CONTROLES Busca Slider e Switch Segmentados
  59. 59. Toolbar Pop-overs   iPad
  60. 60. ATUALIZAÇÃO iOS 7 Clareza   • texto é sempre legível, icones são   precisos,   • adornos são sutís e foco em   • funcionalidade é a inspiração.   Deferência   • a UI ajuda ousuário, porém não compete   • com o conteúdo   Profundidade • camadas visuais e movimento   • auxilia entendimento e prazer   • de usar o app.
  61. 61. • App NOVO: já pense em usar elementos e UI para o iOS 7 • App LANÇADO: começem a pensar como re-desenar a interface para • iOS 7 • Fontes: Helvetica Neue (a fonte desta apresentação) • Icone: Use o Grid • Elementos: já use e se adapte aos novos • UI Dynamics: uma engine física para dar movimento, fluidez e realidade ao app (não somente animação). iOS  7  UI  Transition  Guide     https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/ Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-­‐CH6-­‐SW1     O QUE DEVO FAZER
  62. 62. GRID DE ÍCONES
  63. 63. GRID DE ÍCONES
  64. 64. Android: Design 

  65. 65. MUITOS DEVICES
  66. 66. MUUUUITOS DEVICES 3997 resoluções disponíveis - 2012
  67. 67. • Seja Flexível • OTIMIZE layouts para diferentes telas • Recursos para diferentes DPIs DISPOSITIVOS E DISPLAYS
  68. 68. Holo Light Holo Dark Holo Light/Dark TEMAS E TIPOGRAFIA
  69. 69. Icones         Action  Bar           Notificações   ICONOGRAFIA
  70. 70. Action Bar Multi-pane   Selection   PADRÕES DE UI
  71. 71. EXEMPLO DE NAVEGAÇÃO: UP vs. BACK
  72. 72. • 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 ACTION BAR GERAL
  73. 73. • Scrollable Tabs • Spinners • Fixed Tabs   ! • Spinners • Action Overflow   • Buttons ACTION BAR: ELEMENTOS
  74. 74. Phone Tablet   LAYOUTS MULTIPLANE
  75. 75. http://developer.android.com/design/downloads/index.html ELEMENTOS
  76. 76. • 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 LINKS PARA OS HIG´S
  77. 77. • 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! DESENHANDO INTERFACES
  78. 78. • 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 EXERCÍCIO: DESENHANDO SUA INTERFACE 1 HORA. Papel Lápis/caneta Post-it Stencil
  79. 79. PROTOTIPAÇÃO RÁPIDA
  80. 80. • 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 O QUE É PROTOTIPAÇÃO RÁPIDA
  81. 81. FERRAMENTAS E LINKS https://gomockingbird.com/ http://www.mobilesketchbook.com/ http://keynotopia.com/ http://mockapp.com/download/ https://pidoco.com/en http://balsamiq.com/products%23
  82. 82. • 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 EXERCÍCIO: DESENHANDO SUA INTERFACE 1 HORA. Computador
  83. 83. ALGUMAS DICAS
  84. 84. • 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 O QUE NÃO FAZER
  85. 85. Look & Feel
  86. 86. • 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 SUA IDENTIDADE VISUAL
  87. 87. Muito Obrigado!
  88. 88. hanrykluk@gmail.com
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×